您的位置：首页 > Web前端 > HTML5

讲给Android程序员看的前端教程(04)——HTML5标签(3)

2017-11-27 09:15 846 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：http://blog.csdn.net/lfdfhl

本文视频教程：http://www.stay4it.com/my/course/37

课程安排

HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：

HTML常用标签

HTML文本标签

HTML语义标签

HTML结构标签

HTML列表标签

HTML表格标签

HTML表单标签

HTML新增标签和API

嗯哼，来吧，我们继续HTML5标签的学习。咋了？你竟然有点担心学不会！？别逗了，这部分和我们常写的Java比起来简单多了，它的逻辑性也弱得多。所以，大胸弟你大可放心，就像看电影那样：一手拿着爆米花，一手拿着可乐，也完全可以看懂本教程。

之前，我们已经学习了HTML常用标签、HTML文本标签；现在我们来继续学习HTML语义标签。

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>

页面在谷歌浏览器的显示效果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航