教育改变生活

标题: Web前端设计—HTML和CSS开发实战-教案-第1章 [打印本页]

作者: chinasll 时间: 2021-10-29 22:42
标题: Web前端设计—HTML和CSS开发实战-教案-第1章
第1章初识HTML

背诵英语单词

head title body

target

学习目标

本章将讲解网页制作中的基础内容，给大家打下一个牢固的基础，即本章的重点内容是HTML文件的基本结构和W3C标准，以及制作网页常用的基本标签。

内容导航

² 了解HTML基本概念

² 了解HTML基本结构

² 了解HTML文件的基本结构

² 掌握网页的基本标签

1.1 HTML的基本概念

在网络如此发达的今天，大家的生活、学习和工作基本上都离不开网络。大家经常浏览的新闻页面、微博和微信等各种从网上获得信息的途径，不论是PC终端，还是移动客户端，基本上都是以Web为基础来呈现的，因此Web页面呈现信息已成为各种信息共享和发布的主要形式。而HTML (Hyper Text Markup Language,超文本标记语言，在有些书籍中也翻译为超文本标签语言）则是创建 Web页面的基础。本书将从HTML文件的基本结构是什么，到使用HTML标签制作简单的网页，一直到最后使用DIV+CSS制作精美的商业网站，以这样一个循序渐进的讲解过程，帮助大家完成从不会到会到熟练再到精通网页制作的蜕变。学习完本门课程后，大家都能够掌握网页制作的精髓，快速而熟练地制作网页。

当前互联网已完全融入大家的生活，无论是从网络上获取所需的信息资料还是通过网络发布信息，这些都离不开网页。如图所示，这些无论是文字、图片还是视频都是通过HTML文件为基础制作出来的，并通过浏览器进行展现。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE49.tmp.jpg

图1.1 电子邮箱页面图

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4A.tmp.jpg

图1.2 信息展示页面

1.1.1 HTML简介

HTML的英文全称是Hyper Text Markup Language，它是网页超文本标记语言。

HTML作为一款标记语言，本身不能显示在浏览器中，而是通过浏览器的解释和编译，才能正确地显示HTML标记语言的内容。HTML从1.0到4.01经历了巨大的变化，从单一的文本显示功能到多功能互动，许多特性经过多年的完善，已经成为了一款非常成熟的标记语言。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如：使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

虽然HTML 5提供了许多新的功能，但是它目前仍在完善之中，新的功能还在不断地被推出，纯HTML 5的开发还处于尝试阶段。虽然大部分现代浏览器已经具备了HTML 5某些功能的支持，但是还不能完全支持HTML5，支持HTML5大部分功能的浏览器仅是一些高版本，如IE9及更高版本。因此，鉴于以上原因，本门课程在讲解时，是依照XHTML 1.0为标准进行介绍。大家有兴趣的话，可以在学习完本门课程之后，以本门课程内容为基础，自己学习HTML 5的相关新功能。

1.1.2 HTML文件的基本结构

HTML的基本结构分为两部分：头部（head）和主体（body），头部包括网页标题（title）等基本标签。而主体包括网页的内容信息，如图片、文字、视频、表格等。页面的各部分内容都在对应的标签中，都以“<>”开始、以“</>”结束，要求成对出现，如网页以<html>标签开始，以</html>结束；网页头部以<head>开始，以</head>结束；页面主体部分以<body>开始，以</body>结束。在网页中所有的内容都放在<body>和</body>之间，如图1.3所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4B.tmp.jpg

图1.3 HTML代码结构

1.1.3 HTML文件的编写

了解HTML文档的基本结构后，下面介绍常用的HTML代码编辑工具。

1. 使用记事本编写HTML

HTML是一款以文字为基础的语言，并不需要什么特殊的环境，可以直接使用Windows系统自带的记事本工具编写。具体操作步骤如下：

a) 在Windows系统中打开记事本程序，在记事本上即可编写HTML代码，如图1.4所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4C.tmp.jpg

图1.4 在记事本里编写HTML

b) 点击【文件】→【保存】菜单，弹出【另存为】对话框中，选择好保存的位置如【桌面】，将文件保存为扩展名为“.html”的文件，如“index.html”，点击“保存”按钮，保存文档，如图1.5所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4D.tmp.jpg

图1.5 “另存为”对话框

c) 关闭记事本，到桌面位置找到刚刚保存的“index.html”文件，双击文件，Windows系统将自动调用浏览器。如IE浏览器打开HTML文档，如图1.6所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4E.tmp.jpg

