本章主要介绍H5新增标签。
IE8-不支持H5标签，可以用JS创建一个无用元素（如<script>document.createElement("header");</script>），或使用 HTML5 Shiv 来解决。
一、文档章节（块级）
页面主流布局.png
页眉、页脚与导航
- 页眉：
<header>可用div#header模拟，用于标题、logo等</header> - 标题分组：
<hgroup>对h1~h6进行分组</hgroup> - 页脚：
<footer>可用div#footer模拟，常用于版权、友链等</footer> - 导航：
<nav>可用div#nav模拟</nav>
内容区域
- 内容主体：
<main>可用div#main模拟，一个页面只有一个</main> - 文章：
<article>定义有意义且独立于文档的内容，常用于帖子、新闻、博客、评论等</article> - 章节：
<section cite="url"> 定义文档的某个区域，常用于章节、片段、摘要等； 可嵌套在article、header、footer、aside等里。 </section> - 侧边栏：
<aside> 可用div#side模拟，常用于侧栏导航、目录、广告等； 该标签不可嵌套在article里，且应与附件的内容相关。 </aside>
二、文本
流（块级）
-
figure元素定义独立的流内容：<figure> <figcaption>流标题</figcaption> <!-- 流内容：图像、图表、照片、代码等 --> </figure> -
figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。
其他
- 标记文本：
<mark>文本需要被highlight时使用，一般背景会显示黄色</mark> - 日期与时间（公历）：
<time datetime="元素的日期时间">方便用户添加日程表，利于SEO</time>
三、多媒体与嵌入
嵌入资源
-
embed定义一个容器，用于嵌入外部应用或插件：<embed src="资源地址" type="资源类型" width="" height="" /> -
embed常被嵌套进object中，以应对不同浏览器：<object> <param name="" value="" /> <embed src="" type="" width="" height="" /> </object>
视频
- 支持的格式：ogg，mpeg4，webM。
- 单个视频：
<video src="">视频无法播放时显示此处的文本</video> - 多个视频：
<video> <!-- 各浏览器支持的视频格式不同，可用source标签链接多种格式的视频 --> <source src="" type="video/格式" /> <!-- track用于插入文本轨道（字幕） --> <track kind="轨道类型" src="轨道URL" srclang="轨道语言" label="轨道标签或标题" /> 视频无法播放时显示此处的文本 </video> - 属性：
| 属性 | 值 | 描述 |
|---|---|---|
| controls | controls | 提供播放、暂停和音量控件 |
| autoplay | autoplay | 自动播放 |
| loop | loop | 循环播放 |
| preload | auto metadata none |
视频预加载，有autoplay时忽略该属性 |
| poster | 图片URL | 视频下载时显示图像，直到用户点击播放按钮 |
| src | 视频URL | 要播放的视频的URL |
| height | 像素值 | 视频的高，不可用来压缩视频 |
| width | 像素值 | 视频的宽，不可用来压缩视频 |
音频
- 支持的格式：ogg，mp3，wav。
- 用法同
<video>，只要将video换成audio即可。 - 常用属性：
controls、autoplay、loop、src等。
图形
- 画布
canvas是一个图形容器，通过脚本绘制图形；一般用于性能要求高、场景复杂的图像：<canvas>不支持canvas的浏览器显示此处的文本</canvas> - 可伸缩矢量图形
svg使用XML描述2D图形，一般用于高仿真的静态图像：<svg> <rect />矩形 <circle />圆形 ... </svg>
四、表单
input新增type属性值
| 类型 | type值 | 描述 |
|---|---|---|
| 邮箱 | 输入电子邮箱的普通文本域 | |
| 电话 | tel | 输入电话号码的普通文本域 |
| 搜索 | search | 输入搜索字符串的普通文本域 |
| URL | url | 输入URL的普通文本域 |
| 数值 | number | 可设置最大值max、最小值min、间隔step等 |
| 数值范围 | range | 用于精确值不重要的输入数字的控件（如：滑动条） |
| 拾色器 | color | 调出拾色器 |
| 日期 | date month week time datetime datetime-local |
年月日 年月 年周 时分秒 UTC年月日时分秒 年月日时分秒 |
选项列表
-
datalist为input元素提供“自动完成”功能； - 绑定：
input.list==datalist.id。 - 用法与
select类似。
输出
- 将指定元素的结果输出到
output元素：<output name="" for="关联元素id列表" form="关联元素所属表单的id列表" /> - IE不支持
output元素。
进度
-
progress元素定义运行中的任务进度（进程）：<progress max="要完成的值" value="当前值">显示文本</progress> -
progress需要靠脚本来设置进度。 - 显示度量衡请使用
meter元素：<meter value="当前值">显示文本</meter> - IE9-不支持
progress元素，IE不支持meter元素。
网友评论