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

小陆不胖

已于 2024-09-11 01:30:20 修改

阅读量420

点赞数 20

分类专栏： HTML 文章标签：学习笔记 html

于 2024-09-11 00:43:13 首次发布

本文链接：https://blog.csdn.net/m0_68332785/article/details/142090543

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习目标：

了解网站基础知识

学习内容：

1.1认识网页和网站

1.1.1网页和网站

网站（Website）：

是一个由一组相互关联的网页、图片、视频、数据库等组成的信息集合，通常有一个统一的域名，并通过服务器管理。它具有一定的结构和功能，可以包含静态内容（如HTML页面）和动态内容（如数据库查询结果）。比如，Google.com就是一个著名的网站。

网页（Web Page）：

则是构成网站的基本元素，每个网站都由多个独立的网页组成。网页是一种文件，通常是HTML（超文本标记语言）格式，包含了文字、图像、链接和其他多媒体元素，用户通过浏览器访问并查看，拓展名一般为"*.htm"、"*.html"

常用术语：

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

www、万维网，其功能是让web客户端（常用浏览器）访问web服务器中的网页

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

URL、统一定位符，指定通信协议和地址；如http：超文本传输协议、https则是超文本传输协议使用了ssl加密

IP、网际协议，Internet中的每台计算机都有唯一的IP地址，表示该计算机在Internet中的位置，通常分为A类、B类、C类，通常的网站为A类

HTTP、超文本传输协议是互联网应用最广泛的一种网络协议，所有www文件都必须遵循这个标准

FTP、文件传输协议，通过该协议，可以把一个文件传输到另一个地方

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

站点、一个站点就是一个网站上的所有内容所存放的文件夹。站点（Site）通常指的是一组有组织的在线信息资源集合，它可以包括多个网页、应用程序、数据库以及相关的服务。一个站点可能代表一个企业、政府机构、非营利组织、个人博客或者其他任何形式的内容平台。它通常拥有一个共同的主题或目的，并通过域名进行识别，例如新浪网就是一个新闻资讯站点。

超链接、

超链接（Hyperlink），也称为URL（Uniform Resource Locator），是一种互联网上常用的技术，用于在文档之间建立关联。它通常表现为文本、图像或按钮，当用户点击时，会引导用户从当前页面跳转到另一个网页、文件或其他在线资源。超链接由两部分组成：源地址（也叫href属性值）和显示给用户的文本或图标，后者就是用户看到并点击的部分。

在HTML中，创建超链接的基本语法是<a href="目标地址">链接文字</a>。通过这种方式，人们可以轻松地浏览网络，获取更多信息或导航到其他网站。超链接是万维网的核心，使得信息共享和全球连接成为可能。

客户机和服务器、

客户机（Client）和服务器（Server）是计算机网络中最基本的概念之一。客户机，又称为工作站或终端，通常是用户直接使用的设备，如个人电脑、手机等，它们发起请求并与网络通信，目的是访问、接收或处理服务。例如，当你打开浏览器查看网页时，你的电脑就是一个客户机。

服务器则是一个专门提供服务的设备，它可以运行各种应用程序，存储大量数据，并响应来自客户机的请求。服务器可以持续在线，处理众多客户端的并发请求，比如网站服务器处理HTTP请求，邮件服务器管理邮件收发，数据库服务器存储和检索数据等。

两者之间的交互是典型的客户端-服务器模式（Client-Server Model），这种模式促进了信息的共享和分布式计算，提高了系统的效率和可用性。

一个网站里面可以有很多网页，他们的关系并不是总分的关系

1.1.2.网页的静态和动态

HTML CSS

JavaScript

1.静态网页：

静态网页是指由HTML（超文本标记语言）等静态文件构成的网页，内容在发布时就已经固定，不会随用户的请求动态生成。这些页面通常包含文本、图片、链接等元素，其结构和样式是由程序员预先设计好的，当用户访问时，浏览器会直接读取并显示网页内容。

静态网页的优点包括简单快速、易于维护和不需要额外的服务器资源，因为它们不涉及复杂的服务器端脚本或数据库查询。创建静态网页的成本较低，适合内容更新不频繁的小型网站或博客。

它通常由纯粹的HTML、CSS语言编写的

