一、表格元素
HTML5中表格元素的用法。表格的主要用途是以网格的形式显示二维数
1、表格元素总汇
表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。
2、构建表格解析
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>添加表头
<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>元素给表格添加一个标题。
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则，控制多列。
二、音频和视频
HTML5中音频和视频元素，通过这两个原生的媒体元素向HTML页面中嵌入音频和视频。
1、频和视频概述
首先，我们要理解两个概念：容器（container）和编解码器(codec)。
1.视频容器
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2.编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。
主流的音频编解码器：AAC、MPEG-3、Ogg_Voribs，
视频编解码器：H.264、VP8、Ogg_Theora。
2、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">
</video>解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。
3、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>
三、全局属性和其他
HTML5中的HTML实体、以及HTML核心构成的元数据，了解一下HTML中的全局属性。
1、实体
HTML实体就是将有特殊意义的字符通过实体代码显示出来。
2、元数据
<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">
3、全局属性
在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如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样式。
四、超链接和路径
HTML5中文本元素最重要的一个超链接，探讨它自身的属性以及路径问题。
1、超链接的属性
<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。（上边全局属性）
在这几个属性当中，只有href和target一般比较常用，而href是必须要用的。其他几个属性，在<a>元素使用较少。
1.href属性
<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等语言配合，框架用的就很少了。
2、相对与绝对路径
所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从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/index2.html；
在父目录：../index2.html；
在爷爷目录：../../index2.html；
3、锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。通过属性id或name实现锚点定位。
//链接
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
//锚点
<a name="1"></a>
<a id="3"></a>
7419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
