第十二章 HTML5标记
新的html5元素
<article> //表示页面中一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道
<nav> //所包含的内容将作为页面的导航链接
<header> //放在页面顶部的内容，或者放在页面某个区块的顶部
<footer> //放在页面底部的内容，或者放在页面某个区块的底部
<time> //可能包含一个日期或时间，也可能同时包含日期和时间
<aside> //包含的内容是对页面的补充，如插图或边栏
<section> //一个主题性内容分组，通常包含一个首部（header），可能还有一个底部（footer）
<video> //用来为页面增加视频媒体这些元素大多是用来代替div，让页面更有逻辑性的。
<section>和<article>的区别：如果只是要增加一个元素以便为页面指定样式，那么可以使用<div>；如果要增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块，那就可以使用<section>；如果有些内容可以独立于页面上的其余内容进行重用和分发，那就使用<article>。
<time>标记
在html5之前，日期往往可以采用自由的方式创建，增加日期时可以根本不做标记，或者使用一个<span>甚至<p>来标记。不过现在我们有了一个专门完成这个任务的元素：<time>元素。
下面现在看一个<time>元素：
<time datetime="2012-02-18">2/18/2012</time>
如果使用datetime属性来指定一个日期或一个时间，可以写你希望的任何元素内容。通常，这可能是某个与日期或时间相关的文本，如”February18, 2012“或者甚至可以是”yesterday“或”now“。
下面看一些使用官方格式表示日期和时间：
2012-02
2012 //可以只指定年和月，或者只指定年
2012-02-18 09:00
2012-02-18 18:00 //可以按24小时制增加一个时间
05:00 //可以只指定一个时间
2012-02-18 05:00Z //如果在日期和时间后面有一个Z，这表示UTC时间<video>标记
先来看一个<video>标记：
<video controls autoplay width="512" height="288" src="video/tweetsip.mp4" poster="images/poster.png" id="video">
</video>
如果有autoplay属性，一旦页面接在视频就会开始播放；
width和height属性用于设置页面中视频的宽度和高度；
src是视频的源位置；
如果愿意，可以通过poster属性提供一个可选的海报图像，视频未播放的时候就会显示这个图像。
当然，也可以为<video>元素增加一个id，以方便对它应用某些样式。
controls：是一个布尔属性。可以有，也可以没有。如果有这个属性，浏览器就会为视频显示增加内置的控件。不同的浏览器提供的控件有所不同，所以要查看各个浏览器，看看会有哪些控件。
autoplay：也是一个布尔属性。它告诉浏览器一旦有了足够的数据就开始播放视频。也就是打开页面就自动播放视频。
poster：浏览器通常会把视频的一帧显示为”海报“图像，来表示这个视频。如果你删除了autoplay属性，单击播放之前就会看到这个图像。要由浏览器来选择显示哪一帧。通常，浏览器会显示视频的第一帧...这往往是一个黑屏。如果你想显示某个特定的图像，要由你来创建想显示的图像，并使用poster属性来指定。
loop：这也是一个布尔属性，如果有loop属性，视频结束播放之后会自动重新开始播放视频。
src：src属性与<img>元素的src很类似，这是一个URL，告诉video元素在哪里查找源文件。
preload：属性preload通常用于细粒度地控制视频如何加载，来实现优化。大多数情况下，浏览器会根据是否设置autoplay以及用户的带宽来选择加载多少视频。可以覆盖这种设置，将preload设置为”none“（在用户真正播放视频之前不下载视频），也可以设置为”metadata“（下载视频元数据，但不下载视频内容），或者可以设置为”auto“，让浏览器来做决定。
width和height：这两个属性会设置视频显示区（也称为视窗）的宽度和高度。如果指定了一个海报（poster），海报图像会缩放到你指定的宽度和高度。视频也会缩放，不过会保持其宽高比（例如4:3或16:9），所以，如果两边或者上下边有多余的空间，视频会采用上下加黑边或者左右加黑边的模式来适应显示区的大小。如果你想要得到最佳的性能，就应该尽量采用视频原本的尺寸（这样浏览器就不用实时缩放视频了）。
HTML5规范允许采用任何视频格式。具体支持哪些格式由浏览器实现来确定。
如果想处理所有的视频格式，使它们在所有的浏览器上都能够有很好的支持，可以在<video>元素中使用<source>元素，这样就能提供一组视频，每个视频分别有自己的格式，可以让浏览器选择它支持的第一种格式。如下：
<video controls autoplay width="512" height="288"> //这里就不需要src属性了
<source src="video/tweetsip.mp4">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.ogv"> //设置三种视频格式
<p>Sorry, your browser doesn't support the video element</p> //如果浏览器还是找不到支持的格式，就会显示这个文本
</video>容器是用来包装视频、音频和元数据信息的文件格式。常用的容器格式包括MP4、WebM、Ogg和Flash Video。
编解码器是用来对一种特定视频或或音频编码完成编码和解码的软件。流行的Web编解码器包括：H.264、VP8、Theora、ACC和Vorbis。
要由浏览器决定可以对哪种格式的视频编码，不过并不是所有浏览器制造商都达成了一致，所以如果你想支持所有视频就需要多种编码。
如何更具体的指定视频格式
可以告诉浏览器视频源文件的位置，让它在不同版本中做出选择。不过，浏览器具体确定是否可以播放一个文件之前，还需要做一些侦查工作。你可以为浏览器提供更多帮助，给出有关视频文件的MIME类型和编解码器（可选）的更多信息：
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
type是一个可选属性，这是向浏览器提供的一个提示，帮助它确定能不能播放这种类型的文件。
video/ogg是视频文件的MIME类型。指定了容器格式。
video/ogg是视频文件的MIME类型。指定了容器格式。
codecs参数指定使用哪个编解码器对视频和音频编码，来创建编码的视频文件，第一个参数是视频的编解码器，第二个参数是元素的编解码器。
注意codecs参数的双引号。这说明type属性两边都需要使用单引号。
如果不知道codecs参数，可以省略。只使用MIME类型，这样效率会低一点，不过大多数情况下都还能接受。
<video poster="video.jpg" controls>
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
<object>....</object>
</video>本章提到的一些元素
<aside> //这个元素用于表示放在主内容旁边的内容，比如边栏或者引用
<section> //可以使用这个元素定义文档的主要区块
<footer> //这个元素定义一个区块的底部或整个文档的页脚
<header> //有首部的区块和整个文档的页眉可以使用这个元素
<video> //想在页面中加入一个视频要用到<video>元素
<article> //用来标记类似新闻报道或博客帖子等独立的内容
<nav> //使用这个元素把网站中用于导航的所有链接组织在一起
<time> //time元素是一个时间、一个日期或者一个日期时间
<progress> //需要显示任务的完成进度吗?比如完成了90%?可以使用这个元素
<mark> //这个元素用于突出显示某些文本，就像记号笔一样
<meter> //需要显示某个范围的度量?比如一个从0~212度的温度计
<audio> //可以用它在页面中包含声音内容
<canvas> //这个元素用来在页面中显示用Javascript绘制的图像和动画
<figure> //这个元素用来定义类似照片、图表甚至代码清单等独立的内容
2124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
