HTML + CSS + JavaScript 快速入门（一）：HTML 详解

likuoelie

209人浏览 · 2026-03-22 09:17:59

likuoelie · 2026-03-22 09:17:59 发布

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>