2.认识并理解HTML

Vincent_TangM

已于 2023-10-09 21:59:11 修改

阅读量71

点赞数

分类专栏： web前端文章标签： html 前端

于 2023-10-09 19:22:50 首次发布

本文链接： https://blog.csdn.net/Vincent_TangM/article/details/133697784

版权

web前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1 HTML历史

1.1 万维网（world wide web）由蒂姆·博纳斯·李发明，他在1990年成功推出了世界上第一个万维网——一种全球性的、基于图形界面的计算机网络。用户可以通过网页浏览器输入超文本链接（Hyperlinks），查看其他计算机上的信息。

1.2 1994年建立万维网联盟（w3c），制定网页开发的标准。

1.3 根据w3c标准，一个网页主要由三部分组成，结构（HTML）、表现（CSS）和行为（JavaScript），HTML用于描述网页的结构，CSS用于控制页面元素的格式，JavaScript用于相应用户的操作。

2 深入理解HTML

HTML（HyperText Markup Language）是一种超文本标记语言，告知浏览器如何组织页面的标记语言，它负责网页的三个要素之中的结构，HTML使用标签的形式来表识网页中的不同组成部分，这些标签可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作，两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

什么是（纯）文本，纯文本是一种简单的文本格式，它不包含任何格式化元素，例如字体、颜色、大小、背景色、下划线、斜体、粗体、段落格式等等。常见的纯文本编辑器有：记事本、Notepad++、Sublime Text、Atom、VIM等。它是一种仅包含文本的文档，只存储和传输文本信息。纯文本编辑器如window系统的notepad记事本编写的文本文件就是文本，它里面字体的格式样式（颜色大小）不能被保存下来，用纯文本编辑器写下来的只是简单的文本。还有我们平时编写的代码也是纯文本。

什么是富文本，富文本是一种包含格式元素的文本，例如字体、颜色、大小、背景色、下划线、斜体、粗体、段落格式等等，常见的富文本编辑器有：word、WPS、HTMLBox、Jquery富文本编辑器、CKEditor、TinyMCE、Quill等。用Word写下来的不是纯文本，是富文本（Rich Text），因为它能保存很多信息（包含格式元素的文本，例如字体、颜色、大小、背景色、下划线、斜体、粗体、段落格式）。

3 HTML的组成部分

一个网页主要分为三个部分：头部（header）、内容区（content）、底部（bottom）。

一个HTML的基本结构包括文档声明和html，html里面包含head（头部）和body（主体）；head里面包含有charset（设置网页的字符集）、title（网页标题）等；body里面包含有各种html的标签。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

1.<!DOCTYPE html>: 声明文档类型。HTML有多个版本，例如HTML 4.01、XHTML 1.0等，现在普遍用的是html5。不同的文档类型规则不一样，告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义（DTD）来解析文档；早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。

2.<html></html>: <html> 元素。这个元素包裹了页面中所有的内容，有时被称为根元素。

3.<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。

4.<meta charset="utf-8">: <meta>元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如 <base>、<link>、<script>、<style> 或 <title>。charset属性将你的文档的字符集设置为 UTF-8，浏览器按照设置的字符集对html内容进行解析，使得正确结果出现在我们眼前，如果字符集不匹配页面会出现乱码。

5.<title></title>: <title>元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。

6.<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

包含这几部分结构的html是一个完整的html。

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

	<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
	<head>

		<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>

	</head>

	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
	<body>

		<!-- h1网页的一级标题 -->
		<h1>网页的大标题</h1>

	</body>

</html>

注意head里面的title和body里面h1标签的区别，例如上面html运行后的结果如下：