讲给后台程序员看的前端系列教程(04)——HTML5标签(3)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100547134

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

HTML语义标签

在讲这类标签之前,我们先来聊聊标签的语义化。
HTML5标签语义化的目的:让程序员(甚至是非IT人士)能够直观地认识到标签及其属性的用途和作用。比如,当我们看到h1~h6时就知道:这个标签是用来显示标题的。当然,语义化还有其他非常重要的作用。通过语义化标签可以让爬虫,搜索引擎,SEO读懂我们的页面。比如,我们利用HTML5开发一款新闻朗读软件给盲人朋友用,如果我们把重点内容放入strong标签中,那么该内容会被重读从而突出重点。

blockquote标签

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

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

在该标签中,可使用cite属性标明引用内容的来源。

cite标签

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

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

address标签

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

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

code标签

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

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

var标签

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

<var>count</var>

dfn标签

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

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

del标签

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

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

pre标签

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

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


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

mark标签

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

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

details和summary标签

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

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

源码和页面

在此,附上本节教程源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML常用语义标签</title>
</head>
<body>

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


	<!-- cite标签用于表示作品的引用 -->
	这段话出自<cite>《java编程思想》</cite>
	<br>
	<br>

    <!-- address标签用于表示地址 -->
	<address>中国四川省成都市高新区</address>
	<br>
	<br>

	<!-- code标签用于表示计算机代码 -->
	<code>system.out.println()</code>
	<br>
	<br>

	<!-- var标签用于表示变量 -->
	<var>count</var>
	<br>
	<br>

	<!-- dfn标签用于定义专业术语 -->
	<dfn>量子网络通信</dfn>
	<br>
	<br>

	<!-- del标签用于显示被删除的文本 -->
	<del>该方法已经废弃</del>
	<br>
	<br>


	<!-- pre标签表示预先的格式化-->
	<pre>
		<p>       第一行文字</p>


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

	<!-- mark标签用于标记文本中的重点内容,默认用荧光色标记-->
	<mark>排序算法是我们面试的重点</mark>
	<br>
	<br>

	<!-- details和summary标签 -->
	<details>
		<summary>java编程思想</summary>
		这本书写得非常好,值得一看
	</details>
	<br>
	<br>
	
</body>
</html>

效果如下:

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页