PART-1 HTML的基本结构以及Header的部分
一、什么是HTML？
HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。
二、HTML文档的结构：
三、详细注释：
<!DOCTYPE html>
<!--↑ HTML的文档类型声明：声明这个文件是HTML5文件，让浏览器按照HTML5的标准对代码进行解释执行。
文档声明在HTML文件中，必须要有，而且必须写在文件最上方。
如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。
-->
<!--注释：写给程序员看的，网页中不会显示。
html中的注释快捷键：Ctrl+/（快速注释选中的文字）
Ctrl+Shift+/（添加注释）-->
<html>
<head>
<!-- head 头部 作用：
用于描述网页的一些关键信息。比如网页的配置、设置、关键字等等。。。
这些信息，大多在浏览器看不到，但是对网页的解析至关重要！
-->
<meta charset="utf-8" />
<!-- meta标签，用于描述网页的各种信息。
其中<meta charset="utf-8" /> 设置网页的字符集编码格式为UTF-8格式。
常见的中文编码格式：
GB2312:国标码，简体中文的编码格式；
GBK：扩展的国标码，比国标码多了更多的编码格式，简体中文；
UTF-8:万国码，可以兼容绝大多数语言的编码。常用！！！！
HTML4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-->
<meta name="keywords" content="杰瑞教育,HTML5,网页开发" />
<!--
设置网页的关键字，有助于搜索引擎的搜索。
name="keywords" 表示这个meta标签用于设置网页的关键字；
content="" 表示关键字的详细信息，多个关键字之间用英文逗号分隔。
-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页！" />
<!--
设置网页的描述信息（搜索引擎搜索时，标题下面的一段文字！非常重要！！！）：
name="description" 表示这个meta标签用于设置网页的描述信息；
content="" 表示描述信息的详细内容。
-->
<title>这是我的第一个网页</title>
<!--
title：网页的标题，显示在浏览器选项卡上面的文字！
-->
<link rel="icon" href="img/书.jpg"/>
<!--
链接网页的小图标： 网页选项卡上的小图片。
rel="icon" 表示连接的文件，将作为网页的icon图标；
href="img/书.jpg" href表示图标图片所在的路径位置。
-->
</head>
<body>
<!-- body中的内容会显示在浏览器的展示区域。 -->
内容区域
</body>
</html>
【注】：所有的Html标签必须是闭合标签。可以是成对的，比如<title> </title>；也可以是自闭合标签，比如：<img />; 也就是说/表示这一个或者一对标签的闭合。
PART-2 HTML的基本块级标签
一、带你了解 Html 标签的 基本分类：
>>> 从功能上，HTML标签分为“块级标签”和“行级标签”
【块级标签和行级标签的区别】<重点>
1、块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
2、块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开。
3、块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。
>>> 从写法上，HTML标签分为“成对标签”和“自闭和标签（空标签）”。
1、成对标签：成对出现，有开始标签必须有结束标签，内容包裹在两个标签内。例如<h1></h1>、<p></p>、<title></title>等
2、自闭和标签（空标签）：只有一个标签，用/表示标签的自动闭合（/可以省略）。例如<hr/>、<link/>、<meta/>
二、 HTML中常见的块级标签：
1、h标签：标题标签，默认加粗，h1最大，h6最小。
2、hr标签：表示一条水平线标签
3、P标签：表示段落标签。表示网页中的一段文字。
4、br标签：表示换行符号，在代码中敲回车，在网页中并没有作用，必须使用br标签换行。
5、blockquote：块引用标签。表明一段话是从其他网站引用的。
有一个重要属性：cite=""表示这段话的引用来源，常写一个网站地址。浏览器默认显示效果整段向后缩进。
6、 pre标签：预格式标签，与p标签不同的是pre标签会保留代码中的空格与回车，在网页中直接显示。 最常用的作用：是在网页中显示代码段，保留代码段格式。
三、那些基于布局的块级标签：
列表:无序列表、有序列表、定义列表（图文结合）。
a.有序列表
<ol> （order list缩写）
<li>...</li> 列表项可以有n多个
<li>...</li>
<li>...</li>
</ol>
b.无序列表
<ul> (unorder list)
<li>...</li> n多个
<li>...</li>
<li>...</li>
</ul>
c.定义描述列表
<dl>
<dt>一般只有一项</dt> （列表标题）（标题顶格显示）
<dd>可以有很多项</dd> （列表描述项）（描述项相对标题缩进显示）
<dd>。。。。。</dd>
<dd>。。。。。</dd>
</dl>
d.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
<figure>
<img/> 图片
<figcaption></figcaption> 图片的标题。
</figure>
e.分区标签
<div></div> 可以包裹任何标签，也可以被包裹进任何标签。 div分区标签，用于配合CSS使用，将网页划分为区块。
、
PART-3 HTML的基本行级标签
一、常用的行级标签：
1、 span标签：用于包裹行内的文字，常配合CSS使用，修改文字样式； <span style=" ">/span>
2、 <em>em标签 ，倾斜+强调</em>
3、 <strong>strong标签 ，加粗+强调</strong>
4、 <i>i标签，倾斜</i>
5、 <b>b标签，加粗</b>
6、 <u>u标签，下划线</u>
7、 <s>s标签，删除线</s>-->
注：
[em/strong/i/b的区别]
1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义（强调的作用：让搜索引擎快速抓取网页的重点部分，实现
代码的语义化。）
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。
3、强调标签可以多层的嵌套。
二、常见引用标签
常见的引用标签有：blockquote、q、cite，其区别在于:
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签；q用于引用一句话，是行级标签；cite常用于引用作品名、书画名等。
<blockquote cite="www.baidu.com">块引用</blockquote>
<q cite="www.baidu.com">q标签，段引用</q>
<cite cite="www.baidu.com">cite引用</cite>
三、字号调整标签
字体大一号和小一号，但是已经被淘汰，修改字体统一使用CSS。
<small>小一号字体</small>
<big>大一号字体</big>
四、图片标签：
【img图片标签】
1、src属性：表示图片所在的路径。
[路径的表示方式]
（1）、网络上的图片地址可以直接使用，并不建议使用。
（2）、可以使用图片的绝对路径 。但是严禁使用绝对路径，因为绝对路径使用file：//协议，网页使用http：//协议打开无法访问
file：//协议的文件
file：///C：/新建文件夹/书.jpg 绝对路径写法：file：///盘符：/文件路径
（3）、使用相对路径，推荐使用的唯一方式。
① 图片在当前文件的下一层，“文件夹名/图片名”。
② 图片在当前文件的同一层，直接写图片名就可以了。
③ 图片在当前文件的上一层，”../图片名“。
注意：图片必须包含在项目里面，不能退出项目根目录
2、width height 宽度、高度属性。
3、title：鼠标指上时显示的文字。
4、alt：图片加载不出来的时候显示的内容，省略alt将默认显示title中的内容。
5、align：图片周围的文字，相对于图片的排列方式，有以下几个可选值:
top文字居上、center文字居中、bottom文字居下。
<img src="img/书.jpg" width="100" height="100" title="鼠标" alt="111" align="center" />
五、 链接标签
【a标签 超链接】
1、href属性：超链接跳转的地址，可以是网络连接，也可以是本地html文件的相对路径。
2、target属性：超链接新页面打开的位置。-self在当前页面打开（默认）、-blank在新页面打开
3、title属性：鼠标指在超链接上显示的文字。
【功能性超链接】
1、mailto：给指定邮箱发送邮件
<a href="mailto://liudapeng0311@163.com">点击给刘大鹏发邮件</a>
2、tencent：与制定qq聊天
<a href="tencent://message/?uin=807911788">点击和刘大鹏一对一聊天哦</a>
3、锚链接：点击超链接，可以跳转到页面的制定位置（锚点）
①在页面的指定位置定义一个锚点：
<a name="top"></a>
②将超链接的href属性改为“#锚点名称”
<a href="#top">点击返回顶部</a>
③跳转到其它页面指定锚点的方式
<a href="其它页面地址.html#锚点名称">点击跳转其它页面指定位置</a>
<div style=" 100%;height: 800px; "></div>
<a href="01-HTML基本标签-Head部分.html" target="_blank" title="文字">这是一个超链接</a>
<a href="mailto://liudapeng0311@163.com">点击给刘大鹏发邮件</a>
<a href="tencent://message/?uin=807911788">点击和刘大鹏一对一聊天哦</a>
<a href="#top">点击返回顶部</a>
六、 其他的行级标签（了解即可）
1、<u>u标签带下划线</u>
<span style="text-decoration: underline;">css实现下划线</span>
2、 <s>s标签带删除线</s>
<span style="text-decoration: line-through;">css实现删除线</span>
3、 <!--定义专业术语 -->
dfn 定义专业术语 abbr 专业术语缩写词
我们正在学习<dfn>HTML5</dfn>，简称为<abbr>H5</abbr>。
4、 <pre> <code> </code></pre>
<!--
code标签：提示搜索引擎，当前为一段计算机代码。
但是code不会保留代码格式，需要配合pre标签共同使用。
-->
<pre>
<code>
jsLoader({
name : 'iplookup',
url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
});
</code>
</pre>
5、 <var> </var> 表示变量
<var>x</var>+<var>y</var>=1
6、 <bdo dir="rtl"> </bdo>
bdo：定义文本的显示方向
有一个重要属性dir： ltr 从左往右显示 、 rtl 从右往左显示
7、<kbd>Esc</kbd>
表示需要用户输入的文字
请输入“<kbd>Esc</kbd>”退出系统。
8、 H<sub>2</sub>O X<sup>2</sup>
sub 下标 sup 上标
9、<time>16:10</time> 表示时间
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的行级标签</title> </head> <body> <a name="top"></a> <!--span（文本）--> <span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字（作用：无实际意义，对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹）</span> <br /> <!--em（强调）--> 这是一句话，<em>重点</em>在这里 <!--两者都是斜体，但前者拥有更着重的语气，而后者不具备这一点--> <br /> <!--i（倾斜）--> 这是一句话，<i>重点</i>在这里 <br /> <!--strong（强调）--> 这是一句话，<strong>重点</strong>在这里 <!--两者的区别同上--> <br /> <!--b（加粗）--> 这是一句话，<b>重点</b>在这里 <!--[注意] 1.强调程度来说： strong>em； 2.HTML5语言，要求标签尽可能的 实现语义化。（strong与em所包含的b与i不具备的强调含义） --> <br /> <!--q（短引用）显示为文字用引号包括--> <q cite="">知识短引用中的文字</q> <br/> <!--small（缩小字体）big（放大字体） 【两者可以多重嵌套,但不常用】--> <small>这个<small>比上面的<small>小</small></small></small> <br/> <big>这个<big>比上面的<big>大</big></big></big> <br /> <!--img（图片） 1.src: 表示引用图片的地址 路径地址的写法：a.★相对路径：以当前文件为准去寻找图片地址。 与当前文件处于同一层的图片直接写图片及其后缀名； 图片在当前文件下一层：文件夹名/图片名 图片在当前文件上一层：../图片名 b.绝对路径：严禁使用！！例如file:///D:/111.gif c.网络地址：网络上的图片链接。但是，一般不使用。 2.height width ： 图片的高度和宽度，可以用css样式(style="height: ; ;")所代替 3.title ：图片的标题，当鼠标之上后显示的文字。 4.alt:当图片无法加载的时候显示的文字。 *5.Align：图片两边文字所对应图片的位置。（top center bottom） --> <img src="此处为网络地址"/> <!--以上为网络地址写法--> <img src="此处为路径"/> <!--以上为绝对路径写法--> <img src="../img/ivicon.png"/> <img src="ivicon.png" /> <img src="练习用图/ivicon.png" /> <!--以上为相对路径写法--> <a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;100px ;"title="哈啊哈" alt="这里没显示"/></a> <br /> <img src="QQ图片20170223092045.jpg"/ align="center">12333333333 <br /> <!--a（超链接） 1.href:超链接的路径(网络连接或者本地文件)，路径确定同img。 2.target:blank 新页面打开 self 自身跳转 3.title:同上 4.rel（了解）：指定当前文档与被连接文档的关系 prev（前一片） next（后一篇） ★icon (被链接图片是当前文档的图标) ★stylesheet（被链接文档是当前文档的样式表） prefetch（预加载，当你在当前文档加载完成，利用空余时间，预加载即将链接文档） 5.锚链接： a.本页面锚链接 s1.设置锚点<a name="name"></a> s2.在超链接上使用 #name 跳转到对应锚点 b.页面间锚链接 在即将跳转的页面某位置设定锚点<a name="name"></a> 在超链接的href属性中使用"页面地址.html#name" 6.功能性链接： mailto：邮箱地址 用于给指定邮箱发送文件 tencen://message/?uin=qq号码 给指定qq发送消息 --> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#weixin" target="_self">这是一个超链接，去看微信的</a> <a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一，自身跳转的</a> <a href="mailto:xxxxxxx@qq.com">这里发邮件</a> <a href="tencen://message/?uin=xxxxxxx">这里发信息</a> <a href="ivicon.png" target="_blank">picture</a> </body> </html>
【W3C倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码，必须要实现语义化。
【W3C的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
（1）、嵌套的标签不能发生交叉
（2）、块级标签可以包裹行级标签，行级标签不能包裹块级标签；p标签不能包裹p标签等。
PART-4 HTML表格
【表格table】
表格中的每一行用tr表示，一行中的每一单元格用td表示；
th表示的是表头，表头中的文字默认加粗居中，是用来替换td。
【table的常用属性】
1、border：给表格加边框。默认给所有的td加边框，并且给整个表格加外边框。当增大border值时，td上的边框
不变化，只有最外层边框变宽。
2、cellspacing:表示单元格间距。cellspacing="0"表示单元格间距为零，但线仍为两条线宽。
[注意]表格边框合并的CSS写法：
style="border-collapse: collapse;"
这条CSS与cellspacing="0"的区别
cellspacing="0"仅将单元格间距变为零，实际边框线仍为两条线宽
border-collapse: collapse;是将相邻的两条边框线进行合并，只存在一条线（一旦合并，cellspacing将失效）
3、cellpadding：单元格中文字与单元格边框的距离。（单元格内边距）
4、height：表格的高度；width：表格的宽度。
举例：<table height="400" width="500"></table>
CSS写法<table style="height:400px; 500px"></table>
5、align：设置表格在浏览器中的位置，（不建议使用），其可选值仅有左中右三种（left、center，right）。 【注意事项：相当于让表格浮动，会影响其后的元素的原有排列方式】
6、bgcolor：背景色； bordercolor：边框颜色
7、background：背景图，背景色与背景图同时存在时，背景图会覆盖背景色。
【tr与td常用属性】
1、height：单元格的高度；width：单元格的宽度
2、bgcolor：背景色，当表格的属性与行列的属性发生冲突时，谁进就用谁。即table<tr<td。
3、align：设置单元格中的文字水平对其方式（其可选值为左中右 right、center、left）。
4、valign：设置单元格中的文字垂直对其方式（其可选值上中下top、middle（center）、bottom）
5、nowrap：当单元格文字过多时，设置单元格文字不断行显示，但会把表格的宽度撑大。
【表格的跨行与跨列】
1、跨列：在td上使用属性colspan="n"进行跨列，如果一个单元格跨n列，则其右侧n-1个单元格需要去掉。
2、跨行：在td上使用属性rowspan="n"，进行跨行，如果一个单元格跨n行，则其下边n-1个单元格需要去掉。
【注意】
当表格属性与行列属性相冲突时，以行列属性为准 （近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式
【表格的结构化】
完整的表格结构，包括以下几个部分：
caption：表格的标题，无论caption标签放在表格的第几行，表格的标题都在表格的正上方居中
thead：表格的头部部分，永远在表格的最上部
tbody：表格的身体部分，在thead之下，tfoot之上
tfoot：表格的尾部，永远在表格的最下部
表格的直列化
表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />就对应着第几列，可以对<col />标签修改样式、添加name等
属性，表示这一列所有的td同步修改。
如果需要对多列修改共同样式，可以使用<colgroup></colgroup>包裹多个<col />
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red"> <caption>我是表格的标题</caption> <tr> <th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th> <th colspan="3">表头2</th> </tr> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
PART-5 HTML表单（form)
1、 form表单的两个重要属性
action：表示表单提交的服务器地址
method：表单提交数据的方式，可选值有get、post两种。
2、get、post的区别
get通过URL传递数据，所有内容在URL（地址栏）可以看到不安全，而post无法看见，比较安全。
get传递的数据量是有限的且只能传递文本信息，而post可以传递大量数据并且可以传递图片、视频等其他文件类型。
get传输速度比post快（这是get的唯一一个优点）
3、get使用URL传递数据的格式
http：//URL地址.html？name1=value1&name2=value2从： “？”表示参数传递的开始，多个参数之间用and符号间隔，同一个参数
用name来标识value。
http://127.0.0.1:8020/025454.html?username=123&password=123
所以使用表单时，input输入框的name属性一定不能省略， 如果省略input的name属性，则这个input的数据不会往后台传递
4、input的常用属性
（1） type：声明input输入框是什么类型。
（2） name：给input输入框起名字，传递数据时使用name=value的形式传递。
（3） value：给input输入框提供的默认值
（4） placeholder：输入框的提示文本，默认当输入框为空时显示，当输入文字时消失。（本身存在value时不显示）
（5） checked=“checked”设置单选框或者复选框的默认选中
（6） disabled=“disabled”禁用，一旦使用disabled禁用的输入框，在传递数据时，将不再往后台传递。
hidden=“hidden”将输入框隐藏，但是隐藏的内容依然可以向后台传递。（后期经常用到）
相当于<input type="hidden" name="username" value="刘大鹏" />
注意：像以上这种属性名等于属性值的写法，可以省略属性值。
5、input属性中type的类型
text：表示为文本输入框，输入的内容正常显示
password：表示为密码输入框。输入的内容显示为小黑点
radio：表示为单选按钮
注意：其中的value属性不能省略，往后台传递值时传递的是value中的值
radio标签凭借name属性判断是否是同一组标签name相同为同一组标签，同一组当中只能选一个。
使用checked=“checked”，可以设置默认选中项，这种属性名等于属性值的写法，可以省略属性值。
例如：checked=“checked”相当于只写checked
checkbox：表示多选框，其它与单选按钮radio相同
file：表示文件上传框，点击可以选择文件上传。
accept属性可以限制上传何种类型的文件，“*”表示可以接收所有文件，"image/*"只能接收图片文件。
multiple="multiple"：设置可以上传多个文件。
submit：表示为提交按钮，点击可以提交整张表单
reset：表示重置按钮，点击将表单恢复到初始状态。
image：图形提交按钮。使用src属性导入一张图片，与submit按钮都具有提交表单的功能。
button：只是按钮形状，没有任何作用。
6、select下拉选择区块
（1） select标签中的多个选项，用option表示。
（2）一个select组合只能有一个name，所以使用时需要给select标签起name，而不是给option标签起name。
（3） option标签如果有value属性，则传递数据时将传递value的属性值，如果没有value属性，则传递时将传递option标签中间
的文字。
（4）option标签的title属性，表示鼠标指上之后显示的文字
（5）给option标签加上selected=“selected”表示默认选中项。
（6）给select标签加multiple="multiple"表示这个下拉框可以多选，但是这个属性几乎不用
（7）<optgroup label="组名"></optgroup>用于将所有的option标签进行分组，使用label属性表示组名。具体用法如下：
<select name="city">
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内陆">
<option>潍坊</option>
<option>济南</option>
</optgroup>
7、textarea文本域
（1）文本域可以使用cols（宽）和rows（高）设定宽高，但是我们几乎不用，我们使用CSS样式：
style="height: 50px; 50px;"来设定大小。
（2）使用CSS样式style="resize: none;"设定文本域的大小不允许拖动缩放
（3）使用属性readonly="readonly"设置文本域为只读，不允许修改
（4）CSS样式overflow用于设置超出区域的文字如何显示； 其可选值有三个
hidden：超出区域的文字直接隐藏，无法看到
scroll：无论文字多少，都会显示水平和垂直方向的滚动条
auto：默认效果，文字少时无滚动条，文字多时，自动显示垂直滚动条。也可以使用overflow-x和overflow-y单独设置水平
和垂直方向的滚动条是否显示.
8、HTML5智能表单
（1）H5为我们提供了input与form的关联的新方式，并不需要input必须包含在form里面。
如果input在form外面，只要给form标签起一个id，让input标签通过form属性关联这个id，即可实现input与form的关联
例如<form id=“ff”></form>,则<input form="ff"/>
（2）H5给我们提供了一些新的input的type类型：如date、number、url、email、range等。
（3）H5给我们提供的input新属性
placeholder：输入框的默认提示内容
form：让表单外面的input关联表单id，实现input与form表单关联
required="required"：设置input为必填
pattern：验证input的模式（后面将讲）
autofocus="autofocus"：设置input自动获得焦点
autocomplete="off"：关闭自动提示完成功能，此功能浏览器会默认开启，设置为off会关闭，设置为on会打开。
以下举例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <input type="color" name="1" form="1"> <form action="" method="get" id="1"> <table > <tr> <td>用户名</td> <td><input type="text" name="username" placeholder="请输入用户名" hidden="hidden"disabled="disabled"value="11111"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" placeholder="请输入密码"/></td> </tr> <tr> <td><input type="submit" value="注册"/></td> </tr> <tr> <td><input type="reset" value="清空"/></td> <td><input type="file" name="value"/></td> </tr> <tr> <td><input type="button" value="这个按钮没啥用！"/></td> </tr> <tr> <td>头像</td> <td><input type="image" src="练习用图/ivicon.png"/></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="man" checked="checked"/>男 <input type="radio" name="sex" value="women" />女</td> </tr> <tr> <td>爱好</td> <td><input type="checkbox" name="hobby" value="sleep" />睡觉 <input type="checkbox" name="hobby" value="eat" />吃饭 <input type="checkbox" name="hobby" value="play" />打豆豆</td> </tr> <tr> <td>城市</td> <td> <select name="city"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </select> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="山东省"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </optgroup> <optgroup label="还是山东省"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </optgroup> </select> </td> </tr> <tr> <td colspan="2"> <textarea style=" 100px;height: 150px;resize: none;" readonly="readonly"> 这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！ </textarea> </td> </tr> </table> </form> </body> </html>
PART-5 HTML语义化标签
HTML5语义化标签（用于一个网站整体布局的划分）
1、header：表示网站或者文章的头部
2、footer：表示网站或者文章的底部
3、section：表示网站或者文章的一个章节，也就是文章的一大块区域
4、acticle：表示一篇文章
5、aside：表示与文章相关但是又不属于文章的一部分，比如热门推荐等
6、hggroup：用于包裹一组标题标签h1-h6
7、nav：表示一个导航栏
上述标签仅仅表示语义化，实际上作用与div相同。