HTML标签中未加引号的data-screen-idx=1属性是否合法？

嘿，这个问题问得挺典型的，我来给你详细拆解清楚：

合法性结论：合法，但有严格限制 #

你看到的 <div class="icon icon2 screen-icon" data-screen-idx=1> 里的 data-screen-idx=1 是完全符合HTML规范的写法。HTML允许属性值以三种形式存在：

• 双引号包裹：data-screen-idx="1"
• 单引号包裹：data-screen-idx='1'
• 无引号：data-screen-idx=1

但无引号的属性值有严格的字符限制：只能包含无空格的ASCII字母、数字，以及 - _ . : ~ ! $ & ' ( ) * + , ; = @ 这些特殊字符。如果属性值里有空格、<、>、引号，或者以>开头，那就必须加引号，否则就是非法的。你的例子里1是纯数字，完全符合要求，所以是合法的。

相关规范依据 #

HTML官方规范中明确定义了属性值的语法规则，其中专门包含了“无引号属性值”的允许范围——核心逻辑就是：只要属性值不会破坏HTML标签的解析结构，就可以省略引号。

为什么有人会写这种代码？ #

常见的原因有几个：

• 极简主义追求：有些开发者为了减少HTML文件的字符量（虽然这点节省微乎其微），会在符合条件的情况下省略引号
• 手写习惯：手写HTML时，遇到纯数字、简单标识符这类属性值，顺手就省略了引号，觉得更快捷
• 模板/框架生成：部分后端模板引擎或前端工具在生成HTML时，会自动对符合条件的属性值省略引号，比如当属性值是从变量传入的纯数字时

小提醒：不推荐日常使用 #

虽然合法，但这种写法的容错率很低——如果后续修改属性值时加入了空格或特殊字符（比如data-screen-idx=section 1），忘记加引号就会直接导致HTML解析错误。而且统一使用引号的代码可读性更强，团队协作时也更易维护，所以大多数现代前端规范都会要求给属性值加上引号。

内容的提问来源于stack exchange，提问作者Hairi