HTML + CSS + JavaScript 快速入门（一）：HTML 详解
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 文件都应该从这个模板开始：
<!DOCTYPEhtml><!-- 必须是第一行，声明这是 HTML5 --><htmllang="zh-CN"><!-- lang 属性很重要：辅助无障碍 + SEO --><head><metacharset="UTF-8"><!-- 字符编码，几乎永远用 UTF-8 --><metaname="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><ahref="/">首页</a></li><li><ahref="/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>©2026 重阳. All rights reserved.</p></footer></body>7. 表单基础（input 家族）
<formaction="/submit"method="post"><labelfor="name">姓名：</label><inputtype="text"id="name"name="name"requiredplaceholder="请输入姓名"><labelfor="email">邮箱：</label><inputtype="email"id="email"name="email"><label>性别：</label><inputtype="radio"name="gender"value="male">男<inputtype="radio"name="gender"value="female">女<buttontype="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）
你现在是完全零基础，还是已经会写一点，想重点补语义化/表单/可访问性？
告诉我你的起点，我可以调整下一讲的深度和示例。