邮箱注册网站申请,创建网站收费,建设企业网站公司,摄影师网站推荐定义清晰、一致的文档结构不仅方便后期维护和拓展#xff0c;同时也大大降低了CSS和JavaScript的应用难度。为了提高搜索引擎的检索率#xff0c;适应智能化处理#xff0c;设计符合语义的结构显得很重要。
1、头部结构
在HTML文档的头部区域#xff0c;存储着各种网页元…定义清晰、一致的文档结构不仅方便后期维护和拓展同时也大大降低了CSS和JavaScript的应用难度。为了提高搜索引擎的检索率适应智能化处理设计符合语义的结构显得很重要。
1、头部结构
在HTML文档的头部区域存储着各种网页元信息这些信息主要为浏览器所用一般不会显示在网页中。另外搜索引擎也会检索头部信息因此重视并设置这些信息非常重要。
1.1、定义网页标题
使用标签可以定义网页标题。例如 htmlheadtitle网页标题/title/headbody/body/html浏览器会把它放在窗口的标题栏或状态栏中显示如下图所示。当把文档加入用户的链接列表、收藏夹或书签列表时标题将作为该文档链接的默认名称。 提示title元素必须位于head部分。确保每个页面的title是唯一的从而提升搜索引擎的结果排名并让访问者获得更好的体验。title不能包含任何格式、HTML、图像或指向其他页面的链接。
1.2、定义网页元信息
使用标签可以定义网页的元信息。例如定义针对搜索引擎的描述和关键词一般网站都必须设置这两条元信息以方便搜索引擎检索。 定义网页的描述信息
meta namedescription content标准网页设计专业技术资讯 /定义页面的关键词信息
meta namekeywords contentHTML,DHTML, CSS, XML, XHTML, JavaScript /meta标签位于文档的头部head标签内不包含任何内容。使用meta标签的属性可以定义与文档相关联的名称/值对。标签属性说明如下表所示 **【示例】**下面列举常用元信息的设置代码更多元信息的设置可以参考HTML手册。
使用http-equiv等于content-type可以设置网页的编码信息。
设置UTF-8编码 meta http-equivcontent-type contenttext/html; charsetUTF-8 /提示HTML5简化了字符编码的设置方式为meta charsetutf-8其作用是相同的。
设置简体中文gb2312编码 meta http-equivcontent-type contenttext/html; charsetgb2312 /注意每个HTML文档都需要设置字符编码类型否则可能会出现乱码其中UTF-8是国家通用编码独立于任何语言因此都可以使用。
使用content-language属性值可以定义页面语言的代码。如下所示设置中文版本语言 meta http-equivcontent-language contentzh-CN /使用refresh属性值可以设置页面刷新时间或跳转页面如5 s之后刷新页面 meta http-equivrefresh content5 /5 s之后跳转到百度首页 meta http-equivrefresh content5; url https://www.baidu.com/ /使用expires属性值设置网页缓存时间 meta http-equivexpires contentSunday 20 October 2023 01:00 GMT /可以使用如下方式设置页面不缓存 meta http-equivpragma contentno-cache /meta nameauthor contenthttps://www.baidu.com/ / !--设置网页作者--meta namecopyright content https://www.baidu.com/ / !--设置网页版权--meta namedate content2019-01-12T20:50:3000:00 / !--设置创建时间--meta namerobots contentnone / !--设置禁止搜索引擎检索--1.3、定义文档视口
在移动Web开发中经常会遇到viewport视口问题也就是浏览器显示页面内容的屏幕区域。一般移动设备的浏览器都默认设置一个meta nameviewport标签定义一个虚拟的布局视口用于解决早期的页面在手机上显示的问题。
iOS、Android基本都将视口分辨率设置为980px所以桌面网页基本能够在手机上呈现只不过看上去很小用户可以通过手动方式缩放网页进行阅读。这种方式令用户体验很差建议使用meta nameviewport标签设置视图大小。
meta nameviewport标签的设置代码如下。 meta idviewport nameviewport contentwidthdevice-width; initial-scale1.0; maximum-scale1; user-scalableno;标签的属性说明如下表所示。 **【示例】**在页面中输入一个标题和两段文本 !doctype htmlhtmlheadmeta charsetutf-8title设置文档视口/titlemeta nameviewport contentwidthdevice-width, initial-scale1/headbodyh1widthdevice-width, initial-scale1/h1pwidthdevice-width将layout viewport布局视口的宽度设置 ideal viewport理想视口的宽度。/ppinitial-scale1表示将layout viewport布局视口的宽度设置为 ideal viewport理想视口的宽度/p/body/html如果没有设置文档视口则在移动设备中所呈现的效果如下图所示
而设置文档视口之后所呈现的效果如下图所示
2、主体基本结构
HTML文档的主体部分包括要在浏览器中显示的所有信息这些信息需要在特定的结构中呈现。下面介绍网页通用结构的设计方法。
2.1、定义文档结构
HTML5包含100多个标签大部分继承自HTML4新增加30个标签。这些标签基本上都被放置在主体区域内(body)。正确选用HTML5标签可以避免代码冗余。在设计网页时不仅需要使用
标签构建网页通用结构还要使用下面几类标签完善网页结构。 h1、h2、h3、h4、h5、h6定义文档标题1表示一级标题6表示六级标题常用标题包括一级、二级和三级。p定义段落文本。ul、ol、li等定义信息列表、导航列表、榜单结构等。table、tr、td等定义表格结构。span定义行内包含框。
**【示例】**下面是一个简单的HTML页面使用少量HTML标签。它演示了一个简单的文档应该包含的内容以及主体内容在浏览器中的显示。
第1步新建文本文件输入以下代码 htmlheadmeta charsetutf-8title一个简单的文档包含内容/title/headbodyh1我的第一个网页文档/h1pHTML文档必须包含三个部分/pullihtml——网页包含框/lilihead 头部区域/lilibody—主体内容/li/ul/body/html第2步保存文本文件命名为test设置扩展名为.html。第3步使用浏览器打开这个文件预览效果如下图所示。 为了更好地选用标签读者可以参考W3school网站的http://www. w3school.com.cn/tags/index.asp页面信息。
2.1、定内容标题
HTML提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5或h6元素对各级标题进行标记其中h1是最高级别的标题h2是h1的子标题h3是h2的子标题以此类推。
**【示例1】**标题代表文档的大纲。当设计网页内容时可以根据需要为内容的每个主要部分指定一个标题和任意数量的子标题以及子子标题等。 h1唐诗欣赏/h1h2春晓/h2h3孟浩然/h3p春眠不觉晓处处闻啼鸟。/pp夜来风雨声花落知多少。/p在示例1中标记为h2的“春晓”是标记为h1的顶级标题“唐诗欣赏”的子标题而“孟浩然”是h3它就成了“春晓”的子标题也是h1的子子标题。如果继续编写页面其余部分的代码相关的内容段落、图像、视频等就要紧跟在对应的标题后面。
对任何页面来说分级标题都是最重要的HTML元素。标题通常传达的是页面的主题。对搜索引擎而言如果标题与搜索词匹配标题就会被赋予很高的权重尤其是等级最高的h1。当然不是说页面中的h1越多越好搜索引擎能够聪明地判断出哪些h1是可用的。
【示例2】使用标题组织内容。下面的产品指南有3个主要部分每个部分都有不同层级的子标题。标题之间的空格和缩进只是为了让层级关系更清楚一些它们不会影响最终的显示效果。 h1所有产品分类/h1h2进口商品/h2h2食品饮料/h2h3糖果/巧克力/h3h4巧克力 果冻/h4h4口香糖 棒棒糖 软糖 奶糖 QQ糖/h4h3饼干糕点/h3h4饼干 曲奇/h4h4糕点 蛋卷 面包 薯片/膨化食品/h4h2粮油副食/h2h3大米面粉/h3h3食用油/h3在默认情况下浏览器会从h1到h6逐级减小标题的字号。 所有的标题都以粗体显示h1的字号比h2的大而h2的又比h3的大以此类推。每个标题之间的间隔也是由浏览器默认的CSS定制的它们并不代表HTML文档中有空行。 提示在创建分级标题时要避免跳过某些级别如从h3直接跳到h5。不过允许标题从低级别跳到高级别。例如在“h4糕点 蛋卷 面包 薯片/膨化食品/h4”后面紧跟“h2粮油副食/h2”因为包含“h4糕点 蛋卷 面包 薯片/膨化食品/h4”的“h2食品饮料/h2”在这里结束了而“h2粮油副食/h2”的内容开始了。
不要使用h1h6标记副标题、标语以及无法成为独立标题的子标题。例如假设有一篇新闻报道它的主标题后面紧跟一个副标题这时副标题就应该使用段落或其他非标题元素。 h1天猫超市/h1p在乎每件生活小事/p提示HTML5包含一个名为hgroup的元素用于将连续的标题组合在一起后来W3C将这个元素从HTML 5.1规范中移除了。 h1客观地看日本理性地看中国/h1p classsubhead日本距离我们并不远但是如果真的要说它在这十年、二十年有什么样的发展和变化又好像对它了
解得并不多。本文出自一个在日本生活了快10年的中国作者来看看他描述的日本一个除了老龄化和城市干净标签之外的
真实国度。/p上面代码是标记文章副标题的一种方法。可以添加一个class从而能够应用相应的CSS该class可以被命名为subhead等名称。
提示曾有人提议在HTML5中引入subhead元素用于对子标题、副标题、标语、署名等内容进行标记但是未被W3C采纳。
2.3、使用div
有时需要在一段内容外围包一个容器从而可以为其应用CSS样式或JavaScript效果。如果没有这个容器页面就会不一样。在评估内容的时候考虑使用article、section、aside、nav等元素却发现它们从语义上来讲都不合适。
这时真正需要的是一个通用容器一个完全没有任何语义含义的容器。这个容器就是div元素用户可以为其添加样式或JavaScript效果。
**【示例1】**为页面内容加上div元素以后可以添加更多样式的通用容器。 divarticleh1文章标题/h1p文章内容/pfooterp注释信息/paddressa href#W3C/a/address/footer/article/div现在有一个div包着所有的内容页面的语义没有发生改变但现在我们有了一个可以用CSS添加样式的通用容器。
与header、footer、main、article、section、aside、nav、h1h6、p等元素一样在默认情况下div元素没有任何样式只是其包含的内容从新的一行开始。不过我们可以对div添加样式以实现设计效果。
div对使用JavaScript实现一些特定的交互行为或效果是有帮助的。例如在页面中展示一张照片或一个对话框同时让背景页面覆盖一个半透明的层这个层通常是一个div。
尽管HTML用于对内容的含义进行描述但div并不是唯一没有语义价值的元素。span是与div对应的一个元素div是块级内容的无语义容器而span是短语内容的无语义容器。例如span可以放在段落元素p之内。
**【示例2】**对段落文本中的部分信息进行分隔显示以便应用不同的类样式。 h1新闻标题/h1p新闻内容/pp....../pp发布于span classdate2016年12月/span由span classauthor张三/span编辑/p提示在HTML结构化元素中div是除了h1h6以外唯一早于HTML5出现的元素。在HTML5之前div是包围大块内容如页眉、页脚、主要内容、插图、附栏等的从而成为CSS为之添加样式的不二选择。之前div没有任何语义含义现在也一样这就是HTML5引入header、footer、main、article、section、aside和nav元素的原因。这些类型的构造块在网页中普遍存在因此它们可以成为具有独立含义的元素。在HTML5中div并没有消失只是使用它的场合变少了。
为article和aside元素分别添加一些CSS样式让它们各自成为一栏。在大多数情况下每一栏都有不止一个区块的内容。例如主要内容区第一个article下面可能还有另一个article或section、aside等元素。又如也许想在第二栏再放一个aside显示指向关于其他网站的链接或许再添加一个其他类型的元素。这时可以将期望在同一栏出现的内容包在一个div里然后对这个div添加相应的样式。但是不可以用section因为该元素并不能作为添加样式的通用容器。
div没有任何语义。大多数时候使用header、footer、main仅使用一次、article、section、aside或nav代替div会更合适。但是如果语义上不合适也不必为了刻意避免使用div而使用上述元素。div适合所有页面容器可以作为HTML5的备用容器使用。
2.4、使用id和class
HTML是简单的文档标识语言而不是界面语言。文档结构大部分使用div标签完成为了能够识别不同的结构一般通过定义id或class赋予它们额外的语义给CSS样式提供有效的“钩子”。
**【示例1】**构建一个简单的列表结构并给它分配一个id自定义导航模块。 ul idnavlia href#首页/a/lilia href#新闻/a/lilia href#互动/a/li/u1在使用id标识页面上的元素时id名必须是唯一的。id可以用来标识持久的结构性元素如主导航或内容区域id可以用来标识一次性元素如某个链接或表单元素。
在整个网站上id名应该应用于语义相似的元素以避免混淆。如果联系人表单和联系人详细信息在不同的页面上那么可以给它们分配同样的id名如contact但是如果在外部样式表单中给它们定义样式就会遇到问题因此使用不同的id名如contact_form和contact_details就会简单得多。
与id不同同一个class可以应用于页面上任意数量的元素因此class非常适合标识样式相同的对象。例如设计一个新闻页面其中包含每条新闻的日期此时不必给每个日期分配不同的id而是可以给所有日期分配类名date。
提示id和class的名称一定要保持语义性并与表现方式无关。例如可以给导航元素分配id名为right_nav因为希望它出现在右边。但是如果以后将它的位置改到左边那么CSS和HTML就会发生歧义。所以将这个元素命名为sub_nav或nav_main更合适。这种名称解释就不再涉及如何表现它。
对于class名称也是如此。如果定义所有错误消息以红色显示不要使用类名red而应该选择更有意义的名称如error或feedback。
注意class和id名称需要区分大小写虽然CSS不区分大小写但是在标签中是否区分大小写取决于HTML的文档类型。如果使用XHTML严谨型文档那么class和id名称是区分大小写的。最好的方式是保持一致的命名约定。如果在HTML中使用驼峰命名法那么在CSS中也采用这种形式。
【示例2】在实际设计中class被广泛使用这就容易产生滥用现象。例如很多初学者对所有的元素添加类以便更方便地控制它们这种现象被称为“多类症”。在某种程度上这和使用基于表格的布局一样糟糕因为它在文档中添加了无意义的代码。 h1 classnewsHead标题新闻/h1p classnewsText新闻内容/pp....../pp classnewsTexta hrefnews.php classnewsLink更多/a/p**【示例3】**在示例2中每个元素都使用一个与新闻相关的类名进行标识这使新闻标题和正文可以采用与页面其他部分不同的样式。但是不需要用这么多类区分每个元素可以将新闻条目放在一个包含框中并加上类名news从而标识整个新闻条目。然后可以使用包含框选择器识别新闻标题或文本。 div classnewsh1标题新闻/h1p新闻内容/pp....../ppa hrefnews.php更多/a/p/div以这种方式删除不必要的类有助于简化代码使页面更简洁。过度依赖类名是不必要的我们只需要在不适合使用id的情况下对元素应用类而且尽可能少地使用类。实际上创建大多数文档常常只需要添加几个类。如果初学者发现自己添加了许多类那么这很可能意味着自己创建的HTML文档的结构有问题。
2.5、使用title
可以使用title属性为文档中的任何部分加上提示标签。不过它们并不只是提示标签加上它们之后屏幕阅读器可以为用户朗读title文本因此使用title可以提升无障碍访问功能。
**【示例】**可以为任何元素添加title不过用得最多的是链接。 ul title列表提示信息lia href# title链接提示信息列表项目/a/li/ul当访问者将鼠标指针指向加了说明标签的元素时就会显示title。如果img元素同时包括title和alt属性则提示框会采用title属性的内容而不是alt属性的内容。
2.6、HTML注释
可以在HTML文档中添加注释标明区块开始和结束的位置提示某段代码的意图或者阻止内容显示等。这些注释只会在源代码中可见访问者在浏览器中是看不到它们的。
【示例】下面代码使用“!--”和“--”分隔符定义了6处注释。 !-- 开始页面容器 --div classcontainerheader rolebanner/header!-- 应用CSS后的第一栏 --main rolemain/main!-- 结束第一栏 --!-- 应用CSS后的第二栏 --div classsidebar/div!-- 结束第二栏 --footer rolecontentinfo/footer/div!-- 结束页面容器 --在主要区块的开头和结尾处添加注释是一种常见的做法这样可以让一起合作的开发人员在将来修改代码时变得更加容易。
在发布网站之前应该用浏览器查看一下加了注释的页面这样可以避免由于弄错注释格式导致注释内容直接暴露给访问者的情况。
3、主体语义化结构
HTML5新增了多个结构化元素以方便用户创建更友好的页面主体框架下面我们来详细学习。
3.1、定义页眉
如果页面中有一块包含一组介绍性或导航性内容的区域应该用header元素对其进行标记。一个页面可以有任意数量的header元素它们的含义可以根据其上下文而有所不同。例如处于页面顶端或接近这个位置的header可能代表整个页面的页眉也称为页头。
通常页眉包括网站标志、主导航和其他全站链接甚至搜索框这是header元素最常见的使用形式不过不是唯一的形式。
**【示例1】**下面的header代表整个页面的页眉它包含一组代表整个页面主导航的链接在nav元素中。可选的rolebanner并不适用于所有的页眉它明确定义该页眉为页面级页眉因此可以提高可访问性权重。 header rolebannernavullia href#公司新闻/a/lilia href#公司业务/a/lilia href#关于我们/a/li/ul/nav/header这种页面级页眉的形式在网上很常见它包含网站名称通常为一个标识、指向网站主要板块的导航链接以及一个搜索框。
**【示例2】**header适合对页面深处的一组介绍性或导航性内容进行标记。例如一个区块的目录。 main rolemainarticleheaderh1客户反馈/h1navullia href#answer1新产品什么时候上市/alia href#answer2客户电话是多少/ali .../ul/nav/headerarticle idanswer1h2新产品什么时候上市/h2p5月1日上市/p/articlearticle idanswer2h2客户电话是多少/h2p010-66668888/p/article/article/main提示只在必要时使用header。在大多数情况下如果使用h1h6能满足需求就没有必要用header将它包起来。header与h1h6元素中的标题是不能互换的它们都有各自的语义用法。
不能在header里嵌套footer元素或另一个header也不能在footer或address元素里嵌套header。当然不一定要像示例一样包含一个nav元素不过在大多数情况下如果header包含导航性链接就可以用nav。nav包住链接列表是恰当的因为它是页面内的主要导航组。
3.2、定义导航
HTML早期版本没有元素明确表示主导航链接的区域HTML5新增了nav元素定义导航。nav中的链接可以指向页面中的内容也可以指向其他页面或资源或者两者兼具。无论是哪种情况应该仅对文档中重要的链接群使用nav。例如以下代码。 header rolebannernavullia href#公司新闻/a/lilia href#公司业务/a/lilia href#关于我们/a/li/ul/nav/header这些链接a元素代表一组重要的导航因此将它们放入一个nav元素。role属性并不是必需的不过它可以提高可访问性。除了开启一个新行以外nav元素不会对其内容添加任何默认样式该元素没有任何默认样式。
一般习惯使用ul或ol元素对链接进行结构化。在HTML5中nav并没有取代最佳实践应该继续使用这些元素只是在它们的外围简单地包一个nav。
nav能帮助不同设备和浏览器识别页面的主导航并允许用户通过键盘直接跳至这些链接这样可以提高页面的可访问性并提升访问者的体验。
HTML5规范不推荐对辅助性的页脚链接使用nav如“使用条款”“隐私政策”等。不过有时页脚会再次显示顶级全局导航或者包含“商店位置”“招聘信息”等重要链接。在大多数情况下推荐将页脚中的此类链接放入nav中。同时HTML5不允许将nav嵌套在address元素中。
如何判断是否对一组链接使用nav这取决于内容的组织情况。一般应该将网站全局导航标记为nav让用户可以跳至网站各个主要部分的导航这种nav通常出现在页面级的header元素里面。
**【示例】**在下面的页面中只有两组链接放在nav里另外两组则由于不是主要的导航而没有放在nav里。 !--开始页面级页眉--header rolebanner!-- 站点标识可以放在这里 --!-- 全站导航 --nav rolenavigationul/ul/nav/header!--开始主要内容--main rolemainh1客户反馈/h1articleh2问题/h2p反馈/p/articleasideh2关于/h2!-- 没有包含在nav里 --ul /ul/aside/main!--开始附注栏--aside!-- 次级导航 --nav rolenavigationullia href#国外业务/a/lilia href#国内业务/a/li/ul/nav/aside!--开始页面级页脚--footer rolecontentinfo!-- 辅助性链接并未包在nav中 --ul/ul/footer3.3、定义主要区域
一般网页都有一些不同的区块如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接等。不过一个页面只有一个部分代表其主要内容可以将这样的内容包在main元素中该元素在一个页面中仅使用一次。
**【示例】**下面页面是一个完整的主体结构main元素包围着代表页面主题的内容。 header rolebannernav rolenavigation[包含多个链接的ul]/nav/headermain rolemainarticleh1 idgaudi主要标题/h1p[页面主要区域的其他内容]/article/mainaside rolecomplementaryh1侧边标题/h1p[附注栏的其他内容]/asidefooter roleinfo[版权]/footermain元素是HTML5新添加的元素在一个页面里仅使用一次。在main开始标签中添加role“main”这样可以帮助屏幕阅读器定位页面的主要区域。
与p、header、footer等元素一样main元素的内容显示在新的一行除此之外不会影响页面的任何样式。如果创建的是Web应用应该使用main包围其主要的功能。
注意不能将main放置在article、aside、footer、header或nav元素中。
3.4、定义文章块
HTML5的一个新元素是article使用它可以定义文章块。
【示例1】演示article元素的应用。 header rolebannernav rolenavigation[包含多个链接的ul]/nav/headermain rolemainarticleh1 idnews区块链“时代号”列车驶来/h1p对于精英们来说这个春节有点特殊。/pp他们身在曹营心在汉他们被区块链搅动得燥热难耐在兴奋、焦虑、恐慌、质疑中度过一个漫长的春节。/ph2 idsub11. 三点钟无眠/h2pimg srcimages/0001.jpg width200 /春节期间一个互联网大佬云集的区块链群建立因为有蔡文胜、薛蛮
子、徐小平等人的参与该群被封上了“市值万亿”的称号。这个名为“三点钟无眠区块链”的群搅动了一池春水。/ph2 idsub22. 被碾压的春节/h2p....../p/article/main现在页面有了header、nav、main和article元素以及它们各自的内容。在不同的浏览器中article中标题的字号可能不同可以应用CSS使它们在不同的浏览器中显示相同的大小。
article用于包含文章一样的内容不过并不局限于此。在HTML5中article元素表示文档、页面、应用或网站中一个独立的容器原则上是可以独立分配或再用的就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具或者任何其他独立的内容项。其他article的例子包括电影或音乐评论、案例研究、产品描述等。这些确定是独立的、可再分配的内容项。
可以将article嵌套在另一个article中只要里面的article与外面的article是部分与整体的关系。一个页面可以有多个article元素。例如博客的主页通常包括几篇最新的文章其中每一篇都是其自身的article。一个article元素可以包含一个或多个section元素。在article元素里包含独立的h1h6元素。
【示例2】示例1只是使用article元素的一种方式下面看看其他的用法。下面代码展示了对基本的新闻报道或报告进行标记的方法。注意footer和address元素的使用。这里address只应用于其父元素article即这里显示的article而非整个页面或任何嵌套在article里面的article。 articleh1 idnews区块链“时代号”列车驶来/h1p对于精英们来说这个春节有点特殊。/p!-- 文章的页脚并非页面级的页脚 --footerp出处说明/paddress访问网址a hrefhttps://www.huxiu.com/article/233472.html虎嗅/a/address/footer/article【示例3】下面代码展示了嵌套在父元素article里面的article元素。该示例中嵌套的article是用户提交的评论就像在博客或新闻网站上见到的评论部分。该示例还显示了section元素和time元素的用法。这些只是使用article及有关元素的几个常见方式。 articleh1 idnews区块链“时代号”列车驶来/h1p对于精英们来说这个春节有点特殊。/psectionh2读者评论/h2articlefooter发布时间time datetime2020-02-202020-02-20/time/footerp评论内容/p/articlearticle[下一则评论]/article/section/article每条读者评论都包含在一个article元素里这些article元素又嵌套在主article元素里。
3.5、定义区块
section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容通常包含一个标题。section包含章节、标签式对话框中的各种标签页、论文中带编号的区块。例如网站的主页可以分成介绍、新闻条目、联系信息等区块。
Section元素定义通用的区块但不要将它与div元素相混淆。从语义上讲section标记的是页面中的特定区域而div则不传达任何语义。
【示例1】下面代码把主体区域划分为3个独立的区块。 main rolemainh1主要标题/h1sectionh2区块标题1/h2ul[标题列表/ul/sectionsectionh2区块标题2/h2ul[标题列表/ul/sectionsectionh2区块标题3/h2ul[标题列表/ul/section/main【示例2】一般新闻网站都会对新闻进行分类每个类别都可以标记为一个section。 h1网页标题/h1sectionh2区块标题1/h2olli列表项目1/lili列表项目2/lili列表项目3/li/ol/sectionsectionh2区块标题2/h2olli列表项目1/li/ol/section与其他元素一样section并不影响页面的显示。
如果只是出于添加样式的目的要对内容添加一个容器应使用div而不是section。
可以将section嵌套在article里从而显式地标出报告、故事、手册等文章的不同部分或不同章节。例如可以在本示例中使用section元素包裹不同的内容。
在使用section时记住“具有相似主题的一组内容”这也是section区别于div的另一个原因。section和article的区别在于section在本质上其组织性和结构性更强而article代表的是自包含的容器。
在考虑是否使用section的时候一定要仔细思考不过也不必每次都对是否使用正确而感到担心。有时些许主观想法并不会影响页面的正常工作。
3.6、定义附栏
在页面中可能会有一部分内容与主体内容无关但可以独立存在。在HTML5中我们可以使用aside元素表示重要引述、侧栏、指向相关文章的一组链接针对新闻网站、广告、nav元素组如博客的友情链接、微信或微博源、相关产品列表通常针对电子商务网站等。
【示例】aside是有关次要信息的元素它与页面主要关注的内容的相关性稍差且可以在没有上下文的情况下独立存在。可以将它嵌套在article里面或者将它放在article后面添加CSS样式让它看起来像侧栏。aside里面的rolecomplementary是可选的可以提高可访问性。 header rolebannernav rolenavigation[包含多个链接的ul]/nav/headermain rolemainarticleh1 idgaudi主要标题/h1/article/mainaside rolecomplementaryh1次要标题/h1p描述文本/pulli列表项/li/ulpsmall出自: a hrefhttp://www.w3.org/ relexternalciteW3C/cite/a/small/p/aside在HTML中应该将附栏内容放在main的内容之后。出于搜索引擎优化(SEO)和可访问性的目的最好将重要的内容放在前面可以通过CSS改变它们在浏览器中的显示顺序。
对于与内容有关的图像使用figure而非aside。HTML5不允许将aside嵌套在address元素内。
3.7、定义页脚
页脚一般位于页面底部通常包括版权声明可能还包括指向隐私政策页面的链接以及其他类似的内容。HTML5的footer元素可以用在这样的地方但它同header一样还可以用在其他地方。
footer元素表示嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时它才是整个页面的页脚。
如果一个footer包着它所在的区块如一个article的所有内容它代表的是像附录、索引、版权页、许可协议的内容。
页脚通常包含关于它所在区块的信息如指向相关文档的链接、版权信息、作者及其他类似条目。页脚并不一定要位于所在元素的末尾不过通常位于所在元素的末尾。
【示例1】footer代表页脚因为它最近的祖先是body元素。 header rolebannernav rolenavigation链接列表/nav/headermain rolemainarticleh1 idgaudi主要标题/h1h2次标题/h2/article/mainaside rolecomplementaryh1次标题/h1/asidefooterpsmall版权信息/small/p/footer页面具有header、nav、main、article、aside和footer元素但是并非每个页面都需要具备这些元素它们代表HTML中主要页面的构成要素。
footer元素本身不会为文本添加任何默认样式。这里版权信息的字号比普通文本的小因为它嵌套在small元素里。像其他内容一样可以通过CSS修改footer元素所包含内容的字号。
提示不能在footer元素里嵌套header元素或另一个footer元素。同时也不能将footer元素嵌套在header或address元素里。
【示例2】下面的第一个footer包含在article内属于该article的页脚。第二个footer是页面级的只能对页面级的footer使用role“contentinfo”且一个页面只能使用一次。 articleh1文章标题/h1p文章内容/pfooterp注释信息/paddressa href#W3C/a/address/footer/articlefooter rolecontentinfo版权信息/footer3.8、使用role
role是HTML5新增的属性其作用是告诉Accessibility类应用如屏幕阅读器等当前元素所扮演的角色主要是供残疾人使用使用role可以增强文本的可读性和语义化。
在HTML5元素内标签本身就是有语义的因此role作为可选属性使用但是在很多流行的框架如Bootstrap中都很重视类似的属性和声明目的是为了兼容旧版本的浏览器用户代理。
role属性主要应用于文档结构和表单中。例如设置输入密码框对于正常人可以用placaholder提示输入密码但是对于残障人士是无效的这时就需要用到role属性。另外在旧版本的浏览器中由于不支持HTML5标签所以有必要使用role属性。
例如下面代码告诉屏幕阅读器此处有一个复选框且已经被选中。 div rolecheckbox aria-checkedchecked input typecheckbox checked/div下面是常用的role角色值。
role“banner”横幅面向全站的内容通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端而且通常横跨整个页面的宽度。使用方法将其添加到页面级的header元素中每个页面只使用一次。role“navigation”导航文档内不同部分或相关文档的导航性元素通常为链接的集合。使用方法与nav元素是对应关系。应将其添加到每个nav元素中或其他包含导航性链接的容器。这个角色可以在每个页面上使用多次但是同nav一样不要过度地使用该属性。role“main”主体文档的主要内容。使用方法与main元素的功能是一样的。对于main元素来说建议也应该设置rolemain属性其他结构元素更应该设置rolemain属性以便让浏览器能够识别它是网页的主体内容。在每个页面仅使用一次。role“complementary”补充性内容文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的。使用方法与aside元素是对应关系。应将其添加到aside或div元素中前提是该div仅包含补充性内容。可以在一个页面包含多个complementary角色但不要过度使用。role“contentinfo”内容信息包含关于文档信息的大块、可感知区域。这类信息的例子包括版权声明和指向隐私权声明的链接等。使用方法将其添加至页脚通常为footer元素每个页面仅使用一次。
【示例】下面代码演示了在文档结构中如何应用role。 !-- 开始页面容器 --div classcontainerheader rolebannernav rolenavigation[包含多个链接的列表]/nav/header!-- 应用CSS后的第一栏 --main rolemainarticle/articlearticle/article[其他区块]/main!-- 结束第一栏 --!-- 应用CSS后的第二栏 --div classsidebaraside rolecomplementary/asideaside rolecomplementary/aside[其他区块]/div!-- 结束第二栏 --footer rolecontentinfo/footer/div!-- 结束页面容器 --注意即便不使用role角色页面看起来也没有任何差别但是使用它们可以提升使用辅助设备的用户的体验。有鉴于此推荐使用它们。
对表单元素来说form角色是多余的search用于标记搜索表单application则属于高级用法。当然不要在页面上过多地使用地标角色。过多的role角色会让屏幕阅读器的用户感到累赘降低role的作用从而影响用户的整体体验。
4、案例 headerh1[网页标题]/h1h2[次级标题]/h2h4[标题提示]/h4/headermainnavh3[导航栏]/h3a href#链接1/a a href#链接2/a a href#链接3/a/navsectionh2[文章块]/h2articleheaderh1[文章标题]/h1/headerp[文章内容]/pfooterh2[文章脚注]/h2/footer/article/sectionasideh3[辅助信息]/h3/asidefooterh2[网页脚注]/h2/footer/main
