一、表格元素

HTML5中表格元素的用法。表格的主要用途是以网格的形式显示二维数

1、表格元素总汇

表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。

2、构建表格解析

1.<table><tr><td>构建基础表格

解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个border属性，设置为1即可显示边框。
2.<th>为表格添加标题单元格
解释：<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。<th><td>均属于单元格，包含两个合并属性：colspan、rowspan等。
3.<thead>添加表头
解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
4.<tfoot>添加表脚
解释：<tfoot>元素为表格生成表脚，限制在表格的底部。
5.<tbody>添加表主体
解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续CSS和JavaScript的控制。
6.<caption>添加表格标题
解释：<caption>元素给表格添加一个标题。
7.<colgroup>设置列
解释：<colgroup>元素是为了处理某个列，span属性定义处理哪些列。1表示第一列，2表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。
8.<col>更灵活的设置列
解释：<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>插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源URL；width表示宽度；height表示高度。

2.附加一些属性

解释：autoplay表示自动开始播放；controls表示显示播放控件；loop表示循环播放；muted表示静音。
3.预加载设置
解释：preload属性有三个值：none表示播放器什么都不加载；metadata表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto表示请求浏览器尽快下载整个视频。
4.使用预览图
解释：poster属性表示在视频的第一帧，做一张预览图。
5.兼容多个浏览器
解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

3、audio音频元素

和video元素一样，audio元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用<source>元素引入多种格式兼容即可。主流的音频格式有：.mp3，.m4a，.ogg，.wav。

1.嵌入一个音频

解释：和嵌入视频一个道理。
2.兼容多个浏览器

三、全局属性和其他

HTML5中的HTML实体、以及HTML核心构成的元数据，了解一下HTML中的全局属性。

1、实体

HTML实体就是将有特殊意义的字符通过实体代码显示出来。

2、元数据

<meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta>元素。

1.指定名/值元数据对

2.声明字符编码
3.模拟HTTP标头字段

3、全局属性

在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如id。全局属性是所有元素共有的行为，HTML5还提供了一些其他的全局属性。

1.id属性

解释：id属性给元素分配一个唯一标识符。这种标识符通常用来给CSS和JavaScript调用选择元素。一个页面只能出现一次同一个id名称。
2.class属性
解释：class属性用来给元素归类。通过是文档中某一个或多个元素同时设置CSS样式。
3.accesskey属性
解释：快捷键操作，windows下alt+指定键，前提是浏览器alt并不冲突。
4.contenteditable属性
解释：让文本处于可编辑状态，设置true则可以编辑，false则不可编辑。或者直接设置属性。
5.dir属性 解释：让文本从左到右（ltr），还是从右到左（rtl）。
6.hidden属性
解释：隐藏元素。
7.lang属性
解释：可以局部设置语言。
8.title属性
解释：对元素的内容进行额外的提示。
9.tabindex属性
解释：表单中按下tab键，实现获取焦点的顺序。如果是-1，则不会被选中
10.style属性
解释：设置元素行内CSS样式。

四、超链接和路径

HTML5中文本元素最重要的一个超链接，探讨它自身的属性以及路径问题。

1、超链接的属性

<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。（上边全局属性）

在这几个属性当中，只有href和target一般比较常用，而href是必须要用的。其他几个属性，在<a>元素使用较少。

1.href属性

解释：href是必须属性，否则<a>元素就变成空元素了。如果属性值是http://开头的URL，意味着点击跳转到指定的外部网站。
2.target属性
解释：target属性告诉浏览器希望将所链接的资源显示在哪里。

这四种最常用的是_blank，新建一个窗口。而_self是默认，当前窗口打开。_parent和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而 HTML5中，框架基本被废弃，只能使用<iframe>元素，且以后大量结合JavaScript和PHP等语言配合，框架用的就很少了。

2、相对与绝对路径

所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链接到另一个页面。

1.绝对路径

解释：首先是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实现锚点定位。