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

1.1 认识网页和网站

1.1.1 网页，网站

网页和网站的区别：

一、性质不同

1、网站：指在因特网上根据一定的规则。

2、网页：构成网站的基本元素。

二、作用不同

1、网站：用于展示特定内容相关网页的集合。

2、网页：是承载各种网站应用的平台。

常用术语：

这些都是互联网技术和网络通信中常见的术语，让我们分别解释一下：

1. Internet:
   - 互联网是指全球最大的计算机网络系统，它通过TCP/IP协议族连接了世界各地的各种设备。互联网提供了多种服务，包括电子邮件、文件传输、万维网浏览等。

2. WWW (World Wide Web):
   - 万维网是由蒂姆·伯纳斯-李在1990年代初发明的一种信息检索系统，它基于互联网并通过超文本方式组织信息。WWW是通过浏览器访问网页的主要方式。

3. URL (Uniform Resource Locator):
   - URL是用于标识互联网上信息资源位置的地址。它通常包含访问协议（如HTTP或HTTPS）、主机名、路径和文件名。

4. IP (Internet Protocol):
   - IP地址是分配给连接到互联网的每台设备的一个数字标识符，用于在网络中识别和路由数据包。

5. 域名 (Domain Name):
   - 域名是一种人类友好的网址形式，它使人们能够更容易地记住网站地址，而不是记住一串数字（即IP地址）。域名系统（DNS）将域名转换为IP地址。

6. HTTP (Hypertext Transfer Protocol):
   - HTTP是一种应用层协议，用于从Web服务器向浏览器传输超文本数据。它是万维网上主要的通信协议。

7. FTP (File Transfer Protocol):
   - FTP是一种标准网络协议，用于在客户端与服务器之间传输文件。它主要用于上传和下载文件。

8. 发布 (Publishing):
   - 在网络上下文中，发布指的是将内容（如网页、文档、应用程序等）放置在网上供他人访问。

9. 站点 (Site):
   - 站点是指一系列相互关联的网页，通常共享一个共同的域名。一个网站就是一个站点的例子。

10. 超链接 (Hyperlink):
    - 超链接是在网页上使用的链接，允许用户点击后跳转到另一个网页或网站上的特定部分。

11. 客户机和服务器 (Client and Server):
    - 客户机/服务器模型是一种分布式计算模式，在这种模式下，客户端请求服务，而服务器则响应这些请求。例如，当你用浏览器请求一个网页时，你的计算机就是客户端，而托管该网页的计算机就是服务器。

这些术语构成了互联网和网络技术的基础知识，对于理解和使用现代互联网非常重要。

1.1.2 静态网页和动态网页

静态网页：通常只使用HTML和CSS，有时也会使用JavaScript来添加一些简单的交互功能

动态网页：除了使用HTML、CSS和JavaScript之外，还会利用服务器端编程语言（如PHP、Node.js、Python等）和数据库技术（如MySQL、PostgreSQL、MongoDB等）来处理数据和生成页面内容。

1.2 网页的基本构成元素

1.2.1. 文本 (Text)

定义：文本是网页上最基本的信息传达形式。
示例: 页面标题、段落、列表、引用等。
作用: 提供内容、说明、描述等信息。
技术: 使用HTML标签如`<p>`（段落）、`<h1>-<h6>`（标题）、`<ul>`和`<ol>`（列表）等来组织文本。

1.2.2. 图片和动画 (Images and Animations)

定义: 用于增强视觉效果或传达非文本信息。
示例: 背景图像、图标、插图、GIF动画等。
作用: 使内容更具吸引力，帮助解释或强调某些概念。
技术： HTML `<img>` 标签用于插入静态图像；CSS 和 JavaScript 可以用来添加动画效果。

1.2.3. 超链接 (Hyperlinks)

定义: 允许用户导航到同一网站内的其他页面或外部资源。
示例: 文本链接、按钮链接、图像链接等。
作用: 方便用户在不同页面间跳转或访问外部资源。
技术： 使用HTML `<a>` 标签来创建链接。

1.2.4. 音频视频 (Audio and Video)

定义: 多媒体内容，用于播放声音或视频文件。
示例: 教程视频、播客、音乐剪辑等。
作用: 丰富内容表达形式，提供多媒体体验。
技术: HTML5 中的 `<audio>` 和 `<video>` 标签可以嵌入音频和视频文件。

1.2.5. 交互表单 (Interactive Forms)

定义: 用户可以输入数据并与之互动的区域。
示例: 登录表单、注册表单、调查问卷等。
作用: 收集用户信息、反馈或提交数据。
技术: HTML 表单 (`<form>`) 结合表单控件（如 `<input>`、`<textarea>`、`<select>` 等）及JavaScript进行表单验证和处理。

