第1章 HTML基础
本章要点
▲掌握HTML文件的基本结构
▲掌握HTML基本标记的含义、用法及属性设置
▲利用HTML标记创建网页中的基本元素
HTML是网页文件的支持语言，通过IE浏览器看到的精美网页其实是IE执行网页的HTML代码的结果。超文本标记语言（HyperText Markup Language），它是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。我们只需使用鼠标在某一文档中单击一个链接，Internet就会马上转到与此图标相关的内容上，而这些信息可能存放在网络的另一台计算机中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
1.1 HTML简介
现在是互联网的世界，在互联网上有成千上万的网站，我们可以浏览到包含文字、声音、图片、视频等内容的网站，这些内容都是通过HTML语言表现出来的，HTML是一种用于网页设计的语言。
- HTML是超文本标记语言（HyperText Markup Language）的缩写
- HTML不是一种编程语言，而是一种标记语言（Markup Language）
- 标记语言都会提供一套标记标签（Markup Tags）
- HTML用标记标签来设计网页
HTML（Hypertext Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用做WWW（World Wide Web，也可简写Web、中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过Web浏览器显示出其效果。
所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术——通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示，通过HTML可以表现出丰富多彩的设计风格。
图片：<IMG SRC="文件名">
文字格式：<FONT SIZE="2 " COLOR="#00FFFF">文字</FONT>
超链接：<A HREF="文件名"></A>
音频：<EMBED SRC="声音地址" AUTOSTART=true>
视频：<EMBED SRC="视频地址" AUTOSTART=true>
从上面我们可以看到HTML超文本文件需要用到的一些标签。在HTML中每个用来当做标签的符号都是一条命令，它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声音等。这些标签符号用"<标签名字 属性>"来表示。
HTML只是一个纯文本文件，创建一个HTML文档，只需要两个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用来打开Web网页文件，提供给我们查看Web资源的客户端程序。可以使用任何文本编辑器来打开并编写HTML文件，例如Windows的“记事本”，范例1.1.html，就是用记事本编写的一个HTML文件。
※ 范例代码 1.1.html
选择“开始→程序→附件→记事本”命令，打开记事本程序，输入代码，如图1.1所示。
※ 范例效果图
单击“另存为”命令，文件名改写为1.1.html，然后双击该文件，可以在浏览器中看到最终的页面效果，如图1.2所示。
图1.1 记事本文件中输入HTML文档
图1.2 IE中显示的页面效果
如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。
1.2 HTML文件的基本结构
一个完整的HTML文档是由一系列的元素和标签组成的，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
1.2.1 HTML文件结构
下面通过范例1.2.html，掌握HTML文件的基本结构，效果如图1.3所示。
※ 范例代码 1.2.html
<html> <head> <title>HTML文件的基本结构</title> </head> <body> 这是一个网页！ </body> </html>
※ 范例效果图
图1.3 HTML文件的基本结构
（1）<! doctype>标记指明本文档中HTML语言的版本，该标签必须位于HTML文件的第一行，用浏览器浏览网页时，此行内容并不显示在页面中，在编写HTML文档时也可省略。
（2）<html></html>在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有<html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。
（3）<head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其他标记，用以说明文件的标题和整个文件的一些公共属性。若不需要头部信息则可省略此标记，良好的习惯是不省略。
（4）<title>和</title>是嵌套在<head>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
（5）<body> </body>标签一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。
上面的这几对标签在文档中都是唯一的，<head>标签和<body>标签是嵌套在HTML标签中的。
1.2.2 HTML的使用要点
（1）“<”和“>”是HTML任何标签的开始和结束。例：<body> </body>
（2）标签与标签之间可以嵌套。例：<center><a>大连工业大学</a></center>
（3）HTML的标签和属性名不区分大小写。例：<html> <HTML> <Html>三个标签是一致的。
（4）HTML代码中任何回车和空格在显示时不起作用（显示空格为“ ”）。为了使代码清晰，建议不同的标签之间用回车换行编写。
（5）HTML标签中可以放置各种属性。例：<h1 align="center">标题1</h1>
（6）在HTML源代码中的注释。<!-- 要注释的内容 --> 注释语句只出现在源代码中，不会在浏览器中显示。
1.2.3 HTML的标签及属性
※ 基本语法：
成对标签 <标签名 属性1="值" 属性2="值" 属性3="值" …>内容</标签名>
单独标签 <标签名 属性1="值" 属性2="值" 属性3="值" …>
例如：<font color="#ff0000" face="宋体" size="15">字体设置</font><br>
在HTML中用“<”和“>”括起来的部分，我们称它为标签，这些标签可以形成页面中文本的布局、文字的格式及五彩缤纷的画面。属性是标签里参数的选项。
HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾标签</标签名>组成的，成对标签的作用域只作用于这对标签中的文档,单独标签在相应的位置插入元素就可以了。大多数标签都有自己的一些属性，属性要写在开始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值。标签属性值如果是颜色值，HTML中颜色值有两种表示形式，分别是：
① 使用颜色名称来表示。
② 使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。
常用的颜色值如表1-1所示。
表1-1 常用颜色值
※ 范例代码 1.3.html
<html>
<head>
<title>世侨国贸公寓</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!—
p,td{font-size:9pt; line-height:16px}
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
…
</body>
</html>
※ 代码分析
<body>标签中属性bgcolor的含义是定义页面的背景色，值为#FFFFFF表示白色，属性ext表示页面中文字的颜色，值为#000000表示黑色。
※ 范例效果图
范例效果如图1.4所示。
图1.4 HTML标签及属性的应用
注意1：为了使读者有一个好的习惯，提倡全部对属性值加双引号。
注意2：输入开始标签时，一定不要在“<”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确识别括号中的标签命令，从而无法正确显示信息。
1.3 HTML的基本标签
1.3.1 头部标签
HTML头部标签是<head>，主要包含页面的一些基本描述语句，一般位于头部的内容不会直接显示在网页中，而是通过其他方式起到作用。表1-2列出了HTML常用的头部标签。
表1-2 头部标签
1.标题标签<title>
在HTML文档中，标题文字位于<title>和</title>之间。
※ 基本语法：<title>…</title>
例：<title>大连工业大学</title>
2.元信息标记<meta>
<meta>标签放置在文档头部，不包含任何内容，能够提供文档的关键字、作者及描述等多种信息。
※ 基本语法：<meta name="value"content="value" http-equiv="value">
<meta>标签的常用属性见表1-3。
表1-3 <meta>标签的常用属性
例如：<meta http-equiv="content-type" content="text/html" charset="GB2312">
content的属性为提供页面内容的相关信息，指明文档类型为文本类型。charset定义字符集，提供网页的编码信息，浏览器根据这行代码选择正确的语言编码，GB2312表示定义网页内容时用标准简体中文显示。
例如：<meta name="keywords" content="HTML,网页制作" >
定义本网页的关键字。搜索引擎可以让访问者根据这些关键字查找到网站主页，各关键字之间用逗号隔开。
例如：<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
网页自动刷新。经过用户自定义设置的时间5秒后，页面自动跳转到url指定的位置。
例如：<meta name="description" content="本网站主要讲解HTML文档的具体应用 " >
描述本网页的主要内容。
注意1：在HTML头部可以包括任意数量的<meta>标签。
注意2：meta标签只能放在<head></head>标签内。
※ 范例代码 1.4.html
<html>
<head>
<title>远航假期</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="css/all.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
Javascript脚本
//-->
</script>
</head>
<body bgcolor="#FFFFFF" topmargin="25">
…
</body>
</html>
※ 范例效果图
范例效果如图1.5所示。
图1.5 头部标签
1.3.2 内容标签
在<body>与</body>之间的所有部分都被称做主体部分，在其中放置的是页面中的所有内容（文字、图片、链接、表格、表单、视频等）。
※ 基本语法：<body 属性1="值1" 属性2="值2" …>
表1-4列出了<body>标签的常用属性。
表1-4 <body>标签的常用属性
<body>里的属性可以同时使用。
例如：<body text="#000000" bgcolor="#F0F0F0" background="bg.gif" >
<body bgcolor="#FFFFE7" text="#ff0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">
注意：学习HTML语言需要记住的东西很多，但是我们并没有必要全部记住。我们需要做的是了解每个标签的功能及其属性。当看到一个网页时知道能用什么标签或者属性实现就可以了。当我们编辑网页时如果忘了可以查看资料。
1.3.3 格式标签
网页设计过程中，经常需要用到一些格式标签对网页的格式进行定义，特别是HTML不识别Enter键和空格键，所以定义格式标签十分重要，见表1-5。
表1-5 格式标签
1.强制换行<br>
※ 基本语法：文字<br>
用HTML的标签来强制换行、分段。<br>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。
※ 范例代码 1.5.html
<html> <head> <title>强制换行</title> </head> <body> 无换行标记：登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 <br>有换行标记：<br>登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。 </body> </html>
※ 范例效果图
范例效果如图1.6所示。
图1.6 换行标签
2.段落标签<p>...</p>
※ 基本语法：<p align="left|center|right"> 文字</p>
由<p>标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个<p>的开始就意味着上一个<p>的结束。良好的习惯是成对使用。
其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），省略时默认为left。格式中的“|”表示“或者”，即多中选一。
※ 范例代码 1.6.html
<html> <head> <title>段落标签</title> </head> <body> <p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨， 就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。</p> <p align="right">或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。</p><p align=center>而美丽苦短的花期</p> <p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p> </body> </html>
※ 范例效果图
范例效果如图1.7所示。
图1.7 段落标签
※ 范例代码 1.7.html
<html> … <body leftmargin="70"> <p><img src="Figure-00/2-01.gif" width="230" height="52"><img src="image/2-2.gif" width="208" height="52"></p> <p> <span class="text3">中国职工国际旅行社总社阜城门门市 <br> <br> 地址：北京市西城区阜外大街1号华利佳合商务楼405室 <br> 负责人：王力仟 <br> 联系电话：010-88375285/88375250/68318141/68318142 <br> 传真：010-68315534 </span></p> <p><span class="text3"><br> <br> 中国职工国际旅行社总社东四十条门市部 <br> <br> 地址：北京市东城区东四十条21号1层东厅 <br> 负责人：苏梦迦 <br> 联系电话：010-64050066/84031887 <br> 传真：010-84032533 </span></p> <p><span class="text3"><br> <br> 中国职工国际旅行社总社东高地门市部 <br> <br> 地 址：北京市丰台区六营门梅源小区45号楼103室 <br> 负责人：宫宇 <br> 联系电话：88530959 88530960 <br> 传真：67974294 </span><br> </p> … </body> </html>
※ 范例效果图
范例效果如图1.8所示。
图1.8 换行与段落标签
3.定位标签<div>…</div>
※ 基本语法：<div align="left|center|right"> 文本、图像或表格</div>
设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用<div>…</div>标签。其中属性align用来设置文本块、一段文字或标题在网页上的对齐方式，省略时默认为left。
4.水平线标签<hr>
※ 基本语法：<hr align="left|center|right" size=" " width=" " color=" " noshade>
在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的<hr>标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的属性参数决定。size设定线条粗细，以像素为单位，默认为2像素。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。noshade去掉水平线的阴影效果，设置水平线为一条实线。
※ 范例代码 1.8.html
<html> <head> <title>水平线标签</title> </head> <body> <p align="center"><img src="images/logo.gif" alt="欢迎光临" ></p> <hr width="600" size="1" color="#0000FF"> </body> </html>
※ 范例效果图
范例效果如图1.9所示。
图1.9 水平线标签
5.注释标记<!--…-->
※ 基本语法：<!-- 注释内容 -->
注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。
※ 范例代码 1.9.html
<!--|定义IE5.5滚动条|11|此处为特效配置参数，删除或修改此行内容将导致特效运行不正常！删除或修改此行以下特效代码，当再次使用“有声有色”编辑特效时将会发生异常！-->
<style>
<!--
BODY {SCROLLBAR-FACE-COLOR: #FFCC00; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR:#FFFFE1; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; }
<!-- 此网页中的特别动态效果使用“有声有色 2004”软件编辑制作！-->
<!-- “有声有色 2004”--最好的网页特效制作编辑软件，制作特效您只需轻点几下鼠标即可完成！ -->
-->
※ 范例效果图
范例效果如图1.10所示。
图1.10 注释标签
1.3.4 字体标签
文字是网页中非常重要的元素，通过文字来说明网页的具体内容，关于字体标签如表1-6所示。
表1-6 字体标签
1.标题文字标签<h#>…</h#>
※ 基本语法：<h# align="left|center|right"> 标题文字 </h#>
在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。可以通过设置不同大小的标题，使文章条理清晰。#用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，取6时文字最小。属性align设置标题在页面中的对齐方式，省略时默认为left。
2.字体标签<font>...</font>
※ 基本语法：<font size="数字" face="字体名" color="色彩">被设置的文字
</font>
在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用<font>标签设置字号（<font>被W3C列为不建议使用的标记，以后将学习用CSS来设定字体）。<font>标记可设定文字的字体、字号和色彩。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体_GB2312等。color用来设置文字色彩。
※ 范例代码 1.10.html
<html> <head> <title>文本标志的综合示例</title> </head> <body text="blue"> <h1>最大的标题</h1> <h3>使用h3的标题</h3> <h6>使用h6的标题</h6>
<p><b>黑体字文本</b> </p> <p><i>斜体字文本</i> </p> <p><u>下加一划线文本</u> </p> <p><tt>打字机风格的文本</tt></p> <p><cite>引用方式的文本</cite></p> <p><em>强调的文本</em></p> <p><strong>加重的文本</strong></p> <p><font size="+1" color="red">size取值"+1"、color取值"red"时的文本</font></p> </body> </html>
※ 范例效果图
范例效果如图1.11所示。
图1.11 文本标志的综合示例
注意：网页中的文字样式主要是通过CSS样式来进行设置的，在后面章节中会讲解到，font标签不提倡使用。
1.3.5 超链接标签
HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其他页面。超文本具有的链接能力,可层层链接相关的文件，这种具有超级链接能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多彩的多媒体世界。超链接标签<a>的属性如表1-7所示。
表1-7 超链接标签<a>的属性
1.href指定链接地址
每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。URL(Uniform Resource Locator)中文名字为“统一资源定位器”，指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个链接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此，链接主要分以下两种：
- 绝对路径，如http://www.sina.com.cn
- 相对路径，如news/index.html
绝对路径：包含了标识Internet上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称。相对路径是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。
① 如果链接到同一目录下，只需输入要链接文件的名称。如<a href="8.html"></a>
② 要链接到下级目录中的文件，只需先输入目录名，然后加"/"，再输入文件名。如<a href="book/8.html">第八章</a>
③ 要链接到上一级目录中文件，则先输入"../"，再输入文件名。如<a href="../html/book/8.html">HTML基础教程</a>
2.设定链接的目标窗口
※ 基本语法：<a href="URL" target="VALUE">
target属性值如表1-8所示。
表1-8 target属性值
3.锚点链接
浏览页面时，如果页面内容较多会使页面的长度很长，需要不断拖拉滚动条才能看到具体的内容，这样操作起来很不方便。定义锚点链接后，单击超链接就可以直接链接到页面中的具体位置。
※ 基本语法：
<a name="锚点名称">文字</a>
<a href="#锚点名称">文字链接</a>
这里的两处name值保持一致。
注意1：属性name是不可缺少的。
注意2：href属性赋的值若是锚点的名字，必须在锚点名前边加一个“#”号。
4.空链接
所谓空链接是指光标指向链接文字后光标呈手形，但没有链接到任何页面，仍然停留在当前页面。
※ 基本语法：<a href="#">链接文字</a>
5.邮件链接
※ 基本语法：mailto:邮箱地址例如：mailto:abc@163.com
※ 范例代码 1.11.html
<html> <head> <title>链接标签的综合示例</title> </head> <body> <p align="center" style="font-size:9pt;color:yellow;background: black"><br> <a name="Top"><font color="red">创建标签处</font></a><br> <br> <br> 网页制作学习网站<br> <a href="http://xld.home.chinaren.net/" target="_blank"> <font color="lime">http://www.w3school.com/</font><br><br></a><br> <br> 本网站的主要内容<br> <br> <a href="index_Html.htm" target="_blank">Html教程</a><br> <br> <a href="../DHtml/index_DHtml.htm" target="_blank">动态Html教程 </a><br> <br> <a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a> <br><br> JavaScript教程<br> <br> VBScript教程<br> <br> <a href="../yqlj/yqlj.htm" target="_blank">友情链接</a><br> <br> 我要留言<br> <br> 作者介绍<br> <br> <br> 欢迎给我来信，我的E-mail是： <ahref="mailto:xiaolida@263.net"><font color="lime">xiaolida@263. net</font></a><br> <br> <a href="#Top"><font color="lime">点击此处回到标签处</font></a><br> <br> </p> </body> </html>
※ 范例效果图
范例效果如图1.12所示。
图1.12 超链接标签的综合示例
1.4 上机练习
1.创建一个简单的网页，要求网页的标题是“个人简介”，网页文本内容自定义，保存到以自己名字命名的文件夹中，HTML文件名为index.html。
2.写出HTML文件的总体结构。
3.在IE浏览器中，如何查看网页的HTML源文件。
4.设计页面如图1.13所示。要求背景颜色值为lightcyan，“桃花庵歌”字体为标题2，唐寅”字体为华文行楷，直线的长度分别为50px，80%，80%，高度分别为5，7，6，颜色分别为黄色、蓝色和红色。
图1.13 基本标签的应用
5.设计页面如图1.14所示。
图1.14 文本标签的应用