图1.6 IE浏览效果

2. 使用Dreamweaver编写HTML

Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，该工具是集网页制作和管理网站于一身的所见即所得网页编辑器，是一款针对专业网页设计师提供的视图化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

使用Dreamweaver创建HTML文件，具体操作步骤如下：

a) 打Dreamweaver软件，新建一个文档，单击文档中的【代码】按钮，打开代码视图，在代码视图中可以输入HTML代码，如图1.7所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE4F.tmp.png

图1.7 Dreamweaver代码界面

b) 输入代码完成后，切换到设计视图，效果如图1.8所示。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE50.tmp.png

图1.8 Dreamweaver视图设计界面

c) 网页设计好后，可以通过点击界面上方【在浏览器预览/调试】按钮（如图1.9所示），或直接按下键盘“F12”键，在浏览器中进行预览。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE60.tmp.png

图1.9 点击“在浏览器预览/调试”按钮

1.1.4 网页的基本信息

一个完整的HTML文档必须包含三个部分内容：一个由<html>元素定义的文档版本信息，一个由<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。<head>作为各种声明信息的包含元素出现在文档的顶端，并且要先于<body>出现。而<body>用来显示文档主体内容。

1. HTML头部标记head

在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以<head>为开始标记，以</head>为结束标记的。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE61.tmp.png 语法：<head>……</head>

说明：<head>元素的作用范围是整篇文档。<head>元素中可以有<meta>元信息定义、文档样式表和脚本等信息，定义在HTML语言头部的内容往往不会在网页上直接显示。

【例1．1】创建新页面，包含head标签。

<html>

<head>

文档头部信息

</head>

<body>

文档正文内容

</body>

</html>

2. 标题标记title

HTML页面的标题一般用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head>与</head>之间。标题标记以<title>开始，以</title>结束。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE62.tmp.png 语法：<title>……</title>

说明：在标记中间的“……”就是标题的内容，它可以帮助用户更好的识别页面。页面的标题只有一个，它位于HTML文档的头部，即<head>和</head>之间。

【例1．2】创建新页面。包含title标签。

<html>

<head>

<title>标题标记title</title>

</head>

<body>

</body>

</html>

预览效果如图1.10所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE63.tmp.jpg

图1.10 预览效果

3. 元素信息标记meta

meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新功能等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容。在一个HTML页面中可以有多个meta元素。meta元素的属性有name和http-equiv，其中name属性主要用于描述页面，以便于搜索引擎查找、分类。

a) 设置页面关键字：在搜索引擎中，检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础。关键字在浏览时是看不到的，它可供搜索引擎使用。但用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE64.tmp.png 语法：<meta name=“keywords” content=“插入关键字”>

说明：在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。

【例1．3】创建新页面，要求包含关键字。

<html>

<head>

<title>插入关键字</title>

</head>

<body>

</body>

</html>

提示

选择关键字的技巧与原则：

l 要选择与网站或者页面主题相关的文字作为关键字。

l 选择具体的词语，别寄希望于行业或者笼统的词语。

l 揣摩用户会有用什么作为搜索词，把这些词放在页面上或者直接作为关键字。

l 关键字可以不只一个，最好根据不同的页面，制定不同的关键字组合，这样页面被搜索到的概率将大大增加。

b) 设置页面说明：设置页面说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容，页面说明在网页中不显示出来。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE65.tmp.png 语法：<meta name=“description” content=“设置页面说明”/>

说明：在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面说明，在content中定义具体的描述语言。

【例1．4】创建新页面，要求包含页面说明。

<html>

<head>

<title>设置页面说明</title>

</head>

<body>

</body>

</html>

c) 设置网页文字及语言：在网页中还可以设置语言的编码方式，这样浏览器就可以正确地选择语言，而不需要人工选取。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE66.tmp.png 语法：

说明：在该语法中，http-equiv用于传达HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型，国内常用的是GBK码，charset往往设置为gb2312，即简体中文。英文是ISO-8859-1字符集，此外还有其他的字符集。

【例1．5】创建新页面，要求设置字符集为euc-jp。

<html>

<head>

<title>untitled document</title>

</head>

<body>

</body>

</html>

d) 设置网页的定时跳转：使用<meta>标记可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。

在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动跳转到其他页面，这就是页面的跳转。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE77.tmp.png 语法：<meta http-equiv=“refresh”content=“跳转的时间”url=“跳转的地址”/ >

