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

来源：互联网发布：天猫销售数据怎么看到编辑：程序博客网时间：2024/05/17 08:10

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：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>

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

阅读全文

2 0