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

傾魂

已于 2024-09-12 10:18:32 修改

阅读量896

点赞数 20

文章标签： html

于 2024-09-12 08:46:48 首次发布

本文链接：https://blog.csdn.net/2302_81894196/article/details/142053059

版权

1.1网页、网站

1.11网页和网站的区别

含义、关系、功能、访问方式区别

含义不同：

网站：网站是指根据一定的规则和规范，使用HTML、CSS、JavaScript等技术构建的，用于展示特定内容的一系列相关网页的集合。它是一个包含多个页面的完整信息系统。
网页：网页是网站的基本组成单元，通常由HTML代码构成，通过浏览器展示给用户的一个单独的界面。
关系不同：
网站包含网页：一个网站由多个网页组成，每个网页都是网站的一部分，承载着网站的一部分内容或功能。
网页是独立的界面：每个网页都可以独立存在，展示特定的信息或功能。

组成不同：

网站的组成：网站通常包括域名、服务器、网站空间（虚拟主机或云服务器）、网站程序（如CMS系统）、数据库等。
网页的组成：网页主要由HTML、CSS、JavaScript等代码构成，可能还包括图片、视频、音频等多媒体内容。

功能不同：

网站的功能：网站通常具有较为复杂的功能，如用户注册、登录、在线购物、信息发布、数据管理等。
网页的功能：网页通常实现较为简单的功能，如展示信息、提供表单提交、展示广告等

访问方式不同：

网站的访问：网站需要部署到服务器上，通过域名或IP地址进行访问。
网页的访问：网页可以直接在浏览器中通过URL访问，也可以作为网站的一部分被访问。
HTTP (超文本传输协议)：HTTP 是用于传输超文本文件的应用层协议。它定义了客户端（如浏览器）和服务器之间进行通信的规则。HTTP 协议基于请求-响应模型，客户端向服务器发送一个请求，服务器返回一个响应。HTTP 协议使用 TCP 连接进行数据传输，是构建 Web 页面的基础。
URL (统一资源定位符)：URL 是用于在互联网上唯一标识一个资源的地址。它包含了协议类型、服务器地址、路径、文件名等信息，用于告诉浏览器或者任何其他应用如何访问特定的资源。URL 的基本格式是：协议://域名或IP地址/路径/文件名。
FTP (文件传输协议)：FTP 是一种用于在计算机之间传输文件的协议。它允许用户从远程服务器下载文件或者将文件上传到远程服务器。FTP 使用两个 TCP 连接进行工作：控制连接用于发送命令和接收响应，数据连接用于传输文件数据。FTP 协议支持匿名登录和使用用户名/密码登录两种方式。
FTP 的作用：FTP 协议的主要作用是实现文件的上传和下载。它允许用户通过客户端软件（如 FileZilla、WinSCP 等）连接到远程服务器，执行文件操作，如复制、移动、删除文件或文件夹，以及浏览服务器上的目录结构。FTP 协议还支持文件的断点续传，即在传输过程中如果连接中断，可以重新开始传输而不需要从头开始。

1.12 静态网页和动态网页：

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

1静态网页

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

2动态网页

动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现互性方面。

1.13页面布局结构

1四种常见的网页页面布局结构

2网页色彩搭配

网页安全色：

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

网页色彩表达：

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

常见色彩搭配：

采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。

采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等,如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

1.14Web 前端技术简介

1初识Web 前端

Web前端，顾名思义，是指网站或网页的客户端部分。它负责用户在浏览器中看到的界面和交互体验。Web前端开发涉及的技术包括HTML、CSS和JavaScript，这三者通常被称为前端开发的三大基石

2Web 前端开发三大核心技术

HTML（超文本标记语言）：
HTML是构建网页内容的基础，用于定义网页的结构和内容。
通过HTML，开发者可以创建文本、图片、链接、表格、列表等网页元素。
CSS（层叠样式表）：
CSS用于控制网页的样式和布局，包括颜色、字体、间距、对齐方式等。
它允许开发者将内容和样式分离，提高代码的可维护性和复用性。
JavaScript：
JavaScript是一种脚本语言，用于实现网页的动态交互功能。
它可以用来处理用户输入、操作DOM（文档对象模型）、发送AJAX

