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

最新推荐文章于 2024-10-09 18:09:39 发布

yubnm99

最新推荐文章于 2024-10-09 18:09:39 发布

阅读量682

点赞数 15

文章标签：服务器运维

本文链接：https://blog.csdn.net/yubnm99/article/details/142092188

版权

1.1 认识网页和网站

1.1.1 网页, 网站

网页和网站的区别：

网页：是互联网上单个的文档，通常由HTML（超文本标记语言）编写，可以通过浏览器访问。每个网页都有唯一的URL（统一资源定位符）。
网站：是一个或多个网页的集合体，通常围绕一个特定的主题或目的组织在一起，拥有一个共同的域名。

简而言之，网页是网站的基本组成元素，而网站是由多个网页构成的集合体。一个网站可以包含无数个网页，但一个网页只能属于一个网站。

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

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

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

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

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

IP:网际协议。

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

HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。

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

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

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

超链接：从一个网页指向一个目标的连接关系

1.1.2 静态网页和动态网页

1.静态网页
静态网页通常由纯粹的HTML/CSS 语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页。

1.2 网页的基本构成元素

1.2.1 文本

文本
真正文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是
网页最主要的基本元素，也是页面中最主要的信息载体。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。

1.2.2.图片和动画

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

1.2.3.超链接

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

1.2.4.音频视频

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

1.2.5.交互表单

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

1.2.6.其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

1.网页安全色。

网页安全色是红色，绿色和蓝色。

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

CMYK也称作印刷色彩模式，由青，洋红，黄和黑4种色彩组合成各种颜色。

3.常见的色彩搭配：采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色，在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。

1.4 Web前端技术简介

1.4.1 初识WEB前端

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

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

三大核心技术:HTML、CSS语言和JavaScript语言。
1.HTML
HTML是制作网页的标准语言。
2.CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。
3.JavaScript 语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加动态功能。

1.4.3 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。

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

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

1.5 HTML语法基础

1.5.1 HTML概述

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。以下是HTML的一些基本概述：

历史
HTML由Tim Berners-Lee在1990年代初发明，是构建WWW（World Wide Web）的基础。
随着网络技术的发展，HTML也经历了多次更新，如HTML 2.0、HTML 3.2、HTML 4.01，以及目前广泛使用的HTML5。

1.5.2 HTML基本结构

HTML文档由一系列的元素构成，这些元素通过标签（如<html>、<title>、<body>等）来定义。
一个基本的HTML文档结构如下所示：

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

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用HBuilder快速编辑一个HTML文件，通过它来学习网页的编辑、保存过程。
(1)使用HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”，如图所示。

编写代码：

运行结果：

1.7 网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的 CSS 样式文件和客户端的JavaScript脚本文件等。其中，页面标题及页面描述称为页面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一的内容作为摘要信息的标题，而描述则常来自页面描述标签的内容或直接从页面正文中索引擎也会由于页面的实际情况而有所不同。

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的机括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存至磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:<title>标题</title>

1.7.2 <meta>标签

1.7.3 <link>标签

1.7.4 <script>标签

格式如下:
<scripttype=" text/css"src="脚本文件名n.js" ></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTMI5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“…”替换为注释文字内容即可。标签支持单行和多行注释。
【例 ]注释标签的应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>带有注释语句的页面</title>
	</head>
	<body>
		你好，HTML5!
		<!--接下来出现一条水平线-->
		<hr size="3" color="black">
		<!--
		这是一个多行注释语句
		注释语句不会被浏览器执行
		也不会在浏览器中显示
		-->
		<p>网页制作工作室&nbsp;&nbsp;热线:400-111-1111</p>
	</body>
</html>

浏览效果如图：

1.8.2 特殊符号

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="blick" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;广东南方职业学院</p>
	</body>
</html>