一、语义化
1、语义化属性
- 添加
itemprop、itemscope
属性,到达数据结构化,属性名可参考 schema.org; meta
标签和itemprop
属性,<meta itemprop="dateModified" content="2018-11-17T04:14:51.000Z">
;
注:参考知乎页面,改动一下meta
的读取位置
1 | <!--可以尝试,将meta标签放在需要元信息的块中--> |
2、语义化标签
- 各个标签的含义,使用场景
注:语义化,即面向对象写html
,方便网络蜘蛛或人快速理解网页结构和内容。
二、语义化标签
1、<main>
<main>
标签规定了document
的主要内容,主要内容包括与中心主题直接相关或扩展的内容,或应用程序的中心功能。<main>
元素中的内容对于文档来说应当是唯一的。
注:在一个文档中,不得包含多个未指定hidden
属性的<main>
元素。<main>
元素不能是以下元素的后代:<article>
、<aside>
、<footer>
、<header>
或 <nav>
。
2、<header>
<header>
标签定义文档或者文档的一部分区域的页眉。<header>
元素应该作为介绍内容或者导航链接栏的容器。在一个文档中,您可以定义多个 <header>
元素。
注:<header>
标签不能被放在 <footer>
、<address>
或者另一个 <header>
元素内部
3、<footer>
<footer>
标签定义文档或者文档的一部分区域的页脚。在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,您可以定义多 <footer>
元素。
注:<footer>
元素必须不能是 <header>
、<address>
或者另一个<footer>
元素的后代元素
4、<nav>
<nav>
标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到<nav>
元素。<nav>
元素只是作为标注一个导航链接的区域。
1 | <nav> |
5、<section>
<section>
元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading
)。一般通过是否包含一个标题 (<h1>
-<h6>
element) 作为子节点 来 辨识每一个<section>
。
- 如果元素内容可以分为几个部分的话,应该使用
article
而不是section
。 - 不要把
section
元素作为一个普通的容器来使用,这是div
的用法(特别是当片段(the sectioning )仅仅是为了美化样式的时候)。
1 | <section> |
6、<article>
<article>
元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
- 当
<article>
元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>
元素可嵌套在代表博客文章的<article>
元素中。 <article>
元素的作者信息可通过<address>
元素提供,但是不适用于嵌套的<article>
元素。<article>
元素的发布日期和时间可通过<time>
元素的pubdate
属性表示。
1 | <article class="film_review"> |
注:section与article的区别
- section:用来表示文档或应用的一部分。它主要来对一个整体部分划分为多个小部分,所以一般会使用
<h1>
-<h6>
标签与<p>
标签,每个小部分用标题来进行标示。 - acticle:定义文章、页面或者是应用程序中独立完整可被外部引用的内容。一般有自己的
<header>
与<footer>
,通常内部会用<aside>
来进行辅助性说明等。
7、<aside>
<aside>
标签定义 <article>
标签外的内容,<aside>
的内容应该与附近的内容相关。
通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。
注: <aside>
元素不能成为<address>
元素的子元素
8、<address>
<address>
标签定义文档作者/所有者的联系信息。
如果 <address>
元素位于 <body>
元素内部,则它表示该文档作者/所有者的联系信息。
如果<address>
元素位于 <article>
元素内部,则它表示该文章作者/所有者的联系信息。
注:<address>
元素通常被包含在<footer>
元素的其他信息中