02元素与属性
元素（Element）是内容的「容器」，属性（Attribute）是贴在开始标签上的「配置项」。 一个元素可以有多个属性，用空格隔开，写成 属性名="属性值"。
一、元素的解剖图
完整元素 = 开始标签 + 内容 + 结束标签。 属性永远写在开始标签里，值建议用双引号包住。
| 部件 | 写法 | 作用 | 可省略吗 |
|---|---|---|---|
| 开始标签 | <a href="…"> | 宣布开始，属性都贴在这里 | 不能，元素必须有 |
| 内容 | 菜鸟教程 | 真正展示给用户的东西 | 可以，空元素就没有 |
| 结束标签 | </a> | 宣布结束，前面加斜杠 | 空元素没有；非空元素别漏 |
title 属性的提示文字改一改，再悬停下方链接看效果实际渲染效果（把鼠标悬停在链接上）：
二、空元素：没有内容的「自闭合」标签
有些元素天生没有内容、也不需要结束标签，称为空元素（void element），
常见的有 <br>、<hr>、<img>、
<input>、<meta>、<link>。
| 空元素 | 作用 | 常见写法 |
|---|---|---|
<br> | 强制换行 | <p>第一行<br>第二行</p> |
<hr> | 水平分割线 | <hr> |
<img> | 图片 | <img src="logo.png" alt="徽标"> |
<input> | 输入控件 | <input type="text"> |
<meta> | 元数据（编码、viewport） | <meta charset="UTF-8"> |
<link> | 引入外部资源 | <link rel="stylesheet" href="style.css"> |
<br> 删掉，两行文字会并到一行<br> 或 <br /> 都合法，
但不要写成 <br></br>——空元素没有结束标签。三、布尔属性：有则生效，无则忽略
一类特殊属性只要出现就生效，不需要值，称为布尔属性。
例如 disabled（禁用）、checked（勾选）、required（必填）、
readonly（只读）、autofocus（自动聚焦）。
| 布尔属性 | 作用是 | 典型场景 |
|---|---|---|
disabled | 禁用控件 | 条件未满足时不让点提交 |
checked | 默认勾选 | radio / checkbox 预选 |
required | 必填校验 | 表单提交前的第一道闸 |
readonly | 只读 | 展示不可改的固定值 |
autofocus | 自动聚焦 | 页面加载即聚焦搜索框 |
disabled 从第一个 input 上摘掉，它立刻复活可变；checked 删掉则默认不勾四、全局属性：任何元素都能用的属性
有一批属性是「通用通行证」，所有元素都可以使用：
| 全局属性 | 作用 | 常用程度 |
|---|---|---|
id | 唯一标识，页面内不能重复；JS/CSS 锚点定位用 | 高频 |
class | 类名，可重复、可多个（空格分隔），CSS 样式的主力 | 最高频 |
style | 行内样式，直接写 CSS（优先级高，尽量少用） | 中 |
title | 悬停提示文字 | 中 |
hidden | 隐藏元素（布尔属性） | 少 |
lang | 声明内容语言，如 lang="zh-CN" | 少 |
dir | 文字方向：ltr 左到右 / rtl 右到左 | 偶用 |
data-* | 自定义数据属性，存 JS 要用的数据，如 data-id="3" | 中 |
contenteditable | 让内容可编辑（浏览器原生富文本） | 偶用 |
tabindex | 控制 Tab 键聚焦顺序 | 偶用 |
draggable | 元素可拖拽 | 偶用 |
title 悬停 1 秒出提示；contenteditable 点击文字可直接改——把下面的 contenteditable 删掉看它变回只读title 属性（悬停 1 秒出提示）：
鼠标悬停在这段文字上
contenteditable（点击下面的文字试试编辑）：
点击这段文字，可以直接编辑！
data-* 是前端的「暗格」：页面显示「商品名」，
但 data-price 里还存着价格，JS 一取就能用，数据和视图两不误。五、块级元素与行内元素
按默认「占据方式」分两大类：块级元素独占一行、能设宽高；
行内元素在一行内排队、宽高由内容决定。（本质是 display 的差异，CSS 章细讲。）
| 分类 | 代表元素 | 特点 |
|---|---|---|
| 块级 | div p h1-h6 ul ol li table form header footer section | 独占一行；默认宽度撑满父级；可设宽高边距 |
| 行内 | span a strong em img input button label | 在一行内排列；宽高由内容决定；上下边距不生效 |
| 行内块 | img input button（默认表现） | 像文字一样排队，但又能设宽高 |
<span> 改成 <div>，看排队瞬间变独占六、嵌套规则
- 元素可以嵌套，但必须正确闭合：外层先开的后关。
<p><b>加粗</b></p>✓ - 块级里可以放块级和行内；行内里一般只放行内或文字。
<a>里不能再放<a>；<p>里不能放<div>（浏览器会自动拆开）。- 缩进只影响可读性，不影响渲染。
七、本章小结
- 完整元素 = 开始标签 + 内容 + 结束标签；空元素没有结束标签（img、br、hr、input、meta）。
- 属性只写在开始标签里：
名="值"，值用双引号包住；一个元素可同时挂多个属性。 - 四类高频属性：
id（全页唯一）、class（可复用、可多个）、style（内联样式）、title（悬停提示）。 - 布尔属性出现即生效：disabled、checked、required、readonly。
data-*自定义数据是 JS 的「暗格」，不影响显示、随取随用。- 块级独占一行可设宽高，行内在一行内排队；嵌套要正确闭合，别让浏览器静默纠错。
class="card" 和
data-price="99"，里面放一张 img（src + alt + title），
一个 strong 写商品名，一个 a 链接挂 target="_blank"，
最后用 id="price-tag" 标出价格。