跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

怎样快速学习HTML的全局属性与用法 HTML基础进阶必读【核心】

林译川
林译川
• 👁 0人浏览过
真正影响运行时行为的全局属性仅有少数几个：id和class决定JS选择与CSS匹配；data-*仅在JS中通过dataset读写有效；tabindex需为0或正整数才参与焦点流；hidden和contenteditable为布尔属性，存在即生效，值无效。 全局属性不是“通用装饰”，而是有明确行为边界的控制开关——用错一个，JS选不到、CSS不生效、无障碍直接失效。 哪些全局属性真正影响运行时行为 别被“所有标签都能加”误导。真正起作用的只有少数几个，其余多数只是“语法合法但无实际效果”：
id
和
class
：JS 用
getElementById
或
querySelector
依赖它们；CSS 选择器必须匹配才生效
data-*
：只在 JS 中读写有意义（
element.dataset.xxx
），HTML 和 CSS 不解析
tabindex
：值为
0
或正整数才参与 Tab 焦点流；负值仅禁用焦点，不改变顺序
hidden
：布尔属性，写成
hidden="false"
依然隐藏——只要存在就生效，值无关
contenteditable
同理：写
contenteditable="0"
或
contenteditable="off"
都无效，只能是
"true"
或
"false"
（字符串） class 和 id 的常见误用场景 这两个看似最简单，恰恰是动态渲染和调试中最容易翻车的地方： 多个元素用了相同
id
：JS
getElementById
只返回第一个，后续逻辑全错；CSS 选择器仍会命中全部，造成样式覆盖混乱
class
值含空格却没引号：
实际只生效
btn
，
primary
被当作文本节点丢弃 动态拼接 class 时没做去重：
el.className += " active"
多次执行导致
active active active
，CSS 仍生效但 JS 判断
classList.contains("active")
会出错 服务端模板中未转义 class 名：
class="{{ user.role }}"
若
user.role
是
"admin script"
，会意外引入非法 class 并可能触发 XSS data-* 属性的读写边界与兼容性
data-
看似自由，但浏览器对它的处理有隐式规则： 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 连字符自动转驼峰：
data-user-id="123"
→ JS 中通过
dataset.userId
访问，不是
dataset.user-id
（语法错误） 数字开头的 key 会被忽略：
data-1st-place="gold"
在
dataset
中不可见 IE11 支持
dataset
，但不支持带大写字母的转换（
data-MyKey
→
mykey
，而非
myKey
） 不要存大对象或函数：它只序列化为字符串，
JSON.stringify
后再塞进去，取出来得自己
JSON.parse
Vue/React 等框架中，
data-
不会自动响应式更新，改了 DOM 属性，组件状态不会同步 title、lang、aria-* 这类“隐形属性”的真实作用 它们不改样式、不触发行内逻辑，但缺失会导致具体问题：
title
：鼠标悬停显示提示，但**不保证一定出现**——移动端 Safari 完全不支持，部分屏幕阅读器默认忽略
lang
：影响浏览器拼写检查、语音朗读语调，也影响某些 CSS 伪元素（如
:lang(zh)
），但设错（如
lang="cn"
）比不设更糟
aria-*
：必须配合
role
或语义化标签使用，单独加
aria-label
给
不如直接用
；且不能覆盖原生语义（如给
加
aria-role="button"
会破坏可访问性）
spellcheck
：仅对可编辑元素（
contenteditable
、
、
）有效，对

加了也没用 真正卡住人的从来不是“能不能加”，而是“加了之后谁在读、怎么读、读错了怎么办”。全局属性不是贴纸，是接口契约——写的时候得想清楚，下游的 JS、CSS、辅助技术、甚至搜索引擎，都按这个契约来解析。

相关文章