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

本文链接：https://blog.csdn.net/2402_83227884/article/details/142058159

1.1 认识网页和网站

1.1.1 网页、网站以及常用术语

网页和网站的区别：

网页是由HTML编写，通过WWW传输，又称为Web页。Web站点中有一个特殊的网页叫做主页，也叫首页。

网站是多个网页的集合，按网站内容可将网站分为5种类型：门户网站、企业网站、个人网站、专业网站、职能网站。网站设计技术可将网站分为静态网站和动态网站。网站不一定需要很多的网页，只要有独立域名和空间，哪怕只有一个页面也可以称为网站。

常用术语：Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等。

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

WWW：其功能是让Web客户端（常用浏览器）访问Web服务器中的网页。

浏览器：将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷的获取Internet中的内容。常用的浏览器有 Internet Explorer (IE) 浏览器，Firefox 浏览器和 Chrome 浏览器等。

URL：统一资源定位符，指定通信协议和地址。

IP：网际协议。

域名：指网站名称，在全世界是唯一的，通常把域名看成网站的网址。

HTTP：超文本传输协议，是互联网上最为广泛的一种网络协议。

FTP：文件传输协议，从而真正的实现资源共享。

发布：指将制作好的网页传到网络上的过程，也称为上传网站。

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

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

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

1.1.2 静态网页和动态网页

静态网页：静态网页通常由纯粹的 HTML / CSS 语言编写。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。

动态网页：常见的客户端动态网页技术包括 JavaScript , ActiveX 和 Flash 等。动态网页技术是区别于静态网页技术而言的。相比与传统的静态网页，动态网页有了明显的交互性、自动更新性，以及因时因人而变的灵活性。

1.2 网页的基本构成元素

1.2.1.文本

文本是指网页中叙述性的文字，是最理想的网页信息载体与交流工具。

1.2.2.图片和动画

图片在网站界面设计中有多种形式，图片具有比文字和图形符号都要强烈和直观的视觉表现效果。

动画在网页中的作用是有效地吸引访问者更多的注意，用户在设计网页时可以通过在页面中加入动画使页面更加生动。在网页中使用的动画主要有GIF 和 Flash 两种方式。

1.2.3.超链接

超链接是网页中最重要的元素之一，可以将一个网页与另一个网页、文件、图片、邮件地址等进行链接。

1.2.4.音频视频

音频是多媒体网页重要的组成部分，可使网页效果多变化。

随着网络带宽的增加，越来越多的视频文件被应用到网页中，使得网页效果更加精彩且富有动感，常见的视频文件格式有MP4 和FLV 等。

1.2.5.交互表单

作为网站前端和后台进行沟通的媒介，可以实现浏览者和网页的交互，输入并提交注册信息，登录并实现留言功能，尤其html5增加了多个表单元素的表单项，提供了更好的输入控制，提高了交互的效率。

1.2.6.其他常见元素

悬停按钮、JavaScript 与 ActiveX 等各种特效。

1.3 页面布局结构

1.3.1 网页页面布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。

2. 菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面。

3. 内容区域

内容区域一般有三种形式:

用于移动端、用于平板设备、用于 PC 桌面设备。

4. 底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

可将网页分为个人网页：风格比较多样，内容比较专一，形式比较灵活。商业网页：内容丰富，信息量大，一般都有统一的布局。

常见的结构布局包括：“国”字型、“厂”字型、海报型和 Flash 型等。

1.3.2 网页色彩搭配

网页安全色：是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。

网页中色彩的表达：十六进制颜色码：例如 #FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色。
RGB颜色：例如 rgb(255, 0, 0) 表示红色，rgb(0, 255, 0) 表示绿色，rgb(0, 0, 255) 表示蓝色。
RGBA颜色：类似于RGB颜色，但是多了一个表示透明度的值，例如 rgba(255, 0, 0, 0.5) 表示半透明的红色。
HSL颜色：使用色调（Hue）、饱和度（Saturation）、亮度（Lightness）来表示颜色，例如 hsl(0, 100%, 50%) 表示红色。
HSLA颜色：类似于HSL颜色，但是多了一个表示透明度的值，例如 hsla(0, 100%, 50%, 0.5) 表示半透明的红色。
颜色关键词：例如 red 表示红色，green 表示绿色，blue 表示蓝色。

常见的色彩搭配：采用相近色配色和采用近似色配色。

相近色：是指相同色系的颜色，使用相近色进行网页色彩的搭配，如暖色调和冷色调就是相近色的两种运用。

近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组，也可以指两种明显区分的色彩。

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端是给用户展示web前端是什么的网页页面web前端是什么，即网站的前台部分，可能包含设计、特效、用户交互等。web即全球广域网，也称为万维网，是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

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

Web前端的三大核心技术：HTML、CSS、JS