说明：在该语法中，refresh表示网页的刷新，而在content中设置刷新的时间和刷新后的链接地址，时间和链接地址间用分号相隔。默认情况下，跳转时间以秒为单位。

【例1．6】创建新页面，使用meta标签。

<html>

<head>

<title>网页的定时跳转</title>

</head>

<body>

20秒后自动跳转

</body>

</html>

在代码中设置了网页的定时跳转，这里设置为20秒后跳转到index1.html页面。在浏览器中预览可以看出，跳转前如图1.11：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE78.tmp.jpg

图1.11 跳转前页面

跳转后如图1.12：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE79.tmp.jpg

图1.12 跳转后页面

页面的主体标记body：网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置，文字属性设置和链接设置等。

1.2 网页的基本标签

任何一个网页基本上都是由一个个标签构成的，网页的基本标签包括标题标签、段落标签、换行标签、水平线标签、字体样式标签、注释特殊符号标签等，下面进行详细介绍。

1.2.1 标题标签

HTML文档中包含有各种级别的标题，各种级别的标题由<h1>-<h6>元素来定义。其中，<h1>代表最高级别的标题，依次递减，<h6>级别最低。

<h1>-<h6>元素中的字母h是英文headline的简称。作为标题，他们的重要性是有区别的，其中<h1>标题的重要性最高，<h6>的最低。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE7A.tmp.png 语法：

说明：在该语法中，有六个级别的标题，<h1>是一级标题，使用最大的字号表示，<h6>是六级标题，使用最小的字号表示。

【例1．7】创建新页面，使用h标签。

<html>

<head>

<title>标题字标签</title>

</head>

<body>

</body>

</html>

预览效果如图1.13所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE7B.tmp.jpg

图1.13 h标签

提示

对于不同的浏览器，其确切的点阵尺寸的大小也不相同，但<h1>标题大约是标准文字高度的2到3倍，<h6>标题则比标准字体略小。

1.2.2 段落标签

在网页中如果要把文字有条理的显示出来，离不开段落标记的使用，在HTML中可以通过标记实现段落的效果。

<p>是HTML文档中最常见的标记，用来起始一个段落。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE7C.tmp.png 语法：<p>段落文字</p>

说明：段落标记可以没有结束标记</p>，而每一个新的段落标记开始的同时也意味着上一个段落的结束。

【例1．8】创建新页面，使用p标签。

<html>

<head>

<title>p段落标记</title>

</head>

<body>

不敢相信故事的结果是这样的

<p align="right">这本就属于我俩的爱情故事</p>

<p align="center">我是国王而你是对面那个beauty queen</p>

<p>各自捍卫着心中深深眷恋的柏拉图式的爱情</p>

</body>

</html>

在代码中align=＂right＂是设置段落为右对齐，align=＂center＂是设置段落为居中对齐。预览效果如图1.14所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE7D.tmp.jpg

图1.14 align属性

1.2.3 换行标签

换行标记<br>的作用是在不另起一段的情况下将当前文本强制进行换行。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE8D.tmp.png 语法：<br>

说明：一个<br>标记代表一个换行，连续多个标记可以实现多次换行。

【例1．9】创建新页面，使用br标签。

<html>

<head>

</head>

<body>

时光的长廊里，总会有一抹心香，在生命中安放，那是灵魂的相契，

是心灵的相惜，是镌刻在岁月扉页上的深情缱绻。<br>

借来皎洁的月光，编一个花冠，将星星捻成指环，然后送给你，

不要承诺，抛却伤感，只要相爱，不在佛前，只在心里。<br>

合欢不言，木兰不眠，沁了心的眉眼，我坐在月下，只是安静的想你，

假如能有一张不老的如月般的纸，我会写下你的名字，还有故事，

然后去轮回，关于结局，不闻不问。

</body>

</html>

预览效果如图1.15所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE8E.tmp.jpg

图1.15 br标签

提示

<br>是唯一可以为文字分行的方法，其他标记如<p>，则是为文字进行分段。

1.2.4 水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图片实现，也可以更简单的通过标记来完成。

<hr>标记代表水平分割模式，并会在浏览器中显示一条线。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE8F.tmp.png 语法：<hr>

说明：在网页中输入一个<hr>标记，就添加了一条默认样式的水平线。

【例1．10】创建新页面，使用hr标签。

<html>

<head>

</head>

<body>

<p align="center">梦有你而美</p>

<hr />

<p>我用一支瘦笔，写我的清喜，写我的伤感无奈，

写我戒不掉的依恋与思念，懂我的人，自会用他的心疼惜，

