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

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网页是单个HTML文档，包含文本、图片和链接等元素，而网站则是一组相关联的网页的集合，共享同一个域名并提供结构化的信息和服务。简单来说，网页是书中的一页，网站则是整本书。

常用术语：Tnternet、WWW、URL、IP、HTTP、FIP······

网站相关术语
域名 (Domain Name)：用于标识互联网上特定计算机或计算机组的名称，如 www.example.com。
服务器 (Server)：托管网站文件的计算机系统，负责响应来自客户端的请求。
主机 (Hosting)：提供服务器空间和相关服务，使网站能够在互联网上运行。
子域 (Subdomain)：主域名前缀的扩展，如 blog.example.com 中的 blog。
首页 (Homepage)：网站的主要入口页面，通常显示网站最重要的信息或导航。
导航栏 (Navigation Bar)：位于页面顶部或侧面的一组链接，帮助用户浏览网站的不同部分。
网页相关术语
HTML (HyperText Markup Language)：定义网页结构的标准标记语言。
CSS (Cascading Style Sheets)：用于描述HTML文档外观和布局的语言。
JavaScript (JS)：一种编程语言，常用于实现网页上的动态效果和交互。
框架 (Framework)：一组预先编写的代码库，简化开发过程，如 React、Angular 或 Vue.js。
响应式设计 (Responsive Design)：确保网页在不同设备和屏幕尺寸上都能良好显示的设计方法。
元标签 (Meta Tags)：HTML中的标签，用于提供有关网页的元数据，如标题、描述和关键词。
锚点 (Anchor)：用于创建链接的HTML元素，通常以 <a> 标签表示。
表单 (Form)：允许用户输入数据并提交给服务器处理的HTML元素。

1.1.2 静态网页和动态网页

HTML CSS （静态） JavaScript（动态）

区分：

1.HTML 用于定义网页的结构和内容，CSS 用于控制网页的外观和布局，而 JavaScript 则实现网页的交互性和动态效果。

2.静态网页主要依靠 HTML 和 CSS，内容固定；动态网页则通过 JavaScript 增强交互，能根据用户行为实时更新。

3.HTML 提供了网页的骨架，CSS 负责美化这个骨架，而 JavaScript 则赋予网页生命，使得网页能够进行复杂的交互。

1.2 网页的基本构成元素

1.2.1.文本 

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

1.2.2.图片和动画

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

1.2.3.超链接  

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

1.2.4.音频视频

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

1.2.5.交互表单

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

1.2.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.4 Web前端技术简介

1.4.1 初识WEB前端

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

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

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

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

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

1.4.3 前端开发工具

1.浏览器

        浏览器是网页的运行平台，是可以把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个操作系统平台上运行。

2.网页编辑器

①Adobe Dreamweaver：Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。Dreamweaver支持HTML5/CSS3 源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。Dreamweaver也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver 的预览视图难以达到与所有浏览器完全一致的效果。

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

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

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

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

3.切图软件

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

1.5 HTML 语法基础

1.5.1 HTML 概述

        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 基本结构

HTML文档是由一系列的元素和标签组成的。

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

        HTML文档标签的格式为：<html>HTML文档的内容</html>
        <html>处于文档的最前面，表示 HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

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

        HTML文档包括头部(head)和主体(body)
        HTML文档头标签的格式为：<head>头部的内容</head>

1.5.2.3 文档编码

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

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

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

1.6 创建 HTML 文档

①使用 HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”
②创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现
③打开项目“课堂练习”的文件夹，会看到里面有首页 index.html
④之后，便可以编写网页代码了，可以直接在 imdex.html 中编写代码
⑤在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为html5
⑥本实例将文件命名为“示例程序1.2.html”，开始编写网页代码
⑦网页完成后，可以执行菜单“运行”然后选择“浏览器运行”，选择电脑中已有的浏览器进行预览

如下述代码所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="Keywords" content="XXX"/>
		<meta name="description" content="XXX"/>
		<link ref="stylesheet" href="/css/index.css" type="text/css"/>
		<script type="text/javascript" src="/js/index.js"></script>
		<title>第一个网页</title>
	</head>
	<body>
		<p>我的第一个网页</p>
		<!-- 单行注释内容 -->
		<p>2023软件一班</p>
		<!-- 
		多行注释第一行
		多行注释第二行
		多行注释第三行
		-->
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

运行结果如下
​​​​​​​

1.7 网页头部标签

1.7.1 <title>标签

<tite>标签位于<bead>与</head>中，用于标示文档标题
<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(网站内容描述)

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

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

1.7.4 <script>标签

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

1.8  HTML5 文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

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>
	<!-- 使用<b/>的效果 -->
	<P>一别都门三改火，天涯路尽红尘。<br/>
	依然一笑作春温。<br/>
	无波真古井，有节是秋筠。<br/>
	烟帐孤帆连夜发，送行淡月微云。<br/>
	尊前不用翠眉颦。<br/>
	<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font><p>
	<img src="img/l.1.jpg"/>
	<!-- 水平线 -->
	<hr size="2" color="black" width="100%" />
	<p align="2">网页制作教程 Copyright&copy;不徐耍赖</p>
	</body>
</html>

 上述代码所运行的结果如下