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

ufjfghz

已于 2024-09-11 16:36:12 修改

阅读量905

点赞数 14

文章标签： java

于 2024-09-09 19:55:57 首次发布

本文链接：https://blog.csdn.net/ufjfghz/article/details/142052651

版权

1.1 认识网页和网站

1.1.1 网页，网站

网页和网站的区别：

网站是一个整体，一个系统，由网页、后台程序、数据库、域名等组成，而网页是网站的其中一个页面，是一个html文件，浏览器是用来解读这份文件

常用术语：

URL：

URL（统一资源定位符）是因特网中的唯一资源的地址。它是浏览器用于检索已发布资源（例如 HTML 页面、CSS 文档、图像等）的关键机制之一。

理论上说，每个有效的 URL 都指向一个唯一的资源。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 Web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。

FTP：文件传输协议（File Transfer Protocol，FTP）是一种在网络中进行文件传输的广泛使用的标准协议。作为网络通信中的基础工具，FTP允许用户通过客户端软件与服务器进行交互，实现文件的上传、下载和其他文件操作。FTP工作在OSI模型的应用层，通常使用TCP作为其传输协议，确保数据传输的可靠性和顺序性。

发布：发布你的网站，一旦你完成了编写代码并组织构成你的网站的文件时，你需要把它们全部放在网上，以便人们能够找到它

1.1.2 静态网页和动态网页

静态网页：静态页面是一种网页，其内容在服务器上预先生成，并在用户请求时以完全相同的形式发送到用户的浏览器。这意味着每个用户访问静态页面时都看到相同的内容，因为页面内容不会根据用户的特定需求或输入而改变。

动态网页：

所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

在浏览网页时，一定要注意动态网页并不是指网页的上动态效果，例如：视频、动图以及滚动字幕等，动态网页的内容也可以设计为纯文字，也可以是纯视频内容，无论网页是否具有动态效果，只要是采用了动态网页设计的方式就可以称之为动态网页。

总之，动态网页是基本的html语法规范与Java、VB、VC等程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的有效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

1.2 网页的基本构成元素

1.2.1 文本

文本：文本具有体积小，网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2 图片和动画

图片和图画：图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3 超链接

超链接：即超级链接，就是指按内容链接。超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。在超文本文档中，超链接用标记语言的标签指出。

超链接是 Web 页面区别于其他媒体的重要特征之一，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。文本超链接是分配目标 URL 的字或短语，图片超链接是为整个图片分配默认超链接，也可以为图片分配一个或多个热点。

1.2.4 音频和视频

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

视频：网页中的视频文件一般为v格式，它是一种基于Flash Mx的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

1.2.5 交互表单

交互表单：网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身
份登录站点等。

1.2.6 其它常见元素

其他常见元素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaSeript与ActiveX等各种特效

1.3 页面的布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有 216 种颜色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#OE533D。还可通过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前端：

Web前端即给用户展示的网页页面，也就相当于网络的前台部分，包含了设计、特效、用户交互等。

Web前端开发就是创建Web页面、或者APP等前端界面呈现给用户的过程，通过HTML、CSS及JavaS等衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

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

1) HTML5：网页内容的骨架

2) CSS3：负责网页的外观和样式

3) JavaScript：让网页具有交互性

1.4.2.1 HTML

HLML:

是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持

1.4.2.2 CSS语言

CSS:

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果

1.4.2.3 JavaScript语言

JavaScript:

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中，JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

JavaScript 内置了一些对象的标准库，比如数组（Array），日期（Date），数学（Math）和一套核心语句，包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器：

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。 Web信息资源由统一资源标识符 (Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。

1.4.3.2 网页编辑器

网页编辑器：

Dreamweaver：Adobe公司的一款全功能网页编辑软件，可以帮助用户创建HTML，CSS和JavaScript等网页语言，并提供可视化设计和代码编辑功能。

Sublime Text：一款高效的代码编辑器，提供了丰富的插件和主题，能够支持多种编程语言。Visual Studio Code：一款轻量级代码编辑器，由微软开发，可以支持多种编程语言和框架。Atom：一个开源的代码编辑器，拥有丰富的插件和主题，并提供了一些高级特性，如智能自动补全和文件管理器。

1.4.3.3 切图软件

切图：

切图是指将一张大图切割成多个小图的过程，这个过程通常用于网页设计、移动应用开发和图形处理等领域，切图可以提高页面加载速度，方便在不同设备上显示，并且可以根据需要对每个小图进行优化。

1.5 HTML语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

HTML是 Hyper Text Matkup language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。1.语言
HTML作为一种超文本标记语言，有指定的语法规则、超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本

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

1.5.1.3 标记

HTMLS 实际上不算是一种编程语言，而是一种标记语言。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

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签构成的

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

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

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

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>
文档头部内容在开始标签<hml>和结東标签</html>者文本文件地址、创作信息等网页信息说明。

1.5.2.3文档编码

文档编码格式如下:
<meta charset = " utf-8"/>
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言

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

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

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个 HTML 文件，通过它来学习网页的编辑、保存过程。

(1)使用 HBuilder 新建项目。依次点击选择“文件”一“ 新建”→“web项目”

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

(3)打开项目“课堂练习”的文件夹，会看到里面有首页index.html，有j文件夹，有css文件夹，还有图片的文件夹，基本齐全。

(4)到了这一步之后，便可以编写网页代码了，可以直接在index.html中编写代码。

(5)在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为html5.......

1.7 网页头部标签

1.7.1 <title>标签

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