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

雪中凌月

已于 2024-09-13 09:19:00 修改

阅读量792

点赞数 16

文章标签： php 开发语言

于 2024-09-13 09:17:22 首次发布

本文链接：https://blog.youkuaiyun.com/2403_87170819/article/details/142057920

版权

1.1 认识网页和网站

1.1.1 网页、网站

1.网页

网页是由HTML编写，通过WWW网传输，且被游览器编译后供用户获取信息的页面文件，又成为Web页集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫做主页（也叫首页）。

由于网页中包含超级链接，网页也被称为超文本，传输超文本的协议被称为超文本传输协议（HTTP）。

2.网站

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

Web站点其实是Internet上能够提供Internet服务的一个位置，这个位子由独一无二的IP地址或者域名来描述。

按网站的设计技术可将网站分为静态网站和动态网站。

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

3.常用术语

Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、发布、站点、超链接、客户机和服务器等。

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

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

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

1.1.2 静态网页和动态网页

1.静态网页

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

2.动态网页

动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意识上的动态效果，只要采用动态网站技术生成的网页都成为动态网页，其本质只要体现在交互性饭馆。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。

1.2 网页的基本构成元素

1.2.1 文本

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

1.2.2 图片和动画

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

1.2.3 超链接

超链接技术是WWW流行起来的最主要的原因。超链接可以再当前页面中进行跳转，也可以再页面外进行跳转。

1.2.4 音频和视频

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

视频文件一般为flv格式，他是最红基于Falsh MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户色值的目标端。

1.2.6 其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

网页分为个人网页和商业网页。

商业网页内容丰富，信息量大，一半都有统一的布局；

个人网页风格比较多样、内容比较专一、形式比较灵活、更容易创造出美感。

在网页布局中，结构布局是根据谁元素在网页中的位置分部进行分类的。常见的结构布局如下：

1.3.2 网页色彩搭配

1.网页安全色

网页安全色是指在不同硬件环境、不同操作系统、不同通过浏览器中都能够正常显示的颜色集合。

2.网页中的色彩表达

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

3.常见的色彩搭配

采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。

采用近似色配色：在色相环中的每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。

1.4Web前端的技术简介

1.4.1 初识Web前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。

Web前端开发是从网页演变而来的，名称上有明显的时代特征。

早期的前端其实是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web 2.0的出现。

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

1.HTML

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

2.CSS语言

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

3.javaScript语言

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

1.4.3 Web前端开发工具

1.浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。几种主流浏览器：IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器、Opera浏览器。

2.网页编辑器

（1）Adobe Dreamweaver。

Dreamweaver支出HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。

Dreamweaver也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题，预览画面仅能作为扶着参考。

（2）Sublime Text

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

（3）NotePad++

这是一款免费开源的纯文本编译器，具有完整中文化接口并支持UTF-8技术，他具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

（4）EditPlus

由韩国公司发布的一款文字编辑器，支出HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠。其中醉菊特色的是EditPlus具有自动完成功能。

（5）HBuilder

是由DCloud推出的一款支持HTML5的Web开发IDE。

3.切图软件

切图软件是由UI设计出的效果图进行切图操作，页可以对网页中的图片进行修改等处理。

1.5 HTML语法基础

1.5.1 HTML概述

1.语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

2.超文本

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

3.标记 <xxx>内容</xxx>

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。标签分为单标签和双标签两大类。

单标签指的是只存在一个标签的写法，如<meta><input>等。

双标签指的是存在一对标签的写法，如<head></head>,<body></body>等。

HTML只是一个纯文本文件。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素不区分大小写，HTML用标签来规定元素的属性和它在文件中的闻之，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

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

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

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

HTML文档包括头部和主体，文档头部内容在开始标签（<head>）和结束标签</head>之间定义。

3.文档编码<meta charset="utf-8">

为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编程语言。文档声明的编码应该于实际编码一致，否则会成乱码。

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

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

1.6 创建HTML文档

（1）使用HBuilder新建项目。

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

（3）打开项目“课堂练习”的文件夹，会看到里面有首页index.html。

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

（5）在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模版为html5。

（6）将文件命名，然后开始编写网页代码。

（7）网页完成后，可以执行菜单“运行”——“浏览器运行”，选择电脑中已有的浏览器进行预览。

1.7 网页头部标签

1.7.1<title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用已说明文件的用途。

1.7.2<meta>标签

1.keywords

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

2.description

告诉搜索引起网站主要的内容。

1.7.3<link>标签

用来连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。

1.7.4<script>标签

1.8 HTML5文档注释和特殊符号

1.8.1注释

为增加HTML5文档的可读性，可为其添加注释部分。

1.8.2特殊符号

一些特殊符号，必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。

特殊符号：空格、大于、小于、引号、版权号。

代码：

<!DOCTYPE html>	
<html>	
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="xxx"/>
		<meta name="description" content="xxx"/>
		<title>第一个网页项目</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<!--注释内容-->
		<p>这是我的第一个网页项目</p>
		<p>雪中凌月</p>
		<a href="http://www.bilibili.com">哔哩哔哩</a>
	</body>
</html>