第一章 网页制作的基础知识

1.1认识网页和网站

1.1.1网页、网站

网页和网站的区别：

1.性质不同：网址是指因特网上网页的网址，网站是根据一定规则构成，而网页是网站的基本元素。

2.作用不同：网址用于了解网络用户上网的基础，网站用于展示特定内容相关网页的集合，而网页是承载各种网站应用的平台。

常用术语：

发布、浏览器、域名、超链接、FTP、WWW、客户机和服务器、URL、IP、HTTP、站点、internet

1.1.2 静态网页和动态网页

MTML CSS JavaScript

静态网页：

（1）静态网页不能简单地理解成静止不动的网页，他主要指的是网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。但是，静态网页也包括一些能动的部分，这些主要是一些GIF动画等

（2）静态网页的打开，用户可以直接双击，并且不管任何人任何时间打开的页面的内容都是不变的。

动态网页：

（1）动态网页是指跟静态网页相对的一种网页编程技术。动态网页的网页文件中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器可以交互，所以服务器端根据客户的不同请求动态的生成网页内容。

即：动态网页相对于静态网页来说，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

（2）动态网页，与网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要是采用了动态网站技术（如PHP、ASP、JSP等）生成的网页都可以称为动态网页。

动态网页和静态网页的区别：

（1）更新和维护：　　

静态网页内容一经发布到网站服务器上，无论是否有用户访问，这些网页内容都是保存在网站服务器上的。如果要修改网页的内容，就必须修改其源代码，然后重新上传到服务器上。静态网页没有数据库的支持，当网站信息量很大的时候网页的制作和维护都很困难

动态网页可以根据不同的用户请求，时间或者环境的需求动态的生成不同的网页内容，并且动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量

（2）交互性：

静态网页由于很多内容都是固定的，在功能方面有很大的限制，所以交互性较差

动态网页则可以实现更多的功能，如用户的登录、注册、查询等

（3）响应速度：

静态网页内容相对固定，容易被搜索引擎检索，且不需要连接数据库，因此响应速度较快

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页，其中涉及到数据的连接访问和查询等一系列过程，所以响应速度相对较慢

（4）访问特点：

静态网页的每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”，可以直接双击打开

动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索之中不去抓取网址中“?”后面的内容，不能直接双击打开

1.2 网页的基本构成元素

1.2.1文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3.超链接  

超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4.音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

1.2.6.其他常见元素 

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构 

1.3.1 网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富、信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活，更容易创造出美感。

确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和Flash型等，如图

1.3.2 网页色彩搭配

