HTML笔记总结哦

时间:2024.5.2

HTML笔记总结

1.HTML基础

(1).HTML的含义:它是一种超文本标记语言。

(2).HTML的基本结构:<html>

<head>

<title>网页标题</title>

</head>

<body>网页内容</body>

</html>

(3).基本标签<h1></h1>标题标签/一共有6级

<p></p>段落标签/具备自动换行的行为

<br/>换行标签<hr/>水平线标签

<em></em>斜体|<strong></strong>字体加粗

(4).特殊符号:空格  >大于号&qt; << “引号" 版权符号:©

(5)图像标签的基本语法:<img src=”图片地址” alt=”图像的替代文字” title=”鼠标悬停文字提示” width:宽度 height:高度>

(6).超链接基本用法:<a href=”链接地址” target=”目标窗口位置”>链接文本或图像</a>(当超链接href链接路径为#时,表示空链接。)3种分类:1.页面间链接2.锚链接3.功能性链接。

2.列表,表格和框架

(1).无序列表<ul><li></li></ul>type属性disc实心圆点 square crcle

(2).有序列表<ol><li><li></ol>

(3).定义列表以<dl>标签实现<dt>标签定义列表项<dd>定义内容

无项目符号或显示顺序(常用于图文并茂)

(4).表格的基本结构:

<table>

<tr>

<td>一行一列的单元格</td>

<td>一行两列的单元格</td>

</tr>

</table>

(5).单元格的对齐方式:

Align:left左对齐right:右对齐center:居中 /水平对齐方式

Valign:top顶端对齐middle:居中对齐bottom:底端对齐baseline:基线对齐

(6).表格的跨行和跨列:

<td coldpan=”所跨的列数”>单元格内容</td>

<td rowspan=”所跨的行数”>单元格内容</td>

(7).框架:

<frameset cols=”25%,50%.*” rows=”25%”.* > border=”5”>

<frame src=”1.html”>

<frame src=”2.html”>

</frameset>

<frame>的常用属性:

Framerborderboder=”1”

Scrolling:是否显示滚动条

Noresize:是否允许显示框架窗口大小

3.表单

(1).表单标签及属性

Action:提交地址

Method:提交方法

(2).表单元素:

Type: text;password;checkbox;radio;submit;reset;file;hidden;image;button; Value:此属性为可选属性,但如果type为radio时就必须指定一个值 Size:指定表单的初始宽度

Maxlength:表单输入最大字符数

Checked:指定按钮是否被选中


第二篇:Html_总结


Html简单总结

一.概述

1.什么是Html文件

①.Html是一种描述网页的语言,英文全称是Hypertext Marked Language,中文全称是“超文本标记语言”

②.它拥有自己的一套标记标签,它使用标记标签来描述网页,它的标签都是用尖括号包围着,并且通常都是成对出现,比如段落标签<p></p>,<p>为开始标签,</p>为结束标签,中间放上你所写的内容。

③.一个Html文件的后缀名是.html或者是.htm

④.用文本编辑器就可以编写Html文件

2.Html元素

①.Html元素用来标记文本,表示文本的内容。比如body,p等就是Html元素 ②.Html元素用标签表示,标签以<开始,以>结束

③.标签都是成对出现的。

④.目前Html的标签不区分大小写。比如<HTML>和<html>其实是相同的。

3.Html元素的属性

①Html元素可以拥有属性,属性可以扩展Html元素的能力。比如你可以使用一个bgcolor属性,使得页面的背景成为红色,可以进行如下设置<body bgcolor=”red”>

②属性通常由属性名和值成对出现,就像这样:name=”value”,在上个例子中的bgcolor就是name,red就是value。属性值一般用双引号表记起来

③属性通常是附加给Html的开始标签,而不是结束标签

二.大体的构架

<html>

<head>

<title>该文本的标题</title>

</head>

<body>

</body>

</html>

简单介绍:

<html>:表示该文件是html文件,此标签是成对出现的<html></html>,放在最外面

<head>:通常包含该html文件的标题,同时也可以在这里面定义js脚本,css样式等,它也是成对出现的<head></head>

<title>:该处是书写html文件的标题,一个文件肯定会有一个标题,代表着它的内容或作用,而标题就在此标签中写,它也是成对出现的<title></title>

<body>:此里面放的是你要在页面上显示的内容,比如一个段落,一个图片或一个视频等内容,同时也可以在此里面写js脚本(通常我们都在<head>标签中写),它也是成对出现的<body></body>

三.标签的回顾(示例都放在了Html示例文件中)

1.换行标签<br/>,

将此标签加在某一段的内容的后面,该标签后的内容就会另起一行进行显示,它不是成对出现的,见示例001.Html

2.段落标签<p></p>

此标签是段落标签,在内容的前后加上此标签后,它会自动的在内容前后创建一些空白,内容前后各空一行,见示例002.html,此外<p>标签内还可以加入一些属性

①align属性:它的作用是使标记的内容以何种对齐方式进行显示,通常有居中(center),左对齐(left),右对齐(right)等显示样式,如<p align=”right”>标记的内容</p>,内容会右对齐进行显示,此外还有一个用法(网上查到的,以前没用过),属性值是justify,作用是对行进行扩展,这样每行都有相同的长度,即两端对齐,此属性只适用于区块标记,但是它已经不被W3C所倡导,各种效果可见示例002.html

见示例002.htnl

3.标题标签<h></h>

标题标签一共有六对,分别是<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>,其中<h1>定义的是最大的标题,<h6>定义的是最小的标题,默认情况下,浏览器会自动的在标题的前后各添加一空行,可以使标记的内容产生粗体的效果。在需要特别强调文本内容时,通常使用。效果见示例003.html

4.水平分割线标签<hr/>

<hr>标签会在页面中创建一条水平线,它没有结束标签,此外在此标签中还可以加入一些常用属性,比如颜色属性(color)、对齐方式属性(align)、高度属性(size),宽度属性(width)(这些属性已不赞成使用,常用样式来取代这些属性的使用)示例如004.html(验证的是color属性)

5.粗体文本标签<b>

通常用<b>标签去定义文本中比较重要的部分,被定义的部分会以粗体的样式显示。它是成对使用的,效果见示例005.html

6.斜体文本标签<i>

斜体文本标签会让被标记的内容以斜体的样式进行显示,通常也是为了引起读者的注意,它是成对使用的,效果见示例006.html

7.超链接标签<a href=””></a>

这是一个很重要的标签,几乎在每一个网页中都会用到它,其中它最重要的属性就是href,它指定链接的目标,其中这里涉及了相对路径和绝对路径的问题。 ?相对路径

①相对路径:意思是当前文档所在的路径引起的跟其它文档的路径关系。就是它

从当前文档路径出发,以它为路径的起点

②如何表示上级目录

../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。举例如下:

假设info.html路径是:c:\Information\info\info.html

假设index.html路径是:c:\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href=”../../index.html”>index.html</a>

②如何表示下级目录

引用下级目录的文件,直接写下级目录文件的路径即可。举例如下: 假设info.html路径是:c:\Information\info\info.html

假设index.html路径是:c:\index.html

在index.html加入info.html超链接的代码应该这样写:

<a href=”Information/info/info.html”>info.html</a>

?绝对路径

①绝对路径:通俗理解就是你所要找的文档的真实路径,通常绝对路径会引起一些错误。比如,你做的网页在另一台电脑上运行,而这个电脑上没有你所设置的路径中的某一个文件夹,那么路径就会报错,找不到你所连接的文档。超链接效果示例如007.html

此外它还有一个比较重要的属性target,通过设置它,可以把你要显示的页面用何种方式进行显示,它有四个值(此效果的例子在完成框架部分再进行演示) ①_blank 你所连接的目标对象会在一个新窗口中打开

②_self 你所连接的目标对象会在原来的窗口中打开,这也是一个默认值,即

当你不加这个target属性时,它也会出现这样的效果

③_parent 这个属性通常与框架一起使用

④_top 作用是在整个窗口中打开你链接的窗口

?name属性

①使用name属性,可以跳转到一个文件的指定部位

②使用name属性,要设置一对,一是设定name的名称,二是设定一个href指向这个name,如下

<a href=”#c1”>起始位置</a>

<a name=”c1”></a>

③name属性通常用于创建一个大文件的章节的目录,便于查找每个章节

④如果浏览器不能找到Nam指定的部分,则显示文章开头,不报错,效果示例如007.html

?链接到email地址

格式如下:<a href=”mailto:邮箱地址”>邮箱地址</a>,效果示例如007.html ?title属性

①使用title属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 ②如果希望注释多行显示,可以使用 ;作为换行符,效果示例如007.html

8.图片标签<img>

图片标签的主要作用是加载一张图片在页面中显示,它加载的只是一个链接,是你所要显示的图片的链接地址,它有两个特别重要的属性,一个是src属性,另一个是alt属性。

?src属性:它的值是你所要加载的图像的路径,通常叫做Url

?alt属性: 它的作用是在图像没法显示时的替代文本,即它可以告诉人们这张图像的一些信息。当鼠标移动到图片上时,会显示这些提示信息。效果示例参见008.html

? 此外图片标签还有其它的一些属性,比如定义图像的高度(height)和宽度(width),还有与周围文本的对齐方式(align)等各种属性

? 当给图片加上超连接时,图片会出现边框,此时若要消去边框,只需在图片标签<img>中,加上属性border=”0” 即可。

? 如果你想把图片的某一部分设置成超链接,你可以用usemap和ismap属性,这两个属性是设置图片的热区,即有超链接的地方。这两个属性的不同之处是:usemap处理客户端图像时,不要求有服务器或特殊的服务软件,而ismap则需要有服务器或特殊的服务器软件。示例见008.html

① image-map :

定义:一个客户端的图像映射。图像映射是指带有可点击区域的一副图像。 ②map元素内部嵌套着area。area元素可定义图像映射中的区域。

③由于浏览器的问题,<img>中的usermap属性可引用<map>中的id或name属性(取决于浏览器),所以我们应该同时向<map>添加id(为map标签定义唯一的名称)和name(为image-map规定的名称)属性

④area:

此标签定义图像映射中的区域,此标签总是嵌套在<map>中,有一个必须的alt属性,此属性是定义此区域的替换文本,此外还有很多可选的属性,比如href(定义此区域的目标URL),target(规定在何处打开href属性指定的目标URL)

9.字体样式标签<font></font>

它可以对文本的字体、字体的大小以及字体的颜色进行设置,成对出现,通常用到的属性是:

①size:规定文本字体的大小

②face:规定文本字体的样式,如宋体、楷书或者隶书等等

③color:规定文本字体的颜色

效果参见示例009.html

10.预格式化文本标签<pre></pre>

预格式化文本标签可以原样显示你所要显示的文本,通常用来显示计算机的代码,因为计算机代码中可能有很多空格或者特殊字符,要想让它按照原样显示,用这个标签便可以实现。他用到的属性通常为:

width:表示每行可书写的最大字符数,效果示例参见010.html

11表格标签<table></table>

⒈表格在html中非常重要,比如你要显示一些数据,通常就会用到表格,在以前,表格还可以用来布局,让人浏览起来感觉很舒服,不过现在通常用<div>标签来布局。一个简单的表格通常由行标签<tr>、列标签<td>以及表头标签<th>组成。 用<th>定义的表头,会出现居中加粗的效果。

在一个表格中可能有很多行很多列或者很多个表头,每一行中又可能有很多个单元格,所以在<table>标签中可以定义很多个<tr>、<th>或者<td>,见示例011.html ⒉Table用到的属性很多,在这里只介绍通常用到的:效果示例见011.html ①border: 规定表格边框的宽度

②bgcolor/background:规定表格的背景颜色/背景图片

③width/height: 规定表格的宽度/高度

④align: 规定表格相对周围元素的对齐方式

⑤cellpadding:规定单元边沿与其内容之间的空白

⑥cellspacing:规定单元格之间的空白

⑦caption:规定表格的标题

⑧colspan:可以设置表格的跨列效果

⑨rowspan:可以设置表格的跨行效果

⑩frame:此属性用来控制围绕表格的边框,它有9个值(效果见011.html) ?void:不显示外侧边框

?above:显示上部的外侧边框。

?below:显示下部的外侧边框。

?hsides:显示上部和下部的外侧边框。

?vsides:显示左边和右边的外侧边框。

?lhs:显示左边的外侧边框。

?rhs:显示右边的外侧边框。

?box:在所有四个边上显示外侧边框

?.border:在所有四个边上显示外侧边框

12.特殊字符

?有些字符在html里有特别的含义,比如小于号<就表示Html标签的开始,而这个小于号<是不显示在网页里的,那么我们如果要显示一个小于号,就要用到特殊字符。同理,如果要显示多个空格,也要用到特殊字符,因为在网页中,不管你在两个字之间加了多少个空格,Html只会保留一个空格,而截去其余的空格。

?最常用的特殊字符:

显示结果 说明 实体名字

显示一个空格  

< 小于 <

> 大于 >

& &符号 &

“ 双引号 "

@ 版权 ©

× 乘号 ×

÷ 除号 ÷

13.框架结构标签<frameset></frameset>

?使用框架,可以使浏览器窗口显示多个网页,每个frame里设定一个网页,每个网页相互独立。

?框架标签<frame></frame>决定如何划分frame,<frame>有cols属性和rows属性,使用cols属性,表示按列分布frame;使用rows属性,表示按行分布frame ?用frame这个标签设置网页,<frame>里有src属性,src值就是网页的路径和文件名

?我们在定义了一个有边框的框架时,通常我们都可以随便拖动,为了避免这种情况的发生,我们可以在<frame>标签中加入:noresize=”norsize”

?不能将<body></body>标签与<frameset></frameset>标签同时使用

更多相关推荐:
Android学习笔记总结初学者必看

Android学习笔记总结第一步Android1在Windows下搭建Android开发环境以及HelloWorld程序搭建Android的开发环境以及写一个简单的示例程序在Windows下搭建Android开...

Oracle学习笔记(总结版)

ORACLE学习笔记一ORACLE的启动和关闭1在单机环境下要想启动或关闭ORACLE系统必须首先切换到ORACLE用户如下suoraclea启动ORACLE系统oraclegtsvrmgrlSVRMGRgtc...

教师读书学习笔记总结

教师读书学习笔记总结20xx年9月17日学校教科室对初中部教师的读书学习笔记进行了一次全面的评比总结整体情况令人非常满意具体情况总结如下一学习经常热情高老师上交笔记本准时可以看出大家学习的经常全校除2名教师因请...

学习笔记范文

学习笔记范文学习时间月日上下午学习地点团市委会议室学习内容13学习人员主持人一学习记录1题目文章框架2题目文章框架3题目文章框架二学习摘要个人确定三学习心得2

教师学习笔记心得体会范文

师而言,要学的东西实在太多,而我们知道的东西又太少了。有人说,教给学生一杯水,教师应该有一桶水。这话固然有道理,但一桶水如不添加,也有用尽的时候。“问渠哪得清如苏联当代著名教育家苏霍姆林斯基是一位具有30多年教…

学习笔记范文

学习笔记范文学习时间月日上下午学习地点团市委会议室3学习人员一学习记录1题目文章框架2题目文章框架3题目文章框架二学习摘要个人确定三学习心得学习内容1主持人2

英语学习笔记总结

1狐狸安装传真机征税foxfixfaxtax2亲爱的耳朵清楚的听见附近的熊撕裂梨树的诅咒声为疲乏的年担心Dearearclearhearnearbeartearpearswearwearyearfear3父亲宁...

javascripe学习笔记自己总结

Document对象内容集合document文挡对象-JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否…

班主任学习笔记

班主任学习笔记事实上一个人,一个班主任这个闲适心态太重要了。只要他的心态闲适了,那么他教育智慧也就多了,教育智慧多了,突发事件就少了。也不会跟学生这么吵,然后他的时间就会多余了。班主任是个大管家,忙是必然的。但…

教师读书学习笔记检查总结 2

燕赵小学教师读书学习笔记检查总结20xx年2月19日学校教务处对全校教师的读书学习笔记进行了一次全面的检查整体情况令人非常满意具体情况小结如下一态度诚恳热情高老师上交笔记本准时教师们的笔记全部按要求完成30篇有...

学习笔记记录格式及说明

学习笔记记录格式及说明群众路线学习笔记1或2或3学习时间年月日学习书目内容摘录学习心得特别说明一学习笔记中的第1页要写明参与群众路线学习活动的工作单位本人姓名二群众路线学习笔记1或2或3第一次学习即是群众路线学...

管理学笔记总结

第一章管理一管理的定义管理是在一定的环境中组织中的管理者通过实施计划组织领导和控制等职能有效地利用各种资源已达到组织目标的过程二管理的职能法约尔首次提出了管理具有五种基本职能即计划组织指挥协调和控制课本决策计划...

学习笔记总结(36篇)