一.HTML5基础

1.HTML简介及发展史

HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。当你使用浏览器打开任意一个页面，按下F12键，就会看到一段程序，里面显示的就是这个网页的HTML源文件。

HTML发展史

超文本标记语言——在1993年6月互联网工程工作小组工作草案发布（并非标准）
HTML2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时。
HTML3.2——1996年1月14日，W3C推荐标准。
HTML4.0——1997年12月18日，W3C推荐标准。
HTML4.01（微小改进）——1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准。
XHTML1.0——2000年1月26日发布。
XHTML1.1——2001年5月31日发布。
XHTML2.0——W3C的工作草案，由于改动过大，学习这项新技术的成本过高而最终失败，因此，现在最常用的还是XHTML1.0标准。
HTML5——目前最新的版本。

HTML5的优势

1.世界知名浏览器厂商对HTML5的支持

微软
Google
苹果
Opera
Mozilla

2.市场的需求

现在的市场已经迫不及待地要求有一个同一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画及同计算机的交互都被标准化。

3.跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件扥核心代码就可以不用重复编写，极大地减少了开发人员的工作量。

2.HTML5文件的基本结构

前面讲过HTML是一种超文本标记语言，所以他最基本的语法就是<标记>内容</标记>。HTML5的基本结构分为两部分，如图所示。整个HTML包括头部(head)和主体(body)两部分，头部包括网页标题(title)等基本信息，主体包括网页的内容信息，如图片、文字等。

在这里插入图片描述

3.网页的基本信息

DOCTYPE声明

在HTML结构的最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

<!DOCTYPE html>

<title>标签

使用<ttitle.>标签描述网页的标题，类似一盘文章的标题，一般为一个简洁的主题，并能使读者有兴趣读下去。

<title>搜狐—中国最大的门户网站</title>

打开网页后，将在浏览器窗口的标题栏显示网页标题。

<meta>标签

使用该标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。

4.网页的基本标签

标题标签

HTML共提供了六级标题<h1>~<h6>，并赋予了标题一定的外观，所有标题字体加粗、<h1>字号最大，<h6>字号最小。

<html>
<head lang="en"> <meta charset="utf-8" /><title>不同等级的标题标签对比</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

段落标签和换行标签

顾名思义，段落标签<p>…</p>表示一段文字等内容。比如一首歌，包括歌名和歌词。

<html><head lang="en"><meta charset="UTF-8"><title>段落标签的应用</title></head><body><h1>北京欢迎你</h1><p>北京欢迎你，有梦想谁都了不起！</p><p>有梦想就会有奇迹。</p></body>
</html>

换行标签<br>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用<br/>表示标签的开始和结束。

<html><head lang="en"><meta charset="UTF-8"><title>换行标签的应用</title></head><body><h1>北京欢迎你</h1><p>北京欢迎你，有梦想谁都了不起！<br/>有勇气就会有奇迹。<br/>北京欢迎你，为你开天辟地<br/>流动中的魅力充满朝气。<br/>北京欢迎你，在太阳下分享呼吸<br/>在黄土地刷新成绩。<br/>北京欢迎你，像音乐感动你<br/>让我们都加油去超越自己。<br/></p></body>
</html>

水平线标签

顾名思义，水平线标签<hr/>表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签。

<html><head lang="en"><meta charset="UTF-8"><title>水平线标签的应用</title></head><body><h1>北京欢迎你</h1><hr /><p>北京欢迎你，有梦想谁都了不起！<br/>有勇气就会有奇迹。<br/>北京欢迎你，为你开天辟地<br/>流动中的魅力充满朝气。<br/>北京欢迎你，在太阳下分享呼吸<br/>在黄土地刷新成绩。<br/>北京欢迎你，像音乐感动你<br/>让我们都加油去超越自己。<br/></p></body>
</html>

字体样式标签

在网页中，经常会遇到字体加粗或斜字体，可以用<strong>标签来让字体变粗，<em>标签让文字倾斜。

<html><head lang="en"><meta charset="UTF-8"><title>字体样式标签</title></head><body><strong>徐志摩人物简介</strong><p><em>1910</em>年入杭州学堂<br /><em>1918</em>年赴美国克拉大学学习银行学<br /><em>1921</em>年开始创作新诗<br /><em>1922</em>年返国后在报刊上发表大量诗文<br /><em>1927</em>年参加创办新月书店<br /><em>1931</em>年由南京乘飞机到北平，飞机失事，因而遇难<br /></p></body>
</html>

