关灯
开启左侧

h5新标签以及用法

[复制链接]
小川 发表于 2018-11-7 17:51:48 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
前端面试的时候,总会被问到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>
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>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新增标签,先罗列到这儿了。。

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

105帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )