第一章 网页基础知识

1.1认识网页和网站

网页是一个文件，本质就是将文字+图片+超链接（一本书中的一页）

网站是网页及其资源文件组成的组织（一本书）

网页和网站之间的主要区别在于，网页是 Internet 上唯一 URL 下的单个文档。相反，网站是多个网页的集合，其中有关相关主题或其他主题的信息在域地址下链接在一起。网页是具有内容和指向其他网页的链接的任何网站的较小部分。相反，网站是一个平台，其中包含针对特定 URL(统一资源定位器)的各种网页。每个网站都包含一个唯一的域地址，所有网页都链接在一个特定的域下，这意味着网页依赖于该域。另一方面，该网站不依赖于其任何网页。即使某些网页被删除，它也会继续工作。网页通常在其 URL 中包含扩展名，例如 .html、.php、.aspx、.htm 等。此外，网站地址不受任何此类扩展名的影响。网页 URL 可能包含一个文件路径(资源路径)，其中它存储在服务器上。该网站不包含任何路径，因为它直接连接到注册商服务器的唯一 IP 地址。网站只是一个允许开发人员显示内容并附加超链接的地方。另一方面，网页是要在网站上显示的内容或文档本身。网站的开发、设计和维护比网页花费更多的时间。如上所述，网页只是网站的一小部分，因此花费的时间相对较少。网站的整体结构及其编程相对复杂。但是，一旦网站构建完成，网页就很容易开发。通常，网页包含有关单个实体或主题的内容，而网站是包含来自链接某些超链接的不同实体或主题的内容的地方

1.1.1网页的常用术语

网页设计的常用术语：如Intemet、wwW、浏览器、URL、PP、域名、HTTPFTP、站点、发布、超链接、导航条、客户机和服务器等

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

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

浏览器（将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取 Intermet 中的内容。常用的浏览器有Intermet Explorer(正)浏览器，Firefx 浏览器和Chrome 浏览器等。）

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

IP（网际协议。Intermet中的每台计算机都有唯一的IP地址，表示该计算机在Imtemet中的位置。IP 通常分为A、B和C三类）

域名（指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名，主机名.类别名:地区名）

HTTP（超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准）

FTP（文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享）

发布（指将制作好的网页传到网络上的过程，也称为上传网站）

站点（一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个 Internet 的站点进行组织、维护和管理的功能集合）

1.1.2静态网页和动态网页

静态网页
主要指的是网页中只有HTML标签
任何人任何时间打开的页面内容都是不变的，想要修改数据内容必须修改源文件，静态网页指的是网页无法在服务器上操作或与数据库交互，并不是指静止不动的网页
动态网页
使用了编程及数据库技术，跟踪不同的请求返回不同的页面
指不修改源代码就能改变内容的网页，可以和网页各种交互，如淘宝网站，或不同的人打开的的同一个页面但是内容是不一样的，如csdn

1.2网页的基本构成元素

1.2.1文本

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

1.2.2.图片和动画

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

1.2.3.超链接  

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

1.2.4.音频视频

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

1.2.5.交互表单

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

1.2.6.其他常见元素 

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与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前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。

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

Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript 语言。

1.4.2.1HTML

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

1.4.2.2CSS

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

1.4.2.3JavaScript

   JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript 代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌人在 HTML中的方式来实现自身的功能。

万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。HTML+CSS+ JavaScript本质上构成一个MVC 框架，即 HTML用于描述网页的结构(Model)CSS用于描述网页的样式(View)，JavaScript用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。

1.4.3 前端开发工具

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

1.4.3.1浏览器

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

1.4.3.2网页编辑器

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

1.4.3.3切图软件

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

1.5HTML语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

HTML,作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行 HTML,文档时所遭循的规则和进行的操作。

1.5.1.2 超文本

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

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1.5.2 HTML基本结构

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

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

HTML 文档标签的格式为：<html>HTML 文档的内容</html>

<html>HTML 文档的内容</html>

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

HTML文档头标签的格式为：

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

1.5.2.3 文档编码

文档编码格式如下:<meta charset= " utf-8" />

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

HTML文档主体标签的格式为：

<body>网页的内容</body>

1.6 创建HTML文档

使用 HBuilder 新建项目。依次点击选择“文件”→“新建”→“Web项目”。

1.7 网页头部标签

1.7.1 <title>标签

<tie>标签是页面标题标签。它将HTM文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。

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

<title>标题</title>

1.7.2 <meta>标签

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

  <meta>标签分两大属性:HTTP标题属性(http-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

meta>标签的name属性的语法:<meta name="参数"content="参数值">

<meta name="参数"content="参数值">

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

<link>标签用于连接外部资源和当前 HTML, 文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。link标签最常用的是用来链接CSS样式文件。

格式如下:<link rel="stylesheet"href="外部样式表文件名.css"type="text/css”/>

1.7.4 <script>标签

<seript>标签是脚本标签，用于为 HTML, 文档定义客户端脚本信息。

格式:<scripttype="text/css" sre="脚本文件名 n. js" ></script>

<scripttype="text/css" sre="脚本文件名 n. js" ></script>

1.8  HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

1.9临仙江·送钱穆父

做一个如图所示的网页

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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>

执行效果如下