HTML + CSS + JavaScript 快速入门（一）：HTML 详解（2026 年视角）
这是系列第一篇，我们先把 HTML 彻底搞懂。
HTML（HyperText Markup Language）是网页的骨架，负责结构和内容语义。
CSS 管外观，JavaScript 管交互——但没有好的 HTML 骨架，后两者都无从谈起。
1. HTML 的本质一句话总结
HTML 不是编程语言，它是标记语言（Markup Language）。
它的核心工作是：用标签告诉浏览器“这里是什么内容”（标题？段落？图片？导航？文章？）。
现代网页（2025-2026）强烈推荐使用 HTML5（DOCTYPE html），它带来了：
- 语义化标签（semantic elements）
- 多媒体原生支持（video、audio、canvas）
- 表单增强（新 input 类型）
- 更好的移动端支持
2. 最标准的 HTML5 文档骨架（2026 年推荐写法）
每个 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">
<!-- 移动端适配：核心 viewport 设置 -->
<title>我的第一个网页</title> <!-- 浏览器标签页标题，必填 -->
<!-- 后续会放 meta（SEO、社交卡片）、link（CSS）、script 等 -->
</head>
<body>
<!-- 所有可见内容都写在这里 -->
<h1>你好，世界！</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>
记住这 5 行核心：
<!DOCTYPE html><html lang="zh-CN">（中文网站用 zh-CN 或 zh-Hans）<meta charset="UTF-8"><meta name="viewport" ...><title>...</title>
3. HTML 核心概念（必须掌握）
| 概念 | 说明 | 示例 |
|---|---|---|
| 标签 | 用 < > 包裹的标记 | <p>、<img> |
| 元素 | 标签 + 内容 + 结束标签（或自闭合） | <p>这是一个段落</p> |
| 属性 | 写在开始标签里，提供额外信息 | class="red" id="main" src="..." |
| 自闭合标签 | 不需要结束标签 | <img>、<br>、<input>、<hr> |
| 嵌套 | 元素可以互相包含（但有严格规则） | <div><p>嵌套段落</p></div> |
| 注释 | <!-- 注释内容 -->（浏览器忽略） | <!-- 这是临时隐藏的部分 --> |
4. 常用基础标签（日常 80% 场景）
| 标签 | 用途 | 常见属性 | 示例代码 |
|---|---|---|---|
<h1> ~ <h6> | 标题（h1 最重要，只用一个） | — | <h1>主标题</h1> |
<p> | 段落 | — | <p>这是正文段落。</p> |
<a> | 超链接 | href、target="_blank" | <a href="https://grok.x.ai">访问 Grok</a> |
<img> | 图片（自闭合） | src、alt（必须！）、width、loading="lazy" | <img src="logo.png" alt="公司标志"> |
<strong> / <b> | 加粗（strong 有语义） | — | <strong>重要内容</strong> |
<em> / <i> | 强调/斜体（em 有语义） | — | <em>需要强调</em> |
<br> | 换行（自闭合） | — | 第一行<br>第二行 |
<hr> | 水平分割线（自闭合） | — | <hr> |
5. 列表（非常高频）
- 无序列表（最常用）
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
- 有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
- 定义列表（偶尔用）
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
6. 语义化标签（HTML5 最大亮点，2026 年必须掌握）
语义化 = 用正确的标签描述内容，而不是到处用 <div>
| 标签 | 含义 | 典型使用场景 |
|---|---|---|
<header> | 头部（logo + 导航） | 页面顶部、文章头部 |
<nav> | 导航链接 | 主菜单、侧边栏导航 |
<main> | 页面主要内容（一个页面只用一次） | 核心内容区 |
<section> | 独立的内容区块 | 章节、专题模块 |
<article> | 独立可复用的文章/内容 | 博客文章、新闻卡片、评论 |
<aside> | 侧边栏、广告、相关链接 | 侧边推荐、TOC |
<footer> | 页脚（版权、备案号） | 页面底部 |
<figure> + <figcaption> | 带说明的图片/图表 | <figure><img ...><figcaption>说明</figcaption></figure> |
经典语义化页面结构示例（强烈建议背下来）：
<body>
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>内容摘要...</p>
</article>
<!-- 更多 article -->
</section>
</main>
<aside>
<h3>热门标签</h3>
<ul>...</ul>
</aside>
<footer>
<p>&copy; 2026 重阳. All rights reserved.</p>
</footer>
</body>
7. 表单基础（input 家族）
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required placeholder="请输入姓名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<label>性别：</label>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<button type="submit">提交</button>
</form>
HTML5 新增 input 类型（很实用）：
type="email"type="url"type="tel"type="date"type="number"type="range"type="search"
8. 学习建议 & 下一阶段预告
第一周目标：能手写出完整语义化页面（不用美化）
- 每天写 1 个小页面：个人简介、文章列表、简单表单
- 用 VS Code + Live Server 插件实时预览
- 右键“检查” → Elements 面板，看浏览器怎么理解你的标签
下一讲预告（HTML + CSS 快速入门（二））：
- CSS 基础选择器 + 盒模型
- 常用布局技巧（flex、grid 入门）
- 响应式基础（media queries）
你现在是完全零基础，还是已经会写一点，想重点补语义化/表单/可访问性？
告诉我你的起点，我可以调整下一讲的深度和示例。