自会伴我心痛流泪。心头的那朵花，拂去了世俗潋艳，为你清清娉婷，

将泛黄的夜献给孤独的月，那不老的青苔里有一波动容的碧水，梦有你而美！</p>

</body>

</html>

预览效果如图1.16所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE90.tmp.jpg

图1.16 hr标签

1.2.5 字体样式标签

在网页中，经常会遇到加粗或斜体字。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE91.tmp.png 语法：<strong>……</strong>

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE92.tmp.png 语法：<em>……</em>

在网页中介绍中出现的使用加粗和斜体，对应的代码，如图。

【例1．11】创建新页面，使用strong标签和em标签。

<html>

<head>

<title>字体样式标签</title>

</head>

<body>

<p align="center"><strong>梦有你而美</strong>

<hr />

<p><em>

我用一支瘦笔，写我的清喜，写我的伤感无奈，

写我戒不掉的依恋与思念，懂我的人，自会用他的心疼惜，

自会伴我心痛流泪。心头的那朵花，拂去了世俗潋艳，为你清清娉婷，

将泛黄的夜献给孤独的月，那不老的青苔里有一波动容的碧水，梦有你而美！

</em><hr /></p>

</body>

</html>

预览效果如图1.17所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE93.tmp.jpg

图1.17 strong标签和em标签

1.2.6 注释和特殊符号

HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容。HTML的注释格式。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBE94.tmp.png 语法：

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要HTML代码。

【例1．12】创建新页面，使用注释标签。

<html>

<head>

</head>

<body>

<strong>徐志摩人物简介</strong>

<p>

<em>1924</em>年在《晨报》上发表了第一篇作品<br/>

<!--<em>1929</em>年任教于中国公学<br/>

<em>1930</em>年抗战爆发后到西南联大任教。<br/>-->

<em>1937</em>年抗战爆发后到西南联大任教。<br />

<em>1946</em>年回到北京大学任教。编辑《大公报》、《益世报》等文学副刊。 <br />

</p>

</body>

</html>

预览效果如图1.18所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEA5.tmp.jpg

图1.18 注释标签

由于大于号（>）、小于号（<）等已作为HTML的语法符号。所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。

在HTML中常用的特殊符号及对应的字符实体如表所示，这些实体符号都以“&”开头，以“；”结束。

表1.1 特殊符号
特殊符号	字符实体	示例
空格	；	<a href=＂#＂>教材</a> / <a href=＂#＂>学生</a>
大于号（>）	>；	中国的国土面积>；美国国土面积
小于号（<）	<；	李白的年龄<；杜甫
引号（＂）	"；	W3C规范中，HTML的属性值必须使用成对的"；引起来
版权符号（@）	©；	©；HTML语言使用教程

【例1．13】创建新页面，使用特殊符号制作网站的版权部分。

<html>

<head>

<title>特殊符号的应用</title>

</head>

<body>

</body>

</html>

预览效果如图1.19所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEA6.tmp.jpg

图1.19 特殊符号

1.2.7 图像标签

在浏览网页时，随时都可以看到网页上的各种图像。图像是网页中不可缺少的一种元素，下面介绍常见的几种图像格式和如何在网页中使用图像。

1. 常见的图像格式

在日常生活中，使用比较多的图像格式有四种，即JPG、GIF、BMP、PNG。在网页中使用比较多的是JPG、GIF和PNG,大多数浏览器都可以显示这些图像，其中PNG格式比较新，可能部分浏览器会不支持此格式。下面我们就来分别介绍这四种常用图像。

a) JPG(JPEG)格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组（Joint Photographic Experts Group)文件格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。

此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万种颜色。随着JPG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPG文件在图像品质和文件大小之间达到良好的平衡。

b) GIF图像是网页中使用最广泛、最普遍的一种图像格式，它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF文件支持透明色，使得GIF在网页的背景和一些多层特效的显示上用得非常多，还支持动画，这是它最突出的一个特点，因此GIF图像在网页中应用非常广泛。

c) BMP图像在Windows操作系统中使用得比较多，它是位图（Bitmap)的英文缩写。BMP图像文件格式与其他Microsoft Windows程序兼容。它不支持文件压缩，也不适用于Web页面中。

d) PNG是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF和JPG的优势，同时具备GIF文件格式不具备的特性。流式网络图形格式（Portable Network Graphic Format, PNG)名称来源于非官方的“PNG’s Not GIF”，读“ping”。唯一遗憾的是，PNG是一种新兴的Web图像格式，还存在部分旧版本浏览器（如IE5、IE6等）不支持的问题。

