HTML5标签使用方法详解


Posted in HTML / CSS onNovember 27, 2015

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如 <audio> 和 <video> 标记。

HTML 5 作为新一代的超文本标记语言,增加了许多标签。这些标签不但更有语义,而且功能强大。具体有以下标签:

<article> 定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
<aside> 定义页面内容之外的内容,但应该与页面内容相关
<audio> 定义声音,比如音乐或其他音频流
<canvas> 定义图形,比如图表和其他图像。
<command> 定义命令按钮,比如单选按钮、复选框或按钮。
<datatemplate> 定义数据模板的一个容器。该元素必须有定义模板的子元素:<rule> 元素
<datagrid> 定义可选数据的列表。datagrid 作为树列表来显示
<datalist> 定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表
<dialog> 定义对话,比如交谈
<embed> 定义嵌入的内容,比如插件
<event-source> 定义由服务器发送的事件的来源
<figure> 定义媒介内容的分组,以及它们的标题
<footer> 定义 section 或 document 的页脚
<header> 定义 section 或 document 的页眉
<hgroup> 将标题分组
<keygen> 定义生成密钥
<m> 定义带有记号的文本
<mark> 主要的功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词
<meter> 定义度量(单位)。仅用于已知最大和最小值的度量
<nav> 定义导航链接
<nest> 在数据模板中为子元素定义嵌套点。与 <datatemplate> 和 <rule> 元素一同使用
<output> 定义不同类型的输出,比如脚本的输出
<progress> 运行中的进程。可以用来来显示 JavaScript 中耗费时间的函数的进程或下载的进度
<rule> 定义更新数据模板的规则。与 <datatemplate> 和 <nest> 元素一起使用
<rp> 在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容
<rt> 定义汉字的拼音或日语汉字的平假名
<ruby> 定义亚洲语言中的“附注文字”
<section> 定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分
<source> 为媒介元素(比如 <video> 和 <audio>)定义媒介资源
<summary> 定义一个摘要,即 detail 的头部。不等同于表格中的 summary 属性
<time> 定义日期或时间,或者两者
<video> 定义视频,比如电影片段或其他视频流

HTML5 增加了许多新标签,同时也废除了一些标签:

<acronym> 可以使用 <abbr> 代替
<applet> 不再支持
<basefont> 用 CSS 代替
<big> 用 CSS 代替
<center> 用 CSS 代替
<dir> 用 CSS 代替
<font> 用 CSS 代替
<frame> 不再支持
<frameset> 不再支持
<noframes> 不再支持
<s> 用 CSS 代替
<small> 用 CSS 代替
<strike> 用 CSS 代替
<tt> 用 CSS 代替
<u> 用 CSS 代替
上面这些标签在 XHTML 1.0 是不建议使用的,但仍然可以支持,而在 HTML 5 中则彻底不支持了。另外还有很多标签属性也不支持,如 aling 等。

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 #HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 #HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 #HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 #HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 #HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 #HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 #HTML / CSS
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
一个超级简单的python web程序
2014/09/11 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
大学活动策划书范文
2014/01/10 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
酒店经理职责
2014/01/30 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
比赛口号大全
2014/06/10 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
三八节活动简报
2015/07/20 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS