元素 = 标签 + 内容 + 属性：HTML 乐高积木说明书

10-30 152 0 0

把网页想成乐高城堡：元素就是一块块积木。
每块积木三段式——

<开始标签>内容</结束标签>

少数积木没有“内容”那一格，自带封口，叫自闭合元素。
掌握这两条，你就能把 100+ 标签玩出花。

1. 三段式元素

<p>Hello</p>

 → 开始标签
Hello → 内容
 → 结束标签

浏览器收到后，把三段合成一个“段落元素”渲染。

2. 自闭合元素

<img src="cat.jpg" alt="橘猫">
<hr>

没有 </img>、没有 </hr>，写完即封口。
常见自闭合五兄弟：
<img>   <hr> <input> <meta>

3. 一张图速记常用元素

h1 ┐
h2 ├─ 标题块
h3 ┘

p    ── 段落块
a    ── 超级链接
img  ── 图片（自闭合）

ul > li  ── 无序列表
ol > li  ── 有序列表

table > thead > tr > th
      └─ tbody > tr > td   ── 表格

em     ── 斜体强调
strong ── 粗体重要

嵌套规则：先开后关，像俄罗斯套娃——

<ul>
  <li><a href="">链接</a></li>
</ul>

4. 属性 = 元素的“小配件”

写在开始标签里， 名="值" 成对出现，多个用空格隔开。

<a href="https://example.com" target="_blank">新窗口打开</a>

href 告诉浏览器跳哪
target="_blank" 额外 bonus：新开标签页

核心通用属性（任何元素都能用）：

id        唯一身份证
class     分组令牌
title     鼠标悬停提示
style     行内样式（临时调试用）
data-*    自定义数据，JS 钩子

5. 5 分钟实战：把元素串成“个人名片”

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>名片</title>
</head>
<body>
  <h1>张三</h1>
  <p><em>前端学徒</em> | <strong>北京</strong></p>

  <h2>技能清单</h2>
  <ul>
    <li>HTML —— 熟练</li>
    <li>CSS —— 学习中</li>
  </ul>

  <h2>项目经历</h2>
  <ol>
    <li>个人博客（HTML + CSS）</li>
    <li>公司官网重构（进行中）</li>
  </ol>

  <h2>联系方式</h2>
  <table border="1">
    <tr><th>邮箱</th><td><a href="mailto:zhang@ex.com">zhang@ex.com</a></td></tr>
    <tr><th>GitHub</th><td><a href="https://github.com/zhang" target="_blank">@zhang</a></td></tr>
  </table>
</body>
</html>

复制 → 保存 → 双击 → 完成。
改一行刷新一次，比背 100 遍记得牢。

6. 常见错误速查

忘记结束标签：Hello world → 浏览器帮你补，但可能补错位置。
属性无引号：href=https://example.com → XHTML 时代就非法，HTML5 容错可过，但维护噩梦。
自闭合画蛇添足：<img src="a.jpg"></img> → 多余，直接删 </img>。

收官一句话
“元素 = 标签 + 内容 + 属性” 刻在桌面便签上，
剩下的就是多堆积木、多刷新、多改错——HTML 自然长进手里。

快来点个赞吧

编程知识