2. 图像标签

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEA7.tmp.png 语法：<img src=“图片地址” alt=“图像的替代文字” title=“鼠标悬停提示文字” width=“图片宽度”height=“图片高度”/>

其中，src属性表示图片路径，alt属性指定的替代文本，表示图像无法显示时（如图片路径错误或网速太慢等）替代显示的文本，这样，即使当图像无法显示时，用户还是可以看到网页丢失的信息内容，一般alt属性在制作网页时和“src”配合使用。

title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，方便用户使用。

width和height两个属性分别表示图片的宽度和高度，有时可以不设置，那么图片默认显示原始大小。图片和文本使用<p>标签进行排版，换行使用<br/>标签。

【例1．14】创建新页面，使用img标签。

<html>

<head>

<title>图像标签的应用</title>

</head>

<body>

<p>新疆野生核桃<br />无漂白薄皮核桃500X2<br />￥48.8元</p>

</body>

</html>

预览效果如图1.20所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEA8.tmp.jpg

图1.20img标签

提示

在实际的网站开发中，通常会把网站应用到的图片统一存放在image或images文件夹中，方便后期页面的变更和维护。

1.2.8 链接标签

大家在上网时，经常会通过超链接查看各个页面或不同的网站，因此超链接<a>标签在网页中极为常用。超链接常用来设置到其他页面的导航链接。下面介绍超链接的用法和应用场合。

1. 超链接的基本用法

超链接包含两部分内容：一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为<a>标签的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEA9.tmp.png 语法：<a href=“链接地址” target=“目标窗口位置”>链接文本或图像</a>

说明：

href:表示链接地址的路径。

