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

Liuuu5

已于 2024-09-28 11:08:13 修改

阅读量673

点赞数 28

文章标签： html5 html

于 2024-09-11 10:28:21 首次发布

本文链接：https://blog.csdn.net/Liuuu5/article/details/142078543

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：

1、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户

2、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面

3、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

4、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

5、访问不同

网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问

6、体验不同

网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示

常用术语：

前端开发相关术语‌

‌‌HTML‌：超文本标记语言，用于创建网页结构和内容。
‌CSS‌：级联样式表，用于定义网页的样式和布局。
‌JavaScript‌：用于在网页上实现交互和动态效果的脚本语言。
‌DOM‌：文档对象模型，表示浏览器如何查看和控制HTML页面。
‌响应式设计‌：使网页能够在不同设备上自适应并良好显示的网页设计方法。

后端开发相关术语

‌服务器‌：提供数据和服务的计算机或软件程序。
‌数据库‌：用于存储和管理数据的系统。
‌API‌：应用程序编程接口，定义了不同软件组件之间的通信规范和交互方式。
‌后端框架‌：提供了预定义结构、库和工具的框架，用于简化后端开发。

网站建设和维护相关术语

‌URL‌：统一资源定位符，用于指定网站位置。
‌域名‌：与IP地址绑定的网站地址。
‌服务器端脚本语言‌：在服务器上执行的脚本语言，如Python、PHP、Node.js等。
‌负载均衡‌：将网络流量分配到多个服务器上，以提高性能和可靠性。

开发和测试相关术语

‌版本控制‌：管理软件开发过程中的版本变更的工具和方法。
‌单元测试‌：对软件中的最小可测试部分进行测试的方法。
‌集成测试‌：测试软件的不同部分是否能够正确协作的方法。

这些术语涵盖了网页开发、设计、用户体验、测试等多个方面，对于理解和学习网页开发至关重要。

1.1.2 静态网页和动态网页

静态网页和动态网页的区别：

1) 更新和维护

静态网页内容一经发布到网站服务器上，无论是否有用户访问，这些网页内容都是保存在网站服务器上的。如果要修改网页的内容，就必须修改其源文件，然后重新上传到服务器上。静态网页没有数据库的支持，当网站信息量很大的时候网页的制作和维护都很困难。

动态网页可以根据不同的用户请求，时间或者环境的需求动态的生成不同的网页内容，并且动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量。

2) 交互性

静态网页由于很多内容都是固定的，在功能方面有很大的限制，所以交互性较差。动态网页则可以实现更多的功能，如用户的登录、注册、查询等。

3) 响应速度

静态网页内容相对固定，容易被搜索引擎检索，且不需要连接数据库，因此响应速度较快。

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页，其中涉及到数据的连接访问和查询等一系列过程，所以响应速度相对较慢。

1.2 网页的基本构成元素

1.2.1.文本

网页的主体内容，可以通过调整字体大小、颜色和样式来增强可读性和美观性。

1.2.2.图片和动画

用于美化网页，增强视觉效果，常见的格式有JPG和‌GIF。

1.2.3.超链接

实现网页之间的跳转，提供导航功能。

1.2.4.音频视频

提供音频内容，增强用户体验。

1.2.5.交互表单

接受用户在浏览器端的输入，将这些信息发送到用户设置的目标端。

1.2.6.其他常见元素

包括悬停按钮、Javascript与ActiveX等各种特效，他们能点缀网页，是网页更活泼有趣。

1.3 页面布局结构

1.3.1 网页页面布局

网页可分为个人网页和商业网页，商业网页内容丰富、信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活，更容易创造出美感。

常见的结构布局包括“厂”字型、“国”字型、海报型、和Flash型等，如图：

1.3.2 网页色彩搭配

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web 前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是 Tabel 布局，后来发展到 Div+CSS 网站重构，再到 JavaScript 逐渐成为 Web 前端开发的语言以及 Web 2.0的出现，每个阶段都涌现出相应的产品，如SNS5，博客、微博等。随着人们对网页需求的不断增大，Web 前端技术也正加速地发展。

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

‌HTML: 是用于创建网页结构和内容的标记语言。它通过一系列的标签定义网页中的各种元素，如标题、段落、链接、图片等，这些元素构成了网页的基本骨架‌。
‌CSS‌: 负责网页的样式和布局。通过CSS，可以改变网页中元素的外观和排列方式，包括字体、颜色、间距、尺寸等。CSS还支持响应式设计，可以根据不同的设备和屏幕尺寸调整网页的样式和布局‌
‌JavaScript: ‌是一种脚本语言，用于实现网页的交互和动态功能。JavaScript可以使网页对用户的操作作出响应，处理数据，与服务器进行通信。它可以操作网页的各种元素，如修改文本内容、处理表单数据、创建动画效果等，从而增强网页的交互性和用户体验‌。

这三大核心技术共同构成了现代Web前端开发的基础，它们相互配合，相互作用，使得开发者能够构建出功能完善、用户友好的Web应用‌。

1.4.3 前端开发工具

HTML+CSS开发过程中主要涉及三大类工具：浏览器、网页编辑器和切图软件。

1.浏览器

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

用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

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

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的文件，这个文件里面包含了HTML指令代码这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言。

1.5.1.3 标记

标签用“<" 和“>”括起来，他们被称为标记。如<head>,<body>等，标签分为单标签和双标签：

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

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

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息，其基本结构如图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"content=""/>
		<meta name="description" content=""/>
		<link rel="stylesheet" href="css/index.css" type ="text/css"/>
		<script type="text/javascript" src="/js/index.js"></script>
		<title>第一个网页</title>
	</head>
	<body>
		我的第一个网页</br>
		<p>2023级软件一班</p>
	</body>
</html>

结果：

1.6 创建HTML文档

使用HBuilder新建一个项目。依次点击“文件”—“新建”—“普通项目”—“创建项目名称”，设置项目所在的位置即可，完成后会在左边的项目栏管理器中出现。

1.7 网页头部标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"content=""/>
		<meta name="description" content=""/>
		<link rel="stylesheet" href="css/index.css" type ="text/css"/>
		<script type="text/javascript" src="/js/index.js"></script>
		<title>第一个网页</title>
	</head>
	<body>
		我的第一个网页</br>
		<!--注释内容
		第一行
		第二行
		-->
		<p>2023级软件一班</p>
		<a href="http://www.baibu.com">百度一下</a>
	</body>
</html>

结果：

1.7.1 <title>标签

这个标签只能应用于<head></head>之间，<titel>标签是对文件内容的概括。

1.7.2 <meta>标签

＜meta>标签是元信息标签，在 HTML 中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
＜mela>标签分两大属性：HTTTP 标题属性（http-eguiv）和页面描述属性（name）。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。＜meta>标签的 name 属性的语法：
<meta name="参数"content="参数值">
name 属性主要用于描述网页摘要信息，与之对应的属性值为 content。content 中的内容主要是便于搜索引擎查找信息和分类信息用。
name 属性主要有以下两个参数：keywords（关键字）和 description（网站内容描述）。

1.7.2.1 keywords

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

1.7.2.2 description

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

1.7.3 <link>标签

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

如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML文档的可读性，可为其添加注释部分。注释是文档中说明的文字，不会被浏览器执行，使用标签为文档注释,支持单行注释和多行注释。

1.8.2 特殊符号

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

以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计Web网页。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name ="keywords" content="宋词，苏轼"charset="utf-8"/>
		<meat 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>

运行结果：