第1章网页基础知识

汝虍

已于 2024-09-12 19:36:38 修改

阅读量622

点赞数 15

文章标签： html5

于 2024-09-12 19:24:05 首次发布

本文链接：https://blog.csdn.net/2301_82190058/article/details/142092615

版权

1.1 认识网页和网站

1.网页，网站

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

网站其实是互联网上能够提供互联网服务的一个位置，这个位置由独一无的IP 地址或者域名来描述，一个网站需要有一台或者是多台服务器来实现其WWw服务。不同网站的规模与大小各不相同:大的网站如新浪、搜狐等，需要多台服务器;小的网站如个人主页等，仅占据某台服务器上一个很小的空间。

2.常用术语

网页设计有其专业的常用术语，如 Intemet、wwW、浏览器、URL、PP、域名、HrpFTP、站点、发布、超链接、导航条、客户机和服务器等，作为一名网页设计师，必须熟续掌握这些常用术语。

1. Intemmet:

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

2.wwW

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

3.浏览器:

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

4.URL

:统一资源定位符，指定通信协议和地址

5.IP:

网际协议。Intemet中的每台计算机都有唯一的卫P地址，表示该计算机在Ineme中的位置。

6.域名

:指网站名称，在全世界是唯一的

7.站点

一个站点就是一个网站所有内容所存放的文件夹。

8.超链接:

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

1.1.2静态网页和动态网页

1.静态网页

静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页

2.动态网页

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

1.2网页的基本构成元素

1.文本

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

2.图片和动画

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

3.超链接

超链接技术是 www流行起来的最主要的原因。

4.音频和视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3

5.交互表单

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

6.其他常见元素

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

1.3页面布局机构

1.网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页

2.网页色彩措配

（1）网页安全色（2）网页中色彩的表达（3）常见的色彩搭配，采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。

1.4 Web 前端技术简介

1.4.1初识 Web 前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关念进行详细讲解。

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

1. HTML

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

2.CSS 语言

CSS是一种用来表现HTML或XML,等文件样式的计算机语言

3.JavaScript 语言

JavaSerip!是一种属于网络的脚本语言，已经被广泛地用于Web应用开发

1.4.3 Web 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具

1.浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome 浏览器、Firefox 浏览器、safan 浏览器和 Oper浏览器等

（1）IE浏览器

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

(2)Chmme 测览器

Chmme 浏览器一般指 Google Chrome

(3)Fareox 测览器

Finrefox浏览器一般指 Mozilla firefox，中文俗称“火狐”，是Mozima 公司出品的一款自由的及开放源代码的Web浏览器

(4)safan 浏览器

Safani浏览器是由苹果公司出品的用于苹果计算机操作系统Mac0sX中的浏览器，采用webki 内核实现，使用了KDE的KHTML,作为浏览器的运算核心

(5)0pera浏览器

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

2.网页编辑器

HTML，CSS和JavaSeript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容

1.5HTML语法基础

HTML是制作网页的基础语言，是初学者必学的内容

1.51HTML 概述

1.语言

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

2.超文本

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

3. 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言

1.5.2 HTML 基本结构

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

1.6创建 HTML 文档

（1）使用 HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”

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

(3)打开项目“课堂练习”的文件夹，会看到里面有首页index.html，创建Web项目有i文件夹，有css文件夹

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

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

(6)本实例将文件命名为“示例程序1.2.himl”,开始编写网页代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>我是软件技术4班****</p>
		<p></p>2023级软件技术4班***</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7.网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标、述和关键链接的 CSS样式文件和客户端的JavaScript脚本文件等

1.7.1 <title>标签

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

1.7.2 <meta>标签

<m>标签是元信息标签,在HTML,中是一个单标签。该标签可重复出现在头部标。
中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息

1.8HTML5 文档注释和特殊符号

1.8.1 注释

为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行

1.8.2特殊符号

由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。

1.9综合案例--临江仙·送钱穆父

<!--综合案例-->
<!DOCTYPE himl>
<html>
	<head>
		<meta mame="koywomde" contenl="宋调，苏轼"charmet="uf-8" />
		<meta name="descriplion"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;广东南方职业学院</p >
	</body>
</html>