target:指定链接在哪个窗口打开，常用的取值有_self (自身窗口）、_blank (新建窗口）。超链接既可以是文本超链接，也可以是图像超链接。如示例中两个链接分别表示文本超链接和图像超链接，单击这两个超链接均能够在一个新的窗口中打开hetao.html页面。

【例1．15】创建新页面，使用a标签。

<!—index.html-->

<html>

<head>

<title>超链接的应用</title>

</head>

<body>

<a href="hetao.html" target="_blank">无漂白核桃</a><br />

</body>

</html>

<!—hetao.html-->

<html>

<head>

</head>

<body>

<p>新疆野生核桃<br />无漂白薄皮核桃500X2<br />￥48.8元</p>

</body>

</html>

预览效果如图所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBA.tmp.jpg

图1.21 index.html页面

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBB.tmp.jpg

图1.22 hetao.html页面

示例中超链接的路径均为文件名称，这表示本页面和跳转页面在同一个目录下，那么，如果两个文件不在同一个目录下，该如何表示文件路径呢？

网页中，当单击某个链接时，将指向万维网上的文档。万维网使用URL (Uniform Resource Location,统一资源定位器）的方式来定义一个链接地址。例如，一个完整的链接地址的常见形式为 http://www.baidu.com。

根据链接的地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。

Ÿ 绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。

例如：<a href=＂[url=]http://www. baidu.com.html＂>百度</a>。[/url]

Ÿ 相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的URL地址的形式。

例如：<a href=＂login/login.html＂>登录</a>表示链接地址为当前页面所在路径的“login”目录下的“login.html”页面。假定当前页面所在的目录为“D:\root”，则链接地址对应的页面为 “D:\root\login\login.html”。

当前目录下index.html网页中的两个链接，即上级目录中web1.html及上上级目录中web2.html，对应的HTML代码如下。

<a href="../../web2.html">上上级目录</a>

提示

当超链接href链接路径为“#”时，表示空链接，如<a href="#">首页</a>。

2. 超链接的应用场合

我们在上网时，会发现不同的链接方式，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件，实际上根据超链接的应用场合，可以把链接分为三类。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBC.tmp.png 页面间链接：A页到B页。最经常使用，用于网站导航。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBD.tmp.png 锚链接：A页甲位置到A页的乙位置或A页甲位置到B页的乙位置。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBE.tmp.png 功能性链接：在页面中调用其他程序功能，如电子邮件、QQ、MSN等。

a) 页面间链接：页面间链接就是从一个页面链接到另外一个页面。如示例中有两个页面间超链接，分别指向YL在线学习平台的首页和课程列表页面，由于两个指向页面均在当前页面下的一级目录中，所以设置的href路径显示目录和文件。

【例1．16】创建新页面，使用a标签分别指向“核桃信息”页面和“葡萄干信息”页面。

<!—index.html-->

<html>

<head>

<title>超链接的应用</title>

</head>

<body>

<a href="hetao.html" target="_blank">无漂白核桃</a><br />

<a href="xiangfei.html" target="_blank">香妃葡萄干</a><br />

</body>

</html>

<!—hetao.html-->

<html>

<head>

</head>

<body>

<p>新疆野生核桃<br />无漂白薄皮核桃500X2<br />￥48.8元</p>

</body>

</html>

<!—xiangfei.html-->

<html>

<head>

<title>葡萄干信息</title>

</head>

<body>

<p>新疆葡萄干<br />绿香妃葡萄干500X2<br />￥48.8元</p>

</body>

</html>

单击两个超链接，分别在两个新的窗口中打开页面。预览效果如图所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEBF.tmp.jpg

图1.23 index.html页面

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEC0.tmp.jpg

图1.24 hetao.html页面file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEC1.tmp.jpg

图1.25 xiangfei.html页面

b) 锚链接：常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。例如，网上常见的新手帮助页面，当单击某个超链接时，将跳转到对应帮助的内容介绍处，这种方式就是前面说的从A页面的甲位置跳转到本页中的乙位置，做起来很简单，需要两个步骤。

首先在页面的乙位置设置标记：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBEC2.tmp.png 语法：<a name=＂market＂>目标位置乙</a>

＂name＂为<a>标签的属性，＂marker＂为标记名，其功能类似古时用于固定船的锚（或钩），所以也称为锚名。

然后在甲位置链接路径href属性值为“#标记名”，

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBED2.tmp.png 语法：<a href=＂#marker＂>当前位置甲</a>

【例1．17】创建新页面，使用a标签锚链接。

<!—index.html-->

<html>

<head>

<title>超链接的应用</title>

</head>

<body>

<a href="#hetao" >无漂白核桃</a>

<a href="#putaogan" >香妃葡萄干</a>

<a name="hetao"> <p>新疆野生核桃<br />无漂白薄皮核桃500X2<br />￥48.8元 </p></a>

<p>新疆葡萄干<br />绿香妃葡萄干500X2<br />￥45元</p>

</a>

<p>新疆巴旦木<br />纸皮巴旦木500X2<br />￥58.8元</p>

</a>

</body>

</html>

预览效果如图1.26所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBED3.tmp.jpg

图1.26 index.html页面

上面这个例子是同页面间的锚链接，那么，如果要实现不同页面间的锚链接，即从A页面甲位置跳到B页面的乙位置，如单击A页面上的“用户登录帮助”链接，将跳转到帮助页面的对应用户登录帮助内容处，该如何实现呢？实际上实现步骤与同页面间的锚链接一样，同样首先在B页面（帮助页面）对应位置设置锚标记，如<a name=＂login＂>登录</a>，然后在A页面设置锚链接，假设B 页面（帮助页面）名称为help.html，那么锚链接为<a href=＂help.html#login＂>用户登录帮助</a>。

c) 功能性链接：功能性链接比较特殊，当单击链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮件、QQ、MSN等链接。接下来以最常用的电子邮件链接为例，当单击“联系我们”邮件链接，将打开用户的电子邮件程序，并自动填写“收件人”文本框中的电子邮件地址。电子邮件链接的用法是＂mailto:电子邮件地址＂，完整的HTML代码如示例所示。

【例1．18】创建新页面，使用a标签功能性链接。

<!—index.html-->

<html>

<head>

<title>超链接的应用</title>

</head>

<body>

</body>

</html>

在浏览器中打开页面，单击“联系我们”链接，弹出电子邮件编写窗口。预览效果如图所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBED4.tmp.jpg

图1.27 index.html页面

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsBED5.tmp.jpg

图1.28 outlook工具

1.3 经典习题

1. 一个完整的HTML文档必须包含三个部分：一个由<html>元素定义的、一个由<head>定义各项声明的和一个由<body>定义的。

2. meta元素提供的信息不显示在网页中，一般用来定义页面信息的、

、等。HTML页面中可以多个meta元素。

3. 使用<meta>标记可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性设置为来实现。

4. 对大多数浏览器而言，其默认的背景颜色为白色或灰白色。使用<body>标记的

属性可以为整个网页定义背景颜色。

5. 超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接形式关联在一起，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。可以通过

参数修改链接文字的颜色。

欢迎光临教育改变生活 (http://bbs.goldoar.com/)