2.动态网页：

动态网页是一种基于客户端/服务器模型的网页，与静态网页不同的是，动态网页的内容不是预先制作并存储在Web服务器上，而是由服务器端的脚本语言（如PHP、ASP、JSP等）根据用户的请求实时生成并发送给用户浏览器的。这种网页可以包含交互元素，如表单、数据库查询结果、时间戳等，因为它们的内容是在服务器端处理和计算之后才呈现给用户的。

动态网页的主要特点是：

内容更新实时：无需手动修改每个页面，通过后台管理界面可以轻松编辑和管理内容。
数据交互性强：能够与数据库连接，获取和处理用户提交的数据。
用户体验个性化：可以根据用户的行为和偏好提供定制化的信息。

1.2.网页的基本构成元素

导航栏、广告动画、图片、交互表单、文本和超链接

1.2.1.文本

文本具有体积小网络传输速度快等优点，可以使用户更快捷方便的浏览和下载文本信息

1.2.2.图片和动画

图片比文本更加生动和直观，可以传输一些文本无法表达的信息，具有强烈的视觉冲击，常有的拓展名有：jpg、png、gif、jpeg等

1.2.3.超链接

链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4. 音频和视频

严期成件习飲同页效果主降化，胸页中常用的路報格式有 mid 和mp3，其中 mP3 为压縮
文件，其压缩率非常高，音质也不错，是背景音乐的首选。
何题中的强额文件一般为D格式。它是一种基于BauhMX 的视频流格式，具有文件
小、加载速度快等特点，是网络视频格式的首选。

1.2.5. 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

1.2.6. 其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

网页色彩搭配是设计过程中关键的一环，它影响着网站的视觉效果、品牌形象以及用户体验。一个好的网页色彩搭配应该遵循以下几个原则：

对比度：高对比色有助于信息的清晰呈现，同时提高可用性，避免颜色太相近导致混淆。
品牌一致性：如果网站有品牌配色，应保持一致，强化品牌的识别度。例如，许多公司的主色调通常用于网站设计。
色彩心理学：不同的颜色能激发不同的情绪反应。比如蓝色通常给人平静的感觉，红色则更易引发行动欲望。
色彩理论：了解色彩三原色、互补色、类似色等基本原理，可以帮助创建和谐的色彩组合。
调色板选择：一般推荐使用不超过三种至四种颜色，以免过于复杂，影响浏览体验。
适应不同的背景：考虑网页将在各种背景下显示，确保文字易于阅读，背景不会影响主要内容的可见性。

合理运用色彩搭配技巧，可以使网页既美观又实用。

1.4 Web前端技术简介

1.4.1 初识WEB前端

即是指平常上网的网页

它主要包括HTML、CSS和JavaScript这三大核心技术：

HTML (HyperText Markup Language)：基础结构语言，负责页面的内容布局，如文本、图像、链接等元素的添加。
CSS (Cascading Style Sheets)：样式表语言，用于控制网页的外观，包括字体、颜色、布局、响应式设计等。
JavaScript: 动态脚本语言，允许网页与用户交互，执行一些动态功能，如表单验证、动画、游戏等。

除此之外，还有其他辅助技术，如DOM (Document Object Model)用于操作网页元素，AJAX (Asynchronous JavaScript and XML)用于异步数据加载，响应式设计让网页能在不同设备上自适应。

初学者需要理解前端开发的工作流程，从设计稿解析到编写代码，并通过浏览器预览检查结果。随着对工具（如Git、Webpack等）、框架（如React、Vue、Angular）以及现代前端技术栈的理解加深，可以构建出更高效、性能更好的Web应用。

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

1. HTML

HTMIL 是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”（Head）和“主体”（Body）两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。

2. CSS 语言

CSS是一种用来表现 HTML或XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

3. JavaScript 语言

JavaScript 是一种属于网络的脚本语言，已经被广泛地用于 Web 应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript 引擎，属于浏览器的一部分，因此 JavaScript 代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌人在 HTML中的方式来实现自身的功能。

