一、表格元素

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、元数据

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>

HTML5（李炎恢）学习笔记四 ------------- HTML5元素（中）相关推荐

angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head>< ...
PHP第一季视频教程.李炎恢.学习笔记（一）（第1章 PHP概述(1)、(2)、(3)）
<?php header("Content-Type: text/html; charset=utf-8");echo '此文本,请保存成PHP文件后,在浏览器中打开.'.' ...
【Java学习笔记四】Java中的包
包的声明和引入:在Java语言系统中,Java编译器为每一个类生成一个字节码文件(.class),为了对类文件进行分层和按用途分类管理,同时也为了解决相同类名的文件冲突的问题,Java提供了包机制来管 ...
MySQL高级学习笔记(四)
文章目录 MySQL高级学习笔记(四) 1. MySql中常用工具 1.1 mysql 1.1.1 连接选项 1.1.2 执行选项 1.2 mysqladmin 1.3 mysqlbinlog 1.4 ...
吴恩达《机器学习》学习笔记四——单变量线性回归（梯度下降法）代码
吴恩达<机器学习>学习笔记四--单变量线性回归(梯度下降法)代码一.问题介绍二.解决过程及代码讲解三.函数解释 1. pandas.read_csv()函数 2. DataFrame ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
华清远见fs4412开发板学习笔记(四)
fs4412开发板学习笔记(四) 今天的课程安排 1.复习 1.1 VIM 编辑器 [1] vim + filename 打开 [2] 工作模式命令模式编辑模式底行模式 [3] 模式切换命令- ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

HTML5（李炎恢）学习笔记四 ------------- HTML5元素（中）