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

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：

1. 网页（Web Page）是构成网站的基本单位，是由HTML、CSS、JavaScript等技术编写而成的一个文件，用于在浏览器上展示信息。网页通常包含文字、图像、链接等元素，并通过超链接连接到其他网页或资源。网页可以被单独访问，也可以作为网站的一部分。

2. 网站（Website）是由一组相互关联的网页构成的，通过特定的域名（例如www.example.com）来访问。网站是由多个网页组成的集合，通常包括首页、各种子页面、导航菜单、图片、视频、表单等内容。网站可以包含多个功能模块，如用户注册、登录、购物车等。网站通常是一个有组织、具有独立性的整体，它通过一定的布局和导航结构，为用户提供特定的信息或服务。

综上所述，网页是构成网站的基本单位，而网站则是由多个网页组成的一个有组织、具有独立性的整体。网站可以包含多个网页，并提供更丰富的功能和服务。

常用术语：

网站：一个包含一组相关网页的在线空间。

网页：网站的基本组成单元，包含文本、图像、视频等内容。

首页：网站的主页，通常是用户访问网站时首先看到的页面。

导航栏：网站顶部或侧边的菜单栏，用于导航和浏览网站的不同页面。

链接：用于在网页之间跳转的可点击元素，通常以不同颜色或下划线表示。

导航链接：位于导航栏中的链接，用于快速访问网站的不同部分或页面。

内部链接：链接到同一网站内其他页面的链接。

外部链接：链接到其他网站的链接。

标题：网页的标题，通常显示在浏览器的标签页上。

脚注：网页底部的区域，通常包含版权信息、联系方式和其他相关链接。

搜索引擎优化：通过优化网页内容和结构，提高网站在搜索引擎中的排名和可见性的技术和策略。

响应式设计：根据用户设备的屏幕尺寸和分辨率，自动调整网页布局和内容的设计方法。

用户界面：用户与网站或应用程序进行交互的图形界面。

用户体验：用户使用网站或应用程序时的整体感受和满意度。

内容管理系统：用于创建、编辑和管理网站内容的软件工具。

主题：用于设置网站外观和布局的预定义样式和设计模板。

插件：用于增强网站功能的可插拔软件模块。

云存储：通过互联网将数据存储在远程服务器上的服务，用于存储网站的文件和数据。

1.1.2静态网页和动态网页

静态网页是指在服务器上存储的网页文件内容始终保持不变的网页。它由HTML、CSS和JavaScript等静态资源组成。

动态网页是指在用户与网页进行交互时，网页内容能够动态地改变或更新。与静态网页相比，动态网页具有更多的交互性和个性化定制功能。

1.2 网页的基本构成元素

1.2.1.文本 

文本是指书面形式的语言材料，包括书籍、文章、报纸、杂志、电子邮件、短信等。

1.2.2.图片和动画

图片和动画都是视觉媒体，可以用于传递信息、表达观点和艺术创作等目的。图片可以用于表达和传达信息，如描绘物体、场景或人物等。

1.2.3.超链接  

超链接是一种网页中的文本或图像，当点击时可以跳转到另一个网页、文件或其他资源。通过使用超链接，用户可以方便地在不同的网页之间导航和浏览相关内容。

1.2.4.音频视频

音频是指只包含声音的媒体，可以是音乐、讲话、演讲等。视频则是指同时包含声音和图像的媒体，可以是电影、电视节目、演唱会等。

1.2.5.交互表单

交互表单是一种在网页上用于收集用户信息和数据的工具，可以用于各种场景，例如用户注册、调查问卷、订单提交等，可以使用前端技术如HTML、CSS和JavaScript来创建表单界面，并使用后端技术如PHP、Java、Python等来处理表单数据。

1.2.6.其他常见元素 

除了文本和图片之外，网页中常见的其他元素还有：

1. 链接（链接到其他页面或网站）
2. 按钮（用于触发特定操作或切换页面）
3. 表格（用于展示和组织数据）
4. 表单（用于收集用户输入的信息）
5. 导航栏（用于导航网站的不同页面）
6. 菜单（用于展示网站的不同功能或选项）
7. 图标（用于表示特定的功能或操作）
8. 视频和音频播放器（用于展示和播放视频和音频文件）
9. 滚动条（用于在页面中滚动内容）
10. 分页器（用于切换显示内容的页面）
11. 进度条（用于展示任务的进度）
12. 弹出窗口（用于显示额外的内容或提示信息）
13. 标签（用于组织和分类内容）
14. 滑块（用于选择范围或调整数值）
15. 计时器（用于显示倒计时或定时任务）
16. 轮播图（用于展示多个图片或内容）
17. 搜索框（用于搜索特定的内容）
18. 文章列表（用于展示多篇文章或新闻）
19. 分享按钮（用于分享网页的内容至社交媒体）
20. 评论区（用于用户对内容进行评论和互动）

1.3 页面布局结构 

1.3.1 网页页面布局

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

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

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

Flash：用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。

1.3.2 网页色彩搭配

