HTMl5初学笔记---新元素

现代的浏览器都支持 HTML5。
此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。
HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

// 实例
header, section, footer, aside, nav, main, article, figure {  display: block;  }

canvas新元素

标签定义图形 比如图表和其他图像

<canvas id="myCanvas"></canvas>
 
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

canvas详解链接

新多媒体元素

元素	作用
audio	定义音频
video	定义视频
source	定义多媒体资源video和audio
embed	定义迁入的内容
track	为诸如video和audio元素之类的媒介规定外部文本轨道 也就是字幕 字幕格式有.vtt格式

<!-- 音频 -->
<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
	您的浏览器不支持 audio 元素。
</audio>

<!-- 视频 -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

<!-- track  -->
<video controls width="320" height="240"
       src="/video/php/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/video/php/friday.vtt" />
    抱歉，您的浏览器不支持嵌入视频！
</video>

语义化

HTML5 添加了很多语义元素如下所示：

元素	作用
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许你设置一段文本 失去脱离其父元素的文本方向设置
command	定义命令按钮 比如单选项按钮、复选框或者按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框 比如提示框
summary	标签包含details元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等
figcaption	定义<figure>元素的标题
footer	定义section和document的页脚
header	定义文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡 仅用于已知最大和最小值的度量
nav	定义导航链接的部分
progress	定义任何类型的任务的进度
rudy	定义rudy注释
rt	定义字符
rp	在rudy注释中使用 定义不支持rudy元素的浏览器所显示的内容
section	定义文档中的节
time	定义日期或时间
wbr	规定在文本中何处适合添加换行符