注释和特殊符号

HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容。


<!--em>1910</em>年入杭州学堂<br /-->
<!--em>1927</em>年参加创办新月书店<br /

由于大于号(>)，小于号(<)等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。HTML中常用的特殊符号及其对应的字符实体如下表所示，这些实体符号都以"&“开头，以”;"结束。

特殊符号	字符实体	示例
空格		百度
大于号（>）	>	如果时间>晚上6点，就坐车回家
小于号（<）	<	如果时间<早上七点，就走路去上学
引号（“）	"	W3C规范中，HTML的属性值必须用成对的"引起来
版权符号	©	©20013-2018北大青鸟

图像标签

在日常生活中，使用比较多的图像格式有四种。

JPG格式：JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
GIF格式：GIF格式图像是网页中使用最广泛、最普遍的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，是的GIF格式在网页的背景和一些多层特效的显示上用的非常多，还支持动画，这是它最突出的一个特点。
BMP格式：BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像文件格式与其他Microsoft Windows程序兼容。它不支持压缩，也不适用于Web页。
PNG格式：PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。

图像标签的基本语法

<html><head lang="en"><meta charset="UTF-8"><title>图像标签的应用</title></head><body><p><img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃"title="无漂白薄皮核桃" /></p><p>楼兰蜜语 新疆野生<br />无漂白薄皮核桃 500g*2包<br />￥48.8</p></body>
</html>

其中，src属性表示图片路径，alt属性指定的替代文本，表示图像无法显示时替代的文本，这样即使当图像无法显示时，用户还是可以看到网页丢失的信息内容，所以alt属性在制作网页时和src属性配合使用。width和heigth两个属性分别表示图片的宽度和高度，如果不设置那么图片默认显示原始大小。

超链接标签

大家在上网时，经常会通过超链接查看各个页面或不同的网站，因此超链接a标签在网页中极为常用。超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为a标签的href属性；二是链接文本或图像，单机该文本或图像，将跳转到href属性指定的链接地址。

<html><head lang="en"><meta charset="UTF-8"><title>图书列表页</title></head><body><!--图像超链接--><a href="detail.html" target="_blank"><img src="image/img1.png" alt="姑娘,欢迎降落在这残酷的世界"/></a><p><!--文本超链接--><a href="detail.html" target="_blank">姑娘，欢迎降落在这残酷的世界</a></p></body><p>￥58</p>
</html>

href：表示链接地址的路径。
target：指定链接在哪个窗口打开，常用的取值有_self、_blank。

根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。

绝对路径：指向目标地址的完整描述。一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点内，所以一般不需要一个完整的URL地址的形式。

大家在上网时，会发现不同的链接方式，有的链接到其他页面，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件，实际上根据超链接的应用场合，可以吧链接分为三类。

页面间链接：A页到B页，最常用，用于网站导航。

<html><head lang="rn"><meta charset="UTF-8"><title>页面间链接</title></head><body><p><a href="elearing/index.html"target="_blank">YL在线学习平台</a></p><p><a href="elearing/couresList.html" target="_blank">YL在线学习课程列表</a></p></body>
</html>

锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置，常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。

<html><head lang="en"><meta charset="UTF-8"><title></title></head><body><!--省略部分HTML代码--><p><img src="image/logo.jpg" width="305" height="104" alt="logo"/>[<a href="#register">新用户注册帮助</a>] [<a href="#;ogin">用户登录帮助</a>]</p><h1>新手指南</h1><!--省略部分HTML代码--><h2>a name="register">登录</a></h2><!--省略部分HTML代码--><h2>a name="login">登录</a></h2><!--省略部分HTML代码--></body>
</html>

功能性链接：在页面中调用其他程序功能，如电子邮件、QQ、MSN等，以最常用的电子邮件链接为例，当单击“联系我们”邮件链接时，将打开用户的电子邮件程序，并自动填写“收件人”文本框中的电子邮件地址。

<html><head lang="en"><meta charset="UTF-8"><head><meta http-equiv="content-type" content="text/html"; charset="gb2312" /><title>邮件链接</title></head><body><p><img src="image.jpg" width="305" height="104" alt="logo"/>[<a href="msilto:bfqnWebmaster@bdqn.cn">联系我们</a>]</p></body>
</html>

行内元素和块元素

块元素特性：无论内容多少，该元素独占一行。
行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一行。

二.列表、表格与媒体元素

列表

列表简介