3Web 前端开发工具

浏览器，网页编辑器，切图软件。
1. 浏览器
Google Chrome：Chrome浏览器内置了强大的开发者工具（Chrome DevTools），可以用来调试HTML、CSS和JavaScript，查看网络请求，监控性能等。
2. 网页编辑器
Visual Studio Code (VS Code)：一款功能强大的代码编辑器，支持多种编程语言，拥有丰富的插件生态系统，非常适合前端开发。
Sublime Text：一个轻量级的代码编辑器，以其简洁的界面和高效的性能受到许多开发者的喜爱。
Atom：由GitHub开发的代码编辑器，具有高度可定制性和丰富的插件。
WebStorm：JetBrains出品的集成开发环境（IDE），专注于Web开发，提供了强大的代码编辑、调试和版本控制功能。
3. 切图软件
Photoshop：Adobe Photoshop是图像处理和设计软件的佼佼者，常用于网页设计的切图工作。
Sketch：一款专为Mac设计的矢量图形设计工具，广泛用于移动端和Web界面的设计。
Figma：一个基于云的界面设计工具，支持多人协作，可以实时预览设计效果。
Adobe XD：Adobe XD是另一款用于界面设计的工具，提供了丰富的原型设计和交互功能。
其他常用工具
Git：版本控制工具，用于管理代码的版本和协作开发。
Webpack：模块打包工具，用于优化、打包前端资源。
Gulp：自动化构建工具，用于自动化前端的编译、压缩、合并等任务。
Babel：JavaScript编译器，用于将ES6+代码转换成ES5代码，以兼容旧版浏览器。
NPM/Yarn：包管理器，用于管理项目依赖。

1.4.3.1 浏览器

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

1.4.3.2 网页编辑器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<mate name="keyword" content="xxx"></mate>
		<mate name="description" content="xxx"/>
		<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级软件三班</p>
		<a href="www.baidu.com">百度一下</a>
	</body>		
</html>

1.4.3.3 切图软件

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

1.5 HTML语法基础

HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因此学习HTML代码端设计网页非常重要。

1.5.1 HTML概述

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

1.5.1.1 语言

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

1.5.1.2 超文本

定义：超文本是一种文本格式，它允许从文本中链接到其他文本。这种链接允许用户通过点击或点击来访问相关的信息，而不需要离开当前文档。

1.5.1.3 标记

定义：在计算机科学中，标记通常指的是用于定义和格式化数据的符号或代码。在HTML（超文本标记语言）的上下文中，标记是用于描述网页内容和结构的代码。

1.6创建HTML文档：

编辑
1.1.2一个基本的HTML代码

<!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"/> 
</head>

<body>

<p align ="center">你好！HTML！！！</p > 

<h1 align ="center">------------我的第一个网页项目------------</h1> 

           这是一个多行注释 -->
<hr size="10" color="black"/> 

<p align ="center">----测试中----</p > 

<p align ="center">百度一下</p >

1.7<script>:

是一个脚本标签，用于为HTML文档定义客户端脚本信息，可在文档中包含一段客户端脚本程序
可位于任何位置。

1.8 注释：

文档中的说明文字，不会被浏览器执行。

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

<！--综合案例-->
<！DOCTYPE himl>
<himl>
chead>
<meta name="keywords"content=“宋词，苏轼"charset="utf-8"/>74
<meta name="description"content="本网站收录精选宋词“/
<title>宋词精选</title>
<style type="text/css">
text-align:center;
font-size:larger;
本例酒
</style>
</head>
<kbody 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" />
<！--水平线一->
<p align="center">网页制作教程Copyright&rcopy;广东南方职业学院</p ></body>
<hr size="2" color="black"width="100%"/>
</html>