包含空字符串的 HTML 属性不显示 = 运算符

Html attribute containing empty string doesn't show = operator

本文关键字：显示 运算符 属性 字符串 HTML 包含空      更新时间：2023-09-26

一个用例在jQuery中： 

 $select.append('<option value="">All</option>');

看起来它实际上在 HTML 中添加了元素： 

<option value>All</option>

相反，我想要的是附加到元素，以便它为值提供一个空字符串： 

<option value="">All</option>

为什么没有发生？

它实际上在 HTML 中添加了元素

不，它没有。

它将元素添加到 DOM，而不是 HTML 中。

当您使用浏览器的开发人员工具查看 DOM 时，它将使用类似 HTML 的语法显示。在此语法中，值为空字符串的 value 属性将在不带=""部分的情况下呈现。（看起来语法的那部分实际上是有效的 HTML，但我还没有在规范中找到允许它的部分。

如果你是（以Chrome为例），你可以右键单击它的父元素，然后选择"编辑为HTML"，此时你将再次看到=""。

如果您要提交包含 select 元素的表单，您将看到发送的数据将是：select_name= 。这表明该值已正确设置为空字符串。如果它不起作用，你会得到select_name=All因为如果没有设置值，元素的文本将用作值。

您的问题似乎表明对所讨论语法的含义存在一定程度的混淆。基于标签中出现value缺少=""的事实，您推断这表示 HTML "值"元素 - 事实并非如此。这里实际发生的事情与以下事实有关：有多种方式可以表示 HTML 属性的值。让我们探索这些格式，以更好地了解您所看到的内容。

HTML 属性的有效格式

例如，表示value属性的最常见方式是使用引号，如下所示： 

value="something"

但是，如果您查看HTML5规范中有关属性的部分，则实际上以四种不同的方式表示属性值也是有效的：

  • 空属性语法

  • 不带引号的属性值语法

  • 单引号属性值语法

  • 双引号属性值语法

专门针对您的情况的格式是"空属性语法"。进一步阅读，该规范描述了空属性语法，如下所示：

只是属性名称。该值隐式为空字符串。

在属性的历史 HTML 5 参考中还有一个稍微更详细的解释：

某些属性可以通过仅提供属性来指定 名称，没有值。

在下面的示例中，禁用属性使用 空属性语法：

<input disabled>

请注意，空语法完全等效于指定空 字符串作为属性的值，如以下示例所示。

<input disabled="">

如您所见，这意味着对于 HTML 元素，当表示没有值的属性时，=""是可选的。因此，某些浏览器将只显示属性，而不显示不必要的标记。无论属性是呈现为value还是value=""，任何符合标准的浏览器都会知道value是一个包含字符串的属性，因此它将始终返回该属性的内容（如果有的话），或者在没有显式内容的情况下至少返回一个空字符串。

 $select.append($('<option>', { value: "", text: "All" }));
相关文章：