什么是列表？简单来说，列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式出来，以便浏览者能更快捷的获得相应的信息。

列表及其应用

1.无序列表及其应用

无序列表由<ul>标签和<li>标签组成，使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表项的起始。

<body><h3>热搜</h3><ul><li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li></ul></body>

注意：

遵循W3C标准，<ul>标签里面中呢过嵌套li标签，不能嵌套其他标签。
li标签里面可以嵌套任意标签。

无序列表的特性如下：

没有顺序，每个<li>标签独占一行(块元素)。
默认li标签项前面有个实心小圆点。
一般用于无序类型的列表。如导航，侧边栏新闻，有规律的图文组合模块等。

2.有序列表及其应用

有序列表由<ol>标签和<li>标签组成，使用<ol>标签作为有序列表的声明，使用<li>标签作为每个列表项的起始，有序列表嵌套如同无序列表一样，只能<ol>标签里嵌套<li>标签。

<body><h3>热搜</h3><ol><li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li></ol></body>

有序列表特性如下：

有顺序，每个li标签独占一行(块元素)。
默认每个li标签独占一行(块元素)。项前面有顺序标记。
一般用于排序类型的列表，如试卷，问卷选项等。

3.定义列表及其应用

定义列表是一种很特殊的列表形式。它是标题及列表项的结合。定义列表的语法相对于无序和有序列表不太一样，它使用<dl>标签作为列表的开始，使用<dt >标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。

<body><dl><dt>水果</dt><dd>苹果</dd><dd>桃子</dd><dd>李子</dd><dt>蔬菜</dt><dd>白菜</dd><dd>黄瓜</dd><dd>西红柿</dd></dl></body>

定义列表的特性如下：

没有顺序，每个dt标签，dd标签独占一行(块元素)。
默认没有标记。
一般用于(一个标题下有一个或多个列表项)*n的情况。

总结

无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。有序列表会依据列表项的顺序进行显示。
在实际的网络应用中，无序列表比有序列表应用得更加广泛，有序列表ol-li一般用于展示带有倒序编号的特定场合。
定义列表一般适用于带有标题和标题解释性内容的场合。

表格

为什么使用表格

简单通用：由于表格行列的简单结构，以及在生活中的广泛使用，因此对它的理解和编写都很方便。
结构稳定：表格通常每行的列数一致，同行单元格高度一致且水平对齐，同列单元格高度一致且垂直对齐。这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定。

表格的基本结构

单元格：单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。
行：一个或多个单元格横向堆叠形成了行。
列：由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列。

表格的基本语法

创建表格一般分为下面四步：

第一步：创建表格标签<table>…</table>。
第二步：在表格标签<table>…</table>里创建行标签<tr>…</tr>，可以有多行。
第三步：在第一行标签<tr>…</tr>里创建单元格标签<th>…</th>，用于创建表格标题。
第四步：在行标签<tr>…</tr>里创建单元格标签<td>…</td>，可以有多个单元格。

为了显示表格的轮廓，一般还需要设置<table>里的border边框属性，指定边框的亮度。例如，在页面中添加一个2行3列的表格，就如以下代码所示：

<body><table border="2"><tr><th>1行1列的标题</th><th>1行2列的标题</th><th>1行3列的标题</th></tr><tr><th>1行1列的单元格</th><th>1行2列的单元格</th><th>1行3列的单元格</th></tr><tr><th>2行1列的单元格</th><th>2行2列的单元格</th><th>2行3列的单元格</th></tr></table></body>

表格的跨列与跨行

1.跨列

跨列是指单元格的横向合并，代码如下：

<body><table border="1"><tr><td colspan="2">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr></table></body>

col为colum(列)的缩写，span为跨度，所以colspan的意思为跨列。

2.跨行

跨行是指单元格在垂直方向上的合并，代码如下：

<body><table border="1"><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>

row为行的意思，rowspan即跨行。

一般而言，跨行或跨列操作时，需要以下两个步骤：

在需合并的第一个单元格，设置跨列或跨行属性，如colspan=“3”。
删除被合并的其他单元格，即把某个单元格看成多个单元格合并后的单元格。

3.跨行与跨列的综合应用

有时表格中既有跨行又有跨列的情况，从而形成了相对复杂的表格显示，代码如下：

<body><table border="1"><tr><td colspan="3">学生成绩</td><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>

跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。

HTML5的媒体元素

视频元素

