H5知识点大总结勾起你的欲望 / 憋错料

第 2 章基本格式

学习要点：

1.HTML5 文档结构

2.文档结构解析

3.元素标签探讨

本章主要先从 HTML5 的文档结构谈起。这些基础元素确定了HTML 文档的轮廓以及浏览器的初始环境。几乎所有页面都必须首先键入这些元素。

一．HTML5 文档结构1.第一步：打开 Sublime Text 3，打开指定文件夹；

2.第二步：保存 index.html文件到磁盘中，.html是网页后缀；

3.第三步：开始编写 HTML5的基本格式。

<!DOCTYPE html>
//文档类型声明

<html lang="zh-cn">
//表示 HTML
文档开始

<head> //包含文档元数据开始

<title>基本结构</title>//设置文档标题

</head> //包含文档元数据结束

<body> //表示 HTML文档内容

<a href="http://www.baidu.com">百度</a>//一个超链接元素（标签）

</body> //表示 HTML

</html> //表示 HTML文档结束

二．文档结构解析

1.Doctype

文档类型声明（Document Type Declaration，也称Doctype）。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和
XHTML1.0 中，它表示具体的
HTML 版本和风格。而如今
HTML5 不需要表示版本和风格了。

<!DOCTYPE html>
//不分区大小写

2.html 元素

首先，元素就是标签的意思，html 元素即html 标签。html 元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文。

<html lang="zh-cn">
//如果是英文则为 en

3.head 元素

用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息，比如 link提供 CSS
信息，script提供JavaScript 信息，title 提供页面标题等。

<head>...</head>
//这些信息在页面不可见

4.meta 元素

这个元素用来提供关于文档的信息，起始结构有一个属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8即可正确显示中文。

5.title 元素

这个元素很简单，顾名思义：设置浏览器左上角的标题。

<title>基本结构</title>

6.body 元素

用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这个元素内部进行添加。

<body>...</body>

7.a 元素

一个超链接，后面会详细探讨。

<a href="http://www.baidu.com">百度</a>

三．元素标签探讨

HTML 是一种标记语言，刚才的结构我们已经详细探讨过。这里，我们再剖析一下这些“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。

1.元素

元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字，比如<body>、<title>、<meta>都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。

元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用<meta>，插入图片就用<img>；双标签一般用于设置一段区域的内容，将其包含起来，比如段落<p>...</p>。

2.属性和值

元素除了有单双之分，元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如超链接：<a>中的href 属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。

第 3 章文本元素

学习要点：1.文本元素总汇2.文本元素解析

本章主要探讨 HTML5 中的文本元素，所谓文本元素，就是将一段文本设置成相匹配的结构和含义。

一．文本元素总汇

HTML5 规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。

元素名称	说明

a	生成超链接

br	强制换行

wbr	可安全换行

b	标记一段文字但不强调

strong	表示重要

i	表示外文或科学术语

em	表示强调

code	表示计算机代码

var	表示程序输出

samp	表示变量

kdb	表示用户输入

abbr	表示缩写

cite	表示其他作品的标题

del	表示被删除的文字

s	表示文字已不再确认

dfn	表示术语定义

mark	表示与另一段上下文有关的内容

q	表示引自他处的内容

rp	与 ruby 元素结合使用，标记括号

rt	与 ruby 元素结合使用，标记括号

ruby	表示位于表意文字上方或右方的注音符号

bdo	控制文字的方向

small	表示小号字体内容

sub	表示下标字体

sup	表示上标字体

time	表示时间或日期

u	标记一段文字但不强调

span	通用元素，没有任何语义。一般配合 CSS 修饰。

从上面这张表格中，我们发现文本元素还是非常多的。但实际上，在现实应用中，真正常用的也就是那么几个，绝大部分是针对英文的。

二．文本元素解析1.<b>表示关键字和产品名称

<b>HTML5</b>

解释：<b>元素实际作用就是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。

2.<strong>表示重要的文字

<strong>HTML5</strong>