1.2.6. 其他常见元素 (Other Common Elements)

定义: 包括但不限于导航栏、侧边栏、页脚、模态框等。
示例: 导航菜单、页脚版权信息、弹出窗口等。
作用: 增强用户体验，提供导航、辅助信息或额外功能。
技术: 利用HTML结构元素（如 `<nav>`、`<footer>`）和CSS布局，以及JavaScript来增加交互性。

这些元素共同构成了一个典型的网页，使得网页不仅仅是静态的信息展示板，而是可以与用户互动、提供多媒体体验的多功能平台。通过合理组合这些元素，网页设计师可以创造出既美观又实用的网站。

1.3 页面布局结构

1.3.1 网页页面布局

常见的结构布局：“国”字型，“厂”字型，海报型，Flash型

1.3.2 网页色彩搭配

网页色彩搭配是网页设计中非常重要的一环，它不仅影响到网站的整体美感，还会影响到用户体验和品牌形象。良好的色彩搭配可以使网站看起来专业、吸引人并且易于使用。以下是一些关于网页色彩搭配的基本原则和技巧：

色彩搭配基本原则

1. 主色调选择:
   - 选择一种或几种主色调作为网站的主题色，这通常与品牌的形象或网站想要传达的情感相一致。
   
2. 色彩比例:
   - 按照60-30-10规则来分配颜色比例，即60%的页面应该使用主色调，30%使用次要颜色，剩下的10%用于强调色或点缀色。

3. 对比度:
   - 良好的对比度有助于提高可读性和可用性，特别是对于文本和背景之间的颜色对比。确保重要信息有足够的对比度以突出显示。

4. 色彩和谐:
   - 使用色彩轮来选择和谐的颜色组合。例如，互补色（位于色彩轮相对位置的颜色）、类似色（相邻的颜色）或三文鱼色（形成三角形的颜色）等。

5. 情感和文化:
   - 不同的颜色在不同文化和情境中有不同的含义。考虑目标受众的文化背景和颜色偏好。

色彩搭配技巧

1. 使用工具：
   - 利用在线色彩搭配工具（如Adobe Color、Coolors等）可以帮助设计师快速找到合适的配色方案。

2. 简洁性:
   - 尽量避免使用过多的颜色，保持简洁可以让网站看起来更加专业和干净。

3. 品牌一致性:
   - 确保网站的色彩搭配与品牌标志和其他营销材料保持一致，以增强品牌形象的连贯性。

4. 用户友好:
   - 考虑色盲用户的需求，使用色盲模拟器检查配色方案的可见性。

5. 功能性:
   - 颜色不仅可以用于美学目的，还可以用于功能性用途，如使用不同的颜色来表示不同的状态（绿色表示成功，红色表示错误）。

实例应用

- 单色搭配：使用同一种颜色的不同明暗度来创造层次感。
- 双色调搭配：选择一对对比强烈的颜色作为主色调和强调色。
- 三色调搭配：选择三种颜色，其中两种为主色调，一种为强调色。

注意事项

- 测试和调整：在实际应用之前，应该在不同的设备和屏幕上测试色彩搭配的效果，确保在各种环境下都能达到预期效果。
- 获取反馈：从目标用户群体中收集反馈，了解他们对色彩搭配的看法和感受。

良好的色彩搭配不仅能提升用户体验，还能有效地传达品牌信息和情感。通过遵循上述原则和技巧，可以创建出既美观又有效的网页色彩方案。

1.4    Web前端技术简介

1.4.1 初识WEB前端

Web前端: 即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。

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

1. HTML (超文本标记语言)
定义: HTML是一种标记语言，用于定义网页结构和内容。
作用: HTML定义了网页上的文本、图片、链接等内容的结构和语义。

2. CSS (层叠样式表)
定义: CSS用于控制网页的表现形式，包括布局、颜色、字体等。
作用: CSS使得开发者能够将内容与样式分离，从而更容易地维护和修改样式。
特性: 包括盒模型、布局方式（如Flexbox、Grid）、过渡效果、动画等。

3. JavaScript (JS)
定义: JavaScript是一种广泛用于Web开发的编程语言，支持函数式、命令式和基于事件的编程风格。
作用: JavaScript让Web页面具有交互性，可以动态改变内容、响应用户输入、与服务器通信等。
框架和库: 常见的JavaScript框架和库有React、Angular、Vue.js等，它们简化了Web应用的开发过程。
API: JavaScript可以调用DOM（Document Object Model）API来操作页面元素，也可以调用Fetch API等进行网络请求。