Web上的视频播放从来都没有一个固定的标准，大多数视频都是通过想Flash这样的插件来显示的，不同的浏览器往往拥有不同的插件。HTML5中的video元素是现在播放视频的一种标准方法。

HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式，代码如下：

<body><video controls="controls"><source src="../css/video.webm"></source><source src="../css/video.mp4"></source>你的浏览器不支持video标签</video></body>

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。如果浏览器不支持video元素，可以在video元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户。

在video中虽然可以用src属性连接视频路径，可是只能链接一种格式的视频，很难让每种浏览器都支持这种格式(不同浏览器支持度视频格式见下表)。所以就出现了source元素来解决这一问题，source元素嵌套在video里面，并且可以出现多次，每个source元素对应一种格式的视频。这样，浏览器会在这些格式中自己选择可以识别的一种来进行播放。

浏览器	IE	Firefox	Opera	Chrome	Safari
视频格式
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WecM	不支持	4.0+	10.5+	6.0+	不支持

还有一种方法可以解决页面内播放视频的问题，即在video元素里设置另一个属性autplay，代码如下：

<body><video autoplay><source src="../css/video.webm"></source><source src="../css/video.mp4"></source>你的浏览器不支持video标签</video></body>

设置autplay属性后，不需要与用户进行任何交互，就可以让视频文件加载完成后自动播放，所以大部分用户对这个功能很反感，应该慎用。

音频元素

HTML5中的audio元素是用来播放音频文件的，支持Ogg、MP3、WAV等音频格式，其代码如下：

<body><audio controls="controls"><source src="../css/music.mp3"></source><source src="../css/music.ogg"></source></audio></body>

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。

HTML5的结构元素

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

接下来就使用这几个结构元素来布局网易邮箱页面结构，代码如下所示：

<head lang="en"><meta charset="UTF-8"><title>网易邮箱页面布局</title><style>header,section,footer{height: 200px;border: 1px solid red;}</style></head><body><header><h2>网页头部</h2></header><section><h2>网页主体部分</h2></section><footer><h2>网页底部</h2></footer></body>

这样就能把一个页面的结构划分出来，分别在每块对应的部分添加相应的内容。通过这些有语义化的结构标签不仅可以使网页结构更清晰、明确，还有利于搜索引擎的检索。

<iframe.>框架

<iframe src="y1.html" width="500px" height="236px" name="firstPage"></iframe>

1.在被打开的框架上加name属性，关键代码如下：

<iframe name="mainFrame" src="subframe/the_second.html" />

2.在超链接上设置target目标窗口属性为希望显示的框架窗口名，关键代码如下：

<a href="subframe/the_second.html" target="mainFrame" >下面显示第二页</a>

具体实现如以下代码所示：

<body><h1>上方导航条</h1><p><a href="y1.html" target="mainFrame">下边显示第一页</a><br /><a href="y2.html" target="mainFrame">下边显示第二页</a><br /><a href="y3.html" target="mainFrame">下边显示第三页</a><br /></p><iframe name="mainFrame" width="800px" height="150px" src="y1.html"></iframe></body>

三.表单

概述

通俗地讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发给服务器。

表单的内容

创建表单后，就可以在表单中防止控件以接收用户的输入。这些控件通常放在<form>…</from>标签对之间，也可以在表单之外用来创建用户界面。

表单标签及表单属性

在HTML5中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，<input>便是其中一个，用于设定各种输入资料的方法。<form>标签有两个常用的属性，如下表所示：

属性	说明
action	此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的”提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action = “URL”。如果action属性的值为空，则默认表单提交到本页。
method	此属性告诉浏览器如何将数据发给服务器，它指定向服务器发送数据的方法。语法为method=(get\|post)。

<body><form method="post" action="result.html"><p>名字：<input name="post" type="text" /></p><p>密码：<input name="pass" type="password" /></p><p><input type="submit" name="Button" value="提交" /><input type="reset" name="Reset" value="重填" /></p></form>
</body>

在以上这个示例中，若把method="post"改为method="get"就变成了使用get方法将表单提交给"result.html"页面处理。

两种提交方式的区别如下：

podt方法提交方式不会改变地址状态，表单数据不会被显示。
使用get方法提交方式，地址栏状态栏会发生变化，表单数据会在URL信息中显示。

基于以上两点区别，post方法提交的数据安全性明显高于get方法提交的数据。

表单元素及其格式

如何在表单中添加表单元素，最简单的方法就是使用<input>标签，它有很多属性，下面将对一些较常用的属性进行整理：

