HTML5元素分类

HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。

1.结构性元素

结构性元素主要负责web上下文结构的定义

  • section:在web页面应用中,该元素也可以用于区域的章节描述。
  • header:页面主体上的头部,header元素往往在一对body元素中。
  • footer:页面的底部(页脚),通常会标出网站的相关信息。
  • nav:专门用于菜单导航、链接导航的元素,是navigator的缩写。
  • article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。

2.级块性元素

级块性元素主要完成web页面区域的划分,确保内容的有效分割。

  • aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
  • figure:是对多个元素进行组合并展示的元素,通常与ficaption联合使用。
  • code:表示一段代码块。
  • dialog:用于表达人与人之间的对话,该元素包含dt和dd这两个组合元素,dt用于表示说话者,而dd用来表示说话内容。

3.行内语义性元素

行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。

  • meter:表示特定范围内的数值,可用于工资、数量、百分比等。
  • time:表示时间值。
  • progress:用来表示进度条,可通过对其max、min、step等属性进行控制,完成对进度的表示和监事。
  • video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
  • audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

4.交互性元素

交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

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元素可以用以以下场合:

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

 设计辅助信息

aside元素用来表示当前页面或文章的附属信息部分,其中的内容可以是与当前文章相关的参考资料、名词解释等。

设计微格式

微格式是一种利用HTML的class属性来对网页添加附加信息的方法,主要是简化WEB开发的数据提取

time元素代表24小时中的某个时刻或某个日期,标识时刻时允许带时差。

添加发布日期

pubdate属性是一个可选的布尔值属性,可用在article元素中的time元素上,time元素代表了文章或整个网页的发布日期。

添加语义模块

添加标题块

header元素是一种具有引导和导航作用的结构元素。在HTML5中,header元素通常包含h1-h6元素,也可以包含hgroup、table、form、nav等元素。

给标题分组

hgroup元素可以为标题或者子标题进行分组,通常它与h1~h6元素组合使用。但如果文章只有一个主标题,则不需要hgroup元素。

添加脚注块

footer元素可以作为内容块的注脚,注脚信息有很多种形式,如作者、相关阅读链接及版权信息等。

添加联系信息

address元素用来在文档中定义联系信息,包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等。

时间: 2024-10-08 20:50:31

HTML5元素分类的相关文章

HTML5 元素分类

HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的:使文档的结构更加清晰明确: 增加新功能. 结构性元素:负责Web的上下文结构的定义,确保HTML文档的完整性. 1.1 section(给内容分段):在web页面应用中,该元素可以用于区域的章节表述. section 元素用于对网站或应用中页面上的内容进行分区,关注内容的独立性:一个section元素通常由标题及内容组成:section元素包含的内容可以单独存储到数据库中或输出到word文档中 1.2 header(

从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分类 HTML5中,元素主要分为7类: Metadata Flow Sectioning Heading Phrasing Embedded Interactive 这些分类集合互相之间也存在一定的交集(一个元素可以同时属于多个分类),其交集关系呈现为: 需要注意的是,HTML5中的这种元素分类与in

html的标签元素分类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML元素分类</title>    <style type="text/css">    /*浏览器默认样式(外边距和内边距)初始化(所有)*/       *{       margin: 0;       pa

Html5元素及基本语法

Html5元素及基本语法 HTML标签 开始标签(opening tag):开放标签 结束标签(closing tag):闭合标签 元素 定义:HTML元素指的是从开始标签到结束标签的代码(元素以开始标签为起始以借宿标签终止) 元素的内容:元素的内容指的是开始标签与结束标签之间的内容 元素的特点: 1,大多数HTML元素可嵌套(可以包括其他的HTML元素) 2,HTML文档有嵌套的HTML元素构成 3,不要忘记结束标签,未来的HTML版本不允许省略结束标签 4,空的html元素 5,没有内容的h

html标签元素分类

元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>.<i&

元素分类与 collections

1.元素分类: #[11,22,33,44,55,66,77,88,99,90] #将所有大于66的值保存至字典的一个key中 #将小于66的保存至第二个key中 #{'k1':[77,88,99,90],'k2':[11,22,33,44,55,66]} li = [11,22,33,44,55,66,77,88,99,90] dic = {'k1':[],'k2':[]} for i in li:     if i > 66:         dic['k2'].append(i)     

块状元素居中、元素分类(块状,内联,内联块状)、内联转块状

块状元素中的文字.图片居中显示: CSS设置:text-align:center <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 如图所

HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Maker.Edge Animation.Tumult Hype.Nodefire 3.导出SVG动画: Hippo 基本上所有工具导出的动画都会依赖一个独立的js库,这个库用于解析数据,展示动画.而其中两个工具(Radi和Hippo)就比较突出,它们并不依赖独立js库,而是把必须的最精简的js直接内嵌到H

HTML5元素、属性和格式化

-----------------siwuxie095 HTML5 元素 1.元素指的是从开始标签到结束标签的所有代码 开始标签 元素内容 结束标签 <p> this is my web page </p> <br /> 开始标签也被称为开放标签,结束标签也被称为闭合标签 <br /> 标签:用于换行,因为里面没有元素内容,所以 被称为 空标签 2.HTML 元素语法 · 元素的内容是开始标签与结束标签之间的内容 · 空元素在开始标签中进行关闭 · 大多数