HTML5元素分类
2016-02-15 16:50
666 查看
HTML5元素分类
HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。
结构性元素主要负责web上下文结构的定义
section:在web页面应用中,该元素也可以用于区域的章节描述。
header:页面主体上的头部,header元素往往在一对body元素中。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是navigator的缩写。
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分,确保内容的有效分割。
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure:是对多个元素进行组合并展示的元素,通常与ficaption联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含dt和dd这两个组合元素,dt用于表示说话者,而dd用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其max、min、step等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
构建主体内容
article元素用来表示文档、页面中独立的、完整的、可以独立被外部引用的内容。article元素可以嵌套使用。article元素也可以用来表示插件。
给内容分段
section元素用于对网站或应用程序中页面的内容进行分区,div元素也可以用来对页面进行分区,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div,而非section元素。div关注结构的独立性,而sectio元素关注内容的独立性,section元素包含的内容可以单独存储到数据库中或输出到word文档中。
section元素用于对网站或者应用程序中页面上的内容进行分块,一个section元素通常由内容以及标题组成,需要办好一个<hn>标题元素,一般不包含header头部或者footer底部元素,通常用section元素为那些有标题的内容进行分段。section元素是对页面上的内容分块处理,相邻的section元素的内容是相关的,而不是像article那样独立。事实上,article可以看做是特殊的section元素,article元素更强调独立性、完整性,section更强调相关性。
使用section元素时应注意以下几个问题:
不要将section元素当做设置样式的页面容器,对于此类操作应该使用div元素实现。
如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
不要为没有标题的内容区块使用section元素。
在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。
设计导航信息
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。nav元素可以用以以下场合:
传统导航条
侧边栏导航
页内导航
翻页操作
添加发布日期
pubdate属性是一个可选的布尔值属性,可用在article元素中的time元素上,time元素代表了文章或整个网页的发布日期。
添加标题块
header元素是一种具有引导和导航作用的结构元素。在HTML5中,header元素通常包含h1-h6元素,也可以包含hgroup、table、form、nav等元素。
hgroup元素可以为标题或者子标题进行分组,通常它与h1~h6元素组合使用。但如果文章只有一个主标题,则不需要hgroup元素。
footer元素可以作为内容块的注脚,注脚信息有很多种形式,如作者、相关阅读链接及版权信息等。
address元素用来在文档中定义联系信息,包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等。
HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。
结构性元素主要负责web上下文结构的定义
section:在web页面应用中,该元素也可以用于区域的章节描述。
header:页面主体上的头部,header元素往往在一对body元素中。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是navigator的缩写。
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分,确保内容的有效分割。
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure:是对多个元素进行组合并展示的元素,通常与ficaption联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含dt和dd这两个组合元素,dt用于表示说话者,而dd用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其max、min、step等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
构建主体内容
article元素用来表示文档、页面中独立的、完整的、可以独立被外部引用的内容。article元素可以嵌套使用。article元素也可以用来表示插件。
给内容分段
section元素用于对网站或应用程序中页面的内容进行分区,div元素也可以用来对页面进行分区,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div,而非section元素。div关注结构的独立性,而sectio元素关注内容的独立性,section元素包含的内容可以单独存储到数据库中或输出到word文档中。
section元素用于对网站或者应用程序中页面上的内容进行分块,一个section元素通常由内容以及标题组成,需要办好一个<hn>标题元素,一般不包含header头部或者footer底部元素,通常用section元素为那些有标题的内容进行分段。section元素是对页面上的内容分块处理,相邻的section元素的内容是相关的,而不是像article那样独立。事实上,article可以看做是特殊的section元素,article元素更强调独立性、完整性,section更强调相关性。
使用section元素时应注意以下几个问题:
不要将section元素当做设置样式的页面容器,对于此类操作应该使用div元素实现。
如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
不要为没有标题的内容区块使用section元素。
在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。
设计导航信息
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。nav元素可以用以以下场合:
传统导航条
侧边栏导航
页内导航
翻页操作
添加发布日期
pubdate属性是一个可选的布尔值属性,可用在article元素中的time元素上,time元素代表了文章或整个网页的发布日期。
添加标题块
header元素是一种具有引导和导航作用的结构元素。在HTML5中,header元素通常包含h1-h6元素,也可以包含hgroup、table、form、nav等元素。
hgroup元素可以为标题或者子标题进行分组,通常它与h1~h6元素组合使用。但如果文章只有一个主标题,则不需要hgroup元素。
footer元素可以作为内容块的注脚,注脚信息有很多种形式,如作者、相关阅读链接及版权信息等。
address元素用来在文档中定义联系信息,包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等。
相关文章推荐
- HTML5文档结构
- HTML5新增功能元素
- HTML5物理游戏开发 - 越野山地自行车(二)创建一辆可操控的自行车
- 华为AnyOffice 2015 HTML5 大赛,可以免费申请ECS机器3个月
- H5页面input输入框含有键盘自带的表情符时显示异常
- HTML5开发移动web应用——SAP UI5篇(5)
- HTML5 data-* 自定义属性
- HTML5のIndexedDB
- HTML5 Canvas 的事件处理
- 传奇创世h5开发案例分享:京东物流春节不打烊 寻宝赢限量joy SAGA与你相约
- HTML5离线Web应用实战:五步创建成功
- HTML5与php实现消息推送功能
- 使用 Xcode7 打包 HTML5+ 编写的应用 ipa 文件
- H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现
- HTML5进入全屏和退出全屏
- html5
- html5 学习资料
- HTML5のFile&FileSystem
- html5 css3 颜色表示和透明度设置
- html5 css3 配色表