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

市之濑加那

已于 2024-09-12 19:35:21 修改

阅读量1k

点赞数 16

文章标签：前端

于 2024-09-12 19:14:04 首次发布

本文链接：https://blog.csdn.net/2301_80916358/article/details/142092424

版权

1.1 认识网页和网站

1.1.1 网页,网站

网页和网站的区别：网站和网页即有很大的相关性，却又不是同一个个概念。有时几个网页即可组成个网站，而有的网站非常复杂，可能包含成千上万个不同类型的网页。而在网站制作和网页制作的概念上，不少非网站制作专业人士往往会混淆，并不能分清其中的不同，有时可能会造成信息误差。下面由专业的网站制作公司美耐思来给通俗的讲述下网站和网页的概念，让各类企业主及其他的有需求人士更好的理解网站和网页。

网站和网页的概念
网站：

网站通常是指由多数网页组成的一个网页集合体，它往往会包含前端页面和后端的发布编辑平台，网站的不同类型，其复杂度也相差很大，现主要以公司官网类的展示性网站来举例。

一个公司网站，前端网页包括首页、关于公司、联系方式、产品或服务、新闻、案例等介绍，而且可以通过后端的发布平台（通常称为网站后台）不断的创建新的内容页面，这样整个的页面和程序集合体及数据库文件称为一个网站。

网页：

网页往往是指网站的单个页面，你打开网站的一个页面，即是一个网页。

网站和网页的关系
网站通常包含至少一个网页，网站的前台由不同数量级的网页组成，网页是网站的组成部分，通常说的网站制作是指整个网站包括前端页面、后端后台程序及数据库文件等一套程序，而网页制作则通常是指单个页面的设计制作，其不是一个概念，但很多非专业人士往往会混淆。

网站相对要复杂一下，包含的文件内容也是很多的，而且包含的网页类型有很多种，；而网页相对简单一些，只是前端的html页面，可以说网站是网页的一个综合体，而网页又是网站最终展现在浏览器端的一个个承载体。

网站和网页的关系就像是一栋楼和楼里的房间，楼是由众多的房间组成，房间是楼的一个个载体和展现形式。现代企业网站往往都是以网站的形式出现，而不是几个网页那么简单。

常用术语：

Internet，WWW，浏览器，UPL，域名，HTTP，FTP，站点，发布，超链接，导航条，客户机和服务器。

1.1.2 静态网页和动态网页

1. 静态网页
静态网页是指客户端的浏览器发送 URL 请求给 WWW 服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的 HTML/CSS 语言编写。
2. 动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。
客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括 JavaScript，ActiveX 和 Flash 等。
服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据 URL 携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页 ( 如注册、登录和查询等 ) 都需要服务端动态网页程序。

1.2 网页的基本构成元素

1.2.1 文本

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

1.2.2 图片和动画

1.2.3 超链接

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括 GIF、JPEG 和 PNG 等，其中使用最广泛的是 GIF 和 JPEG 两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
超链接技术是 WWW 流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4 音频和视频

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

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前端

1.4.2 Web前早期的前端其实就是 Tabel 布局，后来发展到 Div+CSS 网站重构，再到 JavaScript 逐渐成为 Web 前端开发的语言以及 Web2.0 的出现，每个阶段都涌现出相应的产品，如 SNS 博客、微博等。随着人们对网页需求的不断增大，Web 前端技术也正加速地发展。端开发的三大核心技术

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

1.HTML
HTML 是制作网页的标准语言。“ 超文本 ” 就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括 “ 头部 ”(Head) 和 “ 主体 ”(Body) 两部分，其中 “ 头部 ” 提供关于网页的信息，“ 主体 ” 提供网页的具体内容。
2.CSS 语言
CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3.JavaScript 语言
JavaScript 是一种属于网络的脚本语言，已经被广泛地用于 Web 应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为 JavaScript 引擎，属于浏览器的一部分，因此 JavaSeript 代码由浏览器边解释边执行。通常 JavaScript 脚本通过嵌人在 HTML 中的方式来实现自身的功能。

1.4.3 Web前端开发工具

1.浏览器
浏览器是网页的运行平台，是可以把 HTML 文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有 IE 浏览器、Chrome 浏览器、Firefox 浏览器、Safari 浏览器和 Opera 浏览器等。

2.网页编辑器

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

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

1.5 HTML 语法基础

