HTML基础总结

最新推荐文章于 2026-03-09 22:50:59 发布

原创最新推荐文章于 2026-03-09 22:50:59 发布 · 1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

17 篇文章

订阅专栏

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过使用各种标签来定义网页的结构和内容，告诉浏览器如何显示网页。HTML 文档由标签和文本组成，标签用于描述文本的性质和结构。

HTML 的发展恰似一部波澜壮阔的史诗，历经多个重要阶段：

1989 年，蒂姆・伯纳斯・李发明了 HTML，最初的版本非常简单，主要用于定义文本的标题、段落和链接等基本元素。1995 年，HTML 2.0 发布，开始被广泛认可，增加了表格、表单和图像等功能。

HTML 3.2 和 HTML 4.0 相继推出。HTML 3.2 引入了更多的标签和属性，如字体样式、颜色、列表样式等。HTML 4.0 则引入了样式表（CSS）概念，实现了网页样式和布局与内容的分离，同时增加了框架、表单验证等新特性。

W3C 致力于推动 HTML 的标准化，确保不同浏览器和设备能正确显示网页。HTML 在各个领域广泛应用，发展较为稳定。

2008 年开始制定 HTML5 标准，引入了视频、音频、画布、本地存储、离线应用等众多新功能，极大地提升了网页的多媒体和交互效果。2014 年 HTML5 正式发布后，迅速成为网页开发主流标准，各大浏览器厂商纷纷支持。

前面我们了解到HTML是通过各种标签来定义网页的结构与内容，下面通过一个简单的示例让我们来了解组成网页的基本结构有哪些：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页的标题</title>
</head>
<body>
  网页展示的内容
</body>
</html>

<!DOCTYPE html>：此乃声明文档类型为 HTML5，是 HTML5 文档的标准开篇之笔。
<html>：作为根元素，犹如一座宏伟的大厦，包含着整个网页的丰富内容。
<head>：头部元素恰似大厦的顶层设计，包含网页的元数据，如字符编码、标题、样式表链接、脚本链接等。其中，<meta charset="UTF-8">用于指定网页的字符编码为 UTF-8，确保网页能够精准无误地显示各种字符。
<title>：这个标签犹如大厦的铭牌，定义了网页的标题，骄傲地展示在浏览器的标题栏上。
<body>：主体元素仿佛大厦的主体结构，包含网页的实际内容。

被head标签包裹的子标签内容犹如幕后英雄，不会在网页上直接显现。它们主要用于存放外部资源链接地址以及进行网页相关配置等。

常用标签：meta、title、style、script、link等；这些标签含义信息在之后会有专门总结，这里只是简单罗列增加印象。

body标签包裹的子标签内容则是舞台上的主角，会全部展现在界面之上，主要负责排版页面结构信息。

常用标签：h1~h6、p、div、ul、img、a、input、table等

在 HTML 的世界里，注释就像是贴心的备注。可以使用注释来记录代码的用途和解释，它们犹如隐藏在代码背后的智慧之声，虽不会在浏览器中显示，却为开发者提供了极大的便利。注释的格式为 。

<!--<div>被注释的内容</div> -->
<div>正常展示内容</div>

标签如同拥有魔法口袋的精灵，可以具有属性。属性为标签提供了额外的信息，就像是为精灵赋予了特殊的能力。例如，<img src="image.jpg" alt="图片描述">中的 src 和 alt 就是 <img> 标签的属性。属性通常以 “属性名 = 属性值” 的形式出现。

每个标签都可以设置特定属性，也可以自定义属性，这个后面会专门总结整理；敬请期待。

HTML 基础语法是网页开发的基石。通过掌握 HTML 的基本结构、常用标签和属性，以及如何添加注释，可以创建出结构清晰、内容丰富的网页。随着不断的学习和实践，可以打造出更加精彩的网页内容。