万维网联盟（W3C）规定，Web 标准需要将网页的结构、样式和行为三者进行分离。
HTMIL +CSS+ JavaScript 本质上构成一个 MVC框架，即 HTNL用于描述网页的结构（Model），CSS 用于描述网页的样式（View），JavaScript 用于描述网页的行为即调度数据和实现某种展现逻辑（Controller）。
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构（HTML.）。然后给房子刷上油漆和添加窗户，对房子样式进行美化（CSS）。最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScrijpt），这样房子才算搭建完毕。

1.4.3 前端开发工具

"工欲善其事，必先利其器。"在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具：浏览器、网页编译器和切图软件

1.4.3.1 浏览器

浏览器是网页的运行平台，是可以把 HTML.文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE 浏览器、Chrome 浏览器、Firefox 浏览器、Safari 浏览器和 Opera浏览器等，如图1-2所示。由于某些因素，这些浏览器没有完全采用统一的Web 标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏

目前市面上主流的浏览器有：Chrome、Microsoft Edge、火狐浏览器、CentBrowser、360急速浏览器

接下来本学习系类将以Chrome浏览器为主学习前端网页开发

1.4.3.2 网页编译器

HTML，CSS和JavaScript源代码文件均以纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编写源代码内容，以下是几款常用的网页开发工具：

1） Adobe Dreamweaver

Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国 Macromedia 公司发布的，该公司于2005年被 Adobe 公司收购。Dreamweaver 也是当时第一套针对专业 Web 前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。
Dreamweaver 支持 HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。Dreamweaver也有它的弱点，由于不同浏览器之间存在兼容性问题，Dreamweaver的预览图难以达到与所有浏览器完全一致的效果。

2） Sublime Text

Sublime Text 的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

3） NotePad + +

NotePad ++的名称来源于 Windows 系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持 UTF-8技术，它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

4） EditPlus

EditPus是由韩国 Sangil Kim （ES-Computing）公司发布的一教文字编制，文持HTML,CSS, JavaScript, PHP和JAVA等多种计算机程序的语法常亮显示与代码折叠功能。其中最具有特色的是EditPlus具有自动完成功能。

5） HBuilder

HBuilder 是由DCloud（数字天堂）推出的一款支持 HTMLS 的Web开发IDE。HBuilder 主要用于开发 HTML, JS（JavaScript）和 Css，同时配合 HTML 的后端脚本语言如 PHP 和JSP 也可以适用，还有前端的预编译语言如less 以及人们钟爱的 markdown 都可以良好地进行编辑。从2013.年夏天发布至今，HBuilder 已经成为业内主流的开发工具。
目前，HBuilderX 发布了1.0正式版

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

HTML 是Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1. 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行 HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML.编写的超文本文档称为 HTML文档，它能独立于各种操作系统平台。自1990年以来 HTML 就一直被用作www的信息表示语言，使用HTML.描述的文件，需要通过 Web 浏览器 HTTP 显示出效果。

1.5.1.2. 超文本

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

1.5.1.3. 标记

HTMI.5 实际上不算是一种编程语言，而是一种标记语言。HTMLS 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML 中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>” 符号以及一个字符串组成。如＜head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“＜标签名字属性>”来表示。标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如＜head></head>，<body> </body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要
在左尖括号后添加一个关闭符“/”。
HTML. 只是一个纯文本文件。创建一个 HTML 文档，需要 HTML.编辑器和 Web 浏览器两个工具。HTML编辑器是用于生成和保存 HTML 文档的应用程序。Web 浏览器用来打开Web 网页文件，提供查看 Web 资源的客户端程序。

1.5.2 HTML 基本结构

HTMIL 文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML.用标签来规定元素的属性和它在文件中的位置，HTML 文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

<!--实例1-->
<!  DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML 文档结构</title>
    </head>

    <body>
        <p>HTML 文档结构由head,body 标记组成</p>
        <h3>标题3</h3>
    </body>
</html>

运行结果如图：

1.5.2.1. HTML 文档标签<html>•••＜html>

HTML文档标签的格式为


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

<!--
<html>处于文档的最前面，表示 HTML文档的开始，即浏览器从＜html>开始解释，直到遇到</html>为止。
每个 HTML 文档均以<html>开始，以</html>结束
-->

1.5.2.2. HTML 文档头标签<head>••</head>

HTML 文档包括头部（head）和主体（body）。

HTML文档头标签的格式为

