、。当然还有少部分不是成对出现的，如
、
等，标签可以嵌套，比如在body标签中嵌套form标签，在form中又可以嵌套其他标签。
标签分类：
1.按语法分类：
- 闭合标签：有开始表示和结束标签，必须成对出现，比如上面的
- 自闭合标签：单个存在的标签，自己封闭，如
,这里不加/也不会出错。
head标签
head头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（实体定义!ENTITY % i18n）、指定字典中的元信息、等等。
title：在head中是为数不多的能在网页中显示的标签，效果是显示网页的名字
hello wd
效果：
mate：?定义了一个文档和外部资源之间的关系,提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词、页面编码。
设置编码
?自动刷新页面
#3秒刷新一次页面
?跳转
#3秒钟后跳转至www.baidu.com
关键字信息
兼容IE：X-UA-Compatible
TIPS：
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。
Link
css
<span style="color: #0000ff;"><<span style="color: #800000;"> link <span style="color: #ff0000;">rel<span style="color: #0000ff;">="stylesheet"<span style="color: #ff0000;"> type<span style="color: #0000ff;">="text/css"<span style="color: #ff0000;"> href<span style="color: #0000ff;">="css/common.css" <span style="color: #0000ff;">><span style="color: #000000;">
icon
<span style="color: #0000ff;"><<span style="color: #800000;"> link <span style="color: #ff0000;">rel<span style="color: #0000ff;">="shortcut icon"<span style="color: #ff0000;"> href<span style="color: #0000ff;">="image/favicon.ico"<span style="color: #0000ff;">>#图标
body标签
分类：
- 块级标签：标签独占一行，如：a、div、
- 行内标签：标签本身占多少页面上就占多少，如：p、h、span
特殊符号（常见）：
 :空格
>：>（大于）
<：<（小于）
:换行
1.标题：H标签
标题（heading）通过h1-h6,来定义，大小分别递增。
wd
wd
效果：
2.段落：p标签
p段落标签是块级标签，段落与段落之间有间距，并可以嵌套
换行标签。
<div class="cnblogs_code">
段落1
段落2
段落3这里换行了
效果：
3.div
div可理解为“白板”，本身不对内容做任何渲染，后续会提及使用style来渲染，属于块级标签。
my name is wd
4.span
通div一样，span也是空白，本身不对内容做渲染，但是属于行内标签。
haha
yes yes
?5.a标签
a标签是应用网站链接使用的标签，并且a标签可以是图片或者其他html元素
百度搜索
效果：
target属性：定义超链接是在当前窗口显示还是新窗口显示。
百度搜索
a标签做锚点
href中通过设置#+标签id关联跳转，实质也是跳转。
hell wd
第一章
第二章
第三章
第四章
第一章内容
第二章内容
第三章内容
第四章内容
效果：
6.input系列?
input是我们我们用的最为多的标签之一，并且其属性有多种，不同的属性对应着不同样式。
type属性：
1)text：文本
输入的字符串为文本
2)password：密码
输入的字符串为密文
3)button:按钮
默认并无实际作用，后续会在js中提及其作用。
4)submit:提交
提交form表单使用
5)value:属性值
6)name：为传输的内容设置key，方便后台取数据。
demo:
效果：
?form表单：用于提交数据。
上面的input的标签提交数据是需要配合form标签才能进行提交。
1)atcion
设置提交数据的url
2)method
提交数据的方法，分为post和get，区别，get提交数据显示在url中，post提交数据在body中
demo:
hello wd
效果：
?选择标签：raido
name属性不同，代表多选，name属性相同表示互斥(也就是单选)，value代表为选择设置key,checked设置默认值。
demo：
请选择性别：
效果：
复选框：checkbox
使用的时候通常将name设置为相同，name此时的作用相当于区别是复选框的种类，因为可能有多种复选框，用value设置key，checked，设置默认值。
demo:
请选择性别：
爱好：技能：
效果：
上传文件：file
name属性设置文件名字，特别注意上传文件依赖form表单中的属性(enctype="multipart/form-data"),该属性表示将文件一点点发给服务器。
demo：
上传文件：
效果：
重置：reset
将输入的数据重新清空
7.textarea
多行文本输入，name表示为提交内容设置key，默认值被包裹在标签中。
demo：
wd
效果：
8.select标签
下拉框
option：设置选项
optgroup：设置分组
name：设置select的key
value：设置值option的值，提交数据时候使用
multiple="multiple"：设置多选
selected="selected"：设置默认选项，
size：设置显示多少个，默认显示一个。
demo:
成都
达州
北京
上海
<span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>杭州<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</span><span style="color: #0000ff;">></span>广州<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span></pre>
?9.img标签
图片标签
src：标识图片来源
title：设置图片标题，鼠标放在图片上可看见
alt：设置图片背后显示内容（当图片不存在时候显示）
demo：
hello wd
?10.列表
有序列表：
python
linux
go
无序列表：
linux
pyhton
自定义列表：dt设置标题，dd设置条目：
技能
go
python
linux
爱好
电影
音乐
各类效果：
11.table标签
表格
thead：设置表头
th：设置表头中的列
tbody：设置表内容
border：设置表格边框
tr：设置表格行
td：设置每行中的数据(列数据)
colspan：设置行单元格所占大小
rowspan：设置列单元格所占大小
demo：
ip
主机名
端口
10.0.0.11
mysql
3306
10.0.0.21
nginx
80
效果：
合并单元格：
思路：取消一个单元格，通过colspan、rowspan设置其他单元格所占大小。
demo：合并同行
表头一
表头二
表头三
表头四
1
1
1
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></
<span style="color: #800000;">table<span style="color: #0000ff;">>
demo：合并同一列
<span style="color: #0000ff;"><
<span style="color: #800000;">table <span style="color: #ff0000;">border<span style="color: #0000ff;">="1"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">thead<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>表头一<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>表头二<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>表头三<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>表头四<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">thead<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">tbody<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">tr<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">td <span style="color: #ff0000;">rowspan<span style="color: #0000ff;">="2"<span style="color: #0000ff;">>1<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>1<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>1<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>1<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">tr<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">tr<span style="color: #0000ff;">>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></<span style="color: #800000;">table<span style="color: #0000ff;">>
?12.label标签
label一般和input配合使用，用于关联标签，通过使用id关联的标签，使得点击label标签也能在input中中获取光标进行内容输入。
for：设置关联名字(关联标签使用id)
demo：
用户名
密码
?13.fieldset
设置带字段的边框
legend：设置边框包裹的内容
demo：
登录
用户名
密码
效果：
14.cursor属性
用来显示一些不同的光标
常用值pointer：鼠标放上变成小手。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
