HTML5新标签介绍

一、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>

时间: 2024-12-14 12:03:52

HTML5新标签介绍的相关文章

【HTML5】如何处理HTML5新标签的浏览器兼容版问题

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

如何处理HTML5新标签的兼容性问题

支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式: * 当然最好的方式是直接使用成熟的框架.使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"&l

HTML5新标签解释及其使用场景

我们来看一下HTML 5提供的一些新的标签用法和HTML 4的区别 <article> 标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本,亦或是来自其他外部源内容.HTML5:<article></article>HTML4:<div></div> <aside> 标签定义 article 以外的内容:aside 的内容应该与 article 的内容相关.HTML5:&l

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement('新标签'); / /新增创建新标签   方式一:Codi

html5新标签及废弃元素

html5新标签 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 <audio> 定义音频内容 <video> 定义视频(video 或者 movie) <source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件. <track>

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件,calendar.date

HTML5新标签-Video

HTML5的video新标签使用起来非常简单,功能也着实强大,简单的几行代码就可以实现视频播放功能.尤其在苹果公司拒绝在IOS设备上支持Flash的时候,HTML5的公开支持度得到了极大的提升 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>HTML5新标签-Video</title> &

html5 --新标签

html5新标签 一.<article> 标签:标签规定独立的自包含内容, 一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源: 论坛帖子 报纸文章 博客条目 用户评论 <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</