前端面试的时候, 总会被问到 h5 的问题, 最基本的就是 h5 有什么新标签, 遇到这样的问题, 我很不屑回答, 一个是因为有点多, 最重要的是因为我不知道到底有多少, 今天花点时间在这里整理下吧.
1,<article> 定义文章, 规定独立的自包含内容
- <article>
- <h1>
- Internet Explorer 9
- </h1>
- <p>
- Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....
- </p>
- </article>
2,<aside> 定义页面内容之外的内容
- <p>
- Me and my family visited The Epcot center this summer.
- </p>
- <aside>
- <h4>
- Epcot Center
- </h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
3,<audio> 定义声音内容, 比如音乐或其他音频流
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签.
</audio>
4,<bdi> 定义文本的文本方向, 使其脱离其周围文本的方向设置(没看懂这个具体是怎么用)
- <ul>
- <li>
- Username
- <bdi>
- Bill
- </bdi>
- :80 points
- </li>
- <li>
- Username
- <bdi>
- Steve
- </bdi>
- : 78 points
- </li>
- </ul>
5,<canvas> 定义图形 (这是 h5 的新特性, 用的还蛮多的)
- <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>
6,<command> 定义命令按钮 (只有 ie9 支持这个标签)
- <menu>
- <command onclick="alert('Hello World')">
- Click Me!
- </command>
- </menu>
没觉得与 button 有什么区别啊
7,<datalist> 定义下拉列表(配合 input 使用)
- <input id="myCar" list="cars" />
- <datalist id="cars">
- <option value="BMW">
- <option value="Ford">
- <option value="Volvo">
- </datalist>
这个应该比较下与 select 有什么区别:
select:5 个值里面选择 1 个;
datalist: 你可以在文本框里填值, 也可以在下面 5 个值里选 1 个.
8,<details> 定义元素的细节: 页面只显示 summary 里的内容, 点击之后才显示 p 里的内容
- <details>
- <summary>
- Copyright 2011.
- </summary>
- <p>
- All pages and graphics on this web site are the property of W3School.
- </p>
- </details>
9,<dialog> 定义对话框或窗口
- <table border="1">
- <tr>
- <th>
- 一月
- <dialog open>
- 这是打开的对话窗口
- </dialog>
- </th>
- <th>
- 二月
- </th>
- <th>
- 三月
- </th>
- </tr>
- <tr>
- <td>
- 31
- </td>
- <td>
- 28
- </td>
- <td>
- 31
- </td>
- </tr>
- </table>
没太明白这个有什么作用
10,<embed> 定义外部交互内容或插件
<embed src="helloworld.swf" />
11,<figcaption> 定义 figure 元素的标题
- <figure>
- <figcaption>
- 黄浦江上的的卢浦大桥
- </figcaption>
- <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
- </figure>
12,<figure> 定义媒介
用作文档中插图的图像:
- <figure>
- <p>
- 黄浦江上的的卢浦大桥
- </p>
- <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
- </figure>
13,<footer> 定义 section 或 page 的页脚
- <footer>
- <p>
- Posted by: W3School
- </p>
- <p>
- Contact information:
- <a href="mailto:someone@example.com">
- someone@example.com
- </a>
- .
- </p>
- </footer>
14,<header> 定义 section 或 page 的页眉
- <header>
- <p>
- Posted by: W3School
- </p>
- <p>
- Contact information:
- <a href="mailto:someone@example.com">
- someone@example.com
- </a>
- .
- </p>
- </header>
15,<keygen> 定义生成密钥
- <form action="demo_keygen.asp" method="get">
- Username:
- <input type="text" name="usr_name" />
- Encryption:
- <keygen name="security" />
- <input type="submit" />
- </form>
16,<mark> 定义有记号的文本
<p>Do not forget to buy <mark>milk</mark> today.</p>
17,<meter> 定义预定义范围内的度量
- <meter value="3" min="0" max="10">
- 十分之三
- </meter>
- <meter value="0.6">
- 60%
- </meter>
18,<nav> 定义导航链接
- <nav>
- <a href="index.asp">
- Home
- </a>
- <a href="html5_meter.asp">
- Previous
- </a>
- <a href="html5_noscript.asp">
- Next
- </a>
- </nav>
19,<output> 定义输出的一些类型
- <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
- 0
- <input type="range" id="a" value="50">
- 100 +
- <input type="number" id="b" value="50">
- =
- <output name="x" for="a b">
- </output>
- </form>
20,<progress> 定义任何类型的任务的进度 : 这个进度条和那个 meter 感觉没什么区别呢
正在进行的下载:
<progress value="22" max="100"></progress>
21,<rp> 定义若浏览器不支持 Ruby 元素显示的内容
<Ruby>
漢 <rt><rp>(</rp > ㄏㄢˋ<rp>)</rp></rt>
</Ruby>
22,<rt> 定义 Ruby 注释的解释
<Ruby>
漢 <rt><rp>(</rp > ㄏㄢˋ<rp>)</rp></rt>
</Ruby>
23,<Ruby> 定义 Ruby 注释
<rp> 标签在 Ruby 注释中使用, 以定义不支持 Ruby 元素的浏览器所显示的内容.
Ruby 注释是中文注音或字符.
在东亚使用, 显示的是东亚字符的发音.
与 <Ruby> 以及 <rt> 标签一同使用:
Ruby 元素由一个或多个字符 (需要一个解释 / 发音) 和一个提供该信息的 rt 元素组成, 还包括可选的 rp 元素, 定义当浏览器不支持 "ruby" 元素时显示的内容.
24,<section> 定义 section
<section> 标签定义文档中的节(section, 区段). 比如章节, 页眉, 页脚或文档中的其他部分.
25,<source> 定义媒介源
拥有两份源文件的音频播放器. 浏览器应该选择它所支持的文件(如果有的话):
- <audio controls>
- <source src="horse.ogg" type="audio/ogg">
- <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
26,<summary> 为 < details > 元素定义可见的标题
- <details>
- <summary>
- HTML 5
- </summary>
This document teaches you everything you have to learn about HTML 5.
</details>
27,<time> 定义日期 / 时间
如何定义时间和日期:
- <p > 我们在每天早上 <time>9:00</time> 开始营业.</p>
- <p > 我在 <time datetime="2008-02-14">情人节</time> 有个约会.</p>
28,<track> 定义用在媒体播放器中的文本轨道
播放带有字幕的视频:
- <video width="320" height="240" controls="controls">
- <source src="forrest_gump.mp4" type="video/mp4" />
- <source src="forrest_gump.ogg" type="video/ogg" />
- <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
- <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
- </video>
- <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道.
用于规定字幕文件或其他包含文本的文件, 当媒介播放时, 这些文件是可见的.
29,<video> 定义视频, 比如电影片段或其他视频流.
一段简单的 HTML5 视频:
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签.
</video>
30,<wbr> 定义视频
<p>
如果想学习 Ajax, 那么您必须熟悉 xml<wbr>Http<wbr>Request 对象.
</p>
用法:
Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符.
提示: 如果单词太长, 或者您担心浏览器会在错误的位置换行, 那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).
这是 w3school 里的所有 h5 新增标签, 先罗列到这儿了..
来源: http://www.qdfuns.com/article/50984/0af0aa75e5d261114f49a15eb0aa71e8.html