解释：<strong>元素实际作用和<b>一样，就是加粗。从语义上来看，就是强调一段重要的文本。

3.<br>强制换行、<wbr>安全换行

<br>

Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.

解释：在任意文本位置键入<br>都会被换行，而在英文单词过长时使用<wbr>会根据浏览器的宽度适当的裁切换行。

4.<i>表示外文词汇或科技术语

<i>HTML5</i>

解释：<i>元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性。

5.<em>加以强调

<em>HTML5</em>

解释：<em>元素实际作用和<i>一样，就是倾斜；从语义上来看，表示对一段文本的强

调。

6.<s>表示不准确或校正

<s>HTML5</s>

解释：<s>元素实际作用就是删除线；从语义上来看，表示不准确的删除。

7.<del>表示删除文字

<del>HTML5</del>

解释：<del>元素实际作用和<s>一样，就是删除线；从语义上来看，表示删除相关文

字。

8.<u>表示给文字加上下划线

<u>HTML5</u>

解释：<u>元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本。

9.<ins>添加一段文本

<ins>HTML5</ins>

解释：<ins>元素实际作用和<u>一样，加一条下划线；从语义上来看，是添加一段文本，起到强调的作用。

10.<small>添加小号字体

<small>HTML5</small>

解释：<small>元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。

11.<sub><sup>添加上标和下标

<sub>5</sub>

<sup>5</sup>

解释：<sub>和<sup>元素实际作用就是数学的上标和下标。语义也是如此。

12.<code>等表示输入和输出

<code>HTML5</code>

<var>HTML5</var>

<samp>HTML5</samp>

<kdb>HTML5</kdb>

解释：<code>表示计算机代码片段；<var>表示编程语言中的变量；<samp>表示程序或计算机的输出；<kdb>表示用户的输入。由于这属于英文范畴的，必须将lang="en"英语才能体现效果。

13.<abbr>表示缩写

<abbr>HTML5</abbr>

解释：<abbr>元素没有实际作用；从语义上看，是一段文本的缩写。

14.<dfn>表示定义术语

<dfn>HTML5</dfn>

解释：<dfn>元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。

15.<q>引用来自他处的内容

<q>HTML5</q>

解释：<q>元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。

16.<cite>引用其他作品的标题

<cite>HTML5</cite>

解释：<cite>元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。

17.<ruby>语言元素

<ruby>

饕<rp>(</rp><rt>tāo</rt><rp>)</rp>

餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby>

解释：<ruby>用来为非西方语言提供支持。<rp><rt>用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前Firefox 还不支持此特性。

18.<bdo>设置文字方向 <bdo dir="rtl">HTML5</bdo>

解释：<bdo>必须使用属性dir 才可以设置，一共两个值：rtl（从右到左）和ltr（从左到右）。一般默认是ltr。还有一个<bdi>元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。

19.<mark>突出显示文本 <mark>HTML5</mark>

解释：<mark>实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。

20.<time>表示日期和时间 <time>2015-10-10</time>

解释：<time>元素没有实际作用；从语义上来看，表示日期和时间。

21.<span>表示一般性文本 <span>HTML5</span>

解释：<span>元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置CSS 等操作。

第 4 章超链接和路径

学习要点：1.超链接的属性2.相对与绝对路径3.锚点设置

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

题。

一．超链接的属性

<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细探讨。

属性名称	说明

href	指定<a>元素所指资源的URL

hreflang	指向的链接资源所使用的语言

media	说明所链接资源用于哪种设备

rel	说明文档与所链接资源的关系类型

target	指定用以打开所链接资源的浏览环境

type	说明所链接资源的 MIME 类型（比如text/html）

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

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
在新窗口或标签页中打开文档

_parent	在父窗框组（frameset）中打开文档

_self	在当前窗口打开文档（默认）

_top	在顶层窗口打开文档

这四种最常用的是_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/index2.html；在父目录：../index2.html；在爷爷目录：../../index2.html；

三．锚点设置

超链接也可用来将同一个文档中的另一个元素移入视野。通过属性 id 或name 实现锚点定位。

//链接

