html5 footer header,W3C HTML5标准阅读笔记 – header、footer、main、address

在HTML5标准中，新增了header标签用于表示引导介绍性内容，footer标签用于表示脚注内容，同时新增了main标签用于表示页面的主体内容，而新增的address标签则用于表示文章或页面的联系信息。

header和footer

header和footer元素可以包含任何除header、footer和main元素以外的Flow元素作为子元素。与article等sectioning content一样，header和footer仅增添了语义，在浏览器呈现上，与普通的div块级元素没什么区别。从定义上来讲，header元素表示与之最近的sectioning content(article、section、nav、aside)父级元素或者sectioning root(body、td、figure、fieldset、blockquote)父级元素的简介，而footer元素则表示与之最近的sectioning content父级元素或者sectioning root父级元素的脚注信息。footer元素所表示的脚注信息一般包括：内容的作者、与相关文档的链接、版权信息等。footer标签一般放在父级sectioning元素的最后，但标准对此不做强制要求。

一个section中header和footer元素可以重复出现多次。当header或footer的父级sectioning元素是body时，它们所表示的就是整个页面的简介或脚注信息。

有一些网站的设计偏好在footer标签中放置大量的内容：图片、链接、广告、版权等等，这种设计称之为“富脚注设计”(fat footers)。

main

main元素用于表示整个文档的主体内容，因此main标签一般作为body标签的直级子标签而存在，并且每个HTML文档中最多只能存在一个main标签。对于main标签，出于可用性(accessibility)的考虑，标准建议在使用时添加role="main"这一属性值。以下为main标签使用的一个例子：

...

address

address元素用于表示与之最近的article或body父级元素的联系人信息，如果这个父级元素是body而不是article，则address表示整个文档的联系人信息。address元素内部可以放置除h1-h6、sectioning content元素(article、nav、section、aside)以及header、footer、address以外的其它所有Flow元素。与header、footer或sectioning content元素不同，address元素不仅增添了语义，浏览器还会对其做斜体显示处理。

与字面意思稍有不同的是，address元素只能用来存放联系人/联系方式信息，不能用来存放除联系信息外其它广义层面的地址信息。事实上，这个元素的名称改为contact似乎更为合理一些。

html5 footer header,W3C HTML5标准阅读笔记 – header、footer、main、address相关推荐

阅读类型HTML,W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)
HTML4中,元素被分成两大类: inline(内联元素)与block(块级元素).但在实际的开发过程中,因为页面表现的需要,前端工程师经常把inline元素的display值设定为block(比如a ...
html samp如何转成块,W3C HTML5标准阅读笔记 - code、var、samp、kbd
HTML5中,有4个标签与"代码"."程序"有关:code.var.samp.kbd. code 顾名思义,code标签用于标记计算机程序代码,一般仅包含小的代 ...
html5与css 1. web标准及组成
html5与css 1. web标准及组成学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4. ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
Html5 常用的单词及其意思（笔记）
Html5 常用的单词及其意思(笔记) 第一章网页的基本结构一.符号(词典上可能找不到,是约定俗成的用语或缩写语) 程度:了解 internet:因特网 TCP/IP:Transmission Co ...
html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
Head First HTML与CSS阅读笔记（二）
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
w3c h5 + css + js笔记
公司电脑:/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 「 1. js基础/css基础/html基础 w3school https://www. ...

html5 footer header,W3C HTML5标准阅读笔记 – header、footer、main、address

html5 footer header,W3C HTML5标准阅读笔记 – header、footer、main、address相关推荐

最新文章

热门文章