1. 单色调：使用同一色调的不同亮度和饱和度的颜色，可以给人一种简洁、清晰的感觉。常见的例子是使用不同深浅的蓝色作为主色调。

2. 互补色：选择位于色轮上相对的两个颜色，如红色和绿色、蓝色和橙色等，可以产生鲜明对比和强烈的视觉效果。

3. 类似色：选择色轮上相邻的几个颜色进行搭配，可以产生柔和、和谐的效果。常见的例子是使用不同的绿色、蓝色和紫色进行搭配。

4. 三原色：使用红、黄、蓝三种原色进行搭配，可以产生明亮、活泼的效果。

5. 黑白灰色：使用黑色、白色和不同深浅的灰色进行搭配，可以产生简洁、高雅的效果。

1.4    Web前端技术简介

1.4.1 初识WEB前端

Web前端（Web Front-End）是指负责开发Web页面的技术领域。主要涉及HTML、CSS和JavaScript等技术，用于构建和设计用户在Web浏览器中直接交互的界面和体验，Web前端开发人员通常负责将设计师和后端开发人员提供的设计稿转化为可点击和可交互的网页。他们使用HTML定义页面的结构和内容，使用CSS来控制页面的样式和布局，使用JavaScript来实现交互效果和动态内容。

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

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

1.4.2.1 HTML

HTML（超文本标记语言）是一种被用于创建网页的标准标记语言。它使用标记来描述网页的结构和内容，并且可以嵌入脚本语言（如JavaScript）来增加网页的交互性和动态性。HTML使用一系列标签来定义网页的各种元素，包括标题、段落、图像、链接等等。网页浏览器将HTML代码解析并显示为可视化的网页内容。

1.4.2.2 css

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述HTML或XML等文档的样式和布局的语言。通过CSS，可以控制网页的颜色、字体、大小、布局、边框等外观样式，使网页更加美观和易于阅读。CSS与HTML结合使用，是构建网页的重要组成部分。

1.4.2.3 JavaScript语言

JavaScript 是一种广泛应用于网页开发的脚本语言。它是一种基于对象的、事件驱动的语言，可以在网页上实现交互、动态效果和数据处理等功能。JavaScript可以嵌入在HTML页面中，通过调用网页上的元素和属性来实现网页的动态效果和交互行为。它与HTML和CSS一起构成了现代Web开发的三大核心技术。JavaScript具有易学易用、灵活性强、兼容性好等优点，在Web应用开发中得到了广泛应用。

1.4.3 前端开发工具

1.4.3.1 浏览器

①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个操作系统平台上运行。

1.4.3.2 编辑器

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

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列标签组成，这些标签用于定义网页的结构和内容。HTML标签以尖括号包围，通常成对出现，包括一个开始标签和一个结束标签。

1.5.1.2 超文本

超文本（Hypertext）是一种用来在计算机网络中传输和展示信息的文档格式。与传统的线性文本不同，超文本将文档中的内容组织为一系列互相关联的节点，用户可以通过点击链接或其他交互方式在节点之间进行跳转，以获得相关的信息。

1.5.1.3 标记

HTML标记是一种用于描述网页结构和内容的标记语言。它使用一系列标记（tag）来定义各种元素，比如标题、段落、链接、图像等。HTML标记由尖括号包围，一般都是成对出现的，包含一个起始标记和一个结束标记。起始标记通常以"<"开头，结束标记以"</"开头。

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</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文档

 

1.7  网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签，它将HTML文件的标题显示在浏览器的标题之中，这个标签只能应用于<head>与<head>之间。每个文档只允许有一个标题，格式如下

<title>标题<title>        

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>中，通常用于连接外部样式表。<link>标签并不能将其他文档实际链接到当前文档中，只是提供链接该文档的一个路劲，最常用的是用来链接css样式文件，格式如下：

<link rel="stylesheet" hred="外部样式表文件名".css"type="text/css"/>

1.7.4 <script>标签

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

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

1.8  HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

特殊符号	实符字体	示例
空格	 	银河商务   热线：400-111-1111
大于（>）	>	3&gt；2
小于（<）	&lt;	2&lt；3
引号（"）	&quot;
版权号（@）	&copy；	copyringht&copy；网页设计教程

综合案例——临江仙 · 送钱穆父

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="Keywords" content="宋词，苏轼"/>
		<meta name="description" content="本网站收录精选宋词"/>
		<title>宋词精选</title>
		<style type="text/css">
			p{
				text-align: center;
				font-size: larger;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite" text="#3333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p>宋 苏轼</p>
		<!--使用<br/>的效果-->
		<p>一别都门三改火，天涯踏尽红尘。<br/>
				依然一笑作春温。<br/>
			无波真古井，有节是秋筠。<br/>
			惆怅孤帆连夜发，送行淡月微云。<br/>
			尊前不用翠眉颦。<br/>
			<font color="brown" face="微软雅黑">人生如逆旅,我亦是行人。</font></p>
		<img src="img/1.0.jpg"/>
			<!--水平线-->
		<hr size="2" color="black"width="100%"/>
		<p align="center">网页制作教程Copyright&copy;江西应用工程职业学院</p>
	</body>
</html>