第 5 章分组元素

学习要点：1.分组元素总汇2.分组元素解析

本章主要探讨 HTML5 中分组元素的用法。所谓分组，就是用来组织相关内容的HTML5 元素，清晰有效的进行归类。

一．分组元素总汇为了页面的排版需要，HTML5 提供了几种语义的分组元素。

元素名称	说明

p	表示段落

div	一个没有任何语义的通用元素，和 span 是对应元素

blockquote	表示引自他出的大段内容

pre	表示其格式应被保留的内容

hr	表示段落级别的主题转换，即水平线

ul,ol	表示无序列表，有序列表

li	用于 ul,ol 元素中的列表项

dl,dt,dd	表示包含一系列术语和定义说明的列表。dt 在dl 内部表示
dl,dt,dd	术语，一般充当标题；dd 在dl 内部表示定义，一般是内容。
	术语，一般充当标题；dd 在dl 内部表示定义，一般是内容。
figure	表示图片

figcaption	表示 figure 元素的标题

二．分组元素解析

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>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。

5.<hr>添加分隔

<hr>

解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。

6.<ul><li>添加无序列表

</ul>

解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。

7.<ol><li>添加有序列表

</ol>

解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三种属性。

	ol 元素属性
属性名称	说明

start	从第几个序列开始统计：<ol start="2">

reversed	是否倒序排列：<ol reversed>，一半主流浏览器不支持

type	表示列表的编号类型，值分别为：1、a、A、i、I

	li 元素属性

属性名称	说明

value	强行设置某个项目的编号。

<li value="7">王五</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>

解释：这两个元素一般用于图片的布局。

第 6 章表格元素

学习要点：1.表格元素总汇2.构建表格解析

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

据。

一．表格元素总汇

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

元素名称	说明

table	表示表格

thead	表示标题行

tbody	表示表格主体

tfoot	表示表脚

tr	表示一行单元格

th	表示标题行单元格

td	表示单元格

col	表示一列

colgroup	表示一组列

caption	表示表格标题

二．构建表格解析

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 则，控制多列。

第 7 章文档元素

学习要点：1.文档元素总汇2.文档元素解析

本章主要探讨 HTML5 中文档元素，文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代div。

一．文档元素总汇文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。

元素名称	说明

h1~h6	表示标题

header	表示首部

footer	表示尾部

nav	表示有意集中在一起的导航元素

section	表示重要概念或主题

article	表示一段独立的内容

address	表示文档或 article 的联系信息

aside	表示与周边内容少有牵涉的内容

hgroup	将一组标题组织在一起

details	生成一个区域，用户将其展开可以获得更多细节

summary	用在 details 元素中，表示该元素内容的标题或说明

二．文档元素解析

文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。

1.<header>表示首部

<header>

这里部分一般是页面头部，包括：LOGO、标题、导航等内容

</header>

解释：<header>元素主要设置页面的标头部分。

2.<footer>表示尾部

<footer>

</footer>

解释：<footer>元素主要设置页面的尾部。

3.<h1>~<h6>添加标题

<h1>标题部分</h1> <h4>小标题部分</h4>

解释：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。

4.<hgroup>组合标题

<hgroup> <h1>标题部分</h1> <h4>小标题部分</h4>

</hgroup>

解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。

5.<section>文档主题

<section>

这里一般是存放文档主题内容。

</section>

解释：<section>元素的作用是定义一个文档的主题内容。

6.<nav>添加导航

<nav>这里存放文档的导航</nav>

解释：<nav>元素给文档页面添加一个导航。

7.<article>添加一个独立成篇的文档

<article>

<header>

<nav></nav>

</header>

<section></section>

<footer></footer>

</article>

解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。

8.<aside>生成注释栏

<aside>这是是一个注释</aside>

解释：<aside>元素专门为某一段内容进行注释使用。

9.<address>表示文档或 article元素的联系信息。

<address>联系信息</address>

解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息。

10.<details>元素生成详情区域、<summary>元素在其内部生成说明标签