1、HTML（超文本标记语言）：
HTML是一种用于创建网页结构和内容的标记语言。它由一系列的标签组成，每个标签都有特定的含义和作用。通过使用不同的HTML标签，可以创建标题、段落、链接、列表、图片等元素来构建网页的结构。HTML标签使用尖括号（<>）包围，通常是成对出现的，有起始标签和结束标签。例如，`<h1>`表示一级标题的起始标签，而`</h1>`表示一级标题的结束标签。HTML可以指定元素的属性，如`id`、`class`、`src`等，用于进一步控制元素的样式和行为。
2、CSS（层叠样式表）：

CSS用于为HTML文档添加样式和布局。通过CSS，可以改变网页中元素的外观和排列方式。CSS使用选择器来选取HTML元素，并通过属性值对其进行样式设置。比如，可以选择一个标题元素`<h1>`，然后通过CSS设置其颜色、字体大小、边距等样式。CSS具有层叠的特性，即当多个规则同时应用到一个元素时，可以通过设置优先级来确定最终的样式。此外，CSS还支持响应式设计，可以通过媒体查询等技术，让网页在不同设备和屏幕尺寸下有不同的样式和布局。
3、JavaScript（JS）：

JavaScript是一种脚本语言，用于为网页添加交互和动态功能。它使得网页能够对用户的操作作出响应、处理数据和与服务器进行通信。通过JavaScript，可以操作网页的各种元素，如修改文本内容、处理表单数据、创建动画效果、发送网络请求等。JavaScript还拥有强大的编程功能，支持面向对象编程、异步操作和模块化开发等。它可以与HTML和CSS紧密结合，为网页提供更加交互性、复杂性的功能和效果。

这三大核心技术共同构成了现代Web前端开发的基础，它们互相配合、相互作用。HTML定义网页的结构和内容，CSS负责网页的样式和布局，JavaScript实现网页的动态效果和交互逻辑。通过它们的结合运用，可以构建出功能完善、用户友好的Web应用。

1.4.3 前端开发工具

1.4.3.1 浏览器

Google Chrome：作为最流行的浏览器之一，Chrome提供了强大的开发者工具和扩展插件，可以方便地进行调试、性能分析和代码审查等工作。

Mozilla Firefox：Firefox也是广泛被开发者使用的浏览器之一，它提供了类似于Chrome的开发者工具集合，可以方便地进行调试和性能优化。

Safari：Safari是苹果公司开发的浏览器，主要运行在iOS和macOS平台上。在进行web开发时，需要特别关注Safari的兼容性，因为该浏览器在苹果设备上的用户群体较大。

Microsoft Edge：Edge是微软公司开发的浏览器，取代了之前的Internet Explorer。Edge提供了一套称为"开发者工具（Developer Tools）"的调试工具，方便进行调试和性能分析。

Opera：Opera是一款功能强大、资源消耗低的浏览器。在web开发中，可以使用Opera来进行兼容性测试和性能优化

Firefox:也是一款流行的浏览器，同样具备强大的开发者工具。Firefox的开发者工具支持诸如代码调试、网络监控、性能分析等功能，并且提供了许多有用的扩展和插件。此外，Firefox还有一些独特的特性，如多进程架构和隐私保护功能，对于一些特定的开发需求可能会更加适合。

Internet Explorer（IE）：虽然IE的市场份额已经不如以前，但在一些企业内部网络中仍然广泛使用。对于需要在IE中进行测试的网站，开发人员仍然需要使用IE浏览器。IE的开发者工具虽然相对较旧，但仍然包含一些有用的功能，如DOM检查、JavaScript调试等。

1.4.3.2 网页编辑器

Adobe Dreamweaver :第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

Subime Text :界面布局非常有特色，支持文件夹导航图和代码缩略图。

NotePad++ :免费开源的纯文本编译器，具有语法高亮显示、代码折叠功能等。

EditPlus :具有自动完成功能。

HBuilder :业内主流的开发工具。

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

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

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。

1.5.1.3 标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body> </body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和 Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开 Web网页文件，提供查看Web资源的客户端程序。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，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)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

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

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

HTML文档主体标签的格式为<body>网页的内容</body>

主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示主要内容与显示格式。

1.6 创建HTML文档

index.html:页面结构文件

css文件夹：存放css文件，页面样式文件

img文件夹：存放图片

zjs:存放JavaScript文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<P>这是我的第一个网页项目</P>
		<P>2023软件2班</P>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签位于<bead>与</head>中，用于标示文档标题。格式如下:<title>标题</title>，打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。

1.7.2 <meta>标签

name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content 中的内容主要是便于搜索引擎查找信息和分类信息用。
name属性主要有以下两个参数: keywords (关键字)和 description (网站内容描述)

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

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

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