出于现在AI的发展越来越快，单纯的前后端已经不再被认可，前段时间尝试用AI写前后端代码，也就是市面上的全栈开发，发现前端代码看不懂，很多时候就类似于在用AI生成漫剧，也就是我们常说的"抽卡"，所以笔者决定从今天开始学习前端，这篇是HTML入门教程。
1.HTML是什么？
首先，在入门HTML之前，我们需要先知道什么是HTML。
1. 它不是编程语言，而是"标记语言"
编程语言（如 Python、Java）有逻辑判断、循环、计算功能，像"大脑"。
HTML 没有这些运算能力，它像一支"荧光笔"------通过标签 （如
<h1>、<p>、<img>）给文本内容"涂上不同的颜色"并贴上标签，告诉浏览器："这是标题"、"这是段落"、"这是一张图片"。2. 它是网页的"骨架"
如果把网页比作一个人：
HTML 是骨骼（决定哪里是头、哪里是手、哪里是脚）。
CSS 是皮肤和衣服（决定颜色、大小、间距，负责美观）。
JavaScript 是肌肉和动作（决定点击、滑动、弹窗等交互功能）。
没有 HTML，CSS 和 JS 就无处附着。
3. 它是怎么工作的？
浏览器的核心工作就是"读取"并"翻译" HTML 文件：
你写了一段代码：
<h1>你好，世界</h1>浏览器读到这个尖括号标签 ，就知道要把"你好，世界"这几个字加粗放大显示，并且语义上作为"一级标题"。
浏览器按从上到下的顺序"解析"代码，把页面渲染在屏幕上。
2.HTML的标准模板
HTML虽然作为一个标记语言，但是和JAVA、Python这些编程语言一样，也有所谓的"标准范式"。
最基本的"标准模板"代码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<!-- 这里写所有显示在页面上的可见内容 -->
你好，世界！
</body>
</html>2.1. 第一层：文档声明（最顶上）
<!DOCTYPE html>
作用：这行必须写在最顶部，告诉浏览器："请使用最新的 HTML5 标准来渲染这个页面"。如果不写，浏览器可能会进入"怪异兼容模式"，导致页面排版错乱。
2.2. 第二层：头部（<head> 标签）------ 幕后工作者
这部分内容是不显示在页面上的，专门给浏览器和搜索引擎看的，负责配置"后台"：
-
<meta charset="UTF-8">：设置字符编码为国际通用标准，防止出现乱码（必须写）。 -
<meta name="viewport"...>：让页面在手机等移动设备上显示得舒服（适配移动端必须写）。 -
<title>：定义网页的标题，也就是浏览器标签页上显示的文字（必须写）。
2.3. 第三层：身体（<body> 标签）------ 台前演员
作用 ：你在浏览器页面上能看到的所有内容 （文字、图片、按钮、视频、包括你刚问的 <hr> 和 <br> 标签）都必须 写在 <body> 和 </body> 之间。
其中在
<html>标签里，<head>和<body>是亲兄弟关系（平级） ，并且必须严格按照 先head后body的顺序写，绝对不能交叉嵌套。
3.前端开发工具：VSCode，HBuilder，小程序开发者工具
这三款工具正好覆盖了前端开发的三个不同维度 ：通用代码编辑器 、专属框架IDE 、平台专属调试器 。它们不是"谁替代谁"的关系，在实际工作中，开发者经常把它们组合起来使用。
3.1. VS Code（通用开发工具）
定位 ：当下全球最流行的通用代码编辑器（微软出品）。
-
优点：插件生态极其强大（几乎你能想到的功能都有插件）、完全免费、启动速度快、Git版本控制集成顺滑。无论是Vue、React还是Node.js后端，它都能完美胜任。JAVA开发也可以通过插件来进行开发。
-
缺点：对于特定框架（如uni-app）的专属语法提示，需要自己花时间配置；调试手机真机时需要额外安装插件，稍显繁琐。
-
适用场景 ：主力开发工具。适合所有前端项目（Vue/React/Angular/原生JS）。
3.2. HBuilderX（专精利器）
定位 ：国产厂商DCloud出品的轻量级IDE，专为Vue和uni-app（跨平台小程序）深度优化。
-
优点 ："开箱即用" 。如果你做uni-app，它内置了完整的语法提示、代码块和Android/iOS真机调试基座，一键就能运行到手机。内置浏览器预览功能极其流畅。中文界面和帮助文档对新手非常友好。
-
缺点：插件市场远不如VS Code丰富；如果你做React或纯后端开发，它并不擅长；且插件扩展性受限于官方生态。
-
适用场景 ：uni-app 开发首选，或纯Vue2/Vue3项目且不想折腾配置时的绝佳选择。
3.3. 小程序开发者工具（官方刚需）
定位 ：微信/支付宝/抖音等官方推出的平台专属调试工具（以微信开发者工具为例）。
-
优点 ：集成了小程序独有的API模拟 （如登录、支付、位置）、真机预览 （生成二维码扫码看）、性能检测 （内存/CPU占用）和上传发布功能。你不装它，就无法在微信生态里调试和提交代码。
-
缺点 ：写代码的体验很差（语法提示迟钝、卡顿、字体UI老旧）。基于Chrome内核，占用内存较大。
-
适用场景 ：仅用来调试和发布。几乎没人拿它当主力编辑器。
这里根据日常需求挑选即可，不同工具之间没有绝对的好坏，满足你的开发需求即可。
4.VSCode中需要安装的插件
4.1.Chinese (Simplified) 中文语言包
界面汉化。装完后重启VS Code，菜单、设置栏全部变为简体中文，对新手消除英语恐惧非常友好。
4.2.HTML CSS Support
智能补全。在HTML中写 class 或 id 时，它会自动弹出你在CSS文件里定义好的样式名称，避免手打拼写错误。
4.3.Auto Rename Tag
自动重命名标签。修改一对标签中的开始标签（如 <div>）时，它会自动同步修改对应的闭合标签（</div>），省去前后找的麻烦。
4.4.Live Server
热更新服务器。右键HTML文件启动后，它会开启一个本地端口，每次你保存代码（Ctrl+S），浏览器页面就会自动刷新显示最新效果，写样式时极其顺手。
5.VSCode一键创建HTML模板
在 VS Code 里实现"一键创建"极其简单，只需要两个步骤：
5.1. 操作步骤
-
第一步 ：新建一个文件，必须 点击右下角将其保存为
.html后缀（例如index.html）------这一步是关键 ，否则代码无法生效。
-
第二步 ：在空白文件中输入
!（英文感叹号），然后按下键盘上的Tab键 （或Enter键）。
2. 瞬间生成的代码
按下后，VS Code 会自动补全出之前的标准 HTML 骨架 ：
三个
!!!：只生成文档类型声明<!DOCTYPE html>，不带任何其他标签。
6.如何直观的看到HMTL导致的前端样式改变？
右键html文件，通过我们前面安装的插件，动态刷新页面效果。
7.HTML的标签
HTML 标签数量众多（有 100 多个），但作为新手，我们只需要熟练掌握 20 个左右，就能搭建出 90% 的常见页面了。
首先，我们要理解，HTML的标签分为双标签和单标签，本质上就是看标签名里**有没有"斜杠 /"。**记住这个底层逻辑：
双标签（绝大多数） ：有开始 （
<p>）和结束 （</p>），中间夹着内容。结束标签带斜杠。单标签（空元素） ：没有 内容可以包裹，自己一个人就能完成功能，所以不需要结束标签。常见的就是
<br>、<hr>、<img>、<input>。
7.1. 骨架结构（页面地基）
每个页面都必须有的"三件套"，你按 ! + Tab 生成的就是它们：
|-----------------|-------------------------------|
| <html>（双） | 整个网页的根容器。 |
| <head>（双） | 幕后配置区（标题、编码、引入CSS），内容不显示在页面上。 |
| <body>（双） | 台前展示区，所有可见内容都必须写在这里面。 |
7.2. 文本与排版（最常用）
|-------------------------|-----------------------------------|
| <h1> ~ <h6>（双） | 标题标签，数字越小字越大（<h1> 最大，一页建议只用一次）。 |
| <p>（双） | 段落标签，会自动撑开上下间距。 |
| <br> （单） | 强制换行。 |
| <hr> （单） | 水平分割线（你问过的）。 |
| <strong>（双） | 加粗文字（表强调）。 |
| <em>（双） | 斜体文字（表语气强调）。 |
7.3. 链接与图片（让网页"活"起来）
|---------------------|-----------------------------------------|
| <a>（双） | 超链接，核心属性是 href="网址"。 |
| <img> （单） | 插入图片，核心属性是 src="图片地址" 和 alt="替代文字"。 |
7.4. 列表与容器（布局排版）
|-----------------|-----------------------------------------|
| <ul>（双） | 无序列表（前面带圆点），配合 <li>（双）使用。 |
| <ol>（双） | 有序列表（前面带数字），配合 <li>（双）使用。 |
| <div>（双） | 块级容器（独占一行），用来把一块内容包起来分组，最最最常用的布局盒子。 |
| <span>（双） | 行内容器（不换行），专门用来单独选中一段文字中的几个字改颜色或样式。 |
7.5. 表格与表单（数据交互）
|-----------------------|-----------------------------------------------------|
| <table>（双） | 表格，配合 <tr>（行）、<td>（单元格）、<th>（表头）。 |
| <form>（双） | 表单，用来提交数据（如登录框）。 |
| <input> （单） | 输入框，核心属性是 type="text"（文本）或 type="password"（密码）。 |
| <button>（双） | 按钮。 |
8.HTML的属性
HTML 属性（Attribute） 是放在开始标签 里用来修饰标签 的"额外配置信息"。我们可以把它理解为给标签添加的"参数"，决定了标签"长什么样"或"跳到哪里去"。
核心语法格式：
<标签名 属性名="属性值">内容</标签名>
（注意：属性和标签名之间用空格隔开）
最常用的属性分成了三大类：
8.1. 全局属性（几乎所有标签都能用）
-
class：给标签起一个"类名"（可以重名），主要用于 CSS 批量设置样式或 JS 批量操作。 -
id：给标签起一个独一无二的"身份证号"（页面内必须唯一），用于精准定位某个特定元素。 -
style：直接在标签内部写 CSS 样式（比如style="color:red;"），优先级最高（但不推荐大量使用，维护麻烦）。 -
title：鼠标悬停在标签上时，显示一个提示小浮窗。
8.2. 特有属性（特定标签的"刚需"）
这些属性如果不写，标签就"废了"或没意义：
| 标签 | 核心属性 | 作用 | 例子 |
|---|---|---|---|
<a>（链接） |
href |
指定点击后跳转的网址 | <a href="https://baidu.com">去百度</a> |
<img>（图片） |
src 和 alt |
src指定图片地址，alt是图片加载失败时的替代文字（SEO和盲人阅读器必备） |
<img src="photo.jpg" alt="风景照"> |
<input>（输入框） |
type 和 placeholder |
type指定框类型（文本/密码/数字），placeholder显示灰色提示文字 |
<input type="password" placeholder="请输入密码"> |
8.3. 布尔属性（写了就生效，不写就失效）
这类属性不需要写值，只要在标签里出现名字就代表"开启"：
-
disabled：禁用输入框或按钮（变灰点不了）。 -
checked：让单选框/复选框默认打钩。 -
readonly：输入框只能看不能改。
html
<!-- 只要出现了 disabled，按钮就是灰色不可点的 -->
<button disabled>点我</button>
<!-- 只要出现了 checked，默认就是选中状态 -->
<input type="checkbox" checked>9.HTML的区块
在 HTML 中，"区块"（Block）这个概念通常包含两层含义 。作为新手，我们需要先搞懂第一层（显示模式） ，再了解第二层（语义结构），这样页面布局的底子就打牢了。
9.1. 第一层：块级元素 vs 行内元素（显示模式）
这是 HTML 标签最底层的"基因"区别，决定了标签在页面上如何占位。
| 对比维度 | 块级元素 | 行内元素 |
|---|---|---|
| 是否独占一行 | 是（霸道总裁），不管内容多短，前后都会强制换行。 | 否（小跟班），只占自身内容那么宽，和前后元素手拉手排排坐。 |
| 宽高设置 | 默认宽度撑满父容器，可以通过 CSS 设置宽高。 | 宽度由内容撑开，设置宽高无效。 |
| 典型标签 | <div>、<h1>~<h6>、<p>、<ul>、<hr> |
<span>、<a>、<strong>、<em>、<br>、<img>（img特殊，它属于可替换行内元素，但能设置宽高） |
| 举例 | 你在纸上写标题，写完必须换行再写下一段。 | 你在一句话里选中几个字加粗或加链接，这几个字不换行。 |
实战记忆口诀 ："块儿独占一行，行内手拉手" 。
最常见的是
<div>（块级大盒子）和<span>（行内小标签），记住这俩就能举一反三。
9.2. 第二层：HTML5 语义化区块（页面骨架）
光有 div 虽然能布局，但全是白盒子，搜索引擎和盲人阅读器看不懂。HTML5 提供了带有含义的区块标签，用来搭建页面的"功能区域"：
-
<header>：页面或区块的头部（通常放Logo、导航栏）。 -
<nav>：导航链接区域。 -
<main>：页面的核心主体内容（一页只能有一个）。 -
<section>：页面中的独立章节（比如"热门文章"板块）。 -
<article>：独立的、完整的内容块（比如一篇博客、一条新闻）。 -
<aside>：侧边栏或补充信息（比如广告、相关推荐）。 -
<footer>：页面或区块的底部（通常放版权信息、联系方式）。
对比理解：
用
<div>搭布局 = 用空白乐高块搭房子（随便拼，但不知道哪是哪）。用
<header>、<footer>搭布局 = 用标了"门"、"窗户"、"屋顶"的乐高块搭房子（结构清晰，人见人懂）。
9.3. 核心避坑：区块怎么"排列"？（CSS 关键转折）
HTML 只负责"声明"谁是块、谁是行内，但真正的区块排列（比如左右两栏、上下居中）是由 CSS 决定的。
-
默认情况下，
<div>从上到下竖着排。 -
如果你想让它横着排，需要用 CSS 的
display: flex;或display: grid;来改变它的排列行为。
9.4.全家桶代码实例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>区块布局示例</title>
<style>
/* 给所有区块加个边框和间距，方便肉眼观察 */
body { margin: 0; }
header, nav, main, section, aside, footer {
border: 2px solid #333;
margin: 10px;
padding: 15px;
background-color: #f9f9f9;
}
/* 让导航里面的链接横着排（行内特征） */
nav a { margin-right: 20px; }
</style>
</head>
<body>
<header>🟦 头部（Logo + 搜索框）</header>
<nav>🟩 导航（首页 | 产品 | 关于）</nav>
<main>
<section>🟨 章节1：最新活动</section>
<section>🟨 章节2：热门商品</section>
<aside>🟧 侧边栏：今日推荐</aside>
</main>
<footer>⬛ 底部（版权信息）</footer>
</body>
</html>10.表格
HTML 中的表格（<table>）是用来展示结构化数据 的利器，比如学生成绩单、财务报表、价格对比表等。它像一张严谨的 Excel 表格，由行 和列组成。
要彻底搞懂表格，只需记住它的三层嵌套结构（从外到内）：
<table>(表格) ➡️<tr>(行) ➡️<td>(单元格)
10.1. 表格的"三大核心标签"
这是搭建任何表格的万能公式：
| 标签 | 中文俗称 | 作用 | 特点 |
|---|---|---|---|
<table> |
表格容器 | 把整个表格包起来。 | 最外层的大框。 |
<tr> |
Table Row（行） | 定义表格中的一行。 | 有多少组 <tr>，表格就有多少行。 |
<td> |
Table Data（单元格） | 定义行里面的一个格子（数据）。 | 放在 <tr> 里面，有多少个 <td>，这一行就有多少列。 |
<th> |
Table Header（表头） | 特殊的单元格，用来放列标题。 | 里面的文字默认会加粗并居中（语义上代表"标题"）。 |
10.2. 极简示例：一个 2 行 3 列的表格
html
<table border="1"> <!-- border="1" 只是为了显示边框方便学习，实际开发用CSS -->
<!-- 第1行（表头行） -->
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<!-- 第2行（数据行） -->
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
</tr>
</table>效果：第一行是加粗的"姓名/语文/数学"，第二行是具体数据。
10.3. 进阶结构（语义化分段）------ 让表格更"专业"
在实际开发中，为了区分表头、主体和尾部，我们会用三个标签把表格分成三块（类似 <html> 里的 <head> 和 <body>）：
-
<thead>：包裹表头行（<th>），表头区域。 -
<tbody>：包裹数据主体行（<td>），核心数据区域。 -
<tfoot>：包裹汇总行（如"总分/平均分"），表格底部区域。
标准进阶模板：
html
<table>
<thead>
<tr><th>月份</th><th>收入</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>5000</td></tr>
<tr><td>2月</td><td>6000</td></tr>
</tbody>
<tfoot>
<tr><td>总计</td><td>11000</td></tr>
</tfoot>
</table>好处：浏览器滚动长表格时，表头可以固定不动；搜索引擎也更容易理解数据逻辑。
10.4. 合并单元格（重点！）
合并列或行，只需要在 <td> 或 <th> 里加两个属性：
-
colspan：横向合并 列 （左右合并）。比如colspan="2"表示这个格子占两列宽。 -
rowspan：纵向合并 行 （上下合并）。比如rowspan="3"表示这个格子占三行高。
示例（合并单元格）：
html
<table border="1">
<tr>
<td colspan="2">占两列</td>
<td>第三列</td>
</tr>
<tr>
<td rowspan="2">占两行</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>11.表单
HTML 表单（<form>）是网页与用户交互的桥梁 ，比如登录框、注册页、搜索栏、评论区的背后都是它。它的核心任务是：收集用户输入的数据，并发送给后端服务器。
要学好表单，我们只需掌握 "一个容器 + 三大类控件" 的嵌套关系。下面是完整的实战拆解：
11.1. 表单的"总指挥"：<form> 标签
它是所有输入框、按钮的大管家，有两个核心属性必须理解：
-
action：指定数据发送给哪个后台程序（比如action="/login.php"）。 -
method：指定数据传输方式（GET用于搜索（数据暴露在网址上），POST用于密码/注册（数据隐藏，较安全））。
11.2. 三大类控件（表单的核心零件）
| 控件标签 | 中文俗称 | 核心属性 | 特点（单/双标签） |
|---|---|---|---|
<input> |
万能输入器 | type （决定形态） + name （数据名称，必写！） |
单标签（没有闭合标签） |
<textarea> |
多行文本框 | rows（行数）、cols（列数） |
双标签（中间是默认文字） |
<select> + <option> |
下拉菜单 | <select> 里的 name，<option> 里的 value |
双标签（嵌套结构） |
<button> |
按钮 | type="submit"（提交） / reset（重置） |
双标签（里面可以放文字或图标） |
11.3. <input> 的 7 种最常用 type
| type 值 | 作用 | 示例显示效果 |
|---|---|---|
text |
普通文本输入框（用户名） | 显示明文 |
password |
密码输入框 | 显示为圆点或星号 |
radio |
单选框（性别选择） | 圆形，同一组必须同名（name一致） |
checkbox |
复选框（爱好/条款） | 方形，可多选 |
email |
邮箱输入框 | 手机端会调出 @ 键盘，自带简单校验 |
file |
文件上传 | 点击弹出选择文件窗口 |
submit |
提交按钮 | 点击即触发表单提交动作 |
reset |
重置按钮 | 点击清空表单内所有填写内容 |
11.4. 至关重要的连接器：<label> 标签
作用 ：点击文字时，自动聚焦到对应的输入框（提升用户体验，对盲人阅读器也友好）。
用法 ：用 for 属性指向输入框的 id。
html
<!-- 点击"用户名："这三个字，光标会自动跳到后面的输入框 -->
<label for="user">用户名：</label>
<input type="text" id="user" name="username">11.5. 完整实战模板（复制到 VS Code 运行）
下面是一个包含了校验、下拉菜单、多行文本的典型注册表单：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户注册表单</title>
</head>
<body>
<h2>📝 用户注册</h2>
<!-- action="#" 表示提交给当前页面（仅演示） -->
<form action="#" method="POST">
<!-- 1. 文本输入框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入4-12位字符" required>
<br><br>
<!-- 2. 密码输入框 -->
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password" placeholder="至少6位" required>
<br><br>
<!-- 3. 单选框（注意：name 必须一样，才能实现单选互斥） -->
<span>性别：</span>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br><br>
<!-- 4. 复选框 -->
<input type="checkbox" id="agree" name="agreement" value="yes" required>
<label for="agree">我已阅读并同意《用户协议》</label>
<br><br>
<!-- 5. 下拉菜单 -->
<label for="city">所在城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option> <!-- selected 默认选中 -->
<option value="guangzhou">广州</option>
</select>
<br><br>
<!-- 6. 多行文本域（个人简介） -->
<label for="intro">个人简介：</label><br>
<textarea id="intro" name="introduction" rows="4" cols="40" placeholder="说说你的特长..."></textarea>
<br><br>
<!-- 7. 提交 & 重置 按钮 -->
<button type="submit">立即注册</button>
<button type="reset">清空重填</button>
</form>
</body>
</html>