大前端 (四) -- HTML5 标签 3

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011033906/article/details/89975719

HTML语义标签

HTML5标签语义化的目的:让程序员(甚至是非IT人士)能够直观地认识到标签及其属性的用途和作用。比如,当我们看到 h1~h6时就知道:这个标签是用来显示标题的。

当然,语义化还有其他非常重要的作用。通过语义化标签可以让爬虫,搜索引擎,SEO读懂我们的页面。比如,我们利用 HTML5 开发一款新闻朗读软件给盲人朋友用,如果我们把重点内容放入 strong 标签中,那么该内容会被重读从而突出重点。

1. blockquote标签

blockquote用于表示文本的引用 --> 引用的文本会在左、右两侧同时缩进;请看如下示例:

<blockquote cite="http://blog.csdn.net/lfdfhl/article/details/77825765">代理模式(Proxy Pattern)是面向对象中一种非常常见的设计模式。其实,不单是在软件开发领域,在我们的日常生活中对于代理也时常可见。比如:房东要将自家的房租出售,于是到房地产中介公司找一个代理,由他来帮自己完成销售房屋,签订合同等等事宜。</blockquote>

在这里插入图片描述
在该标签中,可使用cite属性标明引用内容的来源。

2. cite标签

刚才我们看到cite是blockquote标签的中的一个属性;其实,cite还可以单独作为一个标签使用。cite标签用于表示文本对某个参考文献的引用;比如书籍或者杂志的标题;请看如下示例:

这段话出自<cite>《java编程思想》</cite>

在这里插入图片描述

3. address标签

address标签用于表示地址,显示效果通常为斜体,请看如下示例:

<address>中国四川省成都市高新区</address>

在这里插入图片描述

4. code标签

code标签用于表示计算机代码,请看如下示例:

<code>system.out.println()</code>

在这里插入图片描述

5. var标签

var标签用于表示变量,请看如下示例:

<var>count</var>

在这里插入图片描述

6. dfn标签

dfn标签用于定义专业术语,它源于短语defining instance,请看如下示例:

<dfn>量子网络通信</dfn>

在这里插入图片描述

7. del标签

del标签用于表示删除,在该标签中的文本会被画一条横线,请看如下示例:

<del>该方法已经废弃</del>

在这里插入图片描述

8. pre标签

pre标签表示预先的格式化,它源自于英语单词preformatted,该标签中的空格,回车等格式字符都会被保留。请看如下示例:

<pre>
		<p>       第一行文字</p>


		<p>第二行文字</p>
</pre>

在这里插入图片描述

9. mark标签

mark标签用于标记文本中的重点内容,默认采用荧光色标记。请看如下示例:

<mark>排序算法是我们面试的重点</mark>

在这里插入图片描述

10. details和summary标签

details标签用于表示详细信息;summary标签常用于表示摘要信息;两者常结合起来使用。请看如下示例:

<details>
	<summary>java编程思想</summary>
	这本书写得非常好,值得一看
</details>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u011033906/article/details/89975719
今日推荐