Chapter12 HTML5标记

一些简单的HTML5标签

<article> ：表示页面中独立的一个组成部分，如一个博客帖子、用户论坛帖子
<nav> ：作为导航栏的链接
<header> ：页面顶部的区块
<footer> ：页面下部的区块
<time> ：表示一个时间或日期
<section>：一个主题性内容分组，通常包含header，可能还有footer
<aside> ：包含内容是对页面的补充，，如插图或边栏　
<video> : 包含视频媒体
<mark> :突出显示文本
<progress>:进度条
<meter> :显示某个范围的度量
<audio> :包含声音的内容
<canvas> :显示JS绘制的图像
<figure> :照片、图表或类似代码清单的内容

---

这个网站可以查看浏览器对于HTML5新元素的支持情况

---

导航栏

HTML

放在页面<header>后：
<nav> <ul> <li class="selected"><a href="index.html">HOME</a></li> <li><a href="blog.html">BLOG</a></li> <li><a href="">INVENTIONS</a></li> <li><a href="">RECIPES</a></li> <li><a href="">LOCATIONS</a></li> </ul> </nav>

CSS

nav { background-color: #efe5d0; margin: 10px 10px 0px 10px; } nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; } nav ul li { display: inline; padding: 5px 10px 5px 10px; } nav ul li a:link, nav ul li a:visited { color: #954b4b; border-bottom: none; font-weight: bold; }

---

<video>标签的使用

<video controls autoplay width="512" height="288" src="video/tweetsip.mp4" poster="images/poster.png"> </video>

<video>标签的属性

contrals:播放器会提供一些视频的控件（控件外观由浏览器决定）；
autoplay:若有autoplay属性，加载完页面后，视频自动播放；
width&height:控制播放器窗口大小；
src:视频的源位置；
poster:视频未播放时，可以显示这个图片；
loop:若有·这个属性，视频播放结束后会自动重新开始播放；
preload:=none时在用户真正打开视频前不下载视频，=matadata时下载视频元数据但不下载视频内容

---

不同的浏览器，支持的视频格式不同

1. MP4容器：H.264视频&AAC音频
   支持的浏览器：Safari、IE9+以及有些版本的Chrome

2. WebM容器：VP8视频&Vorbis音频
   支持的浏览器：Firefox、Chrome和Opera

3. Ogg容器：Theor视频和Vorbis音频
   支持的浏览器：Firefox、Chrome和Opera

这里可以查到最新的浏览器对视频的支持信息

---