重学 html の标签语义化

栏目: Html · 发布时间: 5年前

内容简介：HTML语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。我们比较习惯使用 div、span 来垒页面，视觉上没啥问题，文字既内容，html 标签只被 css 样式所用，单从 html 结构上很难看出意图。语义标签则是纯文字的补充，比如标题，自然段、章节、列表等我们使用相应的 html 标签会更好些。article、section、nav、aside、footer、header 、ul、li 等该类标签大家掌握理解的应该都不错，按照字面理解即可。

HTML语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。我们比较习惯使用 div、span 来垒页面，视觉上没啥问题，文字既内容，html 标签只被 css 样式所用，单从 html 结构上很难看出意图。语义标签则是纯文字的补充，比如标题，自然段、章节、列表等我们使用相应的 html 标签会更好些。

语义化的好处

对开发者友好---开发者可根据html标签大概了解页面结构
对搜索引擎友好---seo 排名更靠前
对无障碍设备友好---盲人软件读屏

标签列举

结构类

article、section、nav、aside、footer、header 、ul、li 等

该类标签大家掌握理解的应该都不错，按照字面理解即可。

表述类

abbr 缩写

<abbr title="World Wide Web">WWW</abbr>

blockquote、q、cite

blockquote 表示整段话的引用、q 表示一行文字的引用、cite表示引述作品名

figure、figcaption

两个标签结合使用，来定义图文。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

使用原则

用对比不用好，不用比用错好。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Pattern Recognition and Machine Learning

Christopher Bishop / Springer / 2007-10-1 / USD 94.95

The dramatic growth in practical applications for machine learning over the last ten years has been accompanied by many important developments in the underlying algorithms and techniques. For example,......一起来看看《Pattern Recognition and Machine Learning》这本书的介绍吧!

码农工具