属性	说明
type	此属性指定表单元素的类型，可用的类型有text,password,checkbox,radio,submit,reset,file,email,bumber,url,hidden,image和button。默认为text
name	此属性指定表单元素的名称
value	此属性是可选属性，它指定表单元素的初始数值。如果type为radio类型，必须指定一个值
size	此属性指定表单元素的初始宽度。如果type为text或password类型，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
maxlength	此属性用于指定可在text或password元素中输入的最大字符数。默认值无限大
checked	此属性用于指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性

1.文本框

在表单中最常用、最常见的表单输入元素就是文本框(text)，它用于输入单行文本信息，乳痈户名的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了。

<body><form method="post" action=""><p>名字：<input name="fname" type="text" value=""/></p><p>姓氏：<input type="text" name="lname" value="张"/></p><p>登录名：<input type="password" name="sname" size="30" /></p></form>
</body>

2.密码框

密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在密码框输入的字符全都以黑色实心的圆点来显示，从而实现了对数据的处理。

<body><form method="post" action=""><p>名字：<input name="post" type="text" size="21"/></p><p>密码：<input name="pass" type="password" size="22"/></p></form>
</body>

3.单选按钮

单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮，只有从组中选中的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显式的value属性。

<body><form method="post" action="">性别：<input name="gen" type="radio" value="男"/>男<input name="gen" type="radio" value="女"/>女</form>
</body>

4.复选框

复选框与单选框类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了。

<body><form method="post" action="">爱好：<input name="interest" type="checkbox" value="spoorts"/>运动<input name="interest" type="checkbox" value="talk"/>聊天<input name="interest" type="checkbox" value="play"/>玩游戏</form>
</body>

5.列表框

列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过<select>标签和<option>标签来实现的。<select>标签用于显示可供用户选择的列表框，每个选项由一个<option>标签表示，<select>标签必须至少包含一个<option>标签。

<body><form method="post" action="">出生日期：<input name="byear" type="text" value="yyyy" size="4" maxlength="4"/>运动<select name="bmon"><option value="">[选择月份]</option><option value="1">一月</option><option value="2">二月</option><option value="3">三月</option><option value="4">四月</option><option value="5">五月</option><option value="6">六月</option><option value="7">七月</option><option value="8">八月</option><option value="9">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option></select>月<input name="bday" type="text" value="dd" size="2" maxlength="2"/></form>
</body>

6.按钮

按钮在表单中经常用到，在HTML5中按钮分为三种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息。

<body><form method="post" action=""><p>用户名：<input name="post" type="text" /></p><p>密码：<input name="pass" type="password" /></p><p><input type="reset" name="butReset" value="reset按钮" /><input type="submit" name="butSubmit" value="submit按钮" /><input type="button" name="butButton" value="button按钮" onabort="alert(this.value)"/></p></form>
</body>

reset按钮：用户单击按钮后，无论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到最初状态，而填写或输入的数据都将被清空。
submit按钮：用户单击按钮后，表单将会提交到action属性所指定的URL，并传递表单数据。
button按钮：属于普通按钮，需要与事件关联使用。

7.多行文本域

当需要在网页中输入两行或两行以上的文本时，就需要使用多行文本框，它的标签是<textarea>。

<body><form method="post" action=""><h4>填写个人评价</h4><p><textarea name="textarea" cols="40" rows="6">  自信、活泼、善于思考...</textarea></p></form>
</body>

其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多行文本框的行数。在<textarea>…</textarea>标签对中不能使用value属性来赋初始值。

8.文件域

文件域的作用是用于实现文件的选择，在应用时只需把type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。

<body><form method="post" action="" enctype="multipart/form-data"><p><input type="file" name="butReset" value="files" /><br /><input type="submit" name="upload" value="上传" /><br /></p></form>
</body>

9.邮箱

email类型的input元素是一种专门用于输入Email地址的文本框，与上面表单元素不同的是email在提交表单的时候会自动验证email文本框的值。如果不是一个有效的邮箱地址，则该输入不允许提交表单。

<body><form method="post" action="" ><p>邮箱：<input type="email" name="email" /></p><input type="submit" /></form>
</body>

10.网址

url类型的input元素提供输入URL地址这类特殊文本的文本框，提交表单时，如果输入的内容不是URL地址格式的文本，将不允许提交表单。

<body><form method="post" action="#" ><p>请输入数字：<input type="number" name="num"  min="0" max="100" step="10"/></p><input type="submit" /></form>
</body>