解释：由于大多数主流浏览器尚未支持，暂略。

第 8 章嵌入元素

学习要点：1.嵌入元素总汇2.嵌入元素解析

本章主要探讨 HTML5 中嵌入元素，嵌入元素主要功能是把外部的一些资源插入到

HTML 中。

一．嵌入元素总汇

这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频video、以及动态图像canvas 和媒体资源source、track 等会在后面章节或季度讲解。

元素名称	说明

img	嵌入图片

map	定义客户端分区响应图

area	表示一个用户客户端分区响应图的区域

audio	表示一个音频资源

video	表示一个视频资源

iframe	嵌入一个文档

embed	用插件在 HTML 中嵌入内容

canvas	生成一个动态的图形画布

meter	嵌入数值在许可值范围背景中的图形表示

object	在 HTML 文档中嵌入内容

param	表示将通过 object 元素传递给插件的参数

progress	嵌入目标进展或任务完成情况的图形表示

source	表示媒体资源

svg	表示结构化矢量内容

track	表示媒体的附加轨道（例如字幕）

二．嵌入元素解析

1.<img>嵌入图像

解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。

	img 的私有属性
属性名称	说明

src	嵌入图像的 URL

alt	当图片不加载时显示的备用内容

width	定义图片的长度（单位是像素）

height	定义图片的高度（单位是像素）

ismap	创建服务器端分区响应图

usemap	关联<map>元素

2.<map>创建分区响应图

</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>元素可以显示一个进度条，一般通过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 浏览器不支持此元素。

第 9 章音频和视频

学习要点：1.音频和视频概述

2.video 视频元素 3.audio音频元素

本章主要探讨 HTML5 中音频和视频元素，通过这两个原生的媒体元素向HTML 页面中嵌入音频和视频。

一．音频和视频概述

首先，我们要理解两个概念：容器（container）和编解码器(codec)。

1.视频容器

音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、

.ogg、.webm。

2.编解码器

音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg
Voribs，

视频编解码器：H.264、VP8、Ogg Theora。

3.浏览器支持情况

起初，HTML5 规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一规范的要求，导致各个浏览器实现自己的标准。

容器格式	视频编解码	音频编解码	IE9+	Firefox5+	Chrome13+

WebM	VP8	Vorbis	×	√	√

OGG	Theora	Vorbis	×	√	√

MPEG-4	H.264	AAC	√	×	疑问？

除了上面三款浏览器，还有 Safari5+支持MPEG-4,Opera11 支持WebM 和
OGG，通过这组数据，只要备好
MP4 和
OGG 格式的即可，但对于新的高清标准WebM，当然是非常必要的。因为WebM 不但清晰度高，而且免费，不受限制许可的使用源码和专利权。

目前 Chrome 浏览器，为了推广WebM 格式的视频。声称未来将放弃H.264 编码的视频，所以有可能在以后的版本中无法播放MP4 的视频。当然，目前演示的版本还是支持的。

二．video 视频元素

以往的视频播放，需要借助 Flash 插件才可以实现。但Flash 插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是HTML5 的
video 元素。

	<video>元素的属性
属性名称	说明

src	视频资源的 URL

width	视频宽度

height	视频高度

autoplay	设置后，表示立刻开始播放视频

preload	设置后，表示预先载入视频

controls	设置后，表示显示播放控件

loop	设置后，表示反复播放视频

muted	设置后，表示视频处于静音状态

poster	指定视频数据载入时显示的图片

1.嵌入一个 WebM视频

解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg 等。src 表示资源

URL；width表示宽度；height表示高度。

2.附加一些属性

解释：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.兼容多个浏览器

解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

二．audio 音频元素

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

属性名称	说明

src	视频资源的 URL

autoplay	设置后，表示立刻开始播放视频

preload	设置后，表示预先载入视频

controls	设置后，表示显示播放控件

1.嵌入一个音频

解释：和嵌入视频一个道理。

2.兼容多个浏览器

</audio>

解释：略。

PS：更多设计到 API的 JavaScript控制，将在以后的基于 JavaScript基础后讲解。