(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有216种颜色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB， HSB， Lab 和CMYK来进行表示：RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配：
采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

1.4    Web前端技术简介

1.4.1 初识WEB前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站(http://ino.cerm.ch)，标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web 2.0的出现，每个阶段都涌现出相应的产品，如SNS、博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

1.4.2 WEB前端开发的三大核心技术

HTML、CSS、JavaScript

W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C标准实现的。
下面来介绍Web前端开发所包括的三大核心技术：HTML、CSS语言和JavaScript语言。
1.HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
2.CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3.JavaScript 语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。
万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。HTML+CSS+ JavaScript本质上构成一个MVC框架，即HTML用于描述网页的结构(Model)，CSS用于描述网页的样式(View)，JavaScript用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完毕。

1.4.3 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具：浏览器、网页编辑器和切图软件。
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器等，如图1-2所示。由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。

下面介绍几种主流浏览器。
(1)IE浏览器。IE是Internet Explorer的简称，是由微软公司推出的一款网页浏览器，采用Trident内核实现，有6.0，7.0，8.0，9.0.10.0和11.0等版本。在IE7.0以前，中文直译为“网络探路者”，但在IE7.0以后官方便直接称为“IE浏览器”。一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器也是基于IE内核的，如360安全浏览器和搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。

(2) Chrome浏览器。Chrome浏览器一般指 Google Chrome。 Google Chrome是由Google公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webkit和Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

(3)Firefox浏览器。Firefox浏览器一般指Mozilla firefox.中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器 采用Gecko内核实现，支持多种操作系统，如Windows和Mac OSX及GNU/Linux等。

(4)Safari浏览器。Safari浏览器是由苹果公司出品的用于苹果计算机操作系统Mac OSX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论是在Mac还是在PC上运行时，Safari都可提供极致愉悦的网络体验方式。

(5)Opera浏览器。Opera浏览器是由挪威Opera Software ASA公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在 Windows，Mac和Linux 3个操作系统平台上运行。
注：浏览器内核负责对网页语法进行解释并渲染(显示)网页。通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

2.网页编辑器
HTML， CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件： Adobe Dreamweaver, Sublime Text. NotePad++, EditPlus和HBuilder。

(1)Adobe Dreamweaver。Adobe Dreamweaver是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国Macromedia公司发布的，该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。
 Dreamweaver支持HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。Dreamweaver也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题，预览画面仅能作为辅助参考。

 (2) Sublime Text。Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

(3)NotePad++。NotePad++的名称来源于Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术。

(4)EditPlus。EditPlus是由韩国Sangil Kim(ES-Computing)公司发布的一款文子编辑器，支持HTML，CSS，JavaSeript，PHP和Java等多种计算机程序的语法高亮显示与代码折登功能。其中最具特色的是EditPlus具有自动完成功能。例如，在CSS源文件中输入字母b，加上空格，就会自动生成“border:1px solid red”语句，开发者可以自行编辑快捷键所代表的代码块，然后在开发过程中使用快捷方式让EditPlus自动完成指定的代码内谷。

(5)HBuilder。HBuilder是由DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder主要用于开发HTML，JS(JavaScript)和CSS，同时配合HTML的后端脚本语言如PHP和JSP也可以适用，还有前端的预编译语言如less以及人们钟爱的markdown都可以良好地进行编辑。从2013年夏天发布至今，HBuilder已经成为业内主流的开发工具。目前，HBuilderX 发布了1.0正式版。
3.切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。

1.5HTML语法基础

1.5.1GTML概述

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。

万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

1.5.2HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>这是我的第一个网页项目</p>
		<p>2023级江文军邀请你到二号餐厅用餐</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.6创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="XXX"/>
		<meta name="description" content="XXX"/>
		<title>第一个网页项目</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 网页项目 -->
		<p>这是我的第一个网页项目</p>
		<!-- 注释内容 
		     第一行注释内容
		     第二行注释内容
		     第三行注释内容
		-->
		<p>2023级XXX</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7网页头部标签

1.7.1<title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</hesd>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。

1.7.2<meta>标签

<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
<meta>标签分两大属性：HTTP标题属性(http-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name属性，用于设置搜索关键字和描述。<meta>标签的name属性的语法：
<meta name="参数”content="参数值">
name属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。
name属性主要有以下两个参数：keywords(关键字)和description(网站内容描述)。

1.keywords
keywords用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关键字设置如下：
<meta name="keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东”/>
2.description
description用来告诉搜索引擎网站主要的内容。

1.7.3<link>标签

<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。<link>标签并不特其他文档实际链接到当前文档中，只是提供能接该文档的一个路径，link标签最常用的是用来链接CSS样式文件，格式如下
<link rel="stylesheet" href="外部样式表文件名.css "type="text/css”/>
如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

1.7.4<script>标签

<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便干维护。格式如下：
<scripttype="text/css"src="脚本文件名 n.js"></script>

1.8HTML5文档注释和特殊符号

1.8.1注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="XXX"/>
		<meta name="description" content="XXX"/>
		<title>第一个网页项目</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 网页项目 -->
		<p>这是我的第一个网页项目</p>
		<!-- 注释内容 
		     第一行注释内容
		     第二行注释内容
		     第三行注释内容
		-->
		<p>2023级XXX</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

 1.8.2特殊符号

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

1.9综合案例——临江仙.送钱穆父

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词，苏轼" charset="UTF-8"/>
		<meta name="description" content="本网站收录精选宋词"/>
		<title>宋词精选</title>
		<style type="text/css">
			p{
				text-align: center;
				<font-size:larger;
			}
			</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333">
		<h2 align="center">临江仙.送钱穆父</h2>
		<p>宋 苏轼</p>
		<!-- 使用<br/>的效果 -->
		<p>一别堵门三改火，天涯踏尽红尘。</p>
		       <p>依然一笑作春温。<br/>
			   无波真古井，有节是秋筠。<br/>
			   惆怅孤帆连夜发，送行淡月微云。<br/>
			   尊前不用翠眉颦。<br/>
			<footer color="brown" face="微软雅黑"><p>人生如逆旅，我亦是行人。</font></p>
			<img src="微信图片_20240912133817.jpg"
			<!-- 水平线 -->
			<hr size="2" color="black" width="100%"/>
	</body>
</html>