11.数字

number类型的input元素提供用于输入数字的文本框，我们还可以对所接收的数字进行限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定的范围之内，则会出现错误提示。

<body><form method="post" action="#" ><p>请输入数字：<input type="number" name="num"  min="0" max="100" step="10"/></p><input type="submit" /></form>
</body>

number类型使用下表所示的属性来规定对数字的限定

属性	值	描述
value	number	规定的默认值
min	number	规定允许的最小值
max	number	规定允许的最大值
step	number	规定合法的数字间隔

12.滑块

range类型的input元素提供用于输入包含一定范围内的数字值的文本框。子啊网页中显示为滑动条。用法与上面的number类似。

<body><form method="post" action="#" ><p>请输入数字：<input type="range" name="range1"  min="0" max="100" step="2"/></p><input type="submit" /></form>
</body>

13.搜索框

search类型input元素提供用于输入搜索关键词的文本框。虽然外观看起来search类型和input的普通text类型差不多，但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框，而是任意页面的一个搜索框。

<body><form method="post" action="#" ><p>请输入数字：<input type="search" name="sousuo" /><input type="submit" value="Go"/></p></form>
</body>

表单的高级应用

1.设置表单的隐藏域

网站服务器端发送到客户端的信息，除了用户直观看到的页面内容外，可能还包含一些"隐藏"信息。将type属性设置为hidden隐藏类型即可创建一个隐藏域。

<body><form method="post" action="result.html"><p>用户名：<input name="post" type="text" /></p><p>密码：<input name="pass" type="password" /></p><p><input type="submit" value="提交" /></p><p><input type="hidden" name="userid" value="666"/></p></form>
</body>

2.表单的只读与禁用设置

在某些情况下，需要对表单元素进行限制，即设置表单元素为只读或禁用。他们常见的应用场景如下

只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。
禁用场景：只有满足某个条件后，才能选用某项功能。

只读和禁用效果分别通过设置readonly属性和disabled属性来实现。

<body><form method="get" action="result.html"><p>用户名：<input name="name" type="text" value="张三" readonly/></p><p>密码：<input name="pass" type="password" /></p><p><input type="submit" value="修改" disabled/></p></form>
</body>

通常只读属性用于不希望用户对数据进行修改的场合，禁用属性则可以配合其他控件使用。最常见的就是在安装程序时，如果用户不选中"同意安装许可协议"复选框，则"安装"按钮或"下一步"按钮无法使用。

3.表单元素的标注

对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。

<body><form method="post" action="">请选择性别：<label for="male">男</label><input name="gender" type="radio" value="male"/><label for="female">女</label><input name="gender" type="radio" value="female"/></form>
</body>

表单的初级验证

表单验证的好处

减轻服务器的压力。
保证数据的可行性和安全性。

表单验证初级方法

1.placeholder

placeholder属性用于为input类型的文本框提供一种提示(hint)，这种提示可以描述文本框期待

用户输入何种内容，在输入为空时显示，当在文本框中写入内容时消失。placeholder属性适合于input标签：text、search、url、email、password等类型。

<body><form method="post" action="#" ><p>请输入搜索的关键字：<input type="search" name="sousuo" placeholder="请输入搜索的关键字？"/><input type="submit" value="Go"/></p></form>
</body>

2.required

required属性用于规定文本框填写内容不能为空，否则不允许用户提交表单。该属性适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型。

<body><form method="post" action="#" ><p>用户名：<input type="search" name="sousuo" required/><input type="submit" value="提交"/></p></form>
</body>

3.pattern

pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。

<body><form method="post" action="#" ><p>电话号码：<input type="text" name="tel" required pattern="^1[35]\d{9}"/>*以13、15、18888开头的11位数字<br /><input type="submit" value="提交"/></p></form>
</body>

失。placeholder属性适合于input标签：text、search、url、email、password等类型。

<body><form method="post" action="#" ><p>请输入搜索的关键字：<input type="search" name="sousuo" placeholder="请输入搜索的关键字？"/><input type="submit" value="Go"/></p></form>
</body>

2.required

<body><form method="post" action="#" ><p>用户名：<input type="search" name="sousuo" required/><input type="submit" value="提交"/></p></form>
</body>

3.pattern

<body><form method="post" action="#" ><p>电话号码：<input type="text" name="tel" required pattern="^1[35]\d{9}"/>*以13、15、18888开头的11位数字<br /><input type="submit" value="提交"/></p></form>
</body>