html元素分类
结构性元素
section 在web页面应用中,该元素也可以用于区域的章节描述
header 页面主体的头部
footer 页面的底部
nav 专门用于菜单的导航、链接导航的元素
article 用于表示一篇文章的主体内用
块级元素
aside 泳衣表达注记、贴士、侧栏、摘要的引用等作为补充主体的内用
figure 是对多个元素进行合并并展示的元素,通常与figcaption联合使用
code 表示一段代码
diglog 用于表达人与人之间的对话,该元素还包括dt和dd这两个组合元素,dt表示说话者,dd则用来表示说话者说的内容
行内语义性元素
meter 表示特定范围内的数值,可用于工资 数量 百分比等
time 表示时间值
progress 用来表示进度条,可通过对其max min setp 等属性进行控制,完成对进度的表示和监视
video 视频元素
audio 音频元素
交互性元素
details 用来:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend 交互才会显示出来。与summary联用
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新
command:用来处理命令按钮
aricle 与 setion使用
article 元素与 section 元素都是 HTML5 新增的元素,它们的功能与 div 类似,都是用来区分不同区域,它们的使用方法也相似,因此很多初学者会将其混用。HTML5 之所以新增这两种元素,就是为了更好地描述文档的内容,所以它们之间肯定是有区别的
article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如,博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。因为 article 元素是一段独立的内容,所以article 元素通常包含头部(header 元素)和底部(footer 元素)。
section 元素用于对网站或者应用程序中页面上的内容进行分块。一个 section 元素通常由内容以及标题组成。
section 元素需要包含一个标题元素,一般不用包含头部(header 元素)或者底部(footer 元素)。通常用 section 元素为那些有标题的内容进行分段。
section 元素的作用是对页面上的内容分块处理,如对文章分段等,相邻的 section 元素的内容,应当是相关的,而不是像 article 那样独立。
在使用 section 元素时应该注意以下几个问题。
1、不要将 section 元素当做设置样式的页面容器,对于此类操作应该使用 div 元素实现。
2、如果 article 元素、aside 元素或 nav 元素更符合使用条件,不要使用 section 元素。
3、不要为没有标题的内容区块使用 section 元素。
设计导航信息
nav元素
1、传统导航条。常规网站都设置有不同层级的导航条,其作用是将当画面跳转到网站的其他主要页面上去。
2、侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航,其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。3、页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
4、翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
设计辅助信息
aside
1、作为主要内容的附属信息部分,包含在 article 元素中,其中的内容可以是与当前文章有关的参考资料、名词解释等。
2、作为页面或站点全局的附属信息部分,在 article 元素之外使用。最典型的形式是侧边栏,其中的内容可以是友情链接,博客中其他文章列表、广告单元等。
添加发布日期
pubdate属性是一个可选的布尔值属性,可用在 article 元素中的 time 元素上,意思是 time 元素代表了文章(artilce 元素的内容)或整个网页的发布日期。