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

1.1 认识网页和网站

1.1.1 网页，网站

1.网页

  网页是由HTML编写，通过WWW传输，且被浏览器编译后供用户使用获取信息的页面文件又称为Web页，集合了文本，图片，声音，动画，数字电影和超链接等各种网页元素。如果说WWW是Internet(因特网)上的一个大型图书馆，那么图书馆的每一本书就是一个Web 站点，而网页就是书中的某一页，页码就是网址，网址与页面一一对应，多个网页关联组合在一起就成为一个Web 站点。Web站点中有一个特殊的网页叫作主页(Homepage，也叫首页)，相当于书的封面。

  HTML不是一种程序语言，而是一种描述文档结构的标记语言，是用户与电子计算机(俗称“电脑”)之间进行交流的一种文本技术。各种网页均是用HTML来描述的，用 HTML编写的网页文件的扩展名一般为“*.htm”或“*.html”。
由于网页中包含超级链接，网页也被称为超文本(Hypertext)，传输超文本的协议被称为超文本传输协议（Hyper Text Transfer Protocol,HTTP）

2.网站

Web站点也被称为网站，WWW信息是由无数个Web站点组成，网页则是Web站点基本信息单位，超链接将站点中的一个或者多个网页链接称为一个便于浏览的有机整体 

网页和网站区别

（1）、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户

（2）、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面

（3）、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

（4）、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

（5）、访问不同

网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问

（6）、体验不同

网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示

3.常用术语

（1）Internet：由各种不同类型的计算机网络连接起来的全球性网络

（2）WWW：功能是让Web客户端（常用浏览器）访问Web服务器中的网页

（3） 浏览器:将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有Internet Explorer (IE)浏览器，Firefox浏览器和 Chrome 浏览器等。
（4）URL:统一资源定位符，指定通信协议和地址，如“http://www.baidu.com”是一个 URL,“http://”表示通信协议为超文本传输协议,“www.baidu.com”表示网站名称。

（5）IP:网际协议。Internet中的每台计算机都有唯一的IP地址，表示该计算机在Internet
中的位置。IP通常分为A、B和C三类。
（6）域名:指网站名称，在全世界是唯一的。通常把域名看成网站的网址络域名管理组织进行全球统一管理。域名需向各地的网络管理组织尽心全球统一管理域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名.主机名.类别名.地区名。
（6）HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的www文件都必须遵守这个标准。
（7）FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。
（8）发布:指将制作好的网页传到网络上的过程，也称为上传网站。
（9）站点:一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet 的站点进行组织、维护和管理的功能集合

（10）超链接:从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。在浏览网页时单击超链接就能跳转到与之相应的页面。
（11）客户机和服务器:浏览网页是由个人计算机向Internet中的计算机发出请求，Internet 中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Internet中的计算机称为服务器或服务端。

1.1.2静态网页和动态网页

HTML,CSS,JavaScript

1.静态网页

静态网页包含的诸如文本、图像、Flash动画、超链接等内容，在编写网页源代码时已经确定。除非网页源代码被重新修改，否则这些内容不会发生变化。

（1）.静态网页特点

• 静态网页的内容相对稳定，一旦上传至网站服务器，无论是否有用户访问，内容都会一直保存在网站服务器上。

• 静态网页被访问的速度快，访问过程中无须连接数据库。

• 静态网页没有数据库的支持，内容更新与维护比较复杂。

• 静态网页的交互性较差，在功能方面有较大的限制。

值得一提的是，静态网页上展示的内容并非完全静止的，它也可以有各种视觉上的动态效果，如GIF动图、Flash动画、滚动字幕等。

2.动态网页

相比静态网页，动态网页有数据库支撑、包含程序以及提供与用户交互的功能，如用户登录、用户注册、信息查询等功能，根据用户传入的不同参数，网页会显示不同的数据。

（1）动态网页特点

• 动态网页一般以数据库技术为基础。

• 动态网页并不是独立存在于服务器上的网页文件，只有当用户发送请求时，服务器才会返回完整的网页。

