案例4 简单公司网站
复杂的网页中不仅有文字，还有图像、超链接等。本案例介绍创建一个包含4个页面的网站，综合使用文本标记、列表标记、超链接标记和图像标记等标记构建网页内容，在知识点中介绍超链接的各种类型和图像标记等内容。通过本案例的学习，读者可掌握简单网站的创建方法。
4.1 案例描述
综合使用文本标记、图像标记、超链接标记等HTML标记，创建简单的小米公司网站，页面浏览效果如图4-1～图4-4所示。
图4-1 网站首页
图4-2 公司简介页面
图4-3 所获荣誉页面
图4-4 管理团队页面
要求如下。
（1）从首页可以进入其他页面，从其他页面可以返回首页。
（2）在首页中创建友情链接，链接到小米官网。
（3）在所获荣誉页面中，荣誉条目采用无序列表表示。
（4）在管理团队页面中，创建“到页头”和“到页尾”的锚点链接。
4.2 案例实现
创建简单小米公司网站的步骤如下。
4.2.1 新建项目
在HBuilderX中新建项目project04，设置项目存放位置为E:/网页设计/源代码，选择模板类型为“基本HTML项目”，单击“创建”按钮，如图4-5所示。创建的项目包括一个网页文件index.html和css、js、img这3个目录，这3个目录分别用来存放样式表文件、脚本文件和图像文件。将img目录名改为images，将素材图片放入images目录中。
图4-5 新建项目
微课4-1：案例实现
4.2.2 创建网站首页
创建网站首页的步骤如下。
1.首页分析
分析图4-1所示的网站首页效果图，该页面由标题、无序列表、超链接和图片等构成。其中超链接使用<a>标记定义，图片使用<img>标记定义。
2.首页创建
单击项目中的index.html文件，打开该文件，添加如下代码。
浏览网页，效果如图4-1所示。
4.2.3 创建公司简介页面
创建公司简介页面的步骤如下。
1.页面分析
分析图4-2所示的公司简介页面效果图，该页面由标题、段落文字和超链接等构成。“返回”超链接使用<a>标记定义，用于返回首页。
2.页面创建
右击项目名称project04，选择“新建”|“html文件”命令，将文件名称改为intr.html，并添加如下代码。
浏览网页，效果如图4-2所示。
4.2.4 创建所获荣誉页面
创建所获荣誉页面的步骤如下。
1.页面分析
分析图4-3所示的所获荣誉页面效果图，该页面主要由标题和列表组成。标题使用标题标记<h2>定义；“返回”超链接使用<a>标记定义，用于返回首页；列表使用<ul>标记定义。
2.页面创建
右击项目名称project04，选择“新建”|“html文件”命令，将文件名称改为honor.html，并添加如下代码。
浏览网页，效果如图4-3所示。
4.2.5 创建管理团队页面
创建管理团队页面的步骤如下。
1.页面分析
分析图4-4所示的管理团队页面效果图，该页面主要由各级标题和段落文字组成。标题可以分别使用标题标记<h2>、<h3>和<h4>定义；“返回”超链接使用<a>标记定义，用于返回首页；段落文字使用<p>标记定义；“到页尾”和“到页头”使用<a>标记建立锚点链接。
2.页面创建
右击项目名称project04，选择“新建”|“html文件”命令，将文件名称改为team.html，并添加如下代码。
浏览网页，效果如图4-4所示。
至此，4个页面创建完成。最后，打开index.html文件，修改其代码，将公司介绍、所获荣誉、管理团队等文字的超链接的目标地址修改成相应的页面文件，代码如下。
最后，浏览各个网页，看是否能从首页进入其他页面，从其他页面能否返回首页。
4.3 相关知识点
在4.2节中用到了超链接标记和图像标记等内容，下面具体介绍。
微课4-2：HTML超链接标记
4.3.1 HTML超链接标记
超链接是几乎所有网站都有的重要内容。超链接一般有以下几种类型。
（1）页面间的超链接：该超链接指向当前页面以外的其他页面，单击该超链接将完成页面之间的跳转。
（2）锚点链接：该超链接一般指向页面内的某一个地方，单击该超链接可以完成页面内的跳转。
（3）空链接：单击该超链接时不进行任何跳转。
超链接的语法格式如下。
说明 （1）href：定义超链接指向的文档的URL，这里的URL可以是绝对URL，也可以是相对URL。绝对URL也指绝对路径，相对URL也指相对路径，关于绝对路径和相对路径的内容我们稍后介绍。
（2）target：定义超链接的目标文件在哪个窗口打开。其常用取值有_blank和_self。_blank表示在新的浏览器窗口打开；_self表示在原来的窗口打开。
（3）title：定义鼠标指针移动到超链接文字上时显示的提示文字。通常在网页中显示新闻列表时，将鼠标指针移动到新闻条目上可显示完整的新闻标题，此时显示的就是用title设置的内容。例如，<a href="new1.html" title="小米科技有限责任公司2023年新年贺词：风正劲 帆高扬 新的一年创造新的辉煌">小米公司2023年新年贺词…</a>
1.页面间的超链接
在4.2节的案例实现中，从首页index.html中链接到其他页面的就是页面间的超链接，其代码如下。
当从其他页面返回首页时，用到的也是页面间的超链接，其代码如下。
在浏览器中浏览带有页面间的超链接的页面时，将鼠标指针移动到超链接的文字上，超链接的文字会变成蓝色，且自动添加下画线，鼠标指针变成小手的形状，单击该超链接会跳转到其他页面。
也可以把首页index.html中的代码修改为如下代码。
此时浏览网页，单击超链接时会在新的窗口打开目标页面，将鼠标指针移动到超链接的文字上时会显示相应的提示信息。
2.锚点链接
当同一页面中内容较多，浏览时需要不断拖动滚动条来查看内容时，为了提高信息检索速度，可以在页面上创建锚点链接来快速定位到要查看的内容。
创建锚点链接分两步。
第一步：定义锚点的位置，使用id="锚点名称"来标注。
第二步：创建指向锚点的超链接，使用格式<a href="#锚点名称">热点文字</a>。
在4.2节的案例实现中，管理团队页面team.html中的“到页头”和“到页尾”就是锚点链接，其代码如下。
本案例中的锚点链接是在同一个页面上创建的，实际上，锚点链接也可以用在不同的页面上，只需在设置超链接的目标地址时，在锚点名称前加上页面文件的URL即可。感兴趣的读者可以自行尝试。
3.空链接
在制作网页时，如果暂时无法确定超链接的目标地址，就可以将其建立为空链接。
空链接的语法格式如下。
单击空链接时不进行任何跳转。
4.3.2 HTML图像标记
1.常用的Web图像格式
微课4-3：HTML图像标记
网页中图像太大会造成载入速度缓慢，太小又会影响图像的质量。下面介绍网页中常用的3种图像格式。
（1）GIF格式
GIF格式最突出的优势之一就是它支持动画。同时，GIF格式也是一种无损的图像格式，也就是说，修改图片之后，图片质量几乎没有损失。而且GIF格式支持透明，因此很适合在互联网上使用。但GIF格式只能处理256种颜色，在网页制作中，GIF格式常用于Logo、小图标和其他相对单一的图像。
（2）PNG格式
PNG格式包括PNG-8格式、PNG-24格式和PNG-32格式。相对于GIF格式，PNG格式的优势是文件更小，支持alpha不透明度，并且颜色过渡更平滑，但PNG格式不支持动画。通常，PNG-8格式的图片比同等质量下GIF格式图片的文件更小，而半透明的图片只能使用PNG-24格式或PNG-32格式。
（3）JPG格式
JPG格式显示的颜色比GIF格式和PNG格式要多得多，可以用来保存具有超过256种颜色的图像。但JPG格式是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据丢失。JPG格式是专为照片设计的文件格式，在网页制作过程中对类似照片的图像，如横幅广告、商品图、较大的插图等，都可以保存为JPG格式。
简言之，在网页中，小图片或网页基本元素（如图标、按钮等）使用GIF格式或PNG-8格式，半透明图片使用PNG-24格式或PNG-32格式，类似照片的图像则使用JPG格式。
2.图像标记
图像标记的语法格式如下。
说明 （1）src属性：设置图像的来源，指定图像文件的路径和文件名，它是<img>标记的必需属性。
（2）alt属性：设置图像不能显示时的替换文本。
（3）title属性：设置鼠标指针移动到图像上时显示的文本。
（4）width属性：设置图像的宽度。
（5）height属性：设置图像的高度。
例4-1 在项目project04中新建一个网页文件，在代码中使用图像标记，将文件保存为example01.html。代码如下。
浏览网页，效果如图4-6所示。
图4-6 图像标记
注意 （1）各浏览器对alt属性的解析不同，有的浏览器不能正常显示alt属性的内容。
（2）width属性和height属性默认的单位都是px（像素），也可以使用百分比。百分比实际上是相对于当前窗口的宽度和高度。
（3）如果不给<img>标记设置width属性和height属性，则图像按原始尺寸显示；若只设置其中的一个属性，则另一个属性会按原图等比例自动设置。
（4）设置图像的width属性和height属性可以实现对图像的缩放，但这样做并不会改变图像文件的实际大小。如果要加快网页的下载速度，最好使用图像处理软件将图像调整到合适大小再置入网页中。
3.给图像创建超链接
图像不仅能够给浏览者提供信息，而且可以用来创建超链接。给图像创建超链接与给文字创建超链接的方法一样，在图像标记前后使用<a>和</a>标记即可。
例4-2 在project04项目中新建一个网页文件，给图像创建超链接，将文件保存为example02.html。代码如下。
浏览网页，分别单击网页中的两个图像，效果如图4-7～图4-9所示。
图4-7 给图像创建超链接
图4-8 单击第一个图像跳转到小米官网
图4-9 单击第二个图像跳转到图像本身
在例4-2的代码中，给第一个图像创建了到小米官网的超链接，单击第一个图像时跳转到小米官网；给第二个图像创建了到图像本身的超链接，单击第二个图像时跳转到图像本身，即图像原图。
4.3.3 绝对路径和相对路径
在计算机中查找文件时，需要明确文件所在的位置。网页中的文件路径通常分为绝对路径和相对路径，具体介绍如下。
1.绝对路径
绝对路径包括本地绝对路径和网络绝对路径两种。
（1）本地绝对路径：一般从盘符开始，到文件名称结束。
（2）网络绝对路径：包括协议名、网站域名、文件路径名和文件名等。
绝对路径之所以称为绝对，是因为所有页面引用同一个文件时，使用的路径都是一样的。
例如：
是本地绝对路径，表示在磁盘上的文件的物理地址。
是网络绝对路径，表示完整的网络地址。
2.相对路径
相对路径以当前文件位置为参考点，到文件名称结束。保存于不同目录的网页引用同一个文件，所使用的路径将不相同，故称为相对路径。
例如：
表示引用上级文件，。。表示退回上一级目录。
表示引用同级文件，。表示当前目录，此时。/可以省略。
表示引用下级文件，fj.jpg是子目录images中的文件。
表示引用上上级文件。
注意 引用网站内部文件时通常使用相对路径，这样可便于网站的移植和发布。
案例小结
本案例介绍了综合利用HTML5常用标记创建简单公司网站，在知识点中介绍了HTML5的超链接标记、图像标记、绝对路径和相对路径等。
习题与实训
一、单项选择题
1.在下列的HTML代码中，哪个可以插入图像？（ ）
A.<img href="image.gif" alt="">
B.<image src="image.gif" alt="">
C.<img src="image.gif" alt="">
D.<img>image.gif</img>
2.建立超链接时，要在新窗口中显示网页，需要设置的属性是（ ）。
A.target="_blank"
B.border="1"
C.name="target"
D.#
3.包含图像的网页文件，其扩展名应该是（ ）。
A..jpg
B..gif
C..pic
D..html
4.最常用的网页图像格式有（ ）。
A.GIF、TIFF
B.TIFF、JPG
C.GIF、JPG
D.TIFF、PNG
5.在网页中，使用哪个标记来创建超链接？（ ）
A.<a>...</a>
B.<p>...</p>
C.<link>...</link>
D.<li>...</li>
6.下列路径中属于绝对路径的是（ ）。
A.address.htm
B.staff/telephone.htm
C.https://www.baidu.com/
D./Xuesheng/chengji/mingci.htm
二、判断题
1.对网页中图片的大小，可以在HTML5代码中直接指定其宽、高，但最好在图像处理软件中事先处理好图像的大小。（ ）
2.JPEG格式能提供良好的损失极少的压缩比，这种格式可以用于透明和多帧的动画。（ ）
3.书写图片路径时尽量使用绝对路径，因为可以更稳定、更简洁。（ ）
4.在网页中插入图片的相对路径时，“../”用于指定上一级文件夹。（ ）
5.在超链接中，如果暂时没有确定目标地址，则通常将<a>标记的href属性定义为“*”。（ ）
6.在HTML5中，创建锚点链接，用户能够快速定位到目标内容。（ ）
7.在常用的图像格式中，GIF格式只能处理256种颜色。（ ）
8.PNG格式是一种支持透明的图像格式。（ ）
9.如果不给<img>标记设置width属性和height属性，图片就会按照原始尺寸显示。（ ）
三、实训练习
1.创建小米产品介绍页面，效果如图4-10所示。网页中有标题“小米手机10”、图像和段落文字等。
2.创建宋词赏析页面，页面中包含“水调歌头”“蝶恋花”“念奴娇”3个锚点链接，单击每个锚点链接时定位到相应的内容处，如图4-11所示。
图4-10 小米产品
图4-11 宋词赏析
4-4：实训参考步骤
3.创意设计：创建个人简介网站，包含主页和3个子页面，对自己进行全面介绍。
扩展阅读
HTML5代码书写规范（扫码观看）
4-5：HTML5代码书写规范