什么是 HTML？
HTML 的全称是 HyperText Markup Language，即“超文本标记语言”。
- 超文本：它不仅仅是普通的文本，还可以包含图片、链接、音频、视频、表格等各种元素，并且可以通过链接跳转到其他页面。
- 标记语言：它不是一种编程语言（没有逻辑、循环、变量），而是通过 来“标记”内容的结构和含义，浏览器会解析这些标签，然后将内容渲染成我们看到的网页。
一个简单的比喻：
HTML 就像一份房子的设计图纸。<header> 是房顶，<body> 是房屋主体，<p> 是一段文字描述，<img> 是一幅挂在墙上的画，浏览器就是施工队，它严格按照这份图纸（HTML代码）来建造（渲染）出房子（网页）。
（图片来源网络，侵删）
HTML 的基本结构
一个完整的 HTML 文档都有一个固定的、标准的结构，所有网页内容都写在这个结构里。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落。</p>
</body>
</html>
我们来逐行解析这个结构：
-
<!DOCTYPE html>- 文档类型声明，它告诉浏览器，这个文件是一个 HTML5 文档，这是 HTML5 的标准写法，必须放在文件的最开头。
-
<html lang="zh-CN">...</html>
（图片来源网络，侵删）- 根元素，所有 HTML 内容都包含在
<html>标签内。 lang="zh-CN"是一个属性，指明网页的语言是中文（中国），有助于搜索引擎和屏幕阅读器更好地理解页面。
- 根元素，所有 HTML 内容都包含在
-
<head>...</head>- 文档头，它包含了页面的元数据（metadata），即关于数据的数据，这些内容不会直接显示在页面上，但提供了页面的重要信息。
<meta charset="UTF-8">: 声明字符编码为UTF-8，这是一个国际通用的编码，可以显示包括中文在内的各种语言。非常重要！<meta name="viewport" ...>: 用于响应式网页设计，确保在移动设备上能正确显示。<title>...</title>: 会显示在浏览器的标签页上，也是搜索引擎收录时的重要参考。
-
<body>...</body>- 文档体，这是网页的，所有用户能看到的东西，比如文字、图片、链接、视频等，都写在这里。
HTML 核心概念
HTML 的基本构成单位。
- 语法：通常由开始标签、和结束标签组成。
- 开始标签：
<标签名> - 结束标签：
</标签名> <p>这是一个段落。</p>
- 开始标签：
- 自闭合标签的标签，通常在开始标签中加一个斜杠 来闭合。
<img src="image.jpg" alt="一张图片">或<br>(换行)。
元素
一个 HTML 元素由开始标签、和结束标签共同构成。<p>这是一个段落。</p> 就是一个完整的段落元素。
（图片来源网络，侵删）
属性
为标签提供额外信息的“修饰词”。
- 语法：
<标签名 属性名="属性值"> - 特点：
- 属性写在开始标签内。
- 属性和标签名之间用空格隔开。
- 一个标签可以有多个属性,用空格隔开。
- 常见属性：
id: 元素的唯一标识符，在整个页面中必须是唯一的，常用于 CSS 样式和 JavaScript 操作。class: 元素的类名，一个元素可以有多个类名，多个元素也可以共享同一个类名，常用于 CSS 样式。src: (source) 指向外部资源（如图片、视频、脚本）的路径。alt: (alternative) 图片无法显示时的替代文本，对 SEO 和可访问性非常重要。href: (hyperreference) 链接的目标地址。
常用 HTML 标签分类
标签
| 名称 | 描述 | |
|---|---|---|
<h1> - <h6> |
标题标签 | <h1> 是最重要的标题，<h6> 是最次要的，一个页面通常只有一个 <h1>。 |
<p> |
段落标签 | 用于定义一个文本段落。 |
<strong> 或 <b> |
加粗标签 | <strong> 语义上表示“重要性”，<b> 表示“视觉上突出”，推荐使用 <strong>。 |
<em> 或 <i> |
斜体标签 | <em> 语义上表示“强调”，<i> 表示“视觉上倾斜”，推荐使用 <em>。 |
<br> |
换行标签 | 强制文本换行。 |
<hr> |
水平线标签 | 创建一条水平分割线。 |
<blockquote> |
引用标签 | 用于引用一段较长、独立的内容。 |
<q> |
短引用标签 | 用于引用一小段文本。 |
列表标签
| 名称 | 描述 | |
|---|---|---|
<ul> |
无序列表 | 列表项前是圆点、方块等。 |
<ol> |
有序列表 | 列表项前是数字、字母等。 |
<li> |
列表项 | 用于定义列表中的每一个项目。 |
示例：
<!-- 无序列表 --> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> <!-- 有序列表 --> <ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>
链接和图片标签
| 名称 | 描述 | |
|---|---|---|
<a> |
锚点标签 | 用于创建超链接。 |
<img> |
图片标签 | 用于在页面中嵌入图像。 |
示例：
<!-- 链接 --> <a href="https://www.google.com" target="_blank">访问 Google</a> <!-- href 指向链接地址，target="_blank" 表示在新标签页打开 --> <!-- 图片 --> <img src="path/to/your/image.jpg" alt="美丽的风景" width="300"> <!-- src 是图片路径，alt 是替代文本，width 是宽度 -->
容器标签（布局基础）
| 名称 | 描述 | |
|---|---|---|
<div> |
区块容器 | 一个没有特定语义的块级容器，常用于布局和分组其他元素。 |
<span> |
器 | 一个没有特定语义的行内容器，常用于对一小段文本进行样式或操作。 |
示例：
<div style="background-color: lightgray; padding: 10px;"> <h2>这是一个标题</h2> <p>这是 <span style="color: red;">红色</span> 的文字。</p> </div>
表格标签
| 名称 | 描述 | |
|---|---|---|
<table> |
表格 | 创建一个表格。 |
<tr> |
表格行 | (table row) 创建表格中的一行。 |
<td> |
表格单元格 | (table data) 创建一个单元格。 |
<th> |
单元格 | (table header) 创建一个表头单元格，文字会加粗居中。 |
<thead> |
表格头部 | 定义表格的头部内容。 |
<tbody> |
表格主体 | 定义表格的主体内容。 |
HTML 与 CSS、JavaScript 的关系
HTML、CSS 和 JavaScript 是构建现代网页的“三剑客”，它们各司其职：
- HTML (结构)：负责定义网页的，它回答了“这是什么？”的问题（这是一个标题，这是一段文字，这是一张图）。
- CSS (样式)：负责美化网页的外观和布局，它回答了“它应该长什么样？”的问题（文字是红色、居中，背景是蓝色，图片大小是 200x200 像素）。
- JavaScript (行为)：负责实现网页的交互和动态效果，它回答了“它应该做什么？”的问题（点击按钮后弹出提示框，表单提交前进行验证，图片轮播）。
简单比喻：
- HTML 是房子的钢筋水泥结构。
- CSS 是房子的装修和油漆。
- JavaScript 是房子的智能家居系统（开关灯、控制窗帘）。
如何开始写 HTML？
- 文本编辑器：使用任何代码编辑器，如 VS Code (强烈推荐)、Sublime Text、Notepad++ 等，不要用记事本，因为它不支持代码高亮。
- 创建文件：新建一个文件，将其命名为
index.html(这是网站首页的通用名称)。 - 编写代码：将上面的“基本结构”模板复制进去，然后开始添加你的内容。
- 在浏览器中查看：保存文件，然后用浏览器（如 Chrome、Firefox、Edge）打开这个
index.html文件，你就能看到你写的网页了。
HTML 是一门非常简单但至关重要的语言，掌握它的基本常识，你就掌握了构建万维网的基础，记住核心：用标签构建结构，用属性提供信息，让浏览器来渲染内容，从模仿开始，多写多练，很快你就能熟练掌握它。
