【前端基础】HTML + CSS + JavaScript 快速入门（一）：HTML 详解
HTML（HyperText Markup Language）是网页的骨架，负责定义网页的内容和结构。
它是前端三剑客中最基础的一环：HTML 搭结构 → CSS 加样式 → JavaScript 加交互。
当前我们主要使用 HTML5（2014年正式发布，至今仍是标准），它引入了语义化标签、多媒体支持、表单增强等现代特性。
1. HTML 的本质与基本结构（必须背下来）
每个 HTML 文件都必须遵循这个最基本结构：
<!DOCTYPE html> <!-- 文档声明：告诉浏览器这是 HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang建议写上（利于SEO和屏幕阅读器） -->
<head>
<meta charset="UTF-8"> <!-- 字符编码：几乎永远写 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端适配：响应式必备 -->
<title>我的第一个网页</title> <!-- 浏览器标签页标题 -->
<!-- 这里放 CSS、图标、SEO 元信息等 -->
</head>
<body>
<!-- 所有可见内容都写在这里 -->
<h1>欢迎体验 HTML5</h1>
<p>这是我的第一段文字。</p>
</body>
</html>记住：
<!DOCTYPE html>必须写在第一行（没有它浏览器可能进入怪异模式）<html>是根标签<head>放“关于页面”的元信息（不显示在页面上）<body>放“用户真正看到的内容”
2. 标签（Tag）语法规则
HTML 使用标签来描述内容，大多数标签成对出现：
- 双标签（有开始和结束）
<h1>标题</h1><p>段落</p><div>容器</div> - 单标签（自闭合）
<br><img><input><hr>
现代推荐写成自闭合形式：<br /><img />（但浏览器都认不带/的写法）
标签属性（写在开始标签里，用空格分隔）：
<img src="photo.jpg" alt="一张风景照" width="300" height="200">
<a href="https://www.example.com" target="_blank">打开新窗口</a>常见属性：
id→ 唯一标识（一个页面内不能重复）class→ 分类（用于 CSS 和 JS 选择）style→ 行内样式（不推荐大量使用）title→ 鼠标悬停提示lang→ 语言（zh-CN / en）
3. 常用基础标签分类速查表
| 分类 | 标签示例 | 语义 / 作用 | 块级/行内 | 重要备注 |
|---|---|---|---|---|
| 标题 | <h1> ~ <h6> | 文章标题（h1最重要，只用一个） | 块级 | 影响SEO权重 |
| 段落 | <p> | 普通段落文字 | 块级 | 自动前后换行 |
| 换行/分割 | <br> / <hr> | 强制换行 / 水平分割线 | – | br 不要滥用 |
| 强调 | <strong> / <b><em> / <i> | 重要 / 加粗 强调 / 斜体 | 行内 | 优先用 strong / em（有语义） |
| 超链接 | <a href="..." target="_blank"> | 跳转链接 | 行内 | target=”_blank” 新窗口打开 |
| 图片 | <img src="..." alt="..."> | 显示图片 | 行内 | alt 必须写（SEO + 无图友好） |
| 列表 | <ul><li>（无序）<ol><li>（有序）<dl><dt><dd>（定义列表） | 菜单、步骤、术语表 | 块级 | 非常常用 |
| 划分 | <div> | 无语义通用容器 | 块级 | CSS 布局主力 |
| 语义化 | <header> <nav> <main> <article> <section> <aside> <footer> | 页面头部/导航/主体/文章/区块/侧边栏/页脚 | 块级 | HTML5 核心特性，提升SEO和可访问性 |
4. HTML5 核心语义化标签（强烈推荐掌握）
语义化 = 用正确的标签表达正确的内容含义，而不是全靠 <div>。
<body>
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章正文...</p>
</article>
<aside>
<h3>相关链接</h3>
<ul>...</ul>
</aside>
</main>
<footer>
<p>版权 © 2025</p>
</footer>
</body>语义化好处：
- 代码更清晰，维护容易
- 搜索引擎更容易理解内容（SEO ↑）
- 屏幕阅读器更好朗读（无障碍 ↑）
- 未来 CSS/JS 框架更友好
5. 表单（Form）——用户交互核心
表单是 HTML 中最复杂的部分之一，也是最实用的。
基本结构：
<form action="/submit.php" method="post">
<!-- 表单控件写在这里 -->
</form>常用 input 类型（type 属性决定外观和行为）：
| type 值 | 外观与功能 | 常用属性示例 |
|---|---|---|
| text | 单行文本框 | placeholder=”请输入用户名” |
| password | 密码框（隐藏字符） | |
| 邮箱输入（有格式校验） | required | |
| tel | 电话号码 | pattern=”[0-9]{11}” |
| number | 数字输入（可上下箭头） | min=”1″ max=”100″ step=”1″ |
| checkbox | 复选框 | checked（默认选中） |
| radio | 单选框（同 name 互斥） | name=”gender” |
| submit | 提交按钮 | value=”注册” |
| button | 普通按钮 | onclick=”…” |
| file | 文件上传 | accept=”image/*” |
| date / time | 日期/时间选择器 | |
| color | 颜色选择器 | |
| range | 滑块 | min max step |
完整小例子：
<form action="/login" method="post">
<div>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label>性别：</label>
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</div>
<div>
<label>兴趣：</label>
<input type="checkbox" name="hobby" value="code" id="code"><label for="code">编程</label>
<input type="checkbox" name="hobby" value="game" id="game"><label for="game">游戏</label>
</div>
<button type="submit">登录</button>
</form>6. 小结与学习建议
- 先把基本结构、常用标签、语义化标签打牢
- 理解块级元素 vs 行内元素（块级独占一行，行内不换行）
- 表单是重点，多写多练
- 工具推荐：VS Code + Live Server 插件（实时预览）
练习任务（建议马上动手）：
- 用语义化标签写一个个人博客首页布局（header + nav + main + article + footer）
- 写一个注册表单（包含：用户名、密码、邮箱、性别、兴趣、提交按钮）
下一节我们进入 CSS 部分：如何给这些 HTML 标签添加漂亮的样式。
有任何标签不明白、想看完整示例代码，或者想直接跳到某个具体知识点（比如表格、多媒体、iframe、meta标签等），随时告诉我！
