超文本标记语言
第1章HTML基础
HTML(超文本标记语言)是制作网页的基础。HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。
一个HTML文件中包含了所有将显示在网页上的文字信息。其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。
教学目标
通过对本章的学习，读者应了解和掌握HTML的各种标记和语法，并能够使用HTML 设计简单的静态网页。
教学重点与难点
●使用HTML设计静态网页
●编辑网页文本格式
●创建超链接
●使用表格
●使用列表
1.1 网页基础知识
Internet是从Interconnected Networks延伸而来的，是跨国界的网络。Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。
1.1.1 万维网——WWW
WWW(World Wide Web)即环球信息网，也可以称为Web，中文名字为“万维网”。
用户在使用浏览器来访问Web的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。WWW 是Internet上发展最快和目前使用最广泛的一种服务。
简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。
1.1.2 超文本传输协议——HTTP
HTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。通过这一跨平台的通信协议，在WWW任何平台上的电脑都可以阅读远方服务器(Server)上的同一文件。
HTTP协议经常用来在网络上传送Web页。当用户以http://开始一个超链接的名字时，就是告诉浏览器去访问使用HTTP协议的Web页。
HTTP协议不仅能保证正确传输超文本文档，还可以确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等等。
1.1.3 统一资源定位器——URL
URL(Uniform Resource Locator)即统一资源定位器，它使用数字和字母来代表网页文件在网上的地址。URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中查找到所需要的资料。
Web上所能访问的资源都有惟一的URL。URL包括所用的传输协议、服务器名称、文件的完整路径。例如：在浏览器的URL处输入https://www.docsj.com/doc/202668874.html,/index.html就可以访问搜狐网站的主页。
URL的第一部分http://表示要访问的资源类型。其他常见资源类型中，ftp://表示FTP 服务器，gopher://表示Gopher服务器，new://表示Newgroup新闻组。
第二部分https://www.docsj.com/doc/202668874.html,是主机名，它说明了要访问服务器的Internet名称。其中，www表示要访问的文件存放在名为www的服务器里，多数公司都有指定的服务器作为对外的网上站点，叫做www；sohu则表示了该网站的名称；.com则指出了该网站的服务类型。
目前，常用的网站服务类型的含义如下：.com特指事务和商务组织；.edu表示教育机
构；.gov表示政府机关；.mil表示军用服务；.net表示网关，由网络主机或Internet
服务提
供商决定；.org一般表示公共服务或非正式组织。
另外，有些域名后面会带有本国和地区的域名。例如：新浪的网址
https://www.docsj.com/doc/202668874.html,中的cn就代表该网站属于中国。另外，au代表澳大利亚、ca代表加拿大、fr代表法兰西、uk代表英国、jp代表日本等。
第三部分/index.html表示要访问主机的哪一个页面文件，可以把它理解为该文件存放
第1章HTML基础
在服务器上的具体位置。
1.1.4 超文本标记语言——HTML
HTML(Hyper Text Mark-up Language)即超文本标记语言，是WWW上通用的描述语言。HTML语言主要是为了把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。
1.1.5 HTML标记
HTML标记用于修饰、设置HTML文件的内容及格式。用户只须输入文件内容和必要的标记，文件内容在浏览器窗口内就会按照标记定义的格式显示出来。一般情况下，HTML 标记使用下列格式：
<标记>文件内容
标记须要填写在一对尖括号“< >”内，它们通常是英文单词的首字母或缩写。标记一般情况下是成对出现的。结束标记是在标记的前面添加斜杠“/”。
在书写标记时，英文字母的大、小写或混合使用大小写都是允许的，如HTML、html 和Html的作用和效果都是一样的。
标记内可以包含一些属性。标记属性可由用户设置，否则将采用默认的设置值。属性名称出现在标记的后面，并且以空格进行分隔。如果标记具有多个属性，那么不同的属性名称之间将以空格隔开。其格式如下是：
< 标记名字属性1 属性2 属性3 …>
HTML对属性名称的排列顺序没有特别的要求，用户可根据个人的爱好，在标记之后排列所需的属性名称。另外，标记的属性值须要使用双引号或单引号括起来。
HTML文件可以使用一个简单的文本编辑器创建，例如Windows操作系统中自
带的记事本程序。但是文件编辑完成进行保存时，必须以htm或者html为扩展
名。以后，就可以使用Web浏览器(如IE浏览器)来直接打开HTML文件进行浏
览和查看了。
1.2 HTML文档的基本结构
HTML文件通常由3部分组成：即起始标记、网页标题和文件主体。其中，文件主体是HTML文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。
在HTML文本中，有一些固定的标记要放在每一个HTML文件里。HTML文件的总体结构如下所示：
网页的标题及属性
文件主体
1.2.1 添加起始标记
标记用于HTML文档的最前面，用来标识HTML文档的开始。而标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标记必须一起使用。通过对这一对特殊标记符号的读取，浏览器才可以判断目前正在打开的是网页文件，而不是其他类型的文件。
标记的起始和结束标记符号都是可选的，但用户应该养成在文件中使用标记的习惯，每次编写HTML文件之前都应该首先在网页内添加…标记对，然后再在标记对之间加入网页的内容。
1.2.2 设置文件头
标记对构成HTML文档的开头部分，在此标记对之间可以使用1. Title标记
第1章HTML基础
2. Isindex标记
3. Base标记
4. Link标记
标记表示超链接，在HTML文件的
标记中可以出现任意数目的Link标记。它也包含有参数Href。标记可以定义含有链接标记的文件与URL中定义文件之间的关系。标记通常用来显示作者身份、相关检索及术语、旧的或更新的版本、文件等级、相关资源等。Rel参数用来定义HTML文件及URL之间的关系，Rev参数用来定义URL 和HTML文件之间的关系。该标记用法如下：
5. Meta标记
标记用来指明与文件内容相关的信息。每一个该标记指明一个名称或数值对。如果多个标记使用了相同的名称，其内容便会合并成一个用逗号隔开的列表，也就是和该名称相关的值。标记的主要属性包括。
●Http-Equlv：把标记放到HTTP头域之中。HTTP服务器可使用该信息处理文件，
特别是它可在对这个文件请求的响应中包含一个头域。标题名取自Http-Equiv属性值，而标题值则取自Content属性值。
●Name：指明名称或数值对的名称。如果没有，则由Http-Equiv给出名称。
●Content：指明名称或数值对的值，一般为text/html。
●Charset：指明网页所使用的基本字符集，一般为GB2312，即标准简体中文。
Meta标记的一般用法如下：
1.2.3 网页的主体格式
标记对之间的内容是HTML文档的主体部分，在此标记对之间可包含众多的标记和信息，它们所定义的文本、图像等将会在浏览器的窗口内显示出来，两个标记必须一起使用。标记中还可以设置一些属性，如表1-1所示。以上各个属性可以结合使用，如
。引号内的rrggbb 是用6个十六进制数表示的RGB(即红、绿、蓝3色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用HTML语言所给定的常量名来表示颜色：Black(黑)、White(白)、Green(绿)、Maroon(褐红)、Olive(橄榄)、Navy(深蓝)、Purple(紫)、Gray(灰)、Yellow(黄)、Lime(浅绿)、Aqua(蓝绿)、Fuchsia(紫红)、Silver(银)、Red(红)、Blue(蓝)和Teal(青)。如
表示标记对中的文本使用蓝色显示在浏览器的窗口内。1.2.4 HTML中的注释
注释标记用来在HTML源文件中插入注释，注释会被浏览器忽略不显示。用户可以使用注释来解释代码，例如。这些注释信息可在以后编辑代码的时候，给用户提供必要的帮助和提示。
在注释标记中，左括号“<”后面需要添加一个感叹号，而右括号则无须添加。
【练习1-1】利用基本标记，创建如图1-1所示的网页。
第1章HTML基础
图1-1 一个简单的HTML页面
(1) 单击“开始”| “所有程序”| “附件”| “记事本”，打开记事本程序。
(2) 输入下面这段代码。
深青色背景、红色文本
(3) 将该文本保存为一个扩展名为htm或者html的HTML文件。
(4) 使用IE浏览器打开该HTML文件，其运行后的效果将如图1-1所示。
本书后面的例子，如未特殊说明，将省略操作步骤直接给出代码，用户可套用上述的4个操作步骤进行测试。
1.3 编辑网页正文
正文是网页的核心内容，用户可使用HTML语言在网页内对正文进行划分段落、插入标题、修改字体、设置字号等操作。另外，HTML还允许对正文应用不同的字型和效果。
1.3.1 输入标题
一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记
其中n为标题的等级。HTML提供6个等级的标题，n越小，标题字号就越大。
【练习1-2】使用标题标记改变文本格式，创建如图1-2所示的网页。
图1-2 设置标题格式
一级标题
二级标题
这是一行没有设置标题格式的正文文本
五级标题
六级标题
1.3.2 划分段落
标记对用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。HTML将多个空格以及回车等效为一个空格，HTML的分段完全依赖于分段标记。
另外，
标记还可以使用Align属性，它用来说明对齐方式，语法是：
。Align的值可以是Left(左对齐)、Center(居中)和Right(右对齐)3个值中的任何一个。如表示标记对中的文本使用居中对齐方式。【练习1-3】使用段落标记，并设置不同的属性，创建如图1-3所示的网页。
图1-3 设置段落对齐方式
第1章HTML基础
第一段文字左对齐。
第二段文字居中对齐。
第三段文字右对齐。
上面的三段文字被P标记设置了段落格式。
标记用来创建一个回车换行。如果
标记处在
标记前面和后面的文本的行与行之间的距离比较大。若处在标记对的中间，则
标记前面和后面文本的行与行之间的距离将比较小。
1.3.3 设置文本格式
在HTML文件里，一般都有大量的文本和信息。如要主次分明、重点突出的显示这些信息，则需要在格式设定方面使用更多的标记和更详细的设置。
1. 设置字体和字号
标记对用来设置文字字体，它的Face属性指定浏览器所显示文本的字体类别，而Size 和Color属性则可以对输出文本的字体大小、颜色进行随意地改变。
用户在使用Font标记的Face属性设置文本字体时，可指定一个字体列表，如果浏览器不支持第一种字体，就会依次使用第二、第三等后续字体显示网页内容。如下例：
我要显示的汉字
Size属性用来改变字体的大小；而Color属性则用来改变文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。
2. 黑体、斜体和下划线
除了正常的字体外，用户还可为文本设置粗体、斜体和下划线等字型。HTML对这些标记出现的次序没有特别的要求。
●标记对：用来使文本以黑体字的形式输出。
●标记对：用来使文本以斜体字的形式输出。
●标记对：用来使文本以加下划线的形式输出。
3. 强调及加重等效果
下面的标记对用于设置文本的强调、加重等效果，其用法和前面的标记一样，差别在于输出的文本字体不太一样。
●标记对：用来输出打字机风格字体的文本。
●标记对：用来输出引用方式的字体，通常是斜体。
●标记对：用来输出需要强调的文本(通常是斜体加粗体)。
●标记对：用来输出加强显示效果的文本(通常也是斜体加粗体)。
【练习1-4】给文字设置不同的字体，创建如图1-4所示的网页。
图1-4 字体设置示例
最大的标题
使用h3的标题
最大的标题
黑体字文本
斜体字文本
下加一划线文本
打字机风格的文本
引用方式的文本
强调的文本
加重的文本
Size取值“+1”、Color取值“red”时的文本
1.4 建立超链接
超链接一般可分为外部链接(External Link)与内部链接(Internal Link)。单击外部链接时，浏览器窗口将显示其他文档的内容。单击内部链接时，访问者将看到网页的其他部分并显示在当前浏览器窗口中。另外，HTML还可以创建指向邮件地址的链接，单击该链接之后便可通过电子邮件软件给指定的地址发送邮件。
1.4.1 创建外部链接
一个超链接通常由以下3部分构成：首先是超链接标记，表示这是一个链接；然后是属性Href及其值，这就定义了超链接所指的目标；最后是在超链接中显示在网页上作为链接的文字。链接文本的格式如下：
第1章HTML基础
单击外部链接时，可在访问者的浏览器窗口打开、跟踪其他文档。文档可能保存在其他站点内，也可能保存在当前站点内，为了便于区分这两种情况，可将指向其他站点文档的链接称为URL链接，而将指向同一站点内文档的链接称为本地链接。
创建URL链接时，需要给出URL链接的完整网址，例如下面的代码就是在网页中添加一个“新浪网”的超级链接：
在一台机器上对不同文件进行连接叫本地连接，常用相对路径或绝对路径表示一个文件。假如链接的目标位于当前HTML文档所在文件夹的子文件中，则可直接使用相对路径地址来指向该目标。例如：
若使用绝对路径地址来指向目标，则可表示为：
“/”表示当前路径地址为绝对路径。假如链接的目标位于当前HTML文档所在
文件夹的上层文件夹中，则路径使用“../”来指向上层文件夹。
此外，还具有Target属性，此属性用来指明浏览时的目标框架，该属性的各项值的用法与含义如表1-2所示。
如果不使用Target属性，当浏览者单击了链接之后将在原来的浏览器窗口中浏览新的HTML文档。若Target的值等于“_blank”，单击链接后将会打开一个新的浏览器窗口来浏览新的HTML文档，如下面代码所示：
1.4.2 创建内部链接
所谓内部链接就是网页中的书签。在内容较多的网页内建立内部链接时，它的链接目标不是其他文档，而是网页内的其他位置。在使用内部链接之前，须要在网页内确定书签的位置，并使用标记的Name属性为书签命名。内部链接的一般格式为：
其中，“书签名称”是代表“书签内容”的字符串，用户可使用简短、有意义的字符串代替网页文本。为了使Web浏览器易于区分“书签名称”与文档内容，“书签名称”前面需要添加符号#。例如，先定义一个标签Ａ，然后找到“标签名”这个标签，就可编写如下代码：
1.4.3 创建邮件链接
邮件链接可使访问者在浏览页面时，只须单击电子邮件链接就能够打开默认的邮件编辑软件，向指定的地址发送邮件。电子邮件链接的应用格式如下：
其中，“E-mail 地址”是用户在Internet上的电子邮件地址，而“邮件链接文本”就是访问者单击的文本。
访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件。例如，使用Office系列的Outlook Express作为默认的邮件编辑器时，单击电子邮件链接时将打开Outlook Express窗口，“收件人”一栏将出现该邮件地址。
1.10 动态HTML(DHTML)
使用DHTML技术，可通过浏览器技术、客户端脚本技术和CSS样式表，生成变化缤纷的动态页面。
DHTML是Dynamic HTML(动态HTML)的简称，它是一种即使在脱离网络环境的情况下，网页装载入浏览器以后仍然能够随时变换内容的技术。比如：当鼠标指针移至文章段落中，段落能变成醒目的红色或蓝色；在网页的页面上，随机性地漂浮着一些漂亮的小标志；网页横幅不断地滑动或具有滚动闪亮的效果等等。
DHTML之所以能够制作出“动感”的效果，首先是因为DHTML将网页中的每个元
第1章HTML基础
素划分成了许多独立的对象，通过CSS来指定这些对象的属性。
CSS是DHTML网页进行改变的对象，网页中的各种变化都是通过脚本语言设置CSS 的属性来实现的。因此可以说CSS是编写DHTML网页的基础。
CSS本身是HTML的扩展，因此语法规则并不复杂，掌握HTML语言使用方法后就不难看懂CSS代码。CSS的功能十分强大，它能够对文字间距、字体、列表、颜色、背景、位置等多种属性进行精确控制。
将CSS样式表添加到HTML文档的方法有多种，可链接外部样式表、嵌入样式表以及输入样式、内联样式等等。
另外，CSS还有具有艺术功能的滤镜效果。滤镜效果将可视化的滤镜和转换效果添加到标准的HTML元素上，可进行有序地变化和更替演示，产生精彩的渐变和动画效果。运用好动态网页技术，可使制作的网页美仑美奂，大放异彩。
1.11 习题
1.11.1 填空题
1. HTTP即___________协议，它是WWW服务器使用的最主要的协议。
2. ___________标记用于HTML文档的最前边，用来标识HTML文档的开始。而___________放在HTML文档的最后边，用来标识HTML文档的结束。
3.
标记的Width属性用于设置水平线宽度，默认单位是___________，也可使用占浏览器窗口的百分比来设定。
4. 在
标记的属性中，用于设置网页背景颜色的是___________，用于设置网页文本颜色的是___________。5. 表单标记