码迷,mamicode.com
首页 > Web开发 > 详细

常规html页面结构

时间:2017-09-09 00:03:48      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:产品   部件   结构   foo   role   音频   应用   导航   功能   

一、创建页眉 <header role="banner">

页眉包括网站标志、主导航和其他全站链接,甚至搜索框。也适合对页面深处的一组介绍性或导航性内容进行标记。

注意:role=“banner”(横幅)地标角色改善可访问性

二、标记导航 <nav role="navigation"<ul>无序链接列表</ul> 或 <ol>有序链接列表</ol> </nav>

nav 标记文档中重要的链接群。

三、标记页面的主要区域 <main role="main">

main元素包围着代表页面主题的内容,一个页面仅使用一次。

四、创建文章 <article>段落、列表、音频、视频、图像、图形</article>

article元素表示文档、页面、应用或网站的一个独立的容器。可以是一篇帖子、文章、评论或交互式的小部件或小工具。

五、定义区块 <section>段落、列表、音频、视频、图像、图形</section>

section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容,通常包含一个标题。

注意:section可嵌套在article里,反之不行。

六、指定附注栏 <aside role="complementary">

使用aside的例子包括重要引述、侧栏、指向相关文章的一组链接、广告、nav元素组(友情链接)、相关产品列表等。

注意:对于与内容有关的图像(图表、图形或带有说明文字的插图)使用figure而非aside。

七、创建页脚 <footer>

footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息,如相关文档的链接、版权信息、作者或其他类似条目。

注意:只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次。

八、创建通用容器 <div>

div是没有任何语义的通用容器。有了div就可以为其添加样式或javascript效果。

注意:div是块级内容的无语义容器。span是短语内容的无语义容器,可放在段落p元素内。

九、使用ARIA改善可访问性

WAI-ARIA:无障碍网页倡议-无障碍的富互联网应用。ARIA的地标角色可以帮助用户识别页面区域,从而让屏幕阅读器用户可以直接跳到这些区域。通常,对这些区域指定role属性就可以了。

十、为元素添加title属性

可以使用title属性为网站任何部分加上提示标签,在屏幕阅读器可以为用户朗读title文本,提升无障碍访问功能。

 

常规html页面结构

标签:产品   部件   结构   foo   role   音频   应用   导航   功能   

原文地址:http://www.cnblogs.com/zhuqs/p/7493988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!