HTML 第十二章总结

HTML5 markup

前言

在这一章中，讲解了新的 HTML5 的一些 markup,并且对其中的<video>进行了很详细的讲解。

New HTML5 elements

列表如下：

• <header> *<footer>
• <article>
• <nav>: contains content meant for navigation links in the page
• <section>
• <video>
• <aside>:usually for callouts and sidebars

这样做的目的是为了让 you, 和 web developers 更加 easier to read.

关于<time>

是用来表示时间的，一般的形式为<time datatime="2012-12-8">2/18/2012</time>其中的第一个参数，datatime 的作用是 :The datatime attribute is required if the content of the element isn't written using the offical Internet date/time format，所谓的 offical internet date/time format 指的是：2012-02-18 18:00Z 这样类似的格式，可以只写年，或者只写年月，时间为24小时制，其中的Z表示这是一个 UTC(GMT) time.

Completing the navigation

这里，作者介绍了制作导航的步骤：

在 HTML 中：

1. 写一系列的链接
2. 然后 wrap those anchors in an unordered list
3. 在目前的网页的opening tag 加一个 id

在 CSS 中

1. ul{list-style-type:none;}这一个 property 用来 remove the bullets from the list items
2. ul li{display:inline;}改变 dispay 这一 property 使得 display of each list item from"block" to "inline".
3. 设置目前的所在网页的 link 的样式，比如：改变其背景的颜色。

关于<video>

<video>的一些property

<video>与<img>有很多相同之处：

1. width 和 height:可以更改视频的 width 和 height ，然后视频会进行相应的缩放，但是会保持比例。
2. src 用来表示视频的来源

<video>其他的 property:

• controls:是一个 boolean 值，用来控制 visitor 是否能够控制视频的进度，音量
• autoplay:是一个 boolean 值，用来控制视频是否自动播放。
• poster:可以设置 src 进行显示，当没有 autoplay 的时候，用于作为视频的显示画面。
• loop：是一个 boolean 值，loop automatically restarts the video after it finishes playing.
• preload 是一个用于控制视频加载的参数，当它的值为 none 的时候，视频不进行加载直到 visitor 点击之后，当它的值为 metadata 的时候，只加载 metadata 但是不加载 video content。

视频格式的问题

由于存在众多的视频格式，而且每种浏览器所支持的视频格式有所不同，所以需要对视频格式进行一定的了解。
视频包含了两个部分： video 和 audio ，这两个部分用不同的方式进行 encode，然后包含 video 和 audio 的 encoding 的 file 叫做 container，比较常见的几种container 有：MP4,Ogg,WebM.
其中，用于 encode 和 decode 的 software 叫做 codec。
所以，为了保证所有的 visitor 视频内容都能够正常地显示，可在 <video>中添加一些 metadata，其中的<video>tag 用来 specifying mutiple video files代码如下：

<video controls  width="512" height="288"
poster="images/poster.png" id="video">
	<source src = "video/tweetsip.mp4"
	 type='video/mp4; codec="avc1.420E01E,mp4a.40.2"'>
	<source src = "video/tweetsip.webm" type='video/webm; codecs="vp8,vorbis"'>
	<source src = "video/tweetsip.ogv" type='video/ogg; codec="theora,vorbis"'>
	<p>Sorry,your browser doesn't support the video element</p>
	</video>fr