第 10 章表单元素[上]

学习要点：1.表单元素总汇2.表单元素解析

本章主要探讨 HTML5 中表单元素，表单元素用于获取用户的输入数据。

一．表单元素总汇

在 HTML5 的表单中，提供了各种可供用户输入的表单控件。

元素名称	说明

form	表示 HTML 表单

input	表示用来收集用户输入数据的控件

textarea	表示可以输入多行文本的控件

select	表示用来提供一组固定的选项

option	表示提供提供一个选项

optgroup	表示一组相关的 option 元素

button	表示可用来提交或重置的表单按钮（或一般按钮）

datalist	定义一组提供给用户的建议值

fieldset	表示一组表单元素

legend	表示 fieldset 元素的说明性标签

label	表示表单元素的说明标签

output	表示计算结果

二．表单元素解析

1.<form>定义表单

</form>

解释：<form>元素主要是定义本身是一组表单。

元素名称

说明

action 表示表单提交的页面

method	表示表单的请求方式：有 POST 和GET 两种，默认 GET

	表示浏览器对发送给服务器的数据所采用的编码格式。有三
	种：application/x-www-form-urlencoded（默认编码，
enctype	不能将文件上传到服务器）、multipart/form-data（用
	于上传文件到服务器）、text/plain（未规范的编码，不
	建议使用，不同浏览器理解不同）

name	设置表单名称，以便程序调用

target	设置提交时的目标位置：_blank、_parent、_self、_top

autocomplete	设置浏览器记住用户输入的数据，实现自动完成表单。默认
autocomplete	为 on 自动完成，如果不想自动完成则设置off。

novalidate	设置是否执行客户端数据有效性检查，后面课程讲解。

//使用 get提交数据

method="get"

//丧失自动提示功能

autocomplete="off"

//使用_blank新建目标 target="_blank"

2.<input>表示用户输入数据

解释：<input>元素默认情况会出现一个单行文本框，有五个属性。

属性名称	说明

autofocus	让光标聚焦在某个 input 元素上，让用户直接输入

disabled	禁用 input 元素

autocomplete	单独设置 input 元素的自动完成功能

form	让表单外的元素和指定的表单挂钩提交

type	input 元素的类型，内容较多，将在下节课展开讲解

name	定义 input 元素的名称，以便接收到相应的值

//聚焦光标

//禁用 input

//禁止自动完成

//表单外的 input<form method="get" id="register">

...

</form>

3.<label>添加说明标签

解释：<label>元素可以关联input，让用户体验更好。且更加容易设置CSS 样式。

4.<fieldset>对表单进行编组

解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。

属性名称	说明

name	给分组定义一个名称

form	让表单外的分组与表单挂钩

disabled	禁用分组内的表单

5.<legend>添加分组说明标签

</fieldset>

解释：<legend>元素给分组加上一个标题。

6.<button>添加按钮

解释：<button>元素添加一个按钮，type 属性有如下几个值：

值名称	说明

submit	表示按钮的作用是提交表单，默认

reset	表示按钮的作用是重置表单

button	表示按钮为一般性按钮，没有任何作用

//提交表单

//重置表单

//普通按钮

对于 type 属性为submit 时，按钮还会提供额外的属性。

属性名称	说明

form	指定按钮关联的表单

formaction	覆盖 form 元素的action 属性

formenctype	覆盖 form 元素的enctype 属性

formmethod	覆盖 form 元素的method 属性

formtarget	覆盖 form 元素的target 属性

formnovalidate	覆盖 form 元素的novalidate 属性

//表单外关联提交

时间： 2024-07-31 03:38:35

H5知识点大总结勾起你的欲望

H5知识点大总结勾起你的欲望的相关文章

android知识点大总结

8.4 H5知识点总结

c++0.1-----不包含指针的类~~~知识点大综合

web前端开发H5知识点

java中接口知识点大总结

小知识点大总结（常用，必会）

大爆炸

大数据知识学习及云计算

微信小程序-开心大转盘（圆盘指针）代码分析