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

1.1认识网页和网站

1.1.1网页、网站

网页和网站的区别：

图1-1

从上方图1-1中我们可以很明显的看出，网页和网站的区别，网站包含了许多的网页。

下方是我自己对网页和网站的浅认识:

1.网页只有一页，网站可以有多页。

2.网站有数据库、输入器、域名等很多网页没有的东西。

3.网页是构成网站的基本元素。

4.构成网页的元素比较少，而构成网站的元素却多得多。所以网站更加的复杂，而网页相比于网站更加易于后期的维护。也导致了网站开发时间较长成本高。

常用术语：

1.Internet：由各种不同类型的计算机网络连接起来的全球性网络。

2.WWW：其功能是让web客户端访问web服务器钟的网页。

3.URL：统一资源定位符，指定通信协议和地址。

4.IP：网际协议。

5.HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。

6.域名：指网站名称。

7.FTP：文件传输协议。

8.浏览器：将Internet中的文本文档和其他文件翻译成网页的软件。

9.发布：指将制作好的网页传到网络上的过程

10.站点：一个站点就是一个网页所有内容所存放的文件夹。

11.超链接：从一个网页指向一个目标的链接关系。

12.客户机和服务器：由个人计算机向Internet中的计算机发出请求，然后Internet中的计算机响应其请求，并将其需要的内容发到其计算机上，这种发送请求的计算机就是客户机或称为客户端，而Internet中的计算机称为服务器或者服务端。

1.1.2静态网页和动态网页

（静态）

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（动态）JavaScript：JavaScript是一种动态的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。作为Web开发的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。用户可以利用JavaScript进行事件处理、表单验证、动画创建等多种功能。此外，JavaScript的应用已经扩展到服务器端（如Node.js）、移动应用开发和游戏开发等领域，成为现代编程环境中不可或缺的一部分。其跨平台和高适应性的特点，使得JavaScript成为全球最受欢迎和广泛使用的脚本语言之一。

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

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

总结：相对来说动态网页比静态网页的功能更加丰富，更生动。

1.2网页的基本构成元素

1.文本：一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是网页中最主要的信息载体。

2.图片和动画：丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要句括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

3.超链接：引入外链。超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

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

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

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

1.3页面布局结构

1.3.1网页页面布局：

1.国字型：国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。

2.厂字型：与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息。

3.海报型 ：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方是正文部分。

4. Flash型：常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为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.采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
2.采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。
文出处链接和本声明。

1.4Web前端技术简介

1.4.1初识web前端

        Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。
        Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
        早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

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

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

1.4.3Web前端开发工具

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

• IE浏览器：IE是Intermet Explorer 的简称，是由微软公司推出的一款网页浏览器采用 Trident 内核实现
• Chrome 浏览器：Chrome 浏览器一般指 Google Chrome。Google Chrome 是由 Googl公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webki和Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
• Firefox浏览器：Firefox浏览器一般指Mozillafirefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统。
• Safari浏览器：Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统MacOSX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。
• Opera浏览器：Opera 浏览器是由挪威Opera Software ASA 公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在Wimndows，Mac和 Linux 3个操作系统平台上运行。

切图软件

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

1.5HTML语法基础

1.5.1HTML概述

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

1.5.1.1语言

        HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。

1.5.1.2.超文本

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

1.5.1.3.标记

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

1.5.2 HTML基本结构

1.5.2.1HTML文档标签

 HTML文档标签的格式为：

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

        <html>处于文档的最前面，表示 HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

1.5.2.2HTML文档头部标签

 HTML文档包括头部(head)和主体(body)，HTML文档头标签的格式为：

<head>头部内容</head>

1.5.2.3文档编码

格式如下：

<meta charset="utf-8">

1.5.2.4文档主题标签

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

<body>主体内容</body>

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

1.6 创建HTML文档

第一步：打开新建，选择HTML文件类型

第二步：给你新建的HTML取个名字，并自定义存放的位置

第三步：成功创建html文件，就可以按照编写规则开始设计属于自己的网页辣

我的第一个代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
		<p align="center">江西应用工程职业学院</p>
		<p align="right">作者:zsj</p>
	</body>
</html>

网页效果：

觉得自己太厉害辣(๑¯ω¯๑)

1.7 网页头部标签

1.7.1<title>标签：是页面标题标签

<tite>标签位于<bead>与</head>中，用于标示文档标题，格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
    </body>
</html>

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

1.7.2 <meta>标签：是元素信息标签

        <meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
        <meta>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。
<meta>标签的 name 属性的语法：<meta name="参数" content="参数值">
        name属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。
        name属性主要有以下两个参数：keywords(关键字)和description(网站内容描述),keywords：用来告诉搜索引擎网页使用的关键词。description：用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签：用于链接外部资源和当前HTML文档

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

1.7.4 <script>标签：脚本标

        <scnipt>标签是脚本标签，用于为 HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便维护。

1.8  HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号：

        由于我们日常生活中的符号并不能在网页设计中直接引用，所以多了些特殊符号。

常用的特殊符号及对应的字符实体

特殊符号	字符实体
空格	 
大于(>)	>
小于(<)	&lt;
引号(")	&quot;
版权号（©）	&copy;

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

注意点：切记代码前不要打多余空格，可能会导致命令失效，比如说图片不显示只显示一串代码

错误效果示范：

代码书写规范效果图：

        第一章总结：初识网页制作，了解如何利用HbuilderX创建HTML文档，制作基础的网页。同时写HTML文档也要注意代码的书写规范。