网页制作的基础知识-CSDN博客

本文链接：https://blog.csdn.net/2302_80973752/article/details/142078180

1.1 认识网页和网站

1.1.1网页网站

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

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

1.1.2静态网页和动态网页

静态网页需要与服务器交互通常由HTML/CSS编写

动态网页不需要与服务器交互动态网页技术包括JAVASCRIPT,ActiveX，Flash等

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

1.4.1 初识WEB前端

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

1.4.2.1 HTML

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

1.4.2.2CSS语言

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

1.4.2.3 JavaScript

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

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器是网页的运行平台，，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。因为浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。

1.4.3.2 网页编辑器

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

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

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

HTML只是一个纯文本文件。创建一个 HTML 文档，需要 HTML 编辑器和 Web 浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web 网页文件，提供查看Web资源的客户端程序。

1.5.2 HTML基本结构

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

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

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

<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文档

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

创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现

打开项目“课堂练习”的文件夹，会看到里面有首页index,html

可以直接在idex.html中编写代码。也可以使用鼠标右键新建一个HTML文件

在“创建文件向导”对话框中，选择好文件所在目录并为文件命名

完成后运行选择浏览器进行预览

1.7 网页头部标签

1.7.1 <title>标签

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

打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。

1.7.2 <meta>标签

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

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

<!DOCTYPE>
<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="antquewhite" 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="cencer">网页制作教程Copyright&copy;广东南方职业技术学院</p>
	</body>
</html>