1.4.3 web 前端开发工具

1.浏览器

Google Chrome：
基于Chromium内核。
由Google开发，市场占有率最高。
支持广泛的Web标准，拥有庞大的扩展生态系统。

Mozilla Firefox：
基于Gecko内核。
开源项目，注重隐私保护。
具有较强的个性化设置能力。

Safari：
由苹果公司开发，专为苹果设备优化。
基于WebKit内核。
在苹果设备上预装，默认为iOS和macOS系统的默认浏览器。

Microsoft Edge：
最新版基于Chromium内核。
替代了传统的IE浏览器。
微软官方推荐的现代浏览器，兼容性好。

UC Browser：
主要在移动设备上使用，特别是在中国市场。
支持数据节省功能。

2.网页编辑器

文本编辑器
文本编辑器主要用于编写原始的HTML、CSS和JavaScript代码。这类编辑器通常提供基本的文本编辑功能，但有些也带有高级功能，如语法高亮、自动补全、代码折叠等。常见的文本编辑器包括：

Visual Studio Code：一款功能丰富的源代码编辑器，支持多种编程语言，具有强大的插件生态系统。
Sublime Text：一款快速且高度可定制的文本编辑器，支持多选编辑和分割视图。
Atom：一个开源的、高度可扩展的文本编辑器，由GitHub开发。
Notepad++：一个轻量级的文本编辑器，专为Windows设计，支持多种编程语言。

所见即所得编辑器
WYSIWYG编辑器允许用户在可视化界面中编辑网页，类似于使用文字处理软件的方式。这类编辑器通常具有拖拽功能、直观的布局选项以及实时预览功能。常见的WYSIWYG编辑器包括：

Adobe Dreamweaver：一款专业的网页设计与开发工具，结合了可视化的编辑界面和代码编辑功能。
CoffeeCup HTML Editor：一个用户友好的HTML编辑器，支持拖拽布局和实时预览。
BlueGriffon：一个基于Mozilla项目的WYSIWYG编辑器，支持HTML5和CSS3。
CKEditor：一个流行的JavaScript库，可以嵌入到网页中作为富文本编辑器使用。
在线编辑器
在线编辑器是一种基于Web的工具，无需安装即可使用，非常适合快速原型设计和协作。例如：

CodePen：一个在线社区平台，支持实时编辑HTML、CSS和JavaScript代码，并能即时查看结果。
JSFiddle：类似于CodePen的在线代码编辑和分享工具。
Glitch：一个在线代码编辑和托管平台，支持团队协作。

3.切图软件

常见的切图软件Photoshop和fireworks

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类:

单标签指的是只存在一个标签的写法，如<meta><input>等。

双标签指的是存在一对标签的写法，如<head></head>，<body></body>等注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
		2023软件1班
	</body>
</html>

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

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

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

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为
<head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>

1.5.2.3 文档编码

文档编码格式如下:

<meta charset=" utf-8" />
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。

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

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

1.6 创建HTML文档

 创建新项目
1. 启动 HBuilder。
2. 在启动界面或菜单栏中选择“新建项目”（New Project）。
3. 选择项目类型。如果是简单的HTML页面，可以选择“普通项目”或“HTML5项目”。

设置项目信息
1. 输入项目名称。
2. 选择项目存放的位置（项目路径）。
3. 点击“创建”或“确定”。

创建 HTML 文件
1. 在项目目录中右键点击，选择“新建文件”（New File）。
2. 输入文件名，通常以.html结尾，例如 `index.html`。
3. 点击“确定”。

编写 HTML 代码
1. 打开刚刚创建的 HTML 文件。
2. 开始编写 HTML 代码。HBuilder 通常会自动提示 HTML 标签和属性，帮助你更快地编写代码。

1.7 网页头部标签

1.7.1 <title>标签

<tide>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<tide>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。

1.7.2 <meta>标签

<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
<meta>标签分两大属性:HTTP标题属性(http-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

<link> 标签是HTML中用于定义文档与外部资源之间关系的一个重要标签。它通常出现在HTML文档的 <head> 部分，并且用于链接外部样式表、图标、脚本以及其他资源。

rel (relation): 指定链接资源与当前文档的关系。
href (hypertext reference): 指定要链接的资源的URL。
type (MIME type): 指定资源的MIME类型（现在很少使用，因为浏览器会根据 rel 属性和 href 的扩展名自动推断 MIME 类型）。
media: 指定资源适用的媒体类型，如 screen、print 等。

1.7.4 <script>标签

<script> 标签是HTML中用于嵌入或引用JavaScript代码的标签

1.8  HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

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

结果