首页 > Web开发 > 详细

HTML5新标签介绍

时间:2016-05-27 09:29:44      阅读:250      评论:0      收藏:0      [点我收藏+]

一、Datalist 标签

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

 技术分享

IE 10、Firefox、Opera 和 Chrome 支持 <datalist> 标签。

注释:IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 <datalist> 标签。

二、output标签

将计算结果显示在 <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>

 技术分享

三、details

<details>

<summary>Copyright 1999-2011.</summary>

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。

<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

<details> 元素的内容对用户是不可见的,除非设置了 open 属性

 技术分享

 

 

五、summary

<summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。

 

六、figure

使用 <figure> 元素标记文档中的一个图像:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

七、figcaption

使用 <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

八、mark

部分文本高亮显示:

<p>Do not forget to buy <mark>milk</mark> today.</p>

九 、<nav>

一个导航链接实例:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

 技术分享

十、progress标签

标记"下载进度":

<progress value="22" max="100"></progress>

 技术分享

十一、<ruby>标签

一个 ruby 注释:

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

解释:

<ruby> 标签定义 ruby 注释(中文注音或字符)。

在东亚使用,显示的是东亚字符的发音。

将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用: 
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成,还包括可选的 <rp> 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

 技术分享

其中<rt>标签就是用来写拼音注释的

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

HTML5新标签介绍

原文:http://www.cnblogs.com/this-xiaoming/p/5533418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!