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

冬季扶风

已于 2024-09-26 20:52:19 修改

阅读量654

点赞数 36

文章标签：服务器 html5

于 2024-09-11 11:20:29 首次发布

本文链接：https://blog.csdn.net/2301_79438088/article/details/142078451

版权

1.1 认识网页网站

1.1.1 网页、网站

网页和网站的区别：

1、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户

2、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面

3、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

4、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

5、访问不同

网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问

6、体验不同

网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示

常用术语：

Internet:有各种不同类型的计算机网络连接起来的全球性网络。

WWW：让Web客户端访问Web服务器中的网页。

浏览器：将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快速的获取Internet中的内容。

URL：通信协议和地址。

IP：网际协议。

HTTP：超文本传输协议。

FTP：文件传输协议。

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

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

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

客户机和服务器：浏览网页是有个人计算机向Internet中的计算机发送请求，Internet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Internet中的计算机称为服务器或服务端。

1.1.2 静态网页和动态网页

静态网页：纯粹由HTML/CSS语言编写。

动态网页：HTML与Java、VB、VC等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。（常用JavaScript编写）

1.2 网页中的基本构成元素

1.2.1 文本

有体积小、网络传输速度快等特点，是网页的最主要的基本元素，也是页面最主要的信息载体。文本有字体，字号，颜色，底纹和边框等属性。

1.2.2.图片和动画

具有强烈的视觉冲击力，可以更好的吸引浏览者的注意力。

1.2.3.超链接

可以在当前页面跳转也可以在页面外进行跳转。

1.2.4.音频视频

音频：使网页效果多样化，常见格式有mid和MP3

视频：一般格式是flv，具有文件小，加载速度快等特点。

1.2.5.交互表单

接受用户在浏览器端的输入，将这些信息发送到用户设置的目标端。

1.2.6.其他常见元素

悬停按钮，JavaScript和ActiveX。

1.3 页面布局结构

1.3.1 网页页面布局

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前端指的是网站开发中实现用户与网站的互动、表现网站的核心部分，具体包括‌HTML、‌CSS、‌JavaScript等技术。

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

HTML(搭建):HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

*超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

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

JavaScript（动态）（简称“JS”）:是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
1.4.3 前端开发工具

浏览器：谷歌浏览器 GoogleChrome

编辑器：HBuilderX

1.5 HTML语法基础

1.5.1 HTML概述

超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

定义：由一系列成对出现的元素标签嵌套组合而成。这些标签用“<”和“>”括起来。它们称为标记也称标签。分为两大类：

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

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

1.5.2 HTML基本结构

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

HTML 文档标签的格式为


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

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

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

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


<head>头部的内容</head>

文档头部内容在开始标签<html>和结束标签</html>

1.5.2.3 文档编码

文档编码格式如下：

<meta charset=1 "utf-8"/>

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

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

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

1.6 创建HTML文档


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

1.7 网页头部标签

1.7.1 <title>标签

定义：页面标题标签，用于说明文件用途，应用于<head>与<\head>之间。

格式：

<title>标题<\title>

1.7.2 <meta>标签

定义：元信息标签，是一个单标签。可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字以及其他一些描述网页的信息。分为两大属性：HTTP和页面描述属性。

格式：

<meta name="xxx" content="xxx"/>

1.7.2.1 keywords

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

格式：

<meta name="keywords" content="xxx"/>

1.7.2.2 description

定义：用来告诉搜索引擎网站主要内容

格式：

<meta name="keywords" content="xxx"/>

1.7.3 <link>标签

定义：用来链接外部资源和当前HTML文档。

格式：

<link rel="stylesheet" href="/css/xxx.css" type="text/css"/>

1.7.4 <script>标签

定义：脚本标签，用于HTML文档定义客户端脚本信息。

<script type="text/javascript" src="/js/xxx.js"></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

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

1.8.2 特殊符号

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

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>