一、概述
二、基本格式
三、文本元素
四、超链接和路径
一．超链接的属性
<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属
性或叫做全局属性。这方面的知识，后面会详细探讨。
在这几个属性当中，只有 href 和 target一般比较常用，而 href是必须要用的。
其他几个属性，在<a>元素使用较少，将在 CSS章节再探讨。
1.href属性：记得要加上http://
<a href="http://www.baidu.com">百度</a>
解释：href是必须属性，否则<a>元素就变成空元素了。如果属性值是 http://开头
的 URL，意味着点击跳转到指定的外部网站。
2.target属性
<a href="http://www.baidu.com" target="_blank">百度</a>
解释：target属性告诉浏览器希望将所链接的资源显示在哪里。
这四种最常用的是_blank，新建一个窗口。
而_self是默认，当前窗口打开。
_parent和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。
而HTML5中，框架基本被废弃，只能使用<iframe>元素，且以后大量结合 JavaScript和PHP等语言配合，
框架用的就很少了。
二．相对与绝对路径
所谓相对路径，就是相对于链接页面而言的另一个页面的路径。
而绝对路径，就是直接从 file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链
接到另一个页面。
1.绝对路径
<a href="file:///D:/备课/HTML5第一季/code/index2.html">index2</a>
解释：首先是 file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文
件。
这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。
2.相对路径
<a href="index2.html">index2</a>
解释：相对路径的条件是必须文件都在一个磁盘或目录下，
如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就
需要使用目录结构语法。
3.目录语法
同一个目录：index2.html或./index2.html；
在子目录：xxx/index2.html；（XXX为目录名）
在孙子目录：xxx/xxx/index2.html；
在父目录：../index2.html； （./是当前目录，../是父亲目录）
在爷爷目录：../../index2.html；
三．锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。
通过属性 id或 name实现锚点定位。
//链接
<a href="#1">点击我到第一章</a> <a href="#2">点击我到第二章</a> <a href="#3">点击我到第三章</a>
//锚点
<a name="1">第一章</a> <a id="3">第三章</a>
五、分组元素
一．分组元素总汇
为了页面的排版需要，HTML5提供了几种语义的分组元素。
二．分组元素解析
1.<p>建立段落
<p>这是一个段落</p>
<p>这也是一个段落</p>
解释：<p>元素实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持
一定量的空隙。
2.<div>通用分组
<div>这是一个通用分组</div>
<div>这是又一个通用分组</div>
解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。
而在 HTML5中，由于语义的缘故，被其他各种文档元素所代替。和<p>段落的区别就是，两
段文本的上下空隙是没有的，空隙间隔和<br>换行一样。
3.<blockquote>引用大段他出内容
<blockquote>这是一个大段引自他出内容</blockquote>
<blockquote>这是另一个大段引自他出内容</blockquote>
解释：<blockquote>元素实际作用除了和<p>元素一样，有段落空隙的功能，还包含
了首尾缩进的功能。语义上表示，大段的引用他出的内容。
4.<pre>展现格式化内容（pre可以理解空隙，就是编辑文档中空隙是怎么设置的，到浏览器也是一样的）
<pre>
#####
#####
#####
#####
#####
</pre>
解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种
只适合简单的排版，复杂的排版就无法满足要求了。
5.<hr>添加分隔
<hr>
解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。
6.<ul><li>添加无序列表
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ul>
解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。
7.<ol><li>添加有序列表
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ol>
解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三
种属性。
<li value="7">王五</li>
ol的start跟li的value值只能用一个，如果两个一起用会显示li里面的设置
8.<dl><dt><dd>生成说明列表
<dl>
<dt>这是一份文件</dt>
<dd>这里是这份文件的详细内容 1</dd>
<dd>这里是这份文件的详细内容 2</dd>
</dl>
解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。
9.<figure><figcaption>使用插图
<figure>
<figcaption>这是一张图</figcaption>
<img src="img.png">
</figure>
解释：这两个元素一般用于图片的布局。
六、表格元素
一．表格元素总汇
表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅
助存在。
二．构建表格解析
1.<table><tr><td>构建基础表格
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示
一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个 border属性，
设置为 1即可显示边框。
2.<th>为表格添加标题单元格
<table border="1" style="width:300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
解释：<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。
这里使用了一个通用属性 style，主要用于 CSS样式设置，以后会涉及到。<th><td>均属
于单元格，包含两个合并属性：colspan、rowspan等。
3.<thead>添加表头（不管里面的tr放在什么地方，都会显示在表头部分）
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它
的位置是不固定的，使用此元素可以限定在开头位置。
4.<tfoot>添加表脚
<tfoot>
<tr>
<td colspan="3">统计：共两名</td>
</tr>
</tfoot>
解释：<tfoot>元素为表格生成表脚，限制在表格的底部。
5.<tbody>添加表主体
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更
加有助于后续 CSS和 JavaScript的控制。
6.<caption>添加表格标题
<caption>这是一个人物表</caption>
解释：<caption>元素给表格添加一个标题。
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
7.<colgroup>设置列
<colgroup span="2" style="background:red;">
解释：<colgroup>元素是为了处理某个列，span属性定义处理哪些列。1表示第一列，
2表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第
二位，再处理第二个即可。
8.<col>更灵活的设置列
<colgroup>
<col>
<col style="background:red;" span="1">
</colgroup>
解释：<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了 span则，
控制多列。
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
合并单元格：
先确定是合并行还是合并列
然后根据先上后下，先左后右找到对应的合并单元格
最后将多余的单元格删除
七、文档元素
一．文档元素总汇
文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。
二．文档元素解析
文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结
构性。只有在后面的章节学习 CSS，配合使用才能起到布局和样式的效果。
1.<header>表示首部
<header>
这里部分一般是页面头部，包括：LOGO、标题、导航等内容
</header>
解释：<header>元素主要设置页面的标头部分。下面写的内容在浏览器上会自定换行。
2.<footer>表示尾部
<footer>
这里是页面的尾部，一般包括：版权声明、友情链接等内容
</footer>
解释：<footer>元素主要设置页面的尾部。
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
3.<h1>~<h6>添加标题
<h1>标题部分</h1>
<h4>小标题部分</h4>
解释：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。
4.<hgroup>组合标题
<hgroup>
<h1>标题部分</h1>
<h4>小标题部分</h4>
</hgroup>
解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的
标题，这是使用此元素包含群组。字体大小会逐渐变小。后面可以用css通过hgroup 来控制。
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
5.<section>文档主题
<section>
这里一般是存放文档主题内容。
</section>
解释：<section>元素的作用是定义一个文档的主题内容。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
6.<nav>添加导航
<nav>这里存放文档的导航</nav>
解释：<nav>元素给文档页面添加一个导航。
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
7.<article>添加一个独立成篇的文档
<article>
<header>
<nav></nav>
</header>
<section></section>
<footer></footer>
</article>
解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。
在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等
内容。和此相似的还有论坛的帖子、用户的评论、新闻等。
8.<aside>生成注释栏
<aside>这是是一个注释</aside>
解释：<aside>元素专门为某一段内容进行注释使用。
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
9.<address>表示文档或 article元素的联系信息。
<address>联系信息</address>
解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元
素下时，表示其下的联系信息。
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
10.<details>元素生成详情区域、<summary>元素在其内部生成说明标签
解释：由于大多数主流浏览器尚未支持，暂略。
八、嵌入元素
一．嵌入元素总汇
这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频 video、以及动态
图像 canvas和媒体资源 source、track等会在后面章节或季度讲解。
二．嵌入元素解析
1.<img>嵌入图像
<img src="img.png">
解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。
ismap：点击区域可以获取到点击的坐标，提交出去。
<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap>
</a>
2.<map>创建分区响应图，跟图像合用的，相当于在图像创建热点区域，点击这些热点区域做些别的操作
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100"
href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47"
href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112"
href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver进行操作生成的。
3.<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a>
<a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500"
name="in"></iframe>
解释：<iframe>表示内嵌一个 HTML文档。其下的 src属性表示初始化时显示的页面，
width和 height表示内嵌文档的长度和高度，name表示用于 target的名称。
4.<embed>嵌入插件内容
<embed
src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
解释：<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了
一个土豆网的 flash视频。type类型表示被插入内容的类型，这里不列出所有，后面如果
遇到其他类型的文件，再继续探讨；width和 height表示宽高；src表示文件路径。
5.<object>和<param>元素
解释：<object>元素和<embed>一样，只不过 object是 html4的标准，而 embed是
html5的标准。而 object不但可以嵌入 flash，还可以嵌入图片等其他内容。由于图片、
音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。
6.<progress>显示进度
<progress value="30" max="100"></progress>
解释：<progress>元素可以显示一个进度条，一般通过 JS控制内部的值。IE9以及更
低版本不支持此元素。
7.<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80"
optimum="60"></meter>
解释：<meter>元素显示某个范围内的值。其下的属性包含：min和 max表示范围边界，
low表示小于它的值过低，high表示大于它的值过高，optimum表示最佳值，但不出现效
果。IE浏览器不支持此元素。
九、音频和视频
一．音频和视频概述
首先，我们要理解两个概念：容器（container）和 编解码器(codec)。
1.视频容器
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其
他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封
面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、
.ogg、.webm。
2.编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便
音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是
非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编
码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，
视频编解码器：H.264、VP8、Ogg Theora。
3.浏览器支持情况
起初，HTML5规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的
标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一
规范的要求，导致各个浏览器实现自己的标准。
除了上面三款浏览器，还有 Safari5+支持 MPEG-4,Opera11支持 WebM和 OGG，通过
这组数据，只要备好 MP4和 OGG格式的即可，但对于新的高清标准 WebM，当然是非常必要
的。因为 WebM不但清晰度高，而且免费，不受限制许可的使用源码和专利权。
目前 Chrome浏览器，为了推广 WebM格式的视频。声称未来将放弃 H.264编码的视频，
所以有可能在以后的版本中无法播放 MP4的视频。当然，目前演示的版本还是支持的。
二．video视频元素
以往的视频播放，需要借助 Flash插件才可以实现。但 Flash插件的不稳定性经常让
浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是 HTML5的 video
元素。
1.嵌入一个 WebM视频
<video src="test.webm" width="800" height="600"></video>
解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源
URL；width表示宽度；height表示高度。
2.附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop
muted></video>
解释：autoplay表示自动开始播放； controls表示显示播放控件； loop表示循环播放； muted表示静音。
3.预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
解释：preload属性有三个值： none表示播放器什么都不加载； metadata表示播放之前只能加载元数据（宽高、第一帧画面等信息）；
auto表示请求浏览器尽快下载整个视频。
4.使用预览图
<video src="http://li.cc/test.webm" width="800" height="600" controls
poster="img.png"></video>
解释：poster属性表示在视频的第一帧，做一张预览图。
5.兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash播放器实现 IE9以下，但没必要了</object>
</video>
解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。
二．audio音频元素
和 video元素一样，audio元素用于嵌入音频内容，而音频元素的属性和视频元素类
似。音频的支持度和视频类似，使用<source>元素引入多种格式兼容即可。主流的音频格
式有：.mp3，.m4a，.ogg，.wav。
1.嵌入一个音频
<audio src="test.mp3" controls autoplay></audio>
解释：和嵌入视频一个道理。
2.兼容多个浏览器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
解释：略。
PS：更多设计到 API的 JavaScript控制，将在以后的基于 JavaScript基础后讲解。
十、表单元素
一．表单元素总汇
在 HTML5的表单中，提供了各种可供用户输入的表单控件。
二．表单元素解析
1.<form>定义表单，本身具有提交功能
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
解释：<form>元素主要是定义本身是一组表单。
//使用 get提交数据
method="get"
//丧失自动提示功能
autocomplete="off"
//使用_blank新建目标
target="_blank"
2.<input>表示用户输入数据
<input name="user">
解释：<input>元素默认情况会出现一个单行文本框，有五个属性。
//聚焦光标
<input name="user" autofocus>
//禁用 input
<input name="user" disabled>
//禁止自动完成
<input name="user" autocomplete="off">
//表单外的 input
<form method="get" id="register">
...
</form>
<input name="email" form="register">
3.<label>添加说明标签
<p><label for="user">用户名：<input id="user" name="user"></label></p>
<p><label>用户名：<input id="user" name="user"></label></p>
<p><label for="user"></label> 用户名：<input id="user" name="user"></p>
解释：<label>元素可以关联 input，让用户体验更好。且更加容易设置 CSS样式。
4.<fieldset>对表单进行编组
<fieldset>...</fieldset>
解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。
5.<legend>添加分组说明标签
<fieldset>
<legend>注册表单</legend>
</fieldset>
解释：<legend>元素给分组加上一个标题。
6.<button>添加按钮
<button type="submit"></button>
解释：<button>元素添加一个按钮，type属性有如下几个值：
//提交表单
<button type="submit">提交</button>
//重置表单
<button type="reset">重置</button>
//普通按钮
<button type="button">按钮</button>
对于 type属性为 submit时，按钮还会提供额外的属性。
//表单外关联提交
<button type="submit" form="register">提交</button>
三．type属性总汇
input元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样
的数据均可以输入。而通过不同的属性值，可以限制输入的内容。
四．input元素解析
1.type为 text值时
<input type="text">
解释：当 type值为 text时，呈现的就是一个可以输入任意字符的文本框，这也是默
认行为。并且，还提供了一些额外的属性。
//设置文本框长度
<input type="text" size="50">
//设置文本框输入最大字符长度
<input type="text" maxlength="10">
//设置文本框的初始值
<input type="text" value="初始值">
//设置文本框输入提示
<input type="text" placeholder="请输入内容">
//设置文本提供的建议值
<input list="footlist">
<datalist id="footlist">
<option value="苹果">苹果</option>
<option value="桔子">桔子</option>
<option value="香蕉" label="香蕉">
<option value="梨子">
</datalist>
//设置文本框内容为只读，可以提交数据
<input type="text" readonly>
//设置文本框内容不可用，不可以提交数据
<input type="text" disabled>
2.type为 password值时
<input type="password">
解释：当 type值为 password时，一般用于密码框的输入，所有的字符都会显示星号。
密码框也有一些额外属性。
这里除了正则和验证需要放在下一节，其余和文本框一致。
3.type为 search时
<input type="search">
解释：和文本框一致，在除 Firefox浏览器的其他现代浏览器，会显示一个叉来取消
搜索内容。额外属性也和 text一致。
4.type为 number、range时
<input type="number">
<input type="range">
解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本
框，只是样式是拖动式。额外属性如下：
//范围和步长
<input type="number" step="2" min="10" max="100">
5.type为 date系列时
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
解释：实现文本框可以获取日期和时间的值，但支持的浏览器不完整。我们测试 Chrome
和 Opera支持，其他浏览器尚未支持。所以，在获取日期和时间，目前还是推荐使用 jQuery
等前端库来实现日历功能。额外属性和 number一致。
6.type为 color时
<input type="color">
解释：实现文本框获取颜色的功能，最新的现代浏览器测试后 IE不支持，其余的都能
显示一个颜色对话框提供选择。
7.type为 checkbox、radio时
音乐 <input type="checkbox">
体育 <input type="checkbox">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：
//默认勾选，默认值为 1
<input type="checkbox" name="music" checked value="1">
8.type为 submit、reset和 button时
<input type="submit">
解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。
如果是 submit时，还提供了和<button>元素一样的额外属性：formaction、
formenctype、formmethod、formtarget和 formnovalidate。
9.type为 image时
<input type="image" src="img.png">
解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片
按钮也提供了一些额外属性。
10.type为 email、tel、url时
<input type="email">
<input type="tel">
<input type="url">
解释：email为电子邮件格式、tel为电话格式、url为网址格式。额外属性和 text
一致。但对于这几种类型，浏览器支持是不同的。email支持比较好，现在浏览器都支持格
式验证；tel基本不支持；url支持一般，部分浏览器只要检测到 http://就能通过。
11.type为 hidden时
<input type="hidden">
解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID提交，而这个数据作为隐
藏存在。
12.type为 file时
<input type="file">
解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：
accept="image/gif, image/jpeg, image/png"
五．其他元素
表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、
和 output计算结果元素。
1.生成下拉列表
<select name="fruit">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3">香蕉</option>
</select>
解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列
表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了
一些额外属性。
//设置高度并实现多选
<select name="fruit" size="30" multiple>
//默认首选
<option value="2" selected>橘子</option>
//使用 optgroup进行分组，label为分组名称，disabled可以禁用分组
<optgroup label="水果类">
<option value="1">苹果</option>
<option value="2" selected>橘子</option>
<option value="3" label="香蕉">香蕉</option>
</optgroup>
2.多行文本框
<textarea name="content">请留下您的建议！ </textarea>
解释：生成一个可变更大小的多行文本框。属性如下：
//设置行高和列宽，设置插入换行符
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>
3.计算结果
<form οninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
<input type="number" id="num1"> x <input type="number" id="num2">
<output for="num1 num2" name="res">
</form>
解释：output就是计算两个文本框之间的值，其实就是内嵌了 JavaScript功能。
六．输入验证
HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览
器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery等前端库来实现丰富的
验证功能和显示效果。
//必须填写一个值
<input type="text" required>
//限定在某一个范围内
<input type="number" min="10" max="100">
//使用正则表达式
<input type="text" placeholder="请输入区号+座机" required
pattern="^[\d]{2,4}\-[\d]{6,8}$">
//禁止表单验证
<form action="http://li.cc" novalidate>
十一、全局属性和其他
一．实体
HTML实体就是将有特殊意义的字符通过实体代码显示出来。
二．元数据
<meta>元素可以定义文档中的各种元数据，而且一个 HTML页面可以包含多个<meta>
元素。
1.指定名/值元数据对
<meta name="author" content="bnbbs">
<meta name="description" content="这是一个 HTML5页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">
2.声明字符编码
<meta charset="utf-8">
3.模拟 HTTP标头字段
//5秒跳转到指定 URL
<meta http-equiv="refresh" content="5;http://li.cc">
//另一种声明字符编码
<meta http-equiv="content-type" content="text/html charset=utf-8">
三．全局属性
在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如
id。全局属性是所有元素共有的行为，HTML5还提供了一些其他的全局属性。
1.id属性
<p id="abc">段落</p>
解释：id属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS和 JavaScript
调用选择元素。一个页面只能出现一次同一个 id名称。
2.class属性
<p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p>
解释：class属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS样
式。
3.accesskey属性
<input type="text" name="user" accesskey="n">
解释：快捷键操作，windows下 alt+指定键，前提是浏览器 alt并不冲突。
4.contenteditable属性
<p contenteditable="true">我可以修改吗</p>
解释：让文本处于可编辑状态，设置 true则可以编辑，false则不可编辑。或者直接
设置属性。
5.dir属性
<p dir="rtl">文字到右边了</p>
解释：让文本从左到右（ltr），还是从右到左（rtl）。
6.hidden属性
<p hidden>文字到右边了</p>
解释：隐藏元素。
7.lang属性
<p lang="en">HTML5</p>
解释：可以局部设置语言。
8.title属性
<p title="HTML5教程">HTML5</p>
解释：对元素的内容进行额外的提示。
9.tabindex属性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解释：表单中按下 tab键，实现获取焦点的顺序。如果是-1，则不会被选中。
10.style属性
<p style="color:red;">CSS样式</p>
解释：设置元素行内 CSS样式。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