<head>头部的内容</head>

<!--
文档头部内容在开始标签<html>和结束标签＜/html>之间定义，
其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
-->

1.5.2.3. 文档编码

文档编码格式如下：

<meta charset = "utf-8" />
<!--
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。
文档申明的编码应该与实际编码一致，否则会成乱码。
对于中文网页的设计者来说，用户一般使用GB2313（简体中文）。
-->

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

HTML文档猪蹄标签的格式为：

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

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

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个 HTML 文件，通过它来学习网页的编辑、保存过程。

1）使用HBuilder 新建项目

依次点击选择“文件”一“新建”一“项目”，如
图：

2）创建项目名称

设置项目所在位置确定即可，完成之后会在左边的项目栏管理器中出现，如图：

3）打开项目

在项目文件夹里可以看到里面有首页index.html，js文件夹，css文件夹和图片的文件夹，基本俱全。如图：

4）编写代码

到了这一步就可以开始编写网页代码了，可以直接在index.html中编写代码。也可以新建html文件编写，如图：

5）新建html文件

在 “创建文件向导”对话框里，选择好文件所在的目录，并为文件命名，如图：

6）开始编写代码

示例代码：

<!--示例程序-->
<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8"/>
		<title>我的第一个网页</title>
	</head>
	<body>
		开始学习网页设计与制作！
		<hr size = " 3" color = " black" >
		<a href="https://blog.csdn.net/m0_68332785">博客</a>
		<script type="text/javascript">
		document.write（ "链接到我的博客"）；
		</script>
	</body>
</html>

如图

7）运行网页

执行菜单栏的“运行”-->“浏览器运行”->Chrome

结果如图：

1.7 网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的CSS 样式文件和客户端的 JavaScript 脚本文件等。其中，页面标题及页面描述称为页面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一个搜索引擎也会由于页面的实际情况而有所不同。一般情况下，搜索引擎会提取页面标题标签中的内容作为摘要信息的标题，而描述则常来自页面描述标签的内容或直接从页面正文中截取。如果希望自己发布的网页能被百度等搜索引擎搜索，那么在制作网页时就需要注意编写网页的摘要信息。

1.7.1 <title>标签

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

<title>京东（JD. COM）-正品低价、品质保障、配送及时、轻松购物！</title>

打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽得文档头部定义的信息很多，但能在测览器标题栏中显示的信息只有标题内容

1.7.2＜meta>标签

1. keywords

keywords 用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关键字设置如下：

<meta namne="keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东"/>

2. description

description 用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容描述设
置如下：

<meta name=" description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/＞

当浏览者通过百度搜索引擎（百度）搜索“京东”时，就可以看到搜索结果中显示出
网站主页的标题、关键字和内容描述

1.7.3<link>标签

<link rel="stylesheet" href="外部样式表文件名.css"type="text/css”/>

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

1.7.4<script>标签

<script type="text/css" src="脚本文件名n.js"></script>

1.8 HTML5 文档注释和特符号

1.8.1 注释

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

如：

<!--这是单行注释不参与运行不常亮-->
<body>这是一个主体，编译器会对其进行常亮显示</body>
<!--
这是多行注释
和单行注释是共用一种注释方式
-->

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符实体见表。这些字符实体都以“&”开头，以“;”结束。

特殊符号	字符实体	实例
空格		学海无涯 苦作舟
大于（>）	>	3>2
小于（<）	<	2<3
引号（" ）	"	"名字"
版权号（©）	©	Copyright©网页设计教程

学习产出：

CSDN 技术博客 1篇
CSDN学习笔记1篇

小陆不胖

关注

20
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML·第一章网页制作的基础知识

即是指平常上网的网页：基础结构语言，负责页面的内容布局，如文本、图像、链接等元素的添加。：样式表语言，用于控制网页的外观，包括字体、颜色、布局、响应式设计等。JavaScript: 动态脚本语言，允许网页与用户交互，执行一些动态功能，如表单验证、动画、游戏等。除此之外，还有其他辅助技术，如DOM (Document Object Model)用于操作网页元素，AJAX (Asynchronous JavaScript and XML)用于异步数据加载，响应式设计让网页能在不同设备上自适应。
复制链接

扫一扫