第一章网页制作的基础知识-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_83277711/article/details/142093098

1.1 认识网页和网站
1.1.1 网页、网站

网页和网站的区别:

性质不同：网址是指因特网上网页的地址，网站是根据一定规则构成的，而网页是网站的基本元素
.作用不同:网站用于了解网络用户上网的基础，网站用于展示特定相关网页的集合，而网页是承载各种网站应用的平台

1.1.1.3 常用术语

网页设计有其专业的常用术语,如Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器。

URL :统一资源定位符，指定通信协议和地址,如"http://www.baidu.com"是一个URL，"http://"表示通信协议为超文本传输协议,"www.baidu.com"表示名称。

IP:网际协议。Internet中的每台计算机都有唯一的IP地址，表示该计算机再Internet中的位置,IP通常分为：A、B、C 三类

域名:值网站名称，在全国是唯一的。

1.1.2 静态网页和动态网页

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

动态网页：动态网页能根据不同的浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页 JavaScrip

1.2 网页的基本构成元素
1.2.1 文本

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

1.2.2 图片和动画

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

1.2.3 超链接

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

1.2.4 音频视频

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

1.2.5 交互表单

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

1.2.6 其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

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

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 Bemmers-Lee，启动了世界上第一个可以正式访问的网站(htp://ino.cerm.ch)，标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。
wWeb前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，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.HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
2.CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3.JavaScript 语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScrpt 引擎，属于浏览器的一部分，因此JavaScript 代码由浏览器边解释边执行。通常JavaSeript脚本通过嵌人在HTML中的方式来实现自身的功能。
万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离HTML+CSS+ JavaSeript 本质上构成一个 MVC框架，即HTML,用于描述网页的结构(Model)CSS用于描述网页的样式(View)，JavaScript用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完毕。

1.4.3 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等，如图1-2所示。由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。
正浏览器 Chrome浏览器 Firefox浏览器 Safani浏览器 Opea浏览器
图1-2 主流浏览器
下面介绍几种主流浏览器。
(1)正浏览器。正是Intermet Explorer的简称，是由微软公司推出的一款网页浏览器采用 Trident 内核实现，有6.0,7.0，8.0,9.0，10.0和11.0等版本。在正7.0以前，中文直译为“网络探路者”，但在7.0以后官方便直接称为“正浏览器”。一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的览器也是基于正内核的，如360安全浏览器和搜狗浏览器等，只要兼容正浏览器，这些于正内核的浏览器也都兼容。

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 实际上不算是一种编程语言，而是一种标记语言。HTMLS 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在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文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

1.6 创建HTML文档:

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8"/>
		<title>我的第一个网页</title>
	</head>
	<body>
		开始学习网页设计与制作！
		<hr size = " 3" color = " black" >
		<a href="https://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:

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

2. description
description 用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容描述设置如下:
<meta name=" description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>
当浏览者通过百度搜索引擎(百度)搜索“京东”时，就可以看到搜索结果中显示出网站主页的标题、关键字和内容描述

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>
你好,HTML!
<!--接下来出现一条水平线--><hr size ="3" color=" black" ><! --
这是一个多行注释语句
注释语句不会被浏览器执行
也不会在浏览器中显示	
-->
</body>	
</html>

1.8.2 特殊符号:

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

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