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

山支先生

已于 2024-10-06 11:10:12 修改

阅读量979

点赞数 23

文章标签：运维 html5

于 2024-09-13 09:52:01 首次发布

本文链接：https://blog.csdn.net/2401_85025850/article/details/142057839

版权

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

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：

网站和网页不是总分的概念。网站是有独立域名、独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或者其他文件。不一定需要很多的网页，只要有独立域名和空间，哪怕只有一个网页也可以称为网站。

网页是具有内容和指向其他网页的链接的任何网站的较小部分。相反，网站是一个平台，其中包含针对特定 URL(统一资源定位器)的各种网页。

每个网站都包含一个唯一的域地址，所有网页都链接在一个特定的域下，这意味着网页依赖于该域。另一方面，该网站不依赖于其任何网页。即使某些网页被删除，它也会继续工作。

网页通常在其 URL 中包含扩展名，例如 .html、.php、.aspx、.htm 等。此外，网站地址不受任何此类扩展名的影响。

网页 URL 可能包含一个文件路径(资源路径)，其中它存储在服务器上。该网站不包含任何路径，因为它直接连接到注册商服务器的唯一 IP 地址。

网站只是一个允许开发人员显示内容并附加超链接的地方。另一方面，网页是要在网站上显示的内容或文档本身。

网站的开发、设计和维护比网页花费更多的时间。如上所述，网页只是网站的一小部分，因此花费的时间相对较少。

网站的整体结构及其编程相对复杂。但是，一旦网站构建完成，网页就很容易开发。

通常，网页包含有关单个实体或主题的内容，而网站是包含来自链接某些超链接的不同实体或主题的内容的地方。

常用术语：

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

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

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

URL ：统一资源定位符，指定通信协议和地址，如"http://www.baidu. com "是一个 URL ," http ://"表示通信协议为超文本传输协议，"www.baidu.com"表示网站名称。

IP ：网际协议。 Internet 中的每台计算机都有唯一的 IP 地址，表示该计算机在 Internet 中的位置。 IP 通常分为 A 、 B 和 C 三类。

域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式：机构名．主机名．类别名．地区名。

HTTP ：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。

FTP ：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。

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

站点：一个站点就是一个网站所有内容所存放的文件夹。 Dreamweaver 的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。

超链接：超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转页面。

1.1.2 静态网页和动态网页

静态网页：是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不处理的直接下载到客户端，运行在客户端的页面的页面是已经事先做好并存放在服务器中的网页。通常由纯粹的HTML/CSS语言编写。

动态网页：能够根据不同浏览者的请求来显示不同的内容。常见的客户端动态网页技术包括：JavaScript、ActiveX和Flash等。

静态网页和动态网页是通过JavaScript来判断的，跟网页内容无关，只有在JavaScript之后才能使用网页内容动起来。

1.2网页的基本构成元素

1. 文本

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

2. 图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

3. 超链接

超链接技术是 WWW 流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

4. 音频和视频

音频文件可使网页效果多样化，网页中常用的音频格式有 mid 和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为 flv 格式，它是一种基于 Flash MX 的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

5. 交互表单

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

6. 其他常见元素

包括悬停按钮JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更有活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.网页页面布局

01国字型

是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。

02厂字型

与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息。

03海报型

这种结构的布局方式比较简单主要用于突出需要表达的重点通常最上方为通栏的标题和导航
条，下方是正文部分。

04 Flash型

常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。

2. 网页色彩搭配

1. 网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有216种颜色。

2. 网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。

1.4 Web前端技术简介

1.4.1 初识Web前端

Web 前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对 Web 前端的相关念进行详细讲解。
1991年8月6日，来自欧洲核子研究中心的科学家 Tim Berners - Lee ，启动了世界上第一个可以正式访问的网站（http://ino.cerm.ch)，标志着万维网时代的到来。随看互联网的飞速发展，网站开发人员也变得炙手可热
Web 前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大， Web 前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是 Tabel 布局，后来发展到 Div + CSS 网站重构，再到 JavaScript 逐渐成为 web 前端开发的语言以及web2.0的出现，每个阶段都涌现出相应的产品，如 SNS 博客、微博等。随着人们对网页需求的不断增大， Web 前端技术也正加速地发展。

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

HTML、CSS和JavaScript语言。

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

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

JavaScript：是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。

1.4.3 前端开发工具

浏览器：谷歌浏览器

编辑器：HBuilderX

HTML语法基础

HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网贡制作工具，但是这些工具生成的代码仍然是以HTML,为基础的，因此学习HTML代码端设计网页非常重要。

1.5.1.1 HTML概述

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

1. 语言

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

2. 超文本

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

3. 标记

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

1.5.1.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p></p>这是我的第一个网页项目<p></p>
		<p></p>啦啦啦啦啦<p></p>
	</body>
</html>

网页标签

<!DOCTYPE html>
<html>
<head>

<title>
<title>第一个网页项目</title> //设置网页名字

type="text/javascript"></script> 指定文件类型
   </head>
   <body> //想要啥就显示啥  (注释格式)
       <p></p>这是我的第一个网页项目<p></p>
       <p></p>啦啦啦啦啦<p></p>
       <a href="http://www.baidu.com">百度一下</a>
   </body>
</html>

特殊符号

综合实训例题

<!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；广东南方职业学院
	</body>		 
</html>