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 中：

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

在 CSS 中

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

关于`<video>`

`<video>`的一些property

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

width 和 height:可以更改视频的 width 和 height ，然后视频会进行相应的缩放，但是会保持比例。
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