html语义化标签

百椰拿铁

已于 2022-01-20 08:43:20 修改

阅读量472

点赞数

文章标签： html 前端

于 2022-01-20 04:26:28 首次发布

本文链接：https://blog.csdn.net/qq_42312396/article/details/122593500

版权

1、语义化

做了百度前端技术学院的任务来复习html标签，感觉以前对语义化了解得不深，而这个练习一直在强调语义化。
首先是问题：语义化是什么？
html5的规范里已经有了答案：

更鼓励使用能描述内容本质的类名，而不是那些只是描述其外在表像的值。

语义化就是让代码变得更容易让人理解，一方面代码更轻松看，另一方面更容易让计算机抓捕内容，这样读取网页的人更容易理解。
中心思想就是：方便理解
而html为了推动语义化，有许多望文生义的标签，同样它也赋予了这些标签一些附和含义的格式。

例如：

<dl>
		<dt>多级闪蒸（ <abbr title="Multistage Flashing Systom">MSF</abbr>）</dt>
		<dd>所谓闪蒸，是指一定温度的海水在压力突然降低的条件下，部分海水急骤蒸发的现象</dd>
		<dt>低温多效蒸馏（<abbr title="">LT-MultipleEffectDistillationMED</abbr>）</dt>
		<dd>所谓低温是指海水在第一效的最高蒸发温度
		（盐水顶温）不高于70℃，这是因为当蒸发温度低于70℃时，蒸发表面海水中盐类结晶的速率将大大降低，
		从而可避免或减缓设备结垢的产生。
		</dd>
		</dl>

我们会选择使用**描述列表 (description list)**标记一组项目及其相关描述：术语和定义，或者是问题和答案等。而不是单纯使用h1和p的组合标签。浏览器的默认样式也会贴合标签，在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。
这样的例子还有很多，官方推荐我们使用语义化标签来理解“我们为什么要这么写”“我们要展现什么样的内容”。
语义化的好处也有很多：

方便机器解读
方便人类理解
方便视力受损的人通过屏幕阅读器理解

2、常用的标签用法

说完了理解，列举一些常用的html标签。

引用标签cite,blockquote,q

<blockquote cite=“http://xxxx”>  
		<q>“水是地球上最常见的物质之一。”</q>地球表面有71%被水覆盖。<u>它是包括无机化合、人类在内所有生命生存的重要资源，也是生物体最重要的组成部分.</u>
		纯水导电性十分微弱，属于极弱的电解质。日常生活中的水由于溶解了其他电解质而有较多的阴阳离子，
		才有较为明显的导电性。<sup>[1]</sup>
		</blockquote>
		
		<p>—戚桓瑜主编.<cite>光伏材料制备与加工[M].2015 第40页</cite></p>

这三个标签都是用来表示引用的。
　　cite是用来标明引言的，所谓引言，就是对一本书、一篇报告或其它出版的来源资料的引用。
　　q是用来分离文本中的引语，定义一个短的引用。
　　blockquote是用来定义一段引语的。比如我们要引用某篇诗文或者文章片段。
　　blockquote和q可以加上cite属性来表明该引用的来源。

略缩语abbr
例如：HTML

<abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr>

用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。
一些浏览器会添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加 font-variant: none 。

3.引用单元 figure

<figure><img src="img/shui.png" alt="这是水分子结构示意图"/>
		<figcaption>水分子结构示意图
		</figcaption>
		</figure>

在这里插入图片描述 figure 元素代表一段独立的内容, 经常与说明（caption） figcaption 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。