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

2301_81371592

已于 2024-12-02 11:38:47 修改

阅读量1.6k

点赞数 33

文章标签： html

于 2024-09-12 09:35:02 首次发布

本文链接：https://blog.csdn.net/2301_81371592/article/details/142052577

版权

1.1 认识网页和网站

1.1.1 网页、网站及常用术语

1. 网页

网页是一个包含 HTML 标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为*.html或*.htm）。

2.网站

网站 (Website)是指在因特网上根据一定的规则，使用 HTML （标准通用标记语言）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。

3.网页和网站的区别

4. 常用术语

（1）WWW：其功能是让Web客户端（常用浏览器）访问Web服务器中的网页。

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

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

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

1.1.2 静态网页和动态网页

1. 静态网页

静态网站就是没有采用任何程序开发的网站，纯粹采用HTML/CSS语言编写，不要求懂太多网站制作知识，使用一般的软件就可以制作网页了。

2. 动态网页

动态网站和静态网站相反，动态网站制作好后，都有一个网站管理后台，以管理员的身份登录之后，就可以对整个网站的内容进行修改、删除操作。直接在网上完成，所以动态网站比较方便日常的管理，也是受人们喜爱的原因了。

动态网站并非页面有动画才是动态网站，正是由于它能随时能实现更新，即后台修改，前台马上显示修改后的内容，这样的便捷、交互性操作才是动态的涵义。

1.2 网页基本构成元素

1.2.1 文本

清晰明确地表达一些列项目

1.2.2 图片和动画

更加生动和可观

1.2.3 超链接

指定从一个位置跳转到另一个位置

1.2.4 音频和视频

音频：压缩率非常高，音质不错，背景音乐的首选。视频：具有文件小、加载速度快等特点，是网络视频格式的首选。

1.2.5 交单表单

收集联系信息，接收客户需求，获得反馈意见

1.2.6 其他常见元素

能点缀网页、使网页更活泼有趣

1.3 页面布局结构

1.3.1 网页页面布局

1. 国字型

2. 厂字型

3. 海报型

4. Flash型

1.3.2 网页色彩搭配

1. 网页安全色

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

2.网页中色彩表达

(1) 十六进制颜色码：例如 #FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色。

(2) RGB颜色：例如 rgb (255, 0, 0) 表示红色，rgb (0, 255, 0) 表示绿色，rgb (0, 0, 255) 表示蓝色。

(3) RGBA颜色：类似于RGB颜色，但是多了一个表示透明度的值，例如 rgba (255, 0, 0, 0.5) 表示半透明的红色。

(4) HSL颜色：使用色调（Hue）、饱和度（Saturation）、亮度（Lightness）来表示颜色，例如 hsl (0, 100%, 50%) 表示红色。

(5) HSLA颜色：类似于HSL颜色，但是多了一个表示透明度的值，例如 hsla (0, 100%, 50%, 0.5) 表示半透明的红色。

3.常见的色彩搭配

常见的色彩搭配包括以下几种：

（1）单色系搭配，即单一色相内的色彩搭配，保持视觉上的协调统一。

（2）同类色搭配，将色环上夹角为60度的三个相邻的色相搭配在一起，如红－红橙－橙，黄－黄绿－绿。

（3）互补色搭配，即相对于色环上的对立色搭配，如红和绿、蓝和橙。

（4）分裂互补色搭配，是互补色的一种变种，将一个互补色分成两半，如红和黄绿、蓝和橙黄。

（5）正三角搭配，是三个等距离的色相搭配，如红、绿、蓝。

（6）四元搭配，是四个等距离的色相搭配，如红、黄、蓝、绿。

1.4 Web前端

1.4.1 初识Web前端

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

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

1. HTML

主要用于定义页面结构。HTML是制作网页的标准语言。

2. CSS 语言

主要用于页面样式。CSS是一种用来表现HTML或XML等文件样式的计算机语言。

3. JavaScript语言

常用于添加各式各样的动态功能。JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

1.4.3 Web前端开发工具

1.浏览器

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

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

（2）Chrome浏览器：Chrome浏览器一般指Google Chrome。

（3）Firefox浏览器：指Mozilla firefox,中文俗称“火狐”，是Mozilla公司出品的自由开放源代码的Web浏览器采用Gecko内核实现，支持多种操作系统。

（4）Safari浏览器：Safari浏览器是由苹果公司出品的用于苹果计算机操作系统Mac OSX中的浏览器，采用Webkit内核实现。

（5）Opera浏览器：Opera浏览器是由挪威Opera Software ASA公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现，它是跨平台浏览器。

2. 网页编辑器

HTML,CSS和JavaScript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。有几款常用的网页开发工具软件：Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus和HBuilder.

3.切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

1. 语言

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

2. 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

3. 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。这些标签均由“<”和“>”符号以及一个字符串组成。如＜head>，<body>等。标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如＜meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/"。

1.5.2 HTML基本结构

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

HTML 文档标签的格式为：<html>HTML 文档的内容</html>

每个 HTML文档均以<html>开始，以</html>结束。

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

HTML 文档包括头部（head）和主体（body）。HTML 文档头标签的格式为
<head>头部的内容</head>
文档头部内容在开始标签<himl>和结東标签 /html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

<head>
		<meta charset="utf-8" />
		<meta name="keywords"/ content="百度">
		<!-- content="xxx"  xxx代表关键词 -->
		<meta name="description"/ content="百度是一个查询许多问题的软件">
		<!-- content="xxxxx"  xxxxx代表更详细的网站内容描述 -->
		<title>第一个网页项目</title>
		<!-- <title></title>设置标题（网页的名字） -->
		<link rel="stylesheet" href="/css/frist.css" type="text/css"/>
		<!-- <link rel="文件作用" href="路径" type="文件类型">/ (引入css文件)-->
		<script type="text/javascript " src="js/frist.js"></script>
		<!-- <script></script>(引入js文件，同上) -->
	</head>

3. 文档编码

文档编码格式如下：
< meta charset = "utf-8" />

文档声明的编码应该与实际编码一致，否则会成乱码。

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

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

<body>
		<h1>我的第一个网页项目</h1>
		<!-- <h1></h1>将字体设置为标题1 -->
		<p>2023级软件技术三班</p>
		<!-- <p></p>将文字设置为段落，作为换行使用 -->
		<a href="http://www.baidu.com">百度一下</a>
		
	</body>

1.6 创建HTML文档

使用HBuilder新建项目。

<!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 type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<!--注释内容-->
		<h1>我的第一个网页项目</h1>
		<p>2023级软件技术3班</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。这个标签只能应用于<head>与</head>之间。<title>标签位于<head>与</head>中，用于标示文档标题，格式如下：
<title>标题</title>
例如，京东商城的文档标题：
<title>京东（JD. COM）-正品低价、品质保障、配送及时、轻松购物！</title>

1.7.2 <meta>标签

1. keywords

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

2. description

description 用来告诉搜索引擎网站主要的内容。例如，

1.7.3 <link>标签

link 标签最常用的是用来链接 CSS 样式文件，格式如下：
<link rel="stylesheet" href=" 外部样式表文件名 .css " type=" text/css”/>

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加 HTMIS 文档的可读性，可为其添加注释部分。注释标签以“<！－－”开头，以“－－>”结束，中间的“…”替换为注释文字内容即可。<！－－⋯－－＞标签支持单行和多行注释。

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为 HTML 的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的 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/173e31a61891aeb881453ff3dcb94d3.jpg" />
		<hr size="2"color="black"width="100%"/>
		<p aling="center">网页制作教程Copyright&copy;广东南方职业学院</p >>
	</body>
</html>