重学前端(三)

一、语义类标签

语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。

( zha )( zha )

复制代码
牛(zha) 逼(zha)

二、语义类标签是什么,使用它有什么好处?

语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。

  • 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
  • 除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。

section嵌套会使得其中的h1-h6下降一级

  • header,如其名,通常出现在前部,表示导航或者介绍性的内容。
  • footer,通常出现在尾部,包含一些作者信息、相关链接、版权信息等。

header 和 footer 一般都是放在 article或者 body 的直接子元素,但是标准中并没有明确规定,footer 也可以和 aside,nav,section 相关联(header 不存在关联问题)。

  • aside 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。

aside 很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 aside,aside 不一定是侧边栏。

aside 和 header 中都可能出现导航(nav 标签),二者的区别是,header 中的导航多数是到文章自己的目录,而 aside 中的导航多数是到关联页面或者是整站地图。

最后 footer 中包含 address,这是个非常容易被误用的标签。address 并非像 date 一样,表示一个给机器阅读的地址,而是表示“文章(作者)的联系方式”,address 明确地只关联到 article 和 body。

  • dfn 标签是用来包裹被定义的名词。
  • abbr 标签表示缩写。
  • cite 标签作品名称。
  • figure 标签用于表示与主文章相关的图像、照片等流内容。
  • pre 标签表示这部分内容是预先排版过的,不需要浏览器进行排版。

!!!如果你有把握把它用对那你就用,要不要你还是用div和span吧!

转载于:https://juejin.im/post/5ceb8d606fb9a07ed136b3dc

你可能感兴趣的:(重学前端(三))