第一章：网页制作的基础知识_网页设计知识点总结-CSDN博客

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

![[[[

zd050524 ![[[[ 已于 2024-12-09 11:28:59 修改

于 2024-09-13 09:13:35 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

1.1 认识网页和网站
1.1.1网页，网站
1.网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。如果说WWW是Intemet (因特网)上的一 一个大型图书馆， 那么图书馆的等-本书就是一个Web站点，而网页就是书中的某-页，页码就是网址，网址与页面- -对应， 多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫作主页( Homepage,也叫首页)，相当于书的封面。
HTML不是一种程序语言， 而是一种描述文档结构的标记语言，是用户与电子计算机(俗称“电脑”)之间进行交流的一种文本技术。 各种网页均是用HtniL来描述的，用HTML编写的网页文件的扩展名-般为“*. htm”或“* himl” 。

由于网页中包含超级链接，网页也被为超文本传输协议(lyper Tel Tamsfer Prtorol, 1T)。
2.网站
Web站点也称为网站、www信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位、超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。

Web站点其实是Intemet上能够提供Intemet 服务的一个位置，这个位置由独一无二的IP地址或者域名来描述，一个网站需要有一台或者是多台服务器来实现WWW服务。不同网站的规模与大小各不相同:大的网站如新浪、搜狐等，需要多台服务器;小的网站如个人主页等，仅占据某台服务器上一个很小的空间。
网站是多个网页的集合，按网站内容可将网站分为5种类型:门户网站、企业网站、个人网站、专业网站和职能网站。按网站的设计技术可将网站分为静态网站和动态网站(ASP, JSP, PHP和Web后台服务器软件)。
网站是有独立城名、独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或者其他文件。不一定需要很多的网页，只要有独立域名和空间，哪怕只有一一个页面也可以称为网站。
3. 常用术语
网页设计有其专业的常用术语，如Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等，作为一名网页设计师，必须熟练掌握这些常用术语。
Intemet:由各种不同类型的计算机网络连接起来的全球性网络。
www:其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。
浏览器:将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有Internet Explorer (IE)浏览器，Firefox 浏览器和Chrome浏览器等。
URL:统一资源定位符，指定通信协议和地址，如“http: //www. baidu. com”是一个URL,“http: //”表示通信协议为超文本传输协议，“www. baidu. com”表示网站名称。
IP:网际协议。Internet中的每台计算机都有唯一的 IP地址，表示该计算机在Interne中的位置。IP通常分为A、B和C三类。
域名:指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名.主机名.类别名.地区名。
HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的www文件都必须遵守这个标准。
FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。
发布:指将制作好的网页传到网络上的过程，也称为上传网站。
站点:一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。

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

1.1.2静态网页和动态网页
1.静态网页
静态网页是指客户物的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

1.2 网页的基本构成元素
1.2.1文本
文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。

1.2.3超链接
超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4音频和视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。
网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式。

1.2.5交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

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

1.3 页面布局结构
1.3.1网页页面布局

![[[[

1.3.2网页色彩搭配
1.网页安全色

网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。

2.网页中色彩的表达

在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字09和字母AF组成，字母不区分大小写颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示。

3.常见的色彩搭配

采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。

1.4 Web前端技术简介
1.4.1 初识Web前端
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局
面中独立出来。

1.4.2 Web前端开发的三大核心技术
1.4.2.1HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。

1.4.2.2CSS语言
CSS是一种用来表现 HTML或 XML等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.4.2.3JavaScript 语言
3.8是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

1.4.3 Web前端开发工具
1.4.3.1浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器等

1.4.3.2网页编辑器
HTML，CSS和 Javascipt源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。

(1)Adobe Dreamweaver。Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的10版是1997年由美国Macromedia公司发布的、该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

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

(3)NotePad++。NotePad++的名称来源于Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

(4)EditPlus。EditPlus是由韩国 Sangil Kim(ES-Computing)公司发布的一款文字编辑器，支持HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。

(5)HBuilder。HBuilder 是由 DCloud(数字天堂)推出的一款支持 HTML5 的 Web 开发IDE。HBuilder主要用于开发HTML，JS(JavaScript)和CSS，同时配合 HTML的后端脚本语言如PHP和JSP也可以适用，还有前端的预编译语言如less以及人们钟爱的 markdown可以良好地进行编辑。

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

1.5 HTML语法基础
1.5.1 HTML概述
1.5.1.1 语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了览器运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。

1.5.1.3 标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。

1.5.2 HTML 基本结构
1.5.2.1 HTML文档标签…

HTML文档标签的格式为

HTML文档的内容

1.5.2.2 HTML文档头标签…
HTML文档包括头部(head)和主体(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 ref="stylesheet" href="css/index.css" type="text/css"/>  <!--引入css文件 rel指定文件的作用 href指定文件的路径 type指定文件的类型-->
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<p>这是我的第一个网页项目</p>
		<p>23级软件技术2班刘祖琦</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

![[[[

1.7 网页头部标签
1.7.1

1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签
中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。

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

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

1.7.3 <link>标签

标签用于连接外部资源和当前 HTML文档，它只在首部标签和中,通常用于连接外部样式表。标签并不将其他文档实际链接到当前文档中，只是提供锅接该文档的一个路径，link标签最常用的是用来链接CSS样式文件。

1.7.4

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

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