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

原点即终点

已于 2024-09-13 10:05:11 修改

阅读量685

点赞数 20

文章标签： html

于 2024-09-13 10:03:54 首次发布

本文链接：https://blog.csdn.net/2302_81862763/article/details/142058042

版权

1.1认识网页和网站

1.1.1 网页、网站

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

网站：Web站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。

网站和网页的区别：

1. 含义不同1

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；网页是网站的基本元素，展示给用户1。

2. 关系不同

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

3. 组成不同

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

4. 功能不同

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

5. 访问不同

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

6. 体验不同

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

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

1.1.2 静态网页和动态网页

静态网页：HTML/CSS

动态网页：JavaScript、ActiveX、Flash

1.2网页的基本构成元素

1.2.1.文本

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

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEC和PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3超链接

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

1.2.4音频和视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。

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

1.2.5交互表单

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

1.2.6其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3页面布局

1.3.1网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富、信息量大，一般都有统一的布局;个人网页风格比较多样、内容比较专一、形式比较灵活,更容易创造出美感。

确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和Flash型等，如图所示。

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

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.2Web前端开发的三大核心技术

1.HTML

2.CSS语言

3.JavaScript语言

1.4.3Web前端开发工具

1.浏览器

（1）IE浏览器

（2）Chrome浏览器

（3）Firefox浏览器

（4）Safari浏览器

（5）Opera浏览器

2.网页编译器

HBuilderX

1.5HTML语法基础

1.5.1语言

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

1.5.2超文本

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

1.5.3标记

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

标签用<xxx></xxx>

1.6创建HTML文档

1.使用HBuilder新建项目。依次选择文件、新建、Web项目

2.创建项目名称

3.然后打开项目里会有:

css文件夹：页面样式文件

img文件夹：图片文件夹

js文件夹： JavaScript文件

4.可以开始编写代码，在inder.html中编写代码

1.7网页头部标签

1.7.1<title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。

网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。

< title>标签位于<bead>与</head>中，用于标示文档标题，格式如下：

例如，京东商城的文档标题：

打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。

1.7.2<meta>标签

1.keywords

2.description

1.7.3<link>标签

如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

1.74<script>标签

<scripttype=" text/css"src="脚本文件名 n.js"></script>

1.8HTML文档注释和特殊符号

1.注释：

2.特殊符号：< 、>、&、！、；

index.html:页面结构文件

css文件夹：页面样式文件

img文件夹：图片文件夹

js文件夹： JavaScript文件

<!DOCTYPE html> //文件类型
<html>   //首标签，将所有内容包裹起来
   <head> //
       <meta charset="utf-8" /> //1.设置字符节

<!DOCTYPE html> <!--文件类型-->
<html>	<!--首标签，将所有内容包裹起来-->
	<head>	
		<meta charset="utf-8" />	
		<title>第一个网页项目</title>		
	</head>		
	<body>		<!--主体，在里面写啥网页就会显示啥-->
		<p>我来自软件技术2班</p>
		<p>123454</p>	<!--<p></p>可以相当于换行-->
		<a href="http://www.baidu.com">百度一下</a>
	</body>		 
</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: 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>		<!--尾标签-->