1.5.1 HTML概述

1. 语言
HTML 作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台。自 1990 年以来 HTML 就一直被用作 wwW 的信息表示语言，使用 HTML 描述的文件，需要通过 Web 浏览器 HTTP 显示出效果。
2、超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个 HTML 文档都是一种静态的网页文件，这个文件里面包含了 HTML 指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
3. 标记
单标签指的是只存在一个标签的写法，如 <meta><input> 等。
双标签指的是存在一对标签的写法，如 <head></head>，<body> </body> 等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符 “/”
HTML 只是一个纯文本文件。创建一个 HTML 文档，需要 HTML 编辑器和 Web 浏览器两个工具。HTML 编辑器是用于生成和保存 HTML 文档的应用程序。Web 浏览器用来打开 Web 网页文件，提供查看 Web 资源的客户端程序。

1.5.2 HTML基本结构

HTML 文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML 用标签来规定元素的属性和它在文件中的位置，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="test/css"/>
		<script></script>
	</head>
	<body>
		<!-- 内容注释 -->
		<p>这是我的第一关网页项目</p>
		<!-- 
			第一行注释
			第二行注释
			第三行注释
		-->
		<p>2023级软件4班刘鹏</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</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. 文档编码
文档编码格式如下 :<meta charset=" utf-8”/>
为了被浏览器正确解释和通过 W3C 代码标准，所有的 HTML 文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用 GB2313( 简体中文 )。
4.HTML 文档主体标签 <body>…</body> HTML 文档主体标签的格式为 <body> 网页的内容 </body>
主体位于头部以后，以 <body> 为开始标签，</body> 为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个 HTML 文件，通过它来学习网页的编辑、保存过程。
(1) 使用 HBuilder 新建项目。依次点击选择 “ 文件 ”→“ 新建 ”→“Web 项目 ”。

(2) 创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，如图 1-8 所示。在本示例中，项目名称为 “ 课堂练习 ”。

(3) 打开项目 “ 课堂练习 ” 的文件夹，会看到里面有首页 index.html，有 js 文件夹，有 css 文件夹，还有图片的文件夹，基本齐全。
(4) 到了这一步之后，便可以编写网页代码了，可以直接在 index.html 中编写代码。也可以单击鼠标右键，新建一个HTML文件。

(5)在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为html5。

(6)本实例将文件命名为“示例程序1.2.html”，开始编写网页代码。

(7)网页完成后，可以执行菜单“运行”->“浏览器运行”，选择电脑中已有的浏览器进行预览。

创建HTML文档的完整代码如下

<!-- 示 例 1.2 程 序 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 我 的 第 一 个 网 页</title>
	</head>
	<body>
		开 始 学 习 网 页 设 计 与 制 作 !
		<hr size="3" color=" black" >
		 <a href="http://www.baidu.com"></a>百 度 
		 <script type=" text/javascript">
			document. write(" 链 接 到 百 度 ");
		</script>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title> 标签

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

1.7.2 <meta> 标签

2.description

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

1.7.3 <link>标签

1.7.4 <script> 标签

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用  标签为文档进行注释，注释标签以 “” 结束，中间的 “…” 替换为注释文字内容即可。 标签支持单行和多行注释。

<!-- 示 例 1.3 程 序 -->
<! DOCTYPE html>
<html>
	<head>
		<meta charset= "utf-8" />
		<title> 带 有 注 释 语 句 的 页 面 </title>
	</head>
	<body>
		你 好 ,HTML5!
		<!-- 接 下 来 出 现 一 条 水 平 线 -->
		<hr size = "3" color=" black" >
		<!--
			这 是 一 个 多 行 注 释 语 句 
			注 释 语 句 不 会 被 浏 览 器 执 行
			也 不 会 在 浏 览 器 中 显 示
		-->
		<p> 网 页 制 作 工 作 室 &nbsp;&nbsp; 热 线 :400-111-1111</p>
	</body>
</html>

1.8.2 特殊符号

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

常用的特殊符号及对应的字符实体
特殊符号	字符实体	示例
空格		银河商务 &mbsp;  热线 :400-111-1111
大于(>)	>	3>2
小于(<)	<	2<3
引号(")	"
版权号(©)	©	Copyright© 网页设计教程

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 ="1.1.jpg">
		<!-- 水平线 -->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;广东南方职业学院</p>
	</body>
</html>