html meta 的 content 是元数据值，须与 name 或 http-equiv 配对；css 伪元素的 content 是生成内容指令，仅用于 ::before/after；contenteditable 是布尔属性，控制编辑状态，三者语义与用法互不相关。
content 属性不是单一功能的“万能字段”，它在 HTML 和 CSS 中分属完全不同的上下文，语义、用法、限制全都不一样。混淆两者会导致 meta 不生效、伪元素不渲染、甚至 DOM 操作出错。
HTML <meta> 标签里的 content 是元数据值容器
它必须和 name 或 http-equiv 配对出现，单独写 content 没意义。浏览器靠这对组合识别数据类型和用途。
-
name="description"+content="Free Web tutorials"：告诉搜索引擎页面主旨，影响 SEO -
http-equiv="refresh"+content="5; url=https://baidu.com"：触发 5 秒后跳转，注意分号不能用中文、空格不能多 -
name="viewport"实际不用content？错——<meta name="viewport" content="width=device-width, initial-scale=1">里content就是完整指令字符串，逗号分隔多个参数 - 值里含引号？必须转义或换引号类型：
content='author: "Hege Refsnes"'或content="author: "Hege Refsnes""
CSS ::before/::after 里的 content 是生成内容指令
它只在伪元素中合法，且必须有值（哪怕只是 content: ""），否则伪元素不渲染。常见误写是把它当成普通元素的样式属性。
-
content: "→"插入字符，注意引号不可省；content: url(logo.png)插入图片，路径相对当前 CSS 文件 -
content: attr(data-title)动态读取元素的data-title属性值，但仅限 HTML 属性，不能读class或id -
content: counter(my) " / " counters(my, ".")配合counter-increment实现嵌套编号，但计数器名必须严格一致，大小写敏感 - 想用
content显示元素文本内容？不行——attr()只读属性，不读textContent；需要 JS 注入或改用data-属性预置
contenteditable 和 content 完全无关，别被名字误导
这是个布尔属性，控制元素是否可编辑，和元数据或伪元素内容毫无关系。它的值只有 true、false、空字符串（等价于 true），没有 content 字段参与。
-
<div contenteditable="true">可编辑</div>—— 正确写法，不要加=后面跟其他东西 - 误写成
contenteditable="content"或contenteditable="on"：浏览器会当true处理，但属于非标准用法，可能在某些 UA 下失效 - 编辑区域内容提取必须用
innerHTML，textContent会丢掉所有标签结构，尤其粘贴富文本后差异巨大
真正容易踩坑的是混用场景：比如在 SSR 渲染时把 CSS content: attr(data-foo) 和 HTML <meta name="foo" content="bar"> 当成同一套逻辑处理，结果一个读不到属性、一个漏写 name。记住——三个 content，三套规则，各守边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
