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

曦月213

已于 2024-09-26 21:41:40 修改

阅读量957

点赞数 28

文章标签：服务器运维

于 2024-09-11 17:15:21 首次发布

本文链接：https://blog.youkuaiyun.com/2402_87184057/article/details/142078644

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。
网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页，例如blog、挂在别人那里的个人主页，企业建站系统里的企业页面，多用户商城里的商户……尽管有很多页面，功能也齐全，但都不能叫网站。
常用术语：

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

WWW：Web 客户端访问Web服务器中的网址

浏览器：快捷获取Internet中的内容

IP：Internet中计算机的IP地址

URL：统一资源定位符，通信协议和地址

域名：指网站名称，全世界唯一。

HTTP：超文本传输协议，一种广泛网络协议。

FTP:文本传输协议，达到资源共享。

发布：上传网站

站点：一个网站所有内容所存放文件夹

超链接：一种在网页中广泛使用的技术，它允许用户从一个页面跳转到另一个页面或页面内的特定位置，也可以链接到图片、文件、电子邮件地址甚至应用程序。

客户端和服务器：客户端指的是向服务器请求服务或资源的计算机、设备或应用程序，而服务器则是响应客户端请求并提供相应服务的计算机或硬件设备。

1.1.2 静态网页和动态网页

静态网页包含的诸如文本、图像、Flash动画、超链接等内容，在编写网页源代码时已经确定。除非网页源代码被重新修改，否则这些内容不会发生变化。

动态网页有数据库支撑、包含程序以及提供与用户交互的功能，如用户登录、用户注册、信息查询等功能，根据用户传入的不同参数，网页会显示不同的数据。

1.2 网页的基本构成元素

1.2.1.文本

文本是网页中最基本的元素之一，它用于传递信息和内容。在网页设计中，文本需要清晰、易读，并且与网页的整体风格和布局相协调。文本的字体、大小、颜色、行间距等属性都需要仔细考虑，以确保用户能够轻松地阅读和理解网页内容。

1.2.2.图片和动画

网页中另一个重要的元素，它们能够直观地展示信息，增强用户的视觉体验。网页中的图像包括照片、图标、图表等，它们需要与网页的主题和内容相关，并且要优化加载速度，以避免影响网页性能。

1.2.3.超链接

网页中的链接又可分为文字链接和图像链接两种，只要访问者用鼠标单击带有链接的文字或者图像，就可自动链接到对应的其他文件，这样才干让网页链接成为一个整体。超链接也是整个网络的基础。

1.2.4.音频视频

随着多媒体技术的发展，视频和音频元素在网页中的应用越来越广泛。它们能够更生动地展示内容，吸引用户的注意力。在网页设计中，需要合理安排视频和音频的播放位置和大小，同时提供控制播放的功能，以便用户能够自由地控制播放进度和音量。

1.2.5.交互表单

表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据

1.2.6.其他常见元素

JavaScript与ActiveX、悬停按钮等

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

1.页面安全

2.页面中色彩表达

3.常见色彩搭配：

相近色配色

近似色配色

1.4 Web前端技术简介

1.4.1 初识WEB前端

web前端是平常上网浏览的网页。

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

1.HTML 2.CSS语言 3.JavaScript语言

1.4.3 前端开发工具

1.浏览器
IE浏览器:IE是Intermet Explorer 的简称，是由微软公司推出的一款网页浏览器,采用Trident内核实现

Chrome浏览器: Chrme 浏览器一般指 Google Chrome。Google Chrome是由 Cogle公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webki和Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

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

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

Opera 浏览器图:0pera浏览器是由挪威 Opera Software ASA 公司制作的一款支持多页面标签式浏览的浏览器，采用 Presto内核实现。

2.网页编辑器

常用的网页开发工具软4:Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBuilder.(1)Adobe Dreamweaver。Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。

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

(3)NotePad++。NotePad++的名称来源于Windows 系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。

4)EditPlus。EditPlus 是由韩国 Sangil Kim(ES-Computing)公司发布的一款文字编辑器，支持HTML，CSS，JavaSeript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能

(5)HBuilder。HBuilder 是由 DCloud(数字天堂)推出的一款支持 HTML5 的 Web 开发IDE。

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

1.5 HTML 语法基础

1.5.1 HTML概述

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

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

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

1.5.2 HTML 基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML文档结构</title>
	</head>
	<body>
		<p>HTML文档由head，body标记组成</p>
		<h3>标题3</h3>
	</body>
</html>

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

<html>HTML文档内容</html>

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

<head>头部内容</head>

3.文档编码

<meta charset="utf-8" />

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

<body>网页的内容</body>

1.6创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页学习</title>
	</head>
	<body bgcolor="#99ffff"text="blue">
		欢迎大家一起开始学习网页制作。
		<hr size="5"color="#ff3333"/>
	</body>
</html>

1.7网页头部标签

1.7.1<title>标签

页面标题标签。

<title>标题</title>

1.7.2<meta>标签

<meta name="参数"content="参数值">

元信息标签，在HTML中是一个单标签。有两大属性：HTTP标题属性(http-equiv)和页面描述属性(name)。

name 属性，用于设置搜索关键字和描述。<meta>标签的name 属性的语法:
<meta name="参数"content="参数值">
name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。
name 属性主要有以下两个参数:keywords(关键字)和description(网站内容描述)。

1.keywords

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

<meta name="keywords"content="网上购物"/>

2.description

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

<meta name="description"content="京东JD.com-专业的网上购物商场"/>

1.7.3 <link>标签

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

1.7.4<script>标签

脚本标签，用于为HTML文档定义客户端脚本信息。

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTMI5使用标签为文档进行注释，注释标签以“”结束，

1.8.2 特殊符号

特殊符号	字符实体
空格	&nbsp ;
大于（>）	>
小于(<)	<
引号(")	&quot ;
版权号(©)	&copy ;

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