h5新标签以及用法

原创 小Q 随笔 面试 56阅读 16 天前 举报

前端面试的时候,总会被问到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新增标签,先罗列到这儿了。。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复