作者：张熠
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
零基础学HTML+CSS第2版试读：
前言
现在市面上的许多可视化的网页编辑工具都达到了“所见即所得”的效果，这些图形化的开发工具可以直接编辑网页，而不用书写麻烦的标记。这使得用户在没有HTML语言基础的情况下，照样可以编写网页。这是网页图形编辑工具的最大成功之处，但也是它们的最大不足之处。由于受到图形编辑工具自身的约束，将产生大量的垃圾代码。因为图形工具默认是满足一般的网页设计需求，这样当生成网页元素时，就会生成该元素的所有属性代码，从而增加许多不必要的代码。所以一名明智的网页开发人员应该在掌握网页图形编辑工具的基础上进一步学会HTML语言，从而知道哪些是垃圾代码，如何消除无用的代码，进而快速制作出高质量网页。本书特色
本书系统全面地介绍了HTML语言的知识，先从简单HTML语法入手，让读者对网页的信息展现有一个初步的了解，接着引入DIV+CSS的相关知识，让读者明白网页元素是如何布局的，最后通过3个案例的讲解，来巩固和加深前面学过的知识。
本书的特点主要体现在以下几个方面。
❑本书的编排采用循序渐进的方式，每章主题鲜明、要点突出，适合初级读者逐步掌握HTML的语法规则和设计思想。
❑本书的每一个知识点都配有一个范例，读者可容易地将代码复制到自己的机器上进行实验，自行实践和演练，直观体会所讲要点，感受使用HTML语言编写一张网页。本书的所有例子、源代码都附在随书光盘中，方便读者使用。
❑本书的每一章最后都有一个涉及该章知识的综合案例，是对该章知识的总结、复习和提高，从而让读者对相关知识点理解得更深刻，这也是本书的一大亮点。
❑本书代码简洁、思路清晰、内容全面，兼顾了HTML语言的所有知识点。
❑本书结合笔者多年的HTML语言编写和网页设计经验，特别标注出易出错的技术点或初学者易误解的细节，同时对查错和调试页面给出了指导思想，读者在学习中可少走弯路，加快学习进度。本书内容
本书共分为四篇，共34章，从HTML语言的基本知识讲起，使读者初步了解HTML语言语法和网页生成。如果将编写HTML语言比作盖房子，第一篇基本知识就相当于砖瓦水泥；第二篇讲述DIV+CSS布局，就如同房子的框架设计；第三篇是CSS的相关知识点，本书对相关知识点做了详细介绍和范例演示；第四篇是案例实践和对差错的指导意见，以及常见面试题。
第一篇（第1～11章）HTML语言基础
讲述HTML语言的基础知识，包括HTML语言介绍，如何通过HTML语言的标记在网页中创建和设置表格、列表、图片等元素，如何设置网页的背景颜色、文本的相关属性、网页的一些特别现实效果（如网页上的相关滚动信息）。
第二篇（第12～14章）DIV+CSS布局
DIV+CSS的使用已经是现在主流网站布局的主要实现方法，本篇通过对比DIV设计方法与以往的网页设计方法，来突出用DIV设计网页的优势。初步介绍了如何通过DIV来布局网页，以及如何结合CSS进行美观设计。
第三篇（第15～30章）CSS部分
本篇全面详细地介绍了CSS知识点，如选择符的种类、边框、字体、补丁等样式的语法。
第四篇（第31～34章）实践部分
本篇旨在让读者掌握HTML语言开发案例和实践项目，虽然只提供了3种常见网页布局的开发，却能帮助读者掌握HTML语言的语法和DIV+CSS网站的设计思想，最后笔者根据自己的经验提供了一些网页设计和检查的指导意见，并给出一些常见的HTML+CSS面试题，帮助读者顺利踏入职场。本书读者对象
本书作为HTML语言的基础教程，适合以下读者阅读：
❑无HTML语言基础的初学者
❑了解HTML语言，但所学不全面的人员
❑高等院校理科学习网页设计的学生
❑使用DIV+CSS进行项目开发的人员
❑其他相关技术人员本书作者
本书主要由张熠编著，其他参与编著和资料整理的人员包括：冯华君、刘博、刘燕、叶青、张军、张立娟、张艺、彭涛、徐磊、戎伟、朱毅、李佳、李玉涵、杨利润、杨春娇、武鹏、潘中强、王丹、王宁、王西莉、石淑珍、程彩红、邵毅、郑丹丹、郑海平、顾旭光。作者2012年2月第一篇HTML基础知识第1章 认识HTML语言
从本章开始，本书将介绍HTML+CSS方面的知识。首先主要介绍HTML（HyperText Markup Language，超文本标记语言），然后介绍如何在HTML中用DIV和CSS相结合来控制HTML标签表达页面效果，接着介绍CSS常用的属性，最后，用不同的网站风格来布局主页，灵活运用学过的HTML和CSS知识。
本章主要向读者介绍HTML语言，通过介绍，让读者对HTML语言有初步的认识。学好HTML是网页前台制作的基础，从而为以后做网页打好基础。在学习本章前，先介绍HTML语言最基础的部分，如什么是HTML，用什么来写HTML代码，怎么查看写完代码后的效果等。将要介绍给读者的知识点内容如下。
❑HTML标记概念；
❑怎样创建网页；
❑HTML页面运行环境；
❑如何在Windows系统安装用于编写HTML的软件；
❑HTML最基本的代码是什么；
❑HTML有哪些浏览器支持。1.1 HTML简介
HTML是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，自1990年以来，HTML就一直被当作万维网（World Wide Web）上的信息表示语言，用于描述网页的格式设计和它与万维网上其他页面的连接信息。
HTML语言是利用各种标记（tag）来标识文档的结构以及标识超链接（hyperlink）的信息。但有时因浏览器不同显示不同的效果，这就是为什么同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是5.0，它是从SGML（Standard Generalized Markup Language，标准通用标识语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。
现在很多工具都支持“所见即所得”。“所见即所得”是指在工具上直接编辑页面效果，可以不用管理HTML代码，换言之，在不知道HTML的前提下，有了“所见即所得”的工具也可以做网页，但需要提醒读者的是，那些“所见即所得”工具的确给网页制作带来了很大方便，被很多人使用，但其原理离不开HTML语言，只不过它用另一种方式帮用户写好了这些代码，要注意，万变不离其宗，学好了HTML语言，在使用那些“所见即所得”的工具时，可以不使用“所见即所得”的功能。
在以后的学习过程中，将会慢慢对HTML有清晰认识。
说明 Dreamweaver CS5是一个“所见即所得”的好工具，它给网页制作者带来很大方便，实现“所见即所得”完全依赖于Dreamweaver CS5的内置浏览器，使得制作者可以直接在Dreamweaver CS5里看到HTML代码效果。1.2 HTML的标记组成
HTML用于描述功能的符号称为“标记”，如“HTML”、“BODY”、“TABLE”等。标记在使用时必须用尖括号“＜＞”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。
HTML标记由左尖括号（＜）和右尖括号（＞）组成，浏览器会对尖括号里面的标记进行解释。如在HTML代码中出现＜p＞＜/p＞标记对时，浏览器解释该标记对的过程中，会把它们看成段落并以段落的样式显示在网页中，同理，＜table＞＜/table＞标记对被浏览器看做表格来解析。在标记中，可分成单标记和双标记，而双标记即刚刚提到的标记对。1.2.1 单标记
有些标记能完整地表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记，一种单标记表示一种功能，即没有范围之分，单标记语法形式如下。
＜标记＞
尖括号中的“标记”是指英文字母，这种字母是由HTML提供，具有特殊功能，如＜hr＞表示画一条横线，再如最常用的换行标记＜br＞，表示在标记处换行，＜br＞标记告诉浏览器让其解析＜br＞时强制换行，这些单标记可以在网页中任意嵌套。1.2.2 双标记“双标记”与单标记刚好相反，这种标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，所以叫双标记。其中开始标记是告诉浏览器从本处开始标记所表达的功能，再由结束标记告诉浏览器结束，构成结束标记即在左尖括号后面加斜杠，语法形式如下。
＜标记＞内容＜/标记＞
其中，＜标记＞指的是字母关键字组成的标记，如＜div＞＜/div＞组成一个层，＜table＞＜/table＞组成一个表格，而“内容”是被标记修饰的部分，从标记对开始到标记对结束的内容都被标记对修饰，如＜div＞这是一个层＜/div＞中的文本文字“这是一个层”被＜div＞标记对修饰，表示一个层的内容，再如＜p＞段落内容＜/p＞中的“段落内容”被＜p＞标记对修饰，表示一个段落等。双标记可以多层嵌套，如在＜p＞＜/p＞标记对中可以嵌套＜div＞＜/div＞标记对或其他标记对，在多个嵌套中，一个标记对的结束标记与最近一个标记对的开始标记配对。值得注意的是，标记对不能交叉。
标记对的使用比单标记更频繁，被修饰的内容是有范围限制的，即由开始标记到结束标记这段表示被修饰的范围，如文章主题修饰。
＜h1＞这是主题＜/h1＞主题外
在双标记＜h1＞＜/h1＞中，标记内容“这是主题”表示成＜h1＞的样式，即效果上比正常文字变大了，而且标记对外面的内容“主题外”没有被＜h1＞修饰，所以效果是正常的字体。
标记和内容组成网页上的信息，再加上HTML基本的标记就构成正式的网页源代码，可以放在Web服务器上让用户浏览。网页的最基本标记对为＜html＞＜/html＞表示HTML语言，其下面又分成＜head＞＜/head＞标记对和＜body＞＜/body＞标记对，把头部信息放在＜head＞标记对中，如主题、字体编码设置等，而正文等都放在＜body＞网页体中，其中网页体表现出来的效果就是日常看到的网页内容，如新闻、BBS上的内容等。代码1.1所表示的是HTML基本标记。
代码1.1 HTML基本标记
---------------------------文件名：HTML基本标记.html---------------------------
01 ＜html＞＜!--网页的开始标记＞
02 ＜head＞＜!--网页的头部信息开始标记＞
03 ＜title＞html基本标记＜/title＞＜!--网页的主题开始标记＞
04 ＜/head＞＜!--网页的头部信息结束标记＞
05 ＜body＞＜!--网页的主体开始标记＞
06 ＜!--注解：下面是网页体的正文--＞
07 ＜p＞这里由内容加标记组成＜/p＞＜!--网页的段落标记＞
08 ＜/body＞＜!--网页的主体结束标记＞
09 ＜/html＞【代码解析】从代码1.1中得知，在这些HTML基本标记文档中，其中＜html＞＜/html＞表示HTML语言，在＜html＞＜/html＞里面包含头部（＜head＞＜/head＞）和内容体（＜body＞＜/body＞）。而主题标记是在头部＜head＞＜/head＞里面的。＜p＞＜/p＞是在＜body＞＜/body＞里面，标记对＜p＞表示段落，HTML结构如图1.1所示。图 1.1 HTML标记构成
注意 HTML中的标记对不能随便放，如代码1.1所示，＜title＞＜/title＞标记对不能放在＜body＞＜/body＞标记对中，同理，＜p＞＜/p＞也不能放在＜head＞＜/head＞中，分清楚网页头部与网页体就不会混淆。1.3 创建第一张网页
通过前面小节的学习，知道了网页的基本结构是由网页头部和网页体组成，所以每一张网页都离不开HTML的基本结构，为了证实网页头和网页体组成网页的效果，下面来创建第一张网页。本节将给读者完成一张简单的网页，从基本标记一步一步完成。（1）编写最基本的HTML代码是用系统自带的记事本，在电脑硬盘上任何一处右击，新建文本文档，这样就在当前处出现一个文本文件，其名字为“新建文本文档.txt”（如果看不到txt，说明用户电脑文件后缀名隐藏），该文件正处于重命名状态，按“Enter”键打开文档。（2）打开记事本后，光标不停闪烁，说明文档处于编辑状态，这时可以输入HTML代码，根据1.2节学习的HTML基本结构，可先输入最基本的HTML结构代码，核对无误后再选择“文件”|“保存”命令，如代码1.2所示。
代码1.2 HTML基本结构
＜html＞
＜head＞
＜title＞＜/title＞
＜/head＞
＜body＞＜!--注释内容--＞
＜/body＞
＜/html＞【代码解析】在基本结构中，在代码第2行＜head＞下的标记对＜title＞＜/title＞放置网页主题，而在代码第5～6行网页体＜body＞＜/body＞放置内容。其中＜!----＞作为注解符，不会在网页中显示，但会出现在网页的HTML代码中。
对于初学者，先输入HTML基本结构并不是坏事（在有的编写HTML的工具中，新建网页就包含了基本结构），这样就对HTML代码有了结构性的认识，下一步需要做的是对HTML基本结构添加标记和内容。（3）输入HTML标记和文本内容。在1.2节的注意中说明了页面头部不能放页面体中的标记，如＜title＞＜/title＞只能放在＜head＞＜/head＞中，表示该页面的标题（页面头部还有更多标记对），页面的标题标记对不能在＜body＞＜/body＞中出现，反之亦然。所以在页面头部和页面体应加上相应的内容或标记，在代码1.2中加好内容或标记的代码如代码1.3所示。
代码1.3 文本文件的HTML代码
---------------------------文件名：我的第一张网页.html---------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞创建第一张网页＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--第一个段落--＞
07 ＜p＞第一段落＜br＞＜!--p为段落开始符,br为换行符--＞
08 这里是第一段落第一行＜br＞
09 第二行
10 ＜/p＞
11 ＜!--第二个段落--＞
12 ＜p＞
13 第二段落＜br＞
14 这里是第二段落第二行＜br＞
15 第二行
16 ＜/p＞＜!--p为段落结束符--＞
17 ＜/body＞
18 ＜/html＞【代码解析】在代码1.3中，在代码第3行对页面头部设置了＜title＞＜/title＞标记对表示页面标题，在页面体中加上了两个段落，即＜p＞标记对，在代码第7行同时还嵌入了单标记＜br＞来换行，这样第一张网页代码就创建好了，接下来就需要转换成HTML文件了。（4）因HTML代码是在记事本中编写的，那如何才能转换成HTML文件呢？要想从文本文件转换成HTML文件，可选择文本编辑器的“文件”|“另存为”命令，这时会打开“另存为”对话框，在“文件名”中输入要命名的名称，然后在英语输入状态下输入“.”，再加上html或htm为后缀，选择保存类型为“所有文件”，单击“保存”按钮，即可输出HTML文件，到保存的路径上可查看HTML文件，对话框设置如图1.2所示。图 1.2 用“另存为”保存页面的对话框（5）打开HTML文件，浏览网页。通过保存的设置，在硬盘中多了一个HTML文件，双击该HTML文件，将会用默认的浏览器（一台电脑上可以装多个浏览器，其中有一个是默认的）打开，代码1.3中的标记被浏览器解析后，效果如图1.3所示。图 1.3 创建第一张网页界面
说明 创建的第一张网页就完成了，从HTML最基本结构到添加标记和文本内容，最终显现的是HTML代码，输入代码的方式很多，上面只是用记事本新建页面的一种方式，还有更多的方式，希望读者动手试试。对于双标记别忘了输入结束标记来组成标记对，结束标记内还包含斜线。1.4 浏览HTML的浏览器兼容
目前主流浏览器只有微软的IE和火狐（Firefox），不管编写HTML还是CSS代码，所显示的网页效果都要在IE和火狐中调试，因为两个浏览器厂商对HTML和CSS支持有所差异，所表现的效果当然会不一样。作为一个网页设计者，制作出来的网页至少应兼容这两种浏览器（还有Safari、Opera、Chrome，但它们在市场上占有率很低）。
对上一节介绍的第一张网页，分别用IE和火狐打开代码1.3，并观察二者同一页面的显示效果，IE显示的效果如图1.4所示，火狐（firefox）显示的效果如图1.5所示。图 1.4 IE打开HTML文件图 1.5 Firefox打开HTML文件
注意 现在主流浏览器还是IE和火狐，如腾讯TT、Maxthon 2等都以IE内核显示，现在的IE 8与火狐一样，更接近标准。1.5 编写HTML的工具
写HTML语言的工具很多，如1.2节所介绍的使用的是记事本，这也是最简单的一种，最常用的有Dreamweaver系列的，还有其他的很多工具。但作者在本节介绍的两个编写软件，可以满足不同爱好的读者。第一个有强大的代码提示工具——Aptana，以Aptana开源的有智能代码提示。到官方网站可下载（www.aptana.com），无论是现在学的HTML，还是以后要学到的CSS都会更方便，非常有用。因为是国外开源软件，所以界面是英文版的。第二个编写软件是Dreamweaver CS5，由Adobe公司开发，也是最常用的软件，到官方网站（www.adobe.com）可下载，但它是商业软件。1.5.1 Aptana代码提示工具
对于初学者，知道下载地址后，将安装文件下载到本地。如何安装和设置其参数？下面介绍编写HTML软件的安装。先来介绍Aptana，然后介绍Adobe公司的Dreamweaver CS5。（1）到www.aptana.com下载Aptana软件，下载到本地后，双击“安装包”进行安装。如图1.6所示正在解压缩安装包。图 1.6 双击下载好的Aptana安装程序（2）读取包里的内容后，开始出现Aptana的安装设置，如图1.7所示，在此单击Next按钮。图 1.7 开始安装前设置（3）出现安装协议界面。协议是软件商对用户的一些说明，单击I Agree（同意协议）按钮即可，协议界面如图1.8所示。图 1.8 单击I Agree按钮进一步安装（4）选择软件的安装路径。如果安装路径保持默认，直接单击Next按钮到下一步，如想安装在其他盘符，单击Browse按钮选择路径，选择好后单击OK按钮，即选择了将要安装的路径，如图1.9所示。图 1.9 选择安装路径（5）开始正式安装界面。选择好路径后正式开始安装，在其界面中，单击Show details按钮将显示安装时的详细文件的生成过程，如图1.10所示。图 1.10 正在安装（6）安装完毕后，界面会提示已完成Aptana的安装，如图1.11所示。只需要单击Close按钮，关闭界面，即可使用该软件。图 1.11 安装完成（7）安装完成后，会在桌面上显示Aptana的标志，双击“桌面图标”，打开“工作界面”，将会出现英文的工作界面，如图1.12所示。图 1.12 Aptana工作界面
Aptana安装完成。在以后的学习中就可以用Aptana做编辑器了。在实际应用中，基本代码都会在里面产生，即在实际学习中通过代码提示，对IE和火狐支持的提示（写CSS文件时会提示），就会感觉到Aptana软件给网页代码编写带来多大的方便和价值。1.5.2 Dreamweaver网页开发工具
开源软件Aptana安装成功后，就可以使用该软件来编写HTML代码了，并不是所有的用户都喜欢使用它，不喜欢Aptana的用户或许喜欢Dreamweaver CS5这个软件，这也是初学者的首选工具。不管是代码编写还是网页效果预览都是非常方便和实用的，除了对HTML的编写外，也可以对动态网页编写代码，如PHP和JSP等页面，Dreamweaver CS5也值得一用。为了给读者讲解其安装，现在通过几个步骤演示如何安装Adobe Dreamweaver CS5。（1）下载Adobe Dreamweaver CS5后，在本地硬盘找到Adobe Dreamweaver CS5的安装软件，双击“安装软件”开始安装。下载该软件可以到官方网站http://www.adobe.com，也可以到国内华军、天空等大型下载网站上下载。双击“安装软件”后的效果如图1.13所示。图 1.13 开始解压缩安装包（2）解压缩后，开始安装前会出现安装提示，如欢迎安装Adobe Dreamweaver CS5软件等，告诉用户正要安装的软件名称，列出使用条款，这时一般单击“接受”按钮进入下一步，如图1.14所示。图 1.14 提示“接受”信息（3）如图1.15所示，在这一步中，可以选择安装的目标文件夹位置，单击路径文本框旁边的文件夹按钮，即可选择目标文件夹。建议初学者完全安装，选择“所有组件”复选框，单击“安装”按钮开始安装。图 1.15 选择目标文件夹（4）当选项全部设置完毕时，就处于正式安装状态，需要几分钟时间，安装过程如图1.16所示。图 1.16 正在安装（5）安装完成后，出现如图1.17所示的界面。单击“完成”按钮，或者选择“观看视频教程”文字链接，了解Dreamweaver CS5的基本使用方法。图 1.17 安装完成（6）Dreamweaver CS5安装完成后，可以通过鼠标双击打开（要在步骤3）中选中“在桌面创建快捷方式”复选框），也可以通过“开始”|“程序”|Adobe Dreamweaver CS5选项打开软件，打开后工作环境如图1.18所示。图 1.18 Dreamweaver CS5工作环境
用Aptana还是用Dreamweaver CS5？以前笔者写CSS代码时，常常用Aptana，其中Aptana也可以作为插件在Eclipse（访问www.eclipse.org查看更多内容）中使用，在新建的网页中，为＜head＞＜/head＞标记对中＜meta＞标记设置字符时，设置charset为gb2312，即用国际2312编码支持汉字（如果按默认值在有汉字时会出现乱码）。
技巧 本软件需要序列号，可以到网上查找相应的序列号，否则只能使用30天。
说明 对于这两种编写环境，读者可根据爱好安装，若两种同时安装也不会冲突，选择合适的环境很重要。1.6 小结
本章介绍了HTML基础知识，对HTML作了简单的介绍。HTML由单标记和双标记组成，二者都可以嵌套，但双标记不能交叉。HTML文件在＜html＞＜/html＞标记对中包含＜head＞＜/head＞页面头部和＜body＞＜/body＞页面体，然而，头部和页面嵌套的标记对也不同，这是网页基本结构。编写HTML代码可以用记事本，另存为“.html”文件即可转换为网页文件，也可以用Aptana和Dreamweaver CS5来编写，最后一节分别介绍了Aptana和Dreamweaver CS5的安装步骤。1.7 上机实践
请问下面的标记有哪些错误？
＜html＞
＜head＞
＜title＞练习
＜p＞＜/p＞
＜/head＞
＜body＞
＜/title＞
2＜sup＞2＜+1=＜u＞5＜/u＞
＜/body＞
＜/html＞【提示】注意标记对出现的位置，还有单标记和标记对的问题。第2章 常用HTML标记和格式
通过学习第1章，可以对HTML有一定的认识。HTML由标记组成，其中有单标记和双标记之分，大部分以双标记出现，即标记对。而本章要介绍的是应用中常用的HTML标记和格式，这些知识点在网页中会经常用到，也是必须掌握的知识点之一。在讲解过程中分两部分：标记和格式。学完本章，应掌握以下内容：
❑标题标记；
❑段落标记；
❑换行与注释；
❑粗体与斜体；
❑删除线；
❑上标与下标。2.1 设置正文的标题
现今网络媒体在新闻传播中起的作用越来越大，其传播速度和内容丰富程度都超过了传统媒体。如从现在的门户网站新闻点击率上可以看出网民直接在网上看新闻的热情。那么在新闻的格式中，有新闻主题和新闻内容之分，往往新闻主题的字体大小比正文内容大，同时也会看到很大或比较小的标题。如果读者细心，会发现标题从大逐渐变小是有规律的。2.1.1 标题设置的语法
本节来学习标题的设置，标题的作用是用精简的文字概括整篇文章的主题，故文字不能太长，应从外表上突出标题与内容。标题的语法很简单，由双标记组成，在尖括号对里输入h加从1到6的任意一个数字即可，数字不同，所表达的标题大小效果也不一样，其完整标题语法如下。
＜h#＞主题文字＜/h#＞
其中“#”是标题里数字1到6中的任意一个，系统一共提供6种标题大小，从数字1到数字6，标题大小排列由大到小，即表示不同大小的标题。换言之，数字越大，标题字号就越小。2.1.2 标题设置经典案例——字号由大到小
理解了标题是由字母h加从1到6的数字后，下面用实例来演示这6种标题大小的效果，代码2.1表示从h1到h6的标题。
代码2.1 源代码\第2章\6种不同的标题.html
-----------------------------文件名：标题标记.html-----------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞标题标记＜/title＞＜!--网页标题标记对--＞
04 ＜/head＞
05 ＜body＞＜!--网页主体标记对--＞
06 ＜!--下面是标题标记对--＞
07 ＜h1＞标题h1＜/h1＞＜!--主体内容标题标记对--＞
08 ＜h2＞标题h2＜/h2＞
09 ＜h3＞标题h3＜/h3＞
10 ＜h4＞标题h4＜/h4＞
11 ＜h5＞标题h5＜/h5＞
12 ＜h6＞标题h6＜/h6＞
13 ＜/body＞
14 ＜/html＞【代码解析】代码2.1中，第5行在＜body＞＜/body＞标记对中输入了6种不同的标题，标题从h1到h6，标题大小由大变小，效果如图2.1所示。图 2.1 6种标题标记
从图2.1中可以看到，代码第7行＜h1＞＜/h1＞标记对里是显示最大号标题的，同理，＜h6＞＜/h6＞标记对里显示最小号标题。根据实际需要，在不同正文内容的主题下选择不同大小的标题标记，注意只选择一种做标题即可，如标题h3是文章的标题，其他标题不必在代码中出现了，如下面代码显示。
＜h3＞这是标题h3＜/h3＞
这是文章正文字。
说明 不只是标题大小能明显突出主题重要性，在具体应用中选择不同标题也会达到意想不到的效果，甚至还可以加上标题字体的颜色，可以设置标题的字体大小和字体类型等，这些内容以后将会学习到。2.2 设置段落
一篇文章由标题和正文组成，正文又是由多个段落组成的，所以可以说段落是构成文章的主体。既然一篇文章是由多个段落组成的，那么又如何区分段落呢？段落与段落之间有什么不同呢？带着这些问题来学习本小节的段落标记。
在学习段落与段落的区别前，先了解段落的基本语法。段落语法代码是由在尖括号对里放置p的标记对来表示，在标记对里面放置的内容就构成了一个段落。段落完整语法表示如下。
＜p＞这里表示段落＜/p＞
在＜p＞＜/p＞标记对中就表示一个段落，那么怎样在一篇文章中存放多个段落呢？很简单，每个标签对均表示一个段落，有多少段落就有多少＜p＞＜/p＞，这就是从代码上区别段落与段落的不同。同理，从网页表现出的效果来看，段落与段落间有一行空格不显示任何内容，也就是常常看到新闻中的段落间有空行。那么可以利用HTML的段落标记来显示出文章内容的美观效果，使用户对文章理解有层次感。段落不管是在新闻还是在书籍中都会出现，下面请看段落在网页中如何表现其效果，如代码2.2所示。
代码2.2 多段落的表示
-------------------------------文件名：段落.html-------------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞段落＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--这是注解,不会在网页中显示,下面表示有4个段落--＞
07 ＜p＞这里表示段落一＜/p＞＜!--段落的标记对--＞
08 ＜p＞段落二＜/p＞
09 ＜p＞段落三＜/p＞
10 ＜p＞段落四＜/p＞
11 ＜/body＞
12 ＜/html＞【代码解析】在代码2.2的第5行＜body＞＜/body＞中存在一行注解和4个＜p＞＜/p＞标记对，注解在HTML标记中用＜!--注解内容--＞，浏览解释注解行时，不会在网页中显示出来，只起注解作用，让网页制作者能更好地理解HTML代码，而4个段落表示由4个＜p＞＜/p＞标记对组成的段落，每个段落都是不同内容。当然，在浏览器中显示出来的效果就是表达4个段落，段落与段落间空行效果与正常的换行是不相同的，各段落的格式和段落间的不同如图2.2所示。图 2.2 多段落效果
关于段落中的空格，当浏览器解释HTML文件多个空格时，会自动去掉多余的空格，只显示出一个空格效果，即不管HTML中加上多少空格，都被看做一个空格。如果想出现多个空格的效果，必需加上HTML代码“＆nbsp;”，想要多个空格，可以加上多个“＆nbsp;”，注意后面的分号。
注意 段落之间要空一行，从上面的效果中可以看出，四个段落中间有三行空出来的，这只是段落与段落间的间隔。2.3 强制换行
写文章时，往往要在一个段落中间另起一行，这就要用到换行，在网页中也可以表示换行，但需要使用换行标记。换行可在行文中另起一行，显示出段落层次性，给人感觉更有亲和力。
在网页编写代码时的换行与按回车键的换行是不同的，即在编写HTML代码中的回车只多了一行空格，在代码中另起一行，但浏览器解释时，会忽视多余空格，只保留一个空格的位置。从2.2节中介绍的内容可知，网页显示中会去掉里面的空格，与正常文档换行不同，所以并未达到换行效果。而今天学习的换行就是在网页编写换行代码标记后，在页面中显示出换行效果，当浏览器在解释换行代码时会强制换行，这样在网页中就达到用户在输入时的换行标记的效果。
换行标记是单标记，即不会成对出现，语法是在尖括号中包括“br”的单标记，其完整语法代码如下所示。
＜br＞
一个＜br＞标记表示换一行，如果在一行文字中出现多次＜br＞，就会换行多次，应当记住，本代码是强制换行，内容从下一行的头部开始。代码2.3是表示一行文字多次出现的换行标记的用法。
代码2.3 源代码\第2章\一行文字多个换行符.html
-------------------------------文件名：换行.html-------------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞换行＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--注解：在一行不换行的文本中,多次出现换行符--＞
07 在本条代码中＜br＞出现多个换行符。在＜br＞本条代码中出现多个＜br＞换行符。在本
08 条＜br＞代码中出现多个换行符。＜br＞在本条代码中出现多个换行符。
09 ＜!--＜br＞为换行符,共有5次换行--＞
10 ＜/body＞
11 ＜/html＞【代码解析】代码2.3中，用5个换行标记插入一行文字中，在HTML代码中只是一行出现（一行中超过宽度自动换行，实际上已是两行）的文字中，浏览器中解释到标记＜br＞时，会换行一次，如果再出现，在网页中会再次换行，那么在网页中会不会换行5次呢？效果如图2.3所示。图 2.3 用多个换行符来换行
说明 代码＜br＞是告诉浏览器强制换行，但并不在网页中显示。图2.3所示的是自动换行。2.4 给代码添加注释
制作大型网站的时候，每个网页程序员所做的工作都会不同，但却相互依赖其他程序员写的代码。为了在同一个项目中让其他程序员看得明白，常常用注释来说明代码功能。注释代码的内容不会在网页中显示，只起到注释作用，如一个网页中头部用注释来说明该页面的作用和创建日期以及本网页所展示的功能等，让其他程序员或学习者看到注释就知道代码内容。
在前面的代码中，多次出现了注解符，而且在注解内容中，笔者都在前面标记“注解：”，这是为了告诉初学者代码的意义所采用的一种解说代码方法，并不会在网页中显示注解内的内容。注释语法比较容易，可以在单行中存在注释，同时也可以多行一起注释，单行注释的完整语法如下。
＜!--这里放注释--＞
在一行中，在尖括号中放置感叹号“！”和两个“-”，接下来放置注释内容，最后一定要结束注释，结束注释用两个“-”和另一半尖括号组成，即上面代码表示了单行注释。如果网页代码中只需要注释一行，可以用上面的注释。如果有多行同时需要注释，那是不是每行都用尖括号包围呢？答案是不需要的。其实还有一种方法可以注释多行，请看下面代码。
＜!--
这里放注释
第二行注释
第三行注释
--＞
即在注释处以“＜!--”开始，在多行后用“--＞”结束，中间的内容就是注释内容，不会在网页中显示。多行注释与单行注释类似，只不过中间多次换行，值得注意的是注释标记对的结束标记一定不要忘记。
下面用实例来演示在HTML代码中包含注释，包括单行和多行的，然后通过内容的显示了解被注释的内容是否在网页中显示，代码2.4表示在两行代码里包含注释，请读者观察能不能从显示的网页中看到注释。
代码2.4 源代码\第2章\注释.html
-------------------------------文件名：注释.html-------------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞注释＜/title＞
04 ＜/head＞
05 ＜body＞
06 注释代码是看不到的！
07 ＜!--注释标记，这里是多行注释
08 这里放注释
09 第二行注释
10 第三行注释
11 --＞
12 ＜br＞
13 上面有注释,你看到了吗？
14 ＜/body＞
15 ＜/html＞【代码解析】在代码2.4的第5行＜body＞＜/body＞标签内输入的文字有多行，基本都被注释掉了，没有被注释的已显示，而被注释的代码没有看到，这就是注释标记在HTML代码中所起的作用，效果如图2.4所示。图 2.4 带有注释的代码
注意 注释的尖括号不能交叉，不要忘记注释符后面的结束符。2.5 粗体与斜体
粗体与斜体在语法结构上差不多，应用在文字文本中，且都是用双标记对来表示。在学习本节前，先比较二者区别，这样学起来印象更深刻。
粗体标记的语法是由＜b＞＜/b＞标记对表示，标记对里的文字在网页中显示的字体为粗体，语法简单。代码如下。
＜b＞粗体,这里显示的是粗体＜/b＞
同理，斜体＜i＞里面显示的字体为斜体，语法代码如下。
＜i＞斜体,这里显示的是斜体＜/i＞
可以这样理解，粗体用＜b＞包括着，斜体用＜i＞包括着，代码2.5演示二者代码和效果不同之处。
代码2.5 源代码\第2章\粗体与斜体.html
----------------------------文件名：粗体与斜体.html-----------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞粗体与斜体＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--下面表示粗体的用法--＞
07 ＜b＞粗体,这里显示的是粗体＜/b＞＜!--粗体标记对--＞
08 ＜br＞
09 ＜!--下面表示斜体的用法--＞
10 ＜i＞斜体,这里显示的是斜体＜/i＞＜!--斜体标记对--＞
11 ＜/body＞
12 ＜/html＞【代码解析】在代码2.5的第5行＜body＞＜/body＞标记对里，有粗体标记对表示粗体，也有换行标记给文字换行，还有斜体标记对文本设置斜体，粗体与斜体代表着文本不同的样式，效果如图2.5所示。图 2.5 粗体与斜体比较
技巧 学习了粗体、斜体，可以联想相似的知识，如下一节要学习的＜u＞＜/u＞表示下划线等。2.6 下划线与删除线
为了使部分文字特别显示，可以用下划线或删除线，这种字体往往引人注意，从而达到想要的效果。在网页中也可以使用下划线与删除线。
下划线就是在文字下面有一条线。也是双标记对包含文字，尖括号里面用u表示。其语法代码如下。
＜u＞下划线＜/u＞
类似地，删除线也是双标记对尖括号形式，里面用s表示。其语法代码如下。
＜s＞删除线＜/s＞
二者比较容易区分，u表示下划线，s表示删除线，中间是要表达的内容。代码2.6所示是二者比较的示例。
代码2.6 源代码\第2章\下划线与删除线.html
---------------------------文件名：下划线与删除线.html---------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞下划线与删除线＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--下面代码表示下划线--＞
07 ＜u＞这是下划线＜/u＞＜!--下划线标记对--＞
08 ＜br＞＜!--换行符--＞
09 ＜!--下面代码表示删除线--＞
10 ＜s＞这是删除线＜/s＞＜!--删除线标记对--＞
11 ＜/body＞
12 ＜/html＞【代码解析】代码2.6是比较下划线与删除线二者区别的，中间有换行符＜br＞为了在网页上对齐比较。在代码第7行下划线用＜u＞＜/u＞标记对表示，而在代码第10行删除线用＜s＞＜/s＞表示，当浏览器解释这些标记对时，效果如图2.6所示。图 2.6 下划线与删除线
说明 试着比较＜s＞＜/s＞与＜strike＞＜/strike＞的区别。2.7 上标与下标
上标与下标多应用于文字或数字，如表示化学中的水元素、数学方程式，在数学中用平方、对数等。这是比较特殊的标记。
上标是位于文字或数字的右上位置的标记。如10的平方，平方符号就显示在10的右上位置。稍后做实例分析。先看语法代码，上标代码表示如下。
＜sup＞上标＜/sup＞
同理，下标是在文字或数字的右下位置的标记，应用也比较广泛，如化学元素中的水元素。下标语法代码表示如下。
＜sub＞下标＜/sub＞
为了比较上标与下标的用法所显示出不同效果，下面用实例来显示二者效果，如代码2.7所示。
代码2.7 源代码\第2章\上标与下标.html
----------------------------文件名：上标与下标.html----------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞上标与下标＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--下面表示下标用法--＞
07 这是下标＜sub＞下标＜/sub＞下标＜!--下标标示符--＞
08 ＜br＞
09 ＜!--下面表示上标用法--＞
10 这是上标＜sup＞上标＜/sup＞上标
11 ＜br＞
12 ＜!--用下标表示水的化学表达式--＞
13 H＜sub＞2＜/sub＞O
14 ＜br＞
15 ＜!--用上标表示10的3次方--＞
16 10＜sup＞3＜/sup＞＜!--上标标示符--＞
17 ＜/body＞
18 ＜/html＞【代码解析】上面用代码在文字体现了上、下标的位置。基本上，在代码第10行上标用＜sup＞＜/sup＞表示，在代码第16行下标用＜sub＞＜/sub＞表示，这些标记对可以表示特殊的文本应用，如在化学和数学上的应用等。效果如图2.7所示。图 2.7 上标与下标2.8 HTML标记和格式实例
本章只学了HTML常用的标记和格式，这些知识点以后会常用到，毕竟网页只由少数标记组成。学好常用标记和格式在以后学习中会容易很多。现在来练习一下前面学的知识。知识点通过实例罗列出来。2.8.1 标题用h1
网页代码基本组成在前一章学过，所以输入文章的关键是放在＜body＞＜/body＞中。现在的文章就是这样输进去，如代码2.8所示。
代码2.8 源代码\第2章\HTML标记和格式实例手把手.html
----------------------文件名：HTML标记和格式实例手把手.html----------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞HTML标记和格式实例手把手＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--下面这行表示标题h1--＞
07 ＜h1＞HTML+CSS完全自学手册＜/h1＞＜!--主体内容标题标记对--＞
08 ＜!--下面表示文本行并在代码中换行--＞
09 HTML+CSS完全自学手册
10
11
12 HTML+CSS完全自学手册
13
14
15 HTML+CSS完全自学手册
16 ＜/body＞
17 ＜/html＞【代码解析】在代码第7行显示出标题h1，其他的3行文字在代码中都有换行，效果如图2.8所示。图 2.8 标题h1和正文2.8.2 设置每一行为一段落
从图2.8中可以看到，有3条一样的文字都显示在一行。这与代码中显示的文字不同，那是因为代码会去掉空格，只显示一个空格间隔。要想添加段落必需得有＜p＞＜/p＞标记对。给上面代码加上后部分代码如下。
01 ＜h1＞HTML+CSS完全自学手册＜/h1＞
02 ＜!--下面在每行文本中,用段落标记对包围--＞
03 ＜p＞＜!--段落的标记对--＞
04 HTML+CSS完全自学手册
05 ＜/p＞
06 ＜p＞
07 HTML+CSS完全自学手册HTML+CSS完全自学手册
08 ＜/p＞
09 ＜p＞
10 HTML+CSS完全自学手册
11 ＜/p＞【代码解析】上述代码是放在＜body＞＜/body＞中的，每个文本都加上了＜p＞标记对，其他标记没变化，效果如图2.9所示。图 2.9 设置段落2.8.3 粗体和删除线
在第一段文字上加粗体，第二段上加删除线。部分代码如下。
1 ＜!--下面一行表示用标题的标记对--＞
02 ＜h1＞HTML+CSS完全自学手册＜/h1＞
03 ＜p＞＜!--段落的标记对--＞
04 ＜!--表示在文本中用粗体--＞
05 ＜b＞HTML+CSS完全自学手册＜/b＞＜!--粗体标记对--＞
06 ＜/p＞
07 ＜p＞
08 ＜!--下面一行表示用删除线--＞
09 ＜s＞HTML+CSS完全自学手册＜/s＞＜!--删除线标记对--＞
10 ＜/p＞
11 ＜p＞
12 ＜!--下面一行只是被包围在段落中--＞
13 HTML+CSS完全自学手册
14 ＜/p＞【代码解析】在这段代码里，比前面多了两个标记对，即＜b＞＜/b＞和＜s＞＜/s＞，其他部分都还是一样的，所表示的效果却不同了，如图2.10所示。图 2.10 粗体和删除线
技巧 从上面的删除线中，加上标记对＜s＞＜/s＞即可，同理，设置文本的粗体用＜b＞＜/b＞标记对，请尝试使用下划线的方式。2.8.4 加上化学元素和数学平方根
在前面的学习中用＜sup＞＜/sup＞表示上标，＜sub＞＜/sub＞表示下标，用上标和下标表示数学、化学等特殊符号，完整代码如代码2.9所示。
代码2.9 源代码\第2章\HTML标记和格式实例手把手.html
---------------------文件名：HTML标记和格式实例手把手.html------------------------
01 ＜html＞
02 ＜head＞
03 ＜title＞HTML标记和格式实例手把手＜/title＞
04 ＜/head＞
05 ＜body＞
06 ＜!--下面一行表示用标题的标记对--＞
07 ＜h1＞HTML+CSS完全自学手册＜/h1＞
08 ＜p＞
09 ＜!--表示在文本中用粗体--＞
10 ＜b＞HTML+CSS完全自学手册＜/b＞
11 ＜/p＞
12 ＜p＞
13 ＜!--下面一行表示用删除线--＞
14 ＜s＞HTML+CSS完全自学手册＜/s＞
15 ＜/p＞
16 ＜p＞
17 ＜!---下面一行只是被包围在段落中-＞
18 HTML+CSS完全自学手册
19 ＜/p＞
20 ＜!--下面一行表示水的化学元素--＞
21 H＜sub＞2＜/sub＞S＜!--下标标示符的标记对--＞
22 ＜br＞
23 ＜!--下面一行表示10的2次方--＞
24 10＜sup＞2＜/sup＞＜!--上标标示符的标记对--＞
25 ＜/body＞
26 ＜/html＞【代码解析】代码2.9中，在第5行＜body＞＜/body＞标记对中，存在标题＜h1＞（第7行）标记对，粗体＜b＞（第10行）标记对，删除线＜s＞标记对（第14行），段落＜p＞标记对（第8行）等，用实例演示了前面各知识点的用法，在浏览器中运行后的效果如图2.11所示。
试读结束[说明：试读内容隐藏了图片]