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

喜欢败给现实

已于 2024-09-29 11:49:22 修改

阅读量713

点赞数 16

文章标签：前端

于 2024-09-12 19:23:58 首次发布

本文链接：https://blog.csdn.net/2301_81053053/article/details/142092315

版权

1.1 认识网页和网站

1.1.1网页、网站

网页和网站的区别：网站和网页并不是总分的关系，网站是由一个个网页组成的。

网页

网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。

常用术语

intemet、www、浏览器、URL、IP、域名、HTTP、FIP、站点、发布、超链接、导航条、客户机和服务器等。

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

Www:其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。

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

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

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

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

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

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

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

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

超链接:从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相
在浏览网页时单击超链接就能跳转到与之相应的页面。同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。

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

1.1.2静态网页和动态网页

HTML CSS JAVASCRIPT

1. 静态网页 ter
静态网页是指客户端的浏览器发送URL请求给 WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS 语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。
客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和 Flash 等。
服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页(如注册、登录和查询等)都需要服务端动态网页程序。

1.2 网页的基本构成元素

1.2.1 文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。

1.2.2 图片和动画

网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG 和 PNG等，其中使用最广泛的是GIF 和 JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3 超链接

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

1.2.4 音频和视频

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

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

1.4.1初识web前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。

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

1.html

HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。

2.css

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

3.javascript

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

1.4.3 wed前端开发工具

1.浏览器：

浏览器是网页的运行平台，是可以把gtml文件展示在其中，供用户进行浏览的一种软件

1.1.2.ie浏览器：

ie是Internet explorer的简称，是由微软公司推出的一款网页浏览器，采用trident内核实现，有6.0，7.0，8.0，9.0，10.0和11.0等版本

1.1.3chrome浏览器：

Chrome浏览器一般指Google Chrome。Google Chrome是由Google公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。

1.1.4firefox浏览器：

Firefox浏览器一般指Mozillafirefox，中文俗称“火狐”，是由 Mozilla公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows和Mac OS X及GNU/Linux等

1.1.5opera浏览器：

Opera浏览器是由挪威OperaSoftwareASA公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在Windows，Mac和Linux3个操作系统平台上运行。

2网页编辑器：

html,css和javascript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以快速打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件:Adobe Dreamweaver,Sublime Text，NotePad++，EditPlus和HBuilder。

1：adobe dreamweaver

是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国Macromedia公司发布的，该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业 Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

2：sublime tex

Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

3：notpad++

NotePad++的名称来源于Windows系列操作系统自带的记事本 NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，如图1-5所示。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

4：editplusEditPlus

是由韩国Sangil Kim(ES-Computing)公司发布的一款文字编辑器，支持HTML.CSS，JavaScript,PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。例如，在CSS源文件中输入字母 b，加上空格，就会自动生成“border:1px solid red”语句，开发者可以自行编辑快捷键所代表的代码块，然后在开发过程中使用快捷方式让EditPlus自动完成指定的代码内容。

5：hbuilderHBuilder

是由DCloud(数字天堂)推出的一款支持HTML5的Web开发 IDE。HBuilder主要用于开发 HTML,JS(JavaScript)和CSS，同时配合 HTML的后端脚本语言如PHP 和JSP也可以适用，还有前端的预编译语言如less以及人们钟爱的 markdown 都可以良好地进行编辑。从2013年夏天发布至今，HBuilder已经成为业内主流的开发工具。目前，HBuilderX发布了1.0正式版。

3切图工具

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

1.5 HTML语法基础

1.5.1 HTML概述

html是hyper text markup language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单语言标记语言。

1.5.1.1 语言

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

2.超文本

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

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基本结构

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

HTML文档分为三个文件加一个HTML文档

CSS文件夹：存放CSS文件，网页样式

IMG文件夹：存放图片、视频等资源

JS文件夹：存放动态文件（使网页实现动态功能）

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

HTML 文档标签的格式为<html>HTML文档的内容</html><html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

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

<head>头标签...</head>尾标签。HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为 <head>头部的内容<head> 文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

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

<body>...</body>-----存放网页主体内容

<p><p>分段 <a><a>超链接

1.6 创建HTML文档

（1）使用hbuilder

（2）创建项目名称

（3）课堂练习

（4）编写网页代码

（5）创建文件模板htm15

（6）浏览器运行

1.7 网页头部标签

1.7.1.7.1 <title>标签

该标签是页面标题标签

1.7.2<meta>标签

1.keywords

索引关键字

2.description

网站内容描述

3.charset

字符

1.7.3<link>标签

其中有:rel、href、type

rel：指定文件样式

href: 指定文件路径

type：指定文件类型

1.7.4<script>标签

该标签引入的是JS文件，有两个参数：src、type

1.src

指定文件路径

2.type

指定文件类型

1.8 HTML文档注释和特殊符号

1.8.1注释

单行注释：

多行注释：<!--

-->

注释;ctrl+/
多行注释；按回车

1.8.2 特殊符号

特殊符号	字符实体	示例
空格	&nbsp	银河商务  热线：400-111-111
大于（>）	>	3>2
小于（<）	<	2<3
引号（"）	"
版权号（@）	&copy	Copyright©网页设计教程

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="微软雅黑">人生如逆旅,我亦是行人。</fonl></p >
			<img src="img/1.1.jpg"/>
			<! --水平线-->
			<hr size ="2" color="black" width = "100%"/>
		<p align="center">网页制作教程Copyright&copy;江西应用工程职业学院</p >
	</body>
</html>