Html5
HTML 入门教程
这是一篇面向初学者的 HTML 入门教程，讲解 HTML 是什么、基本结构和实际应用场景。
🎯 引言
在你学会这篇 HTML 入门文章之后，你就拥有了构建网页的“第一把钥匙”。HTML 是网页的骨架，掌握它之后，你可以做的事情包括：
- 搭建自己的个人主页
- 撰写博客文章并发布到网上
- 理解网页背后的结构原理
- 为后续学习 CSS 和 JavaScript 打下基础
- 阅读和修改网页源代码，增强网页内容可控性
简而言之，只要你想在网页上展示信息、发布内容或者进入前端开发的世界，HTML 就是你绕不开的第一课。
💡 什么是 HTML？
HTML 是 HyperText Markup Language 的缩写，中文叫做“超文本标记语言”。它是一种用来构建网页内容的语言。注意，它不是编程语言，而是一种标记语言，负责告诉浏览器“页面上应该显示哪些内容，以及这些内容的结构”。
HTML 的主要作用
| 功能 | 描述 |
|---|---|
| 内容呈现 | 呈现文本、图片、链接、视频、表格等各种网页元素 |
| 页面结构 | 将网页划分为标题、段落、列表、导航栏、页脚等结构 |
| 语义表达 | 通过特定标签表达“这是标题”“这是列表”等语义，方便搜索引擎和辅助工具 |
| 与 CSS/JS 协作 | 搭配 CSS 做样式美化，搭配 JavaScript 增加交互能力 |
📘 什么是超文本和标记语言？
超文本（HyperText）
普通文本只能线性地从头读到尾，而“超文本”提供了一种非线性阅读方式。例如通过 超链接（Hyperlink），你可以点击一个文字跳转到另一个页面、段落、文件或网站。另外可以插入图片、视频、图表、表格等非文本内容。
<a href="https://example.com">点我访问网站</a>
标记语言（Markup Language）
“标记”指的是通过特殊的符号对内容进行说明和结构化，比如：
<h1>这是一级标题</h1>
<p>这是一个段落内容。</p>
HTML 使用尖括号包裹的标签（如 <p>）告诉浏览器这些文字的意义和显示方式。
🧱 HTML 页面结构详解
一个标准的 HTML 页面通常包括以下几个部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是正文部分。</p>
</body>
</html>
页面结构解析表
| 标签 | 功能说明 |
|---|---|
<!DOCTYPE> | 声明文档类型，告诉浏览器使用 HTML5 解析方式 |
<html> | 所有 HTML 内容的根标签 |
<head> | 页面“头部”，写一些元信息，不显示在网页中 |
<meta> | 设置网页字符编码等信息（建议使用 UTF-8 编码） |
<title> | 网页标题，会显示在浏览器标签页 |
<body> | 页面“身体”，所有显示在网页上的内容都写在这里 |
常用结构标签示意
| 标签 | 作用 | 示例文本 |
|---|---|---|
<h1>~<h6> | 标题等级，h1 是最大标题 | <h1>主标题</h1> |
<p> | 段落文本 | <p>一段话。</p> |
<a> | 超链接 | <a href="#">链接</a> |
<img> | 插入图片 | <img src="logo.png" alt="logo"> |
<ul> | 无序列表 | <ul><li>项1</li></ul> |
<ol> | 有序列表 | <ol><li>第一</li></ol> |
<div> | 区块分组，无语义 | <div>区块</div> |
<span> | 行内容分组，无语义 | <span>内容</span> |
🧾 小节总结
- HTML 是构建网页的标记语言，非编程语言
- HTML 使用标签来描述网页结构和内容
- 一个标准 HTML 页面包括文档声明、
head和body区域 - 掌握结构标签，是写出网页的第一步
- HTML 不处理样式与交互，但能和 CSS、JavaScript 协作使用
❓ 知识问答（Q&A）
Q：HTML 是编程语言吗？
A：不是，它是一种标记语言，主要作用是构建网页内容结构。
Q：为什么 HTML 要有语义？
A：语义化标签能让搜索引擎更容易理解网页，也方便读屏软件为残障用户服务。
Q：一个网页必须要有 <head> 吗？
A：不必须，但建议有。里面可以写标题、字符编码、引入 CSS 等信息。
🧪 小练习
练习 1：创建一个简单网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>练习网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个 HTML 页面。</p>
<a href="https://www.example.com">点我访问网站</a>
</body>
</html>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：添加图片和列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片与列表</title>
</head>
<body>
<h2>我喜欢的水果</h2>
<ul>
<li>🍎 苹果</li>
<li>🍌 香蕉</li>
<li>🍇 葡萄</li>
</ul>
<img src="https://via.placeholder.com/150" alt="示例图像" />
</body>
</html>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握 HTML 的基本概念、语义标签、结构写法、以及网页内容组织方式啦！接下来我们可以继续深入学习 CSS 和 JavaScript，让你的网页动起来，变漂亮！