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

业余绳匠

已于 2024-10-06 21:02:59 修改

阅读量774

点赞数 12

文章标签：服务器

于 2024-09-12 19:05:34 首次发布

本文链接：https://blog.csdn.net/woyinyuebofangqi/article/details/142092022

版权

1.1 认识网页和网站

1.1.1网页，网站

网页和网站的区别：

网站与网页是互联网上两个常见且密切相关的概念，它们的区别主要体现在功能和结构上：

网站是由多个相关网页和相关资源构成的整体集合，通常围绕一个特定主题或功能而设计，通过统一的域名访问。网站可以包含文字、图片、视频、链接等多种内容形式，具有一定的导航结构，方便用户浏览和查找信息。它就像一本书，拥有多个章节，每个章节相当于一个网页。
网页是网站中单个的页面，是构成网站的基本单位。每个网页都有自己的URL（统一资源定位符），可以包含文本、图片、音频、视频等多种媒体信息，并且可以通过超链接连接到其他网页或网站。网页就像书中的一页，是用户通过浏览器直接查看的内容。

简而言之，网站是一系列网页的集合，而网页是构成网站的单个页面。网站可以看作是一个容器，网页则是这个容器里的具体内容。

常用术语：Internet，WWW，URL，IP，域名，HTTP，FTP，发布站点超链接客户机和服务器......

1.1.2 静态网页和动态网页

HTML CSS JavaScript

静态网页是指网页的内容是固定不变的，一旦制作完成，用户访问时看到的就是这个固定的版本，不会因为用户的不同而显示不同的内容。静态网页通常以HTML格式编写，不涉及服务器端的程序运行，所以也被称为“静态HTML页面”。静态网页的制作比较简单，加载速度快，但缺乏交互性，不能根据用户的需求动态生成内容。

动态网页则是一种服务器端的网页，其内容可以根据用户的请求动态生成。动态网页通过脚本语言（如PHP, ASP, JSP等）或服务器端编程语言（如Python, Ruby, Java等）与数据库结合，能够实现用户交互、数据存储和个性化内容显示等功能。动态网页可以根据不同的输入参数显示出不同的结果，具有较高的灵活性和交互性。

1.2 网页的基本构成元素

1.2.1 文本

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

1.2.2 图片和动画

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

1.2.3 超链接

1.2.5 交互表单

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

1.2.6 其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和Fash 型等，

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日，来自欧洲核子研究中心的科学家TmBerers-Lee，启动了世界上第-个可以正式访问的网站(htp://ino.cerm.ch)，标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

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

W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C 标准实现的。
下面来介绍Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript 语言。

1.4.2.1 HTML

HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

1.4.2.2 CSS语言

CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

1.4.2.3 JavaScript语言

JavaScript 是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为Javasenpt 引擎、属于浏览器的一部分，因此 JavaScript 代码由浏览器边解释边执行。通常
JavaSenipt脚本通过嵌入在HTML中的方式来实现自身的功能。万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。HTML+CSS+ JavaSeript本质上构成一个MVC框架，即 HTML用于描述网页的结构(Model)CSS用于描述网页的样式(View)，JavaScript用于描述网页的行为即调度数据和实现某种展现逻辑（Controller）
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个现逻辑(Controller)。良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完毕。

1.4.3 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。

1.4.3.1 浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和Opera浏览器等。由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。

1.4.3.2 网页编辑器

HTML，CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软4: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 技术，如图1-5所示。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

HTML 是 Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用 “<” 和 “>” 括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在 HTML 中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由 “<” 和 “>” 符号以及一个字符串组成。如 <head>，<body> 等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用 “< 标签名字属性 >” 来表示。标签分为单标签和双标签两大类 :
单标签指的是只存在一个标签的写法，如 <meta><input> 等。
双标签指的是存在一对标签的写法，如 <head></head>，<body> </body> 等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符 “/”
HTML 只是一个纯文本文件。创建一个 HTML 文档，需要 HTML 编辑器和 Web 浏览器两个工具。HTML 编辑器是用于生成和保存 HTML 文档的应用程序。Web 浏览器用来打开 Web 网页文件，提供查看 Web 资源的客户端程序。

1.5.2 HTML基本结构

HTML 文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML 用标签来规定元素的属性和它在文件中的位置，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.5.2.1 HTML文档标签<html>...</html>

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

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

HTML 文档头标签 <head>…</head>HTML 文档包括头部 (head) 和主体 (body)。HTML 文档头标签的格式为 <head> 头部的内容 </head>文档头部内容在开始标签 <html> 和结束标签 </html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

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

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

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

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个 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 网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的 CSS 样式文件和客户端的 JavaScript 脚本文件等。其中，页面标题及页面描述称为页

1.7.1 <title>标签

<title> 标签是页面标题标签。它将 HTML 文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于 <head> 与 </head> 之间。<title> 标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
<title> 标签位于 <bead> 与 </head> 中，用于标示文档标题，格式如下 :<title> 标题 </title>
例如，京东商城的文档标题 :
<title> 京东 (JD.COM)- 正品低价、品质保障、配送及时、轻松购物 !</title>
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。

1.7.2 <meta>标签

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

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

<!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代码被称为字符实体。

特殊符号	字符实体	实例
空格	&nbsp ;	银河商务  热线:400-111-1111
大于(>)	>	3> 2
小于(<)	<	2<3
引号(”)	&quot ;
版权号(©)	&copy ;	Copyrighl©网页设计教程

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

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