• 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

对于网络爬虫来说，静态网页的内容都写在源代码中，比较容易抓取;动态网页的内容不一写在网页源代码中，可能需要用户登录后才能显示完整，这增加了抓取难度。

1.2 网页的基本构成元素

1.文本

是网页中最基本的元素之一，用于表达信息的内容和含义。文本能够准确表达信息，且同样信息量的文本字节往往比图像小，适合大信息量的网站。网页中的主要信息通常以文本形式呈现，通过设置字体、字号、颜色、底纹和边框等属性，用户可以根据需要设置网页文本的格式，以适应不同的阅读需求和视觉效果‌

2. 图片和动画

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

3.超链接

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

4.音频和视频

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

5.交互表单

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

6.其他常见元素

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

1.3页面布局结构

对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插入各种对象和装饰效果前，要先确定网页的总体风格和布局。

1.网页页面布局

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

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

2.网页色彩搭配

网页设计中的颜色搭配：原则与实践

在网页设计中，颜色搭配是一个至关重要的环节。它不仅影响到用户对网站的首次印象，而且还会影响用户在网站上的停留时间和使用体验。因此，理解和掌握颜色搭配的原则和实践，对于网页设计师来说是必不可少的。

一、颜色搭配的原则

1. 相关性：颜色搭配应与网站的主题和内容保持一致。例如，如果网站的内容是关于自然的，那么使用绿色和棕色等与自然相关的颜色会更加合适。
2. 准确性：颜色应准确地传达网站的信息。例如，暖色调（如红色和橙色）通常会引发积极、热情的情绪，适合用于销售和推广页面。而冷色调（如蓝色和紫色）则通常给人稳重、专业的感觉，适合用于企业或官方网站。
3. 完整性：颜色搭配应使得网站的整体视觉效果和谐统一。在选择颜色时，应考虑到它们在屏幕上的显示效果，以及它们在不同设备和浏览器上的表现。
4. 结构性：颜色可以用来引导用户的视线，创建视觉层次，以及划分不同的内容区域。例如，通过使用不同的背景色或饱和度，可以将用户的注意力引导到特定的元素上。

二、实践中的颜色搭配

1. 使用调色板：选择一组互补的颜色，可以使得网站看起来更加丰富多彩。同时，也可以使用单色调色板，通过调整亮度和饱和度来创建不同的视觉效果。
2. 考虑对比度：良好的对比度可以帮助用户更好地阅读文本，区分不同的元素。一般来说，文本颜色和背景颜色之间的对比度应该在4.5:1到1:1之间。
3. 慎重使用饱和色：虽然饱和的颜色可以吸引用户的注意力，但过度使用可能会让用户感到疲劳。因此，应该慎重选择使用的饱和色，以及它们在页面上的位置。

1.4 Web前端技术简介

1.4.1 初识Web前端

W‌eb前端是指用户在浏览器上看到和操作的网页界面，它是Web开发的重要组成部分，负责实现网页的可见界面和交互功能。‌ 

Web前端，也被称为Web开发前端，主要使用HTML、CSS和JavaScript等技术，将网页的设计图转化为网页的可见界面，并实现与用户的交互。它的工作内容可以分为三个方面：结构、样式和行为。Web前端是用户与网页之间的桥梁，直接影响着用户对网站的观感和体验。一个好的Web前端界面能够吸引用户的注意力，提升用户对网站的满意度和黏性，从而实现更好的用户体验和增加网站的流量。

Web前端的工作不仅涉及将网页的视觉设计转化为代码，还包括实现网页的动态功能和用户交互。随着互联网技术的发展，现代网页更加美观，交互效果显著，功能更加强大。Web前端开发人员需要不断关注行业发展趋势，掌握新的技术和工具，以确保网页在不同设备上都能正确显示，并提供良好的用户体验。此外，Web前端开发还包括移动应用程序的开发，负责创建这些类型的应用程序的布局或架构‌

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

三大核心技术分别是HTML,CSS语言，JavaScript语言

