详情
第一部分介绍了HTML5各方面的知识点，包括绘图、音频和视频、新型表单等内容；第二部分主要介绍CSS样式各属性的设置和使用方法，包括CSS3中新增的弹性盒模型、多列布局、动画效果、渐变填充等内容；第三部分主要介绍jQuery Mobile的相关知识，包括jQuery Mobile的页面、主题、组件、事件和插件等内容，并通过实用案例讲解了综合运用三者开发移动应用的方法和技巧。
图书在版编目（CIP）数据
HTML5+CSS3+JQuery Mobile APP与移动网站设计从入门到精通/新视角文化行编著.--北京：人民邮电出版社，2018.10
ISBN 978-7-115-48500-7
Ⅰ.①H… Ⅱ.①新… Ⅲ.①超文本标记语言-程序设计②网页制作工具③JAVA语言-程序设计 Ⅳ.①TP312.8②TP393.092.2
中国版本图书馆CIP数据核字（2018）第117715号
◆ 编 著 新视角文化行
责任编辑 杨璐
责任印制 陈犇
◆ 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164
电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
三河市君旺印务有限公司印刷
◆ 开本：787×1092 1/16
印张：25
字数：801千字
印数：1-2 500册
彩插：4
2018年10月第1版
2018年10月河北第1次印刷
读者服务热线：（010）81055410 印装质量热线：（010）81055316
反盗版热线：（010）81055315
广告经营许可证：京东工商广登字20170147号
本书全面、系统地讲解了HTML5、CSS3和jQuery Mobile相关知识，并涵盖从Web界面设计到移动应用开发的各种技术和知识点，内容由浅入深，讲解通俗易懂，并在知识点介绍过程中配合大量案例进行讲解，以帮助读者提高实战技能。
本书共19章，分为3个部分。第一部分是第1~7章，介绍了HTML5各方面的知识点，重点介绍了文本、图像、canvas元素、音频、视频和新型表单等内容；第二部分是第8~14章，主要介绍了CSS3样式各属性的设置和使用方法，重点介绍了CSS3中新增的弹性盒模型、多列布局、动画效果和渐变填充等内容；第三部分是第15~19章，主要介绍了jQuery Mobile的相关知识，重点介绍了jQuery Mobile的页面、主题、组件、事件和插件等内容，并通过实际案例讲解了综合运用HTML5、CSS3和jQuery Mobile开发移动应用的方法和技巧。
本书配套下载资源中提供了所有实例的源文件和素材，以及相关的教学视频，适合Web设计与开发的初学者和爱好者自学使用，也适合有一定Web前端开发基础的网页开发人员阅读，同时还可作为计算机培训班和各院校相关专业的教辅用书。
本书全面介绍了HTML5、CSS3和jQuery Mobile的核心知识点，通过实际案例与知识点相结合的方式，使读者能够更容易理解技术要点，掌握APP与移动网站设计的方法与技巧。
本书特点
● 完善的学习模式
“基础知识+实战案例+提示与技巧+教学视频”4大环节保障了可学习性。详细讲解HTML5、CSS3和jQuery Mobile的知识与应用，力求让读者即学即会。140个实战案例辅助读者理解语法知识，做到处处有案例，步步有操作。180个提示和50个技巧贯穿全书，帮助读者顺利过渡到实际工作。
● 进阶式知识讲解
全书共19章，分别从HTML5、CSS3和jQuery Mobile的基础入手，循序渐进讲解它们的核心技术和应用，并逐步进阶到它们的综合应用。基础讲解与操作紧密结合，方法全面，技巧丰富，不但能学习到专业的语法知识与技巧，还能提高实际应用的能力。
● 详尽的视频教学
140个近640分钟多媒体语音教学视频，由一线教师亲授，详细记录了所有案例的具体操作过程，全面配合书中所讲知识与技能，提高学习效率。
● 配套的素材、源文件
提供书中所有实例的素材文件，便于读者跟随学习，掌握学习内容的精髓。另外，书中还提供了配套的源文件（HTML文件和CSS文件），供读者对比学习，提升学习效果。
本书内容
全书共分为19章，每章的主要内容如下。
第1章 从HTML到HTML5。主要介绍了HTML与HTML5的相关基础知识及HTML5的优势，使读者对HTML和HTML5有更深入、全面的了解。
第2章 HTML5文字与段落标签。主要介绍了HTML中用于设置文字、段落和列表的相关标签和属性设置方法，使读者能够更好地控制网页中的文字内容。
第3章 HTML5文档结构标签。主要介绍了HTML中新增的用于描述文档结构的相关标签的使用方法，通过使用HTML5文档结构标签，可以使页面的内容结构更加清晰。
第4章 HTML5图像与超链接标签。主要介绍了HTML页面中图像的插入与设置方法，以及网页中各种超链接的创建方法和相关属性的设置方法。
第5章 使用HTML5中的表单元素。详细介绍了传统的表单元素和HTML5新增的表单元素，通过新增的HTML5表单元素可以在移动应用中创建更加友好的表单应用。
第6章 使用HTML5画布元素。详细介绍了使用canvas元素在网页中绘制图形、文字和渐变的方法。
第7章 HTML5音频与视频标签。详细讲解了HTML5中Video与Audio元素的使用方法和属性设置技巧。
第8章 CSS样式的发展与选择器。主要介绍了有关CSS样式的基础知识，包括CSS样式的语法、CSS选择器、CSS3新增的选择器及应用CSS样式的方法。
第9章 设置文字与段落样式。主要介绍了用于设置网页文字与段落效果的相关CSS样式属性，以及CSS3新增的用于设置文字效果的相关属性的使用方法。
第10章 设置背景样式。主要介绍了用于设置网页元素背景效果的相关CSS样式属性，以及CSS3新增的颜色和背景相关的设置属性的使用方法。
第11章 设置超链接和边框样式。主要介绍了对元素边框和超链接进行设置的相关CSS属性和设置方法，并且对CSS3中新增的边框样式属性进行了详细讲解。
第12章 设置元素的定位与布局属性。主要介绍了网页元素定位的各种方法及相关CSS样式属性的设置方法，并且对CSS3中新增的多列布局属性进行了详细讲解。
第13章 CSS3盒模型。详细讲解了传统CSS盒模型与CSS3新增的弹性盒模型，以及CSS3中新增的有关盒模型设置的相关属性。
第14章 CSS3动画效果。详细介绍了CSS3各种动画效果的制作方法和技巧。
第15章 jQuery和jQuery Mobile基础。主要介绍了jQuery和jQuery Mobile的相关基础知识，以及jQuery Mobile页面的文档结构，使读者对jQuery Mobile页面有更好的认识。
第16章 认识并创建jQuery Mobile页面。主要介绍了jQuery Mobile页面及各部分结构的创建和设置方法，还介绍了结构化jQuery Mobile页面内容的方法。
第17章 使用jQuery Mobile主题与组件。主要介绍了jQuery Mobile页面主题的相关知识，包括使用默认主题、自定义主题的方法等，还介绍了jQuery Mobile中的各种页面组件的使用和设置方法，包括按钮组件、表单组件和列表组件等。
第18章 使用jQuery Mobile事件与插件。主要介绍了jQuery Mobile页面中的常用事件的设置方法，以及常用插件的使用方法。
第19章 移动应用制作实战。通过3个实用的移动应用案例，向读者介绍了综合应用HTML5、CSS3和jQuery Mobile开发移动应用的方法。
资源下载及其使用说明
本书配套资源已作为学习资料提供下载，扫描封底或右侧二维码即可获得下载方式。如果大家在阅读或使用中遇到任何与本书相关的技术问题或者需要什么帮助，请发邮件至szys@ptpress.com.cn，我们会尽力为大家解答。
编者
2018年3月
HTML是Internet上用于设计制作网页的主要语言。网页中所包括的图像、动画、表单和多媒体等复杂的元素，其本质都是HTML。随着互联网的飞速发展，网页设计语言也在不断变化和发展，从HTML到HTML5，每一次的发展变革都是为了适应互联网的需求。本章将向读者介绍有关HTML和HTML5的相关基础知识，使读者对HTML的发展有所了解，并且理解HTML5与HTML之间有哪些共同点及有哪些改进。
本章知识点
• 了解HTML的基础知识
• 理解HTML的基本语法和编写注意事项
• 掌握HTML5的文档结构并理解HTML5的优势
• 掌握两种HTML文档的编写方式
• 认识HTML5中的标签
• 了解Web移动应用
HTML主要运用标签使页面文件显示出预期的效果，也就是在文本文件的基础上，加上一系列的网页元素展示效果，最后形成后缀名为.htm或.html的文件。通过浏览器阅读HTML文件时，浏览器负责解释插入到HTML文件中的各种标签，并以此为依据显示内容，把HTML语言编写的文件称为HTML文本，HTML语言即网页的描述语言。
在介绍HTML语言之前，不得不介绍World Wide Web（万维网）。万维网是一种建立在因特网上的、全球性的、交互的、多平台的和分布式的信息资源网络。它采用HTML语法描述超文本（Hypertext）文件。Hypertext一词有两个含义：一个是链接相关联的文件，另一个是内含多媒体对象的文件。
HTML的英文全称是Hyper Text Markup Language，中文通常称为超文本标记语言，HTML是Internet中用于编写网页的主要语言，HTML提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件。通过HTTP通信协议，HTML文件得以在万维网上进行跨平台的文件交换。
提示
HTML文件可以直接由浏览器解释执行，无须编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分辨其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。
HTML文件制作简单，且功能强大，支持不同数据格式的文件导入，主要有以下几个特点。
（1）HTML文档容易创建，只需要一个文本编辑器就可以完成。
（2）HTML文件存储容量小，能够尽可能快速地在网络中进行传输和显示。
（3）HTML文件与操作平台无关，HTML独立于操作系统平台，能够与多种平台兼容，只需要一个浏览器就可以在操作系统中浏览网页文件。
（4）简单易学，不需要很深的编程知识。
（5）HTML具有扩展性，HTML的广泛应用带来了加强功能、增加标识符等要素，HTML采取了类元素的方式，为系统扩展提供了保证。
<html> <!--HTML文件开始--> <head> <!--HTML文件的头部开始--> 头部内容 </head> <!--HTML文件的头部结束--> <body> <!--HTML文件的主体开始--> 主体内容 </body> <!--HTML文件的主体结束--> </html> <!--HTML文件结束-->
编写HTML文件的时候，必须遵循HTML的语法规则。一个完整的HTML文件由标题、段落、列表、表格、单词和嵌入的各种对象所组成。这些逻辑上统一的对象统称为元素，HTML使用标签来分割并描述这些元素。实际上，整个HTML文件就是由元素与标签组成的。
HTML文件基本结构如下。
可以看到，代码分为3部分。
1. <html>……</html>
告诉浏览器HTML文件的开始和结束，<html>标签出现在HTML文档的第一行，用来表示HTML文档的开始。</html>标签出现在HTML文档的最后一行，用来表示HTML文档的结束。两个标签一定要一起使用，网页中的其他内容都需要放在<html>与</html>之间。
2. <head>……</head>
网页的头标签，用来定义HTML文档的头部信息，该标签也是成对使用的。
3. <body>……</body>
在<head>标签之后就是<body>与</body>标签了，该标签也是成对出现的。<body>与</body>标签之间为网页主体内容和其他用于控制内容显示的标签。
<x>内容</x>
<b>加粗文字</b>
<x a1="v1"， a2="v2"，……an="vn">内容</x>
<x>
<x al="v1"，a2="v2"，……，an="vn">
<hr color="#0000FF">
绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间的部分是元素体，如<body>…</body>。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标签内进行设置。
1. 普通标签
普通标签是由一个起始标签和一个结束标签所组成的，其语法格式如下。
其中，x代表标签名称。<x>和</x>就如同一组开关：起始标签<x>为开启某种功能，而结束标签</x>（通常为起始标签加上一个斜线/）为关闭功能，受控制的内容便放在两标签之间，如下面的代码。
标签之中还可以附加一些属性，用来实现或完成某些特殊效果或功能，如下面的代码。
其中，a1，a2……，an为属性名称，而v1，v2……，vn则是其所对应的属性值。属性值加不加引号，目前所使用的浏览器都可接受，但根据W3C的新标准，属性值是需要加引号的，所以读者最好养成加引号的习惯。
2. 空标签
虽然大部分的标签是成对出现的，但也有一些是单独存在的，这些单独存在的标签称为空标签，其语法格式如下。
同样，空标签也可以附加一些属性，用来完成某些特殊效果或功能，如下面的代码。
如下面的代码。
提示
HTML还有其他更为复杂的语法，使用技巧也非常多，作为一种语言，它有很多的编写原则并且以很快的速度发展着。
<p align="center">这里是段落文本</p>
HTML由标签和属性构成，在编写HTML文档时，需要注意以下6点。
（1）“<”和“>”是任何标签的开始和结束。元素的标签需要使用这对尖括号括起来，并且在结束标签的前面加上符号“/”，如<p></p>。
（2）在HTML代码中不区分大小写。
（3）任何空格和回车在HTML代码中均不起作用。为了使HTML代码更加清晰，建议不同的标签之间使用回车进行换行。
（4）在HTML标签中可以添加各种属性设置，如下面的HTML代码。
（5）需要正确的输入HTML标签。输入HTML标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示。
（6）在HTML代码中合理地使用注释。<!--需要注释的内容-->注释语句只会出现在HTML代码中，不会在浏览器中显示。
HTML5是近10年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。
W3C在2010年1月22日发布了最新的HTML5工作草案。HTML5的工作组包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera及数百个其他的开发商。制定HTML5的目的是取代1999年W3C所制定的HTML4.01和XHTML1.0标准，希望能够在网络应用迅速发展的同时，网页语言能够符合网络发展的需求。
HTML5实际上指的是包括HTML、CSS样式和JavaScript脚本在内的一整套技术的组合，希望通过HTML5能够轻松地实现许多丰富的网络应用需求，而减少浏览器对插件的依赖，并且提供更多能有效增强网络应用的标准集。
在HTML5中添加了许多新的应用标签，其中包括<video>、<audio>和<canvas>等，添加这些标签是为了使设计者能够更轻松地在网页中添加或处理图像和多媒体内容。其他新的标签还有<section>、<article>、<header>和<nav>，这些新添加的标签是为了能够丰富网页中的数据内容。除了添加了许多功能强大的新标签和属性，还对一些标签进行了修改，以方便适应快速发展的网络应用。同时，也有一些标签和属性在HTML5标准中被去除。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> 页面主体内容部分 </body> </html>
HTML5的文档结构与前面所介绍的HTML的文档结构非常类似，基础的文档结构如下。
HTML5的文档结构非常简洁，第一行代码<!doctype html>声明文档是一个HTML文档，接下来使用<html>标签包含头部内容<head>标签和主体内容<body>标签，从而构成HTML5文档的基本结构。
<div id="nav"> //导航区域内容 </div>
对于用户和网站开发者而言，HTML5的出现意义非常重大。因为HTML5解决了Web页面存在的诸多问题，HTML5的优势主要表现在以下几个方面。
1. 化繁为简
为了做到尽可能简化，HTML5避免了一些不必要的复杂设计。例如，DOCTYPE声明的简化处理，在过去的HTML版本中，第一行的DOCTYPE过于冗长，在实际的Web开发中也没有什么意义，而在HTML5中DOCTYPE声明就非常简洁。
为了让一切变得简单，HTML5下了很大的功夫。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。
2. 向下兼容
HTML5有着很强的兼容能力。在这方面，HTML5没有进行颠覆性的革新，允许存在不严谨的写法，如一些标签的属性值没有使用英文引号括起来，标签属性中包含大写字母，有的标签没有闭合等。然而，这些不严谨的错误处理方案在HTML5的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。当然，对于Web开发者来说，还是遵循严谨的代码编写规范比较好。
对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。在HTML规范中，也考虑了这方面的内容，如在HTML5中<input>标签的type属性增加了很多新的类型，当浏览器不支持这些类型时，默认会将其视为text。
3. 支持合理
HTML5的设计者们花费了大量的精力来研究通用的行为。例如，Google分析了上百万份的网页，从中提取了<div>标签的ID名称，很多网页开发人员都这样标记导航区域。
既然该行为已经大量存在，HTML5就会想办法去改进，所以就直接增加了一个<nav>标签，用于网页导航区域。
4. 实用性
对于HTML无法实现的一些功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置和实时获取信息等应用，通常会开发一些相应的插件间接地去实现。HTML5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。
HTML5规范的制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。因为开放，所以可以得到更加全面的发展。一切以用户需求为最终目的，所以，当用户在使用HTML5的新功能时，会发现这正是期待已久的功能。
5. 用户优先
在遇到无法解决的冲突时，HTML5规范会把最终用户的诉求放在第一位。因此，HTML5的绝大部分功能都是非常实用的。用户与开发者的重要性远远高于规范和理论。例如，有很多用户都需要实现一个新的功能，HTML5规范设计者们会研究这种需求，并纳入规范；HTML5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，接纳这种不严谨的写法。HTML5比以前版本的HTML更加友好。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCYPT html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
HTML5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。
DOCTYPE声明是HTML文件中必不可少的内容，它位于HTML文档的第一行，声明了HTML文件遵循的规范。HTML 4.01的DOCTYPE声明代码如下。
这么长的一串代码恐怕极少有人能够默写出来，通常都是通过复制/粘贴的方式添加这段代码。而在HTML5中的DOCTYPE代码则非常简单，如下所示。
这样就简洁了许多，不需要再复制/粘贴代码了。同时这种声明也标志性地让人感觉到这是符合HTML5规范的页面。如果使用了HTML5的DOCTYPE声明，则会触发浏览器以标准兼容的模式来显示页面。
字符集的声明也是非常重要的，它决定了页面文件的编码方式。在过去，都是使用如下的方式来指定字符集的，代码如下。
HTML5对字符集的声明也进行了简化处理，简化后的声明代码如下。
在HTML5中，以上两种字符集的声明方式都可以使用，这是由HTML5向下兼容的原则决定的。
网页文件即扩展名为htm或html的文件，本质上是文本类型的文件，网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。
由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器来打开或编辑。例如，Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在记事本中编写HTML页面</title> </head> <body> <img src="images/1301.jpg" width="100%" height="auto"> </body> </html>
HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows操作系统自带的记事本中进行编辑，其优点是方便快捷，缺点是无任何语法提示、无行号提示和格式混乱等，初学者使用困难。
实战 使用记事本制作HTML页面
最终文件：最终文件\第1章\1-3-1.html 视频：视频\第1章\1-3-1.mp4
01 在Windows操作系统中执行“开始>所有程序>附件>记事本”命令，打开记事本窗口，如图1-1所示。在记事本中按正确的文档结构编写HTML页面代码，如图1-2所示。
02 所编写的完整的页面HTML代码如下。
提示
此处所编写的HTML页面代码非常简单，主要在头部的<title>与</title>标签之间输入网页的标题，在页面主体内容<body>与</body>标签之间使用<img>标签插入一张图片，并且添加了图片宽度和高度属性的设置。
03 执行“文件>另存为”命令，将会弹出“另存为”对话框，将文件保存为“源文件\第1章\1-3-1.html”，如图1-3所示。单击“保存”按钮，即可将用记事本编写的HTML代码保存为网页文件，在浏览器中预览该网页文件，可以看到网页的效果，如图1-4所示。
提示
在将记事本中编写的HTML代码保存为网页html格式时，需要注意“编码”选项的设置。默认情况下，需要将“编码”设置为UTF-8，否则，网页中的中文在浏览器中可能会显示为乱码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用Dreamweaver制作HTML页面</title> </head> <body style="background-color:#06F; text-align:center; color:#FFF;margin-top:200px;"> <img src="images/1302.png" width="400" height="332" alt=""> <br><br> <b>欢迎光临我们的网站>></b> </body> </html>
Dreamweaver是网页制作的主流软件，其优点是有所见即所得的设计视图，能够通过鼠标指针拖放直接创建并编辑网页文件，自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，图1-5所示为Dreamweaver软件的工作界面。
1. 菜单栏
菜单栏中包含了所有Dreamweaver CC操作所需要的命令。这些命令按照操作类别分为“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单。
2. 文档工具栏
文档工具栏包含一些按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如单击“实时视图”按钮
可以将设计视图切换到实时视图）。
3. 代码视图
该窗口将显示当前所编辑页面的相应代码，在代码窗口左侧是相应的代码工具，通过使用这些工具，可以在代码中插入注释，简化代码操作。
4. 设计视图
该窗口显示当前所制作页面的效果，也是可视化操作的窗口，可以在该窗口中使用各种工具实现输入文字、插入图像等，是所见即所得的视图。
5. 标签选择器
标签选择器位于“文档”窗口底部的状态栏左侧，可显示当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
6. “属性”面板
用于查看和更改所选对象或文本的各种属性。选中不同的对象，在“属性”面板中会显示不同的内容。
7. 面板组
用于帮助用户完成监控和修改工作，如“插入”面板、“CSS设计器”面板。双击相应的选项卡，可以折叠或展开当前选项卡。
在Dreamweaver的代码视图中会以不同的颜色显示HTML代码，帮助用户区分各种标签，同时用户也可以自己指定标签或代码的显示颜色。总体看来，代码视图更像是一个常规的文本编辑器，只要单击代码的任意位置，就可以开始添加或修改代码了，通过代码视图工具能够非常方便地对HTML代码进行编辑和调整，如图1-6所示。
实战 使用Dreamweaver制作HTML页面
最终文件：最终文件\第1章\1-3-2.html 视频：视频\第1章\1-3-2.mp4
01 打开Dreamweaver，执行“文件>新建”命令，将会弹出“新建文档”对话框，选择HTML选项，如图1-7所示。单击“创建”按钮，新建HTML5文档，转换到代码视图中，可以看到文档的HTML代码，如图1-8所示。
02 执行“文件>保存”命令，将会弹出“另存为”对话框，将该网页保存为“源文件\第1章\1-3-2.html”，如图1-9所示。在页面的<title>与</title>标签之间输入网页的标题，如图1-10所示。
03 在<body>标签中添加style属性设置代码，如图1-11所示。在<body>与</body>标签之间编写相应的网页正文内容代码，如图1-12所示。
提示
在<body>标签中添加style属性设置，实际上是CSS样式的一种使用方式，称为内联CSS样式。此处通过内联CSS样式设置页面整体的背景颜色、水平对齐方式、文字颜色和顶部边距。
04 完成该网页HTML代码的编写，完整的HTML代码如下。
05 执行“文件>保存”命令，保存网页，在浏览器中预览该网页，可以看到网页的效果，如图1-13所示。
提示
Dreamweaver是一款专业的网页制作软件，在Dreamweaver中新建HTML页面，会自动给出HTML文档结构的基础代码，编写HTML代码还具有代码提示等功能，非常适合初学者使用。
通过制作处理所有HTML元素及从错误中恢复的精确规则，HTML5改进了互操作性，减少了开发成本。HTML5中的标签介绍，如表1-1所示。
各种类型的移动应用程序种类繁多，其开发的方式也存在着差异，有些采用原生SDK进行开发，有些是基于Web的应用开发，不同的开发方式各有优缺点。本节将向读者介绍有关移动Web应用开发的相关基础知识，使读者对移动Web应用有更深入的了解。
自2007年Apple公司发布第一款iPhone手机之后，基于移动终端的Web应用便得到发展。当时Apple公司并不允许第三方开发者开发其iPhone应用软件，只允许他们开发基于Web的应用程序。
2008年，Apple正式推出iPhone SDK，并开放APP Store应用软件市场。SDK的推出，让原来需要开发基于Web应用的第三方开发者几乎都转向iPhone SDK的开发。
现在，移动智能设备之所以能够风靡全球，除了因其具有强大的硬件特性外，更重要的是它们拥有海量的应用软件，特别是在APP Store和Android Market上的应用都是基于两大公司（Apple和Google）提供SDK给第三方开发者进行开发的。Apple公司提供的是基于Object-C语言的iOS SDK应用开发，Google公司提供的是基于Java语言的Android SDK应用开发。
基于原生SDK的开发存在以下几点优势。
（1）更好的用户体验和交互操作。
（2）不受网络限制，节省带宽成本。
（3）可以充分发挥设备硬件和操作系统的特性。
原生SDK在开发应用软件方面的优势非常明显，但仍存在一些不足，如下。
（1）平台间移植困难，存在版本间的兼容问题。
（2）开发周期长，维护成本高，调试困难。
（3）需要依赖第三方应用商店的审核上架，如APP Store。
除了基于SDK开发方式外，移动智能设备还支持Web开发方式。例如，iPhone上的APP Store就是典型的Web APP应用软件。尤其是HTML5和Webkit的不断发展，让移动Web应用变得更加强大。
与原生SDK开发相比，基于Web的应用开发存在以下几点优势。
（1）开发效率高，成本低。
（2）跨平台应用，界面风格统一。
（3）调试和发布方便。
（4）无须安装或更新。
基于Web的开发方式虽然在跨平台方面有优势，但并不是所有原生SDK都适合通过Web方式实现，还存在如下3点问题。
（1）无法发挥本地硬件和操作系统的优势。
（2）受网络环境的限制。
（3）难以实现复杂的用户界面效果。
将原生SDK应用和基于Web应用进行比较来看，两种开发模式各有其优点。目前来看，原生SDK应用能发挥出智能手机特性的最大效果，而基于Web应用则更适合一些传统的Web站点建立移动Web版本。
基于Webkit内核的浏览器的一个最大特点就是支持HTML5和CSS3标准。基于HTML5、CSS3和JavaScript的移动应用程序将会是未来的趋势。
1. canvas绘图
HTML5标准最大的变化就是支持Web绘图功能。canvas绘图功能非常强大，可以实现如图形绘制、路径绘制、变形和像素绘图等。用户可以通过获取HTML中DOM元素canvas，并调用其渲染上下文的context对象，使用JavaScript进行图形绘制。
2. 多媒体
Apple的iOS系统默认并不支持播放Flash文件。HTML5的多媒体标准就是Apple公司的最佳解决方案，因为它不需要任何插件，只需要几个页面标签就能实现多媒体的播放。
HTML5标准中的多媒体，Video视频和Audio音频正好弥补了多年来需要插件才能播放Flash的缺陷。现在只需要利用Video元素和Audio通过简单几行页面代码，就能播放互联网上的各种视频和音频文件。
但是，目前各浏览器厂商对多媒体标准所支持的播放格式不一致，如Google的Chrome浏览器支持的多媒体视频格式是Ogg、MPEG4和WebM，而Apple的Safari浏览器则只支持MPEG4。
3. 本地存储
为了满足本地存储数据的需要，HTML5标准中新增两种存储机制，Web Storage和Web SQL数据库。前者通过提供“键/值”方式存储数据，后者通过类似关系数据库的形式存储数据。
4. 离线应用
HTML5标准规范提供一种离线应用的功能。当支持离线应用的浏览器检测到清单文件（Manifest File）中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地，同时它也保证本地资源文件的版本和服务器上的版本保持一致。
对于移动设备来说，当无网络状态可用时，Web浏览器便会自动切换到离线状态，并读取本地资源以保证Web应用程序继续可用。
5. 使用地理位置
很多现代浏览器中都实了一种神奇的功能，它能够实时获取到用户当前在地图上所在的位置。
虽然地理定位标准严格上来说并不属于HTML5标准规范的一部分，但它已经逐渐得到大部分浏览器的支持。
因为了有Webkit和HTML5的支持，越来越多的Web开发者开始研究基于移动平台的Web应用框架，如基于jQuery页面架构的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。
目前基于HTML5移动Web框架存在两种不同的开发模式，一种是基于传统Web的开发，另一种是基于组件式的Web开发。
基于传统Web的开发模式，就是在传统Web网站上，根据移动设备平台的特点展示其移动版的Web站点。目前最能体现该开发模式优势的Web框架是jQuery Mobile。通过使用CSS3的新特性，Media Queries模块可以实现在一个站点同时能自适应任何设备，包括桌面电脑和智能手机。
基于组件式的Web开发有些类似于Ext所提供的富客户端开发模式，在该模式下几乎所有的组件或视图都封装在JavaScript内，然后通过调用这些组件展示Web应用。这种模式的最佳代表是Sencha Touch。
在本书中将会为读者介绍使用jQuery Mobile移动Web应用框架来开发移动设备Web应用程序的相关知识。
HTML是一切网页技术的基础，只有学好HTML技术，才能够制作出精美的网站。本章中详细向读者介绍了HTML的相关基础知识及HTML5给设计带来的变化，使读者能够更加了解HTML5的相关规范和标签，为后面的学习打下良好的基础。
文字不仅是网页信息传达的一种常用方式，也是视觉传达最直接的方式，运用经过精心处理的文字内容完全可以制作出效果很好的版面。输入完文本内容后就可以对其进行格式化操作，而设置文本样式是实现快速编辑文档的有效操作，让文字看上去编排有序、整齐美观。本章将向读者介绍在HTML代码中用于设置文字与段落的相关标签和属性，使读者轻松掌握在HTML页面中合理的设置文字效果的方法。
本章知识点
• 掌握用于设置文本效果的各种基本标签和属性的设置方法
• 掌握其他文字标签的使用方法
• 掌握网页中文本换行、分段标签及相关 属性的设置方法
• 掌握HTML页面中各种列表标签的使用方法
设计网页离不开字体的设置，恰当的字体运用能够丰富网页的内容，美化文字的视觉效果。本节从文字的细节修饰着手，使读者轻松把握HTML的各种字体格式的变化，制作出更加精美的网页。
<font face="字体名称">……</font>
… <body> 字体为宋体：<font face="宋体">欢迎光临我们的网站</font><br> 字体为楷体：<font face="楷体">欢迎光临我们的网站</font><br> 字体为黑体：<font face="黑体">欢迎光临我们的网站</font><br> </body> …
<font size="文字大小">……</font>
… <body> size为1：<font size="1">网页设计</font><br> size为2：<font size="2">网页设计</font><br> size为3：<font size="3">网页设计</font><br> size为4：<font size="4">网页设计</font><br> size为5：<font size="5">网页设计</font><br> size为6：<font size="6">网页设计</font><br> size为7：<font size="7">网页设计</font><br> </body> …
<font color="颜色值">……</font>
… <body> 红色文字：<font color="red">网页设计</font><br> 蓝色文字：<font color="#0000FF"> 网页设计</font><br> </body> …
<font>标签可以用来设置文字的颜色、字体和大小，是网页设计的常用标签。可以通过<font>标签中的face属性设置不同的字体，可以通过<font>标签中的size属性来设置文字的字体大小，还可以通过<font>标签中的color属性来设置文字的颜色。
1. 设置字体
face属性规定的是字体的名称，如中文字体的“宋体”“楷体”和“微软雅黑”等。可以通过字体的face属性设置不同的字体，设置的字体效果必须在浏览器中安装相应的字体才可以正确浏览，否则有些特殊字体会被浏览器中的普通字体所代替。
设置字体的基本语法如下。
face属性用于设置文本所采用的字体。如果浏览器能够在当前系统中找到该字体，则使用所设置的字体显示，如果在当前系统中找不到该字体，则会使用默认的字体显示文字。
如下面的HTML网页代码，分别为文字设置不同的字体。
2. 设置字体大小
文字的大小也是字体的重要属性之一。除了使用标题文字标签设置固定大小的字号外，HTML语言还提供了用<font>标签的size属性来设置普通文字的字号的方法。
设置文字大小的基本语法如下。
size的属性值为1~7，默认值为3，也可以在属性值之前加上+或-字符，来指定相对于初始值的增量或减量。文字的字号可以设置为1~7，也可以是+1~+7或者-1~-7。这些字号并没有固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，数值越大，文字也越大。
如下面的HTML网页代码，分别为文字设置不同的字体大小。
3. 设置文字颜色
在HTML页面中，可以设置字体的不同颜色，使页面看起来更加的丰富多彩，吸引浏览者的注意。
设置字体颜色的基本语法如下。
color属性的颜色值可以用浏览器能够识别的颜色名称或十六进制颜色值表示。
如下面的HTML网页代码，分别使用颜色名称和十六进制颜色值设置文字颜色。
实战 使用<font>标签设置网页文字效果
最终文件：最终文件\第2章\2-1-1.html 视频：视频\第2章\2-1-1.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-1-1.html”，效果如图2-1所示，切换到代码视图中，可以看到相应的HTML代码，如图2-2所示。
02 为页面中相应的文字添加<font>标签，并在该标签中添加相应的属性设置，如图2-3所示。保存页面，在浏览器中预览页面，可以看到设置后文字的效果，如图2-4所示。
技巧
设置网页的文字颜色时一定要注意文字颜色的清晰和鲜明，并且与网页的背景色相搭配，从而提高网页文字的可读性和网页的整体美观程度。
03 返回网页的HTML代码中，使用相同的方法为其他相应的文字添加<font>标签，进行相关设置，如图2-5所示。保存页面，在浏览器中预览页面，可以看到设置后文字的效果，如图2-6所示。
提示
在网页中通过<font>标签设置字体时，可以将字体设置为任意的字体，但是所设置的字体必须在浏览该网页的电脑中也安装才能正确显示，如果电脑中没有安装的特殊字体会被浏览器中的普通字体所替代。目前，在操作系统中默认安装的中文字体有宋体、黑色、幼圆和微软雅黑等。
<b>这是粗体字</b> <strong>这也是粗体字</strong>
网页中对于需要强调的内容很多时候使用了加粗的方法，以使文字更加醒目。可以实现加粗效果的标签是<b>标签和<strong>标签，其中<strong>标签被称为特别强调标签，目前比<b>标签使用更加频繁。
加粗文字<b>和<strong>标签的基本语法格式举例如下。
在<b>和</b>之间的文字或在<strong>和</strong>之间的文字，浏览器中都会以粗体显示。
提示
粗体文字标签<b>和<strong>都是需要添加结束标签的，如果没有结束标签，则浏览器会认为从<b>或<strong>标签开始的所有文字都是粗体。
<i>斜体文字</i> <em>斜体文字</em>
标签<i>能够使作用范围内的文字倾斜；<em>是强调标签，它的效果也是使文字倾斜，目前比<i>标签使用更加频繁。
倾斜文字标签<i>和<em>的基本语法格式举例如下。
<u>添加了一条下划线</u>
<u>标签的使用和粗体、斜体标签类似，可以使用该标签作用于需要添加下划线的文字。<u>标签的基本语法格式举例如下。
技巧
在网页中除了可以使用<u>标签实现文字的下划线效果，还可以通过CSS样式中的text-decoration属性，设置该属性值为underline，为网页中需要实现下划线的文字应用相应的CSS样式，同样可以实现下划线的效果。
实战 为文字添加加粗、倾斜和下划线修饰
最终文件：最终文件\第2章\2-1-4.html 视频：视频\第2章\2-1-4.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-1-4.html”，效果如图2-7所示，切换到代码视图中，可以看到相应的HTML代码，如图2-8所示。
02 为页面中相应的文字添加加粗文字标签<b>，如图2-9所示。保存页面，在浏览器中预览页面，可以看到文字加粗显示的效果，如图2-10所示。
03 返回网页HTML代码中，为页面中相应的文字添加文字倾斜<i>标签，如图2-11所示。保存页面，在浏览器中预览页面，可以看到文字倾斜显示的效果，如图2-12所示。
04 返回网页HTML代码中，为页面中相应的文字添加下划线<u>标签，如图2-13所示。保存页面，在浏览器中预览页面，可以看到文字添加下划线的效果，如图2-14所示。
为了满足不同需求，HTML还有其他用来修饰文字的标签，比较常用的有上标格式标签<sup>、下标格式标签<sub>和删除线标签<strike>等。
<sup></sup>为上标格式标签，多用于数学指数的表示，如某个数的平方或者立方。<sub></sub>为下标格式标签，多用于注释及数学的底数表示。<strike></strike>为删除线标签，多用于删除效果。
实战 为文字添加上标和删除线
最终文件：最终文件\第2章\2-1-5.html 视频：视频\第2章\2-1-5.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\21-5.html”，效果如图2-15所示，切换到代码视图中，可以看到相应的HTML代码，如图2-16所示。
02 为页面中相应的文字添加上标格式<sup>标签，从而实现上标的效果，如图2-17所示。保存页面，在浏览器中预览页面，可以看到所实现的上标效果，如图2-18所示。
03 返回网页HTML代码中，为页面中相应的文字添加删除线<strike>标签，如图2-19所示。保存页面，在浏览器中预览页面，可以看到为文字添加删除线的效果，如图2-20所示。
网页中文字的排列在很大程度上决定了一个网页是否美观。对于网页中的大段文字，通常采用分段、分行和加空格等方式进行规划。本节从段落的细节设置入手，使读者学习后能利用标签轻松自如地规划文字排版。
<p>段落文字</p>
HTML标签中最常用的标签是段落标签<p>，这个标签非常简单，但是却非常重要，因为这是一个用来划分段落的标签，几乎在所有网页中都会用到。
<p>标签的基本语法如下。
<br>
当文字到达浏览器的边界后将自动换行，但是当调整浏览器的宽度时，文字换行的位置也相应发生变化，格式就会显得混乱，因此在网页中添加换行标签是必要的。换行标签的基本语法如下。
在网页中，如果某一行的文本过长，浏览器会自动对这行文字进行换行，如果想取消浏览器的换行处理，可以使用<nobr>标签来禁止自动换行，该标签是成对出现的，有开始标签就有结束标签。
实战 为网页中的文本进行分段和分行处理
最终文件：最终文件\第2章\2-2-2.html 视频：视频\第2章\2-2-2.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-2.html”，效果如图2-21所示，切换到代码视图中，可以看到相应的HTML代码，如图2-22所示。
02 为页面中相应的文本添加<p>标签进行分段，如图2-23所示。保存页面，在浏览器中预览页面，可以看到为文本进行分段的效果，如图2-24所示。
提示
在网页中使用<p>标签对网页文本内容进行分段处理，默认情况下，段落与段落之间会有一点的空隙，便于用户区分不同的段落。
03 返回网页HTML代码中，在页面中的相应位置输入换行标签，如图2-25所示。保存页面，在浏览器中预览页面，可以看到为文本进行换行处理的效果，如图2-26所示。
提示
<br>标签是一个单标签，也叫空标签，不包含任何内容，在HTML代码中的任意位置中添加了<br>标签，当网页在浏览器中显示时，该标签之后的内容将会在下一行显示。
<hx>这是标题</hx>
标题是网页中不可缺少的元素，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保存了一套针对标题的样式标签，按照文字尺寸从大到小排列分别是从<h1>到<h6>。标题标签的基本语法如下。
这里的下标x为数字从1到6，<hx>标签用于设置文章的标题，标题标签的特点是独占一行和文字加粗。在进行网页设计时，可以根据标题的等级来选择合适的标题，并设置多级标题。
实战 设置网页文本标题
最终文件：最终文件\第2章\2-2-3.html 视频：视频\第2章\2-2-3.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-3.html”，效果如图2-27所示，切换到代码视图中，可以看到相应的HTML代码，如图2-28所示。
02 为页面中相应的文字分别添加标题标签<h1>至<h6>，如图2-29所示。保存页面，在浏览器中预览页面，可以看到各标题文字的效果，如图2-30所示。
提示
在HTML页面中通过<h1>至<h6>标签定义页面中的文字为标题文字，可以通过CSS样式分别设置<h1>至<h6>标签的CSS样式，从而修改<h1>至<h6>标签在网页中显示的效果。
<hr>
HTML提供了修饰用的水平分割线，在很多场合中可以轻松使用，不需要另外作图。同时可以在HTML中为水平线添加颜色、大小和粗细等属性。
<hr>标签的基本语法如下。
在网页中输入一个<hr>标签，就添加了一条默认样式的水平线，且在页面中占据一行。
标签<hr>有多种属性，常用的属性有width、size、align、color和title，分别可以设置水平线的宽度、高度、对齐方式和鼠标指针悬停在分割线上时出现的内容提示。
实战 在网页中插入水平线
最终文件：最终文件\第2章\2-2-4.html 视频：视频\第2章\2-2-4.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-4.html”，效果如图2-31所示，切换到代码视图中，可以看到相应的HTML代码，如图2-32所示。
02 在网页中标题文字之后添加<hr>标签，并对相关属性进行设置，如图2-33所示。保存页面，在浏览器中预览页面，可以看到所添加的水平线的效果，如图2-34所示。
技巧
默认的水平线是空心立体的效果，可以在水平线标签<hr>中添加noshade属性，noshade是布尔值的属性，如果在<hr>标签中添加该属性，则浏览器不会显示立体形状的水平线，反之如果不添加该属性，则浏览器默认显示一条立体形状带有阴影的水平线。
align="对齐方式"
段落文字在不同的时候需要不同的对齐方式，默认的对齐方式是左对齐。<p>标签的对齐属性为align，align属性的基本语法如下。
align属性需要设置在段落或其他标签中，通过设置align属性为left、right或center值实现左对齐、右对齐和居中对齐。
实战 设置网页文本的对齐
最终文件：最终文件\第2章\2-2-5.html 视频：视频\第2章\2-2-5.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-5.html”，效果如图2-35所示，切换到代码视图中，可以看到相应的HTML代码，如图2-36所示。
02 在页面中id名称为title的<div>标签中添加align属性设置，如图2-37所示。保存页面，在浏览器中预览页面，可以看到文字水平居右对齐的效果，如图2-38所示。
03 返回代码视图中，修改刚添加的align属性的属性值，如图2-39所示。保存页面，在浏览器中预览页面，可以看到文字水平居中对齐的效果，如图2-40所示。
列表形式在网页设计中占有比较大的比例，它的特点是显示信息非常整齐直观，便于用户理解。在本节中将向读者介绍HTML中用于创建项目列表、编号列表和定义列表的相关标签。
<ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li>列表项五</li> </ul>
项目列表又称为无序列表，就是列表结构中的列表项没有先后顺序的列表形式。不少网页应用中的列表均采用项目列表。
项目列表标签采用<ul></ul>标签，每一个列表项被包含在<li></li>标签内，所有的列表项被包含在<ul></ul>标签内。
项目列表的语法格式如下。
实战 制作新闻列表
最终文件：最终文件\第2章\2-3-1.html 视频：视频\第2章\2-3-1.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-1.html”，效果如图2-41所示，将鼠标光标移至名为news的div中，将多余的文字删除，并输入相应的文字，如图2-42所示。
02 切换到网页HTML代码中，为刚输入的内容添加相应的项目列表标签，如图2-43所示。保存页面，在浏览器中预览页面，可以看到网页中项目列表的效果，如图2-44所示。
技巧
默认情况下，在网页中创建的项目列表显示为实心小圆点的形式，可以通过在<ul>标签中添加type属性，修改项目符号的效果，如在<ul>标签中添加type="square"属性设置，可以将项目符号修改为实心正方形。另外，还可以通过CSS样式对项目列表进行设置，关于CSS样式将在后面章节中进行讲解。
<ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li>列表项五</li> </ol>
编号列表又称有序列表，就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有不同的序列编号，如1、2、3……或者a、b、c……。
编号列表采用标签<ol></ol>，每一个列表项被包含在<li></li>标签内，所有的列表项被包含在<ol></ol>标签内。使用编号列表可以让列表项按照明确的顺序排列。
编号列表的语法规则如下。
实战 制作编号有序列表
最终文件：最终文件\第2章\2-3-2.html 视频：视频\第2章\2-3-2.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-2.html”，效果如图2-45所示，将鼠标光标移至名为box的div中，将多余的文字删除，并输入相应的文字，如图2-46所示。
02 切换到代码视图中，为刚输入的内容添加相应的编号列表标签，如图2-47所示。保存页面，在浏览器中预览页面，可以看到网页中编号列表的默认效果，如图2-48所示。
技巧
默认情况下，在网页中的有序列表<ol>标签中的项目会按照1、2、3……顺序进行排列，如果需要修改默认的有序列表序号，可以在<ol>标签中添加type属性设置，如在<ol>标签中添加type="a"属性设置，可以将有序列表的序号更改为小写字母a、b、c……的形式。
<dl> <dt></dt> <dd></dd> … </dl>
列表的另外一种形式是定义列表，定义列表形式特别，用法也特别，定义列表中每个标签都是成对出现的，它在网页布局中的应用也是非常广泛的。
定义列表由<dl>、<dt>和<dd>3个标签组成，<dt>和<dd>标签包含在<dl>标签内，不同的是标签<dt></dt>定义的是标题，而标签<dd></dd>定义的是内容。
定义列表的语法规则如下。
实战 制作复杂的新闻列表
最终文件：最终文件\第2章\2-3-3.html 视频：视频\第2章\2-3-3.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-3.html”，效果如图2-49所示，将鼠标光标移至名为news的div中，将多余的文字删除，并输入相应的文字，如图2-50所示。
02 切换到代码视图中，可以看到该部分内容的HTML代码，如图2-51所示。在页面中将<div id="news"></div>标签之间相应的段落标签删除，添加定义列表标签<dl>、<dt>和<dd>，如图2-52所示。
03 因为<dl>、<dt>和<dd>标签的默认效果并不能满足这里制作的效果，需要定义相应的CSS样式对其进行控制，如图2-53所示。保存页面，在浏览器中预览页面，可以看到网页中定义列表的效果，如图2-54所示。
提示
在HTML代码中，<dt>和<dd>标签都是块元素，在网页中占据一整行的空间，如果需要使<dt>与<dd>标签中的内容在一行中显示，就必须使用CSS样式进行控制。关于CSS样式将在后面的章节中进行详细的介绍。
本章主要讲解了对文字及段落进行设置的方法。文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用。通过学习本章，读者可以设置文字格式、段落格式。在熟悉和掌握了相关知识点后，读者可以在HTML中设置个性的文字样式。
