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>
HTML5新标签介绍的更多相关文章
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- HTML5新标签 w3c
w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- 如何处理HTML5新标签的兼容性问题
支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...
随机推荐
- html--<meta>设置缓存
html头文件设置常用之<meta>设置缓存 <meta http-equiv="pragma" content="no-cache"&g ...
- NPM 与 Nodejs
安装了Nodejs之后,NPM也安装好了 如何知道当前是否已经安装Nodejs和NPM了呢? node -v //查看当前nodejs的版本 npm -v //查看当前npm的版本 NPM 初始化 n ...
- openocd+jlink为mini2440调试u-boot
需要安装openocd,如果已经安装了系统默认的openocd(默认是0.5.0,版本太低),需要先卸载掉. 在安装前需要安装必需的一些库文件: -dev libusb-1.0-0 automake ...
- Contiki Timer & Stimer 模块
一.Timer API struct timer { clock_time_t start; clock_time_t interval; }; CCIF void timer_set(struct ...
- python之tkinter_2
关于tkinter的组件介绍,这篇博客很详细: https://www.cnblogs.com/aland-1415/p/6849193.html tkinter is to make interfa ...
- 国际电话号码的区号mysql数据表
-- phpMyAdmin SQL Dump-- version 3.5.2-- http://www.phpmyadmin.net---- Host: localhost-- Generation ...
- linkedhashSet和hashSet和TreeSet的区别(转)
Set接口Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false.Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就是说,只要两个对象用eq ...
- spring框架IOC原理分析代码
模拟ClasspathXmlApplication: package junit.test; import java.beans.Introspector; import java.beans.Pro ...
- AtCoder Regular Contest E - Or Plus Max
Time limit : 2sec / Memory limit : 1024MB Score : 700 points Problem Statement There is an integer s ...
- 逻辑回归(LogisticRegression)(未完)
部分引用: http://blog.csdn.net/pakko/article/details/37878837 http://blog.csdn.net/sunbow0/article/detai ...