1.HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2.CSS语言

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 

3.JavaScript语言

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。 

4.三者关系概述

用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个第良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完成

1.4.3Web前端开发工具

1.浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的软件

目前主流浏览器分别是IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器等，如图1-2所示。由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。

 2.网页编辑器

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

 3.切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种

1.5 HTML语法基础

HTML是制作网页的基础语言，是初学者必备内容，虽然现在市面上有很多网页制作工具 ，但这些工具生成的代码都是以HTML为基础的

1.5.1HTML概述

1.语言

HTML是超文本标记语言（Hyper Text Markup Language）的缩写。，即为超文本标记语言HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用HTML描述的文件，需要通过Web浏览器HTTP显示出效果。

2.超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

3.标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。

4.标签的分类

单标签指的是只存在一个标签的写法，如<meta><input>等。

双标签指的是存在一对标签的写法，如<head></head>,<body></body>等。

注意：

在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”  HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web网页文件，提供查看Web资源的客户端程序。

1.5.2HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

1.HTML文档标签<html>...</html>

 HTML文档标签的格式为<html>

HTML文档的内容</html><html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>为止。每个HTML文档均以<html>开始，以</html>结束。

2.HTML文档头标签<head>...</head>

 HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为

 <head>头部的内容</head>

 文档头部内容在开始标签<html>和结束标签</html>

3.文档编码

文档编码格式如下： <metacharset="utf-8"/>

为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。

4.HTML文档主体标签<body>...</body>

HTML文档主体标签的格式为<body>网页的内容</body>主体位于头部以后，以<body>为开始标签，<body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

​
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="牛逼"/>
		<meta name="description" content="xxx"/>
		<title>第一哥网页</title>
	</head>
	<body>
		<!-- 注释内容 -->
		<p>我的第一个网页项目</p>
		<!--注释内容
		我是
		你的
		你是
		我的
		-->
		<p>2023级软件四班</p>
		<p>我是陈酒老师</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

​

结果

1.7 网页头部标签

 在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的CSS样式文件和客户端的JavaScript脚本文件等。其中，页面标题及页面描述称为页面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一个搜索引擎也会由于页面的实际情况而有所不同。一般情况下，搜索引擎会提取页面标题标签中的内容作为摘要信息的标题，而描述则常来自页面描述标签的内容或直接从页面正文中截取。如果希望自己发布的网页能被百度等搜索引擎搜索，那么在制作网页时就需要注意编写网而的摘要信息

1.7.1 <title>标签

<litie>标签是页面标题标签，它将HTML文件的标题显示在浏览器的标题栏中，用来说明文件用途，这个标签只能用于<bead>和</head>里面用于标示文档标题

格式为<title>标题</title>

1.7.2 <meta>标签

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

 <meta charset="xxx" />        设置字符集
 <meta name="keyword" content="xxx"/>    关键词搜索
 <meta name="description" content="xxx"/>    描述网页

1.keywords

用来告诉搜索引擎网页使用的关键字。

2.description

用来告诉搜索引擎网站的主要内容。

1.7.3 <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>

src(指定文件路径）type（指定文件类型）

1.8 HTML5文档注释和特殊符号

1.8.1注释

HTML5文档中的注释使用特定的格式来添加，注释内容不会被浏览器解析和显示。注释的格式是：

	<!-- 注释内容 -->

在空白处按cter+/就可以自动添加注释

多行注释回车分行即可

1.8.2 特殊符号

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

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

以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder 设计 Web 网页。在编写时要遵守 HTML代码的编写规范，并养成良好的编码习惯。

<!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>一别都门三改火，天涯踏尽红尘。<br/>
		依然一笑作春温。<br/>
		无波真古井，有节是秋筠。<br/>
		惆怅孤帆连夜发，送行淡月微云。<br/>
		尊前不用翠眉颦。<br/>
		<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
		<img src="img/山水一色.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%" />
		<p align="center">网页制作教程Copyright&copy;江西应用工程职业学院</p>  
</html>

结果