您可以使用W3C验证服务来检查HTML文档，CSS样式表，Atom / RSS源等。
Rails datagrid gem 的输入类型=“文本”的多个属性的 HTML 错误
在流行的 Rails gem 数据网格中，指定范围过滤器（对于整数）会生成如下 HTML： 在流行的 Rails gem datagrid 中，指定范围过滤器（对于整数）会生成如下 HTML： <form class="datagrid-form artists_grid" id="new_artists_grid" action="/en/artists" accept-charset="UTF-8" method="get"> <div class="datagrid-filter filter"> <label for="artists_grid_birth_year">Year</label> <input class="birth_year integer_filter from" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]"> <span class="separator integer"> - </span> <input class="birth_year integer_filter to" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]"> </div> W3C 验证器抱怨 HTML，告诉 此时元素输入不允许使用多个属性。 事实上，W3C 网站上的 HTML Living Standard 的 input 元素的 汇总表确实表明，multiple属性仅适用于 file 和 email 类型。 但是，似乎 Firefox 和 Chrome 浏览器至少按照 datagrid 的预期处理上述表单，并为 multiple-text-input 字段返回一个数组。 我的问题是 此错误（“元素输入上不允许使用属性多个，类型为“文本””）仅适用于 HTML 5 还是其他错误？在以前的 HTML 中实际上允许它吗？（只是我的猜测） 大多数主流浏览器是否将 input type="text" multiple="multiple" 字段解释为多个字段并返回数组？ 如果没有，是否有任何有效的方法可以在 HTML 表单中指定具有公共标签的一对（或列表）文本字段？ 有什么方法可以绕过这个问题，强制 datagrid 生成 HTML5 有效的 HTML？ 上述示例的具体情况 这里详细介绍了上述 HTML 是如何生成的。 我在 datagrid 上为 Artist 模型的索引表指定了以下过滤器，该模型具有列（属性）birth_year： filter(:birth_year, :integer, range: true, header: 'Year') 输入1960年和2010年两个值 生成以下带有 GET 参数的 URI 字符串： http://localhost:3000/en/artists?artists_grid%5Bbirth_year%5D%5B%5D=1960&artists_grid%5Bbirth_year%5D%5B%5D=2010&commit=Apply 或者，如果解码， http://localhost:3000/en/artists?artists_grid[birth_year][]=1960&artists_grid[birth_year][]=2010&commit=Apply 因此，浏览器（Firefox 或 Chrome）确实将这两个字段解释为公共标签的多个输入字段。 multiple 只是 Rails 表单助手工作方式的副作用。 通常，重复的键会被最后一个键覆盖： >> Rack::Utils.parse_nested_query("a=1&a=2") => {"a"=>"2"} 但是如果输入名称以 [] 结尾，它将被解析为数组： >> Rack::Utils.parse_nested_query("a[]=1&a[]=2") => {"a"=>["1", "2"]} 获取输入名称 [] 的一个简单方法是添加 multiple: true，这就是 datagrid 正在做的事情： <%= text_field :artists_grid, :birth_year, multiple: true %> #=> <input multiple="multiple" type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year"> # ^^ 做同样的事情但没有 multiple 属性有点尴尬： <%= text_field_tag "artists_grid[birth_year][]" %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <%= text_field "artists_grid[birth_year]", nil %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <%= form_with url: "/", method: :get, scope: :artists_grid do |f| %> <%= f.fields_for :birth_year do |fff| %> <%= fff.text_field nil %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <% end %> <% end %> 要真正修复它，必须在 Rails 中完成，位于此处： https://github.com/rails/rails/blob/v7.1.3.3/actionview/lib/action_view/helpers/tags/text_field.rb#L17 diff --git a/actionview/lib/action_view/helpers/tags/text_field.rb b/actionview/lib/action_view/helpers/tags/text_field.rb index c579e9e79f..fe9c1a8d49 100644 --- a/actionview/lib/action_view/helpers/tags/text_field.rb +++ b/actionview/lib/action_view/helpers/tags/text_field.rb @@ -14,6 +14,7 @@ def render options["type"] ||= field_type options["value"] = options.fetch("value") { value_before_type_cast } unless field_type == "file" add_default_name_and_id(options) + options.delete("multiple") tag("input", options) end <%= form_with url: "/", method: :get, scope: :artists_grid do |f| %> <%= f.text_field :birth_year, multiple: true %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year"> <% end %>
如何设置本地 W3C HTML 验证器服务器并在 Rails 测试中使用它
我想将用于 HTML 的 W3C VNU 验证器合并到测试环境中的 Rails 应用程序中。 我使用 Rails 的 w3c_validators gem 作为 W3C 验证器的包装器。默认情况下，它使用
W3C 标记验证要求我删除页面上的尾部斜杠。 它是否正确？我的页面在所有浏览器中仍然兼容吗？ W3C 标记验证 要求我删除页面上的尾部斜杠。 这是正确的吗？我的页面在所有浏览器中仍然兼容吗？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="content-style-type" content="text/css" **/**> 这是正确的。对于 HTML 4.01，您不应该为 meta 元素添加尾部斜杠（自闭合标签），如果我没记错的话，我相信 <link> 元素。 xhtml 但需要尾部斜杠。 XHTML 是带有 HTML 语法的 XML。在 XML 中，所有标签都必须闭合。某些 HTML 标签没有结束标签，因此在 XHTML 中它们需要自闭合。这是通过在 / 前面放置 > 来实现的。 因此，必须更改带有 /> 的任何标签，以删除正斜杠以符合 HTML。 这些并不是两种规格之间的唯一区别。 问题的答案是肯定的，你应该去掉多余的固相线。 （如果您愿意，也可以称为尾部斜杠）。 HTML5 也是如此。 HTML 不需要在结束 > 字符之前使用斜杠（又名“自闭合”标签，也是用词不当），例如 <link />、<meta />、<br />、<hr /> 等，以及由于多种原因，不鼓励这种使用，如所提供的超链接的目标中所讨论的。注意：最好始终参考官方 W3C 或 WHATWG 资源中的 HTML 规范。 （例如 https://html.spec.whatwg.org/multipage/#toc-semantics ） 有关历史的更多信息，请参见： https://www.cnet.com/culture/forming-pains-afflict-html5-standardization/ 尾部斜杠是为了促进 XHTML 中的 XML“兼容性”，并且通常仅在使用 XHTML 严格文档类型时用户代理才会考虑。 （例如 Transitional 只是将其解析为 HTML） 该语法仍然广泛使用错误（例如，据称 WordPress 是 2023 年网络上最流行的内容管理系统。查看大多数 WP 网站的源代码，您会发现它在 HTML 中使用了不正确的语法。但是，值得注意的是，代码格式化应用程序 Prettier 至少有部分责任） 这里有一个用例。 <meta> 标签不得有尾部斜杠。 我有 5 个不同的网站，想将它们从搜索引擎结果中删除。 我设置了元标签 <meta name="robots" content="noindex"> 结果，其中 4 个从 Bing 和 Google 搜索结果中完全消失了。但是，仍然只出现一页。 我终于找到原因了。 唯一仍然出现的页面在元标记中有尾部斜杠，其他 4 个页面没有。
我的网站已通过W3C验证，现在我需要将H4标签放在主页的某个超链接上。当我放置 H4 标签时，W3C 考试中出现一些错误。那么如何在链接上放置 H4 标签呢？ 这里...
我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 标签。 这个网站... 我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 <p> 标签。 该网站有多个显示为只读的表单，如果用户希望编辑字段，则必须单击“编辑”按钮以打开模式。 我对只读字段的问题是，该网站的结构是标题显示在左侧，相应的值显示在右侧。像这样的东西： <div class="form-group" id="-serviceName"> <p id="-title" class="col-sm-4 form-control-title">Some text</p> <p id="-value" class="col-sm-8 form-control-static">Some value</p> </div> 最初我使用的是<label>，但是当我打开页面时，我的值不是输入，WAVE 评估工具向我发出警报： “孤立的表单标签：存在表单标签，但未与表单控件正确关联。” <div class="form-group" id="-serviceName"> <label class="col-sm-4 control-label" id="-label">Some text</label> <div class="col-sm-8 col-md-6 col-lg-4"> <p class="form-control-static" id="-value">Some value</p> </div> </div> 我尝试过使用aria-labeledby和aria-describedby，但是使用箭头键，屏幕阅读器始终独立地呈现信息。 首先它显示“一些文本”，然后我必须再次单击箭头键，它显示“一些值”。 我想让屏幕阅读器将两个值一起读取为：“某些文本某些值” 就屏幕阅读器的使用而言，您已有的代码不应该存在重大问题。 他们可以很好地访问键值对，并且它将按顺序读取它们，这将首先读取标题，然后读取值（向下读取时）。 当涉及到WCAG 标准信息和关系时，使用<p>可能不足以解释第二个文本是用户输入，而第一个文本是用户无法更改的静态标签。 可能有几种有效的方法可以解决这个问题。 推荐解决方案 如果这是表单数据，用户可能期望（取决于您的用例）以表单而不是阅读模式进行导航。因此，他们可能会使用 Tab 键从一个表单字段跳转到另一个表单字段。 目前“表单”中没有表单字段。我推荐的解决方案是真正的readonly形式： <form aria-labelledby="form-title"> <h2 id="form-title">Your form data</h2> <p> <label>Some text <input readonly type="text" value="Some value"> </label> </p> <p><button>Edit</button></p> </form> 这也将清楚地传达给任何辅助技术，我们正在处理表单数据，但在当前状态下无法更改。表单必须有一个可访问的名称，这就是为什么我用 aria-labelledby 来指代可见标题。 <label>元素必须与表单输入关联，可以通过for属性或通过包装输入来关联。 替代解决方案 将两篇文章放在一起<p>加强了它们的关系，并且在使用屏幕阅读器阅读时，标题和值之间的停顿更少 <p class="form-group" id="a2ba84-serviceName"> <div id="a2ba84-title" class="col-sm-4 form-control-title">Some text</div> <div id="a2ba84-value" class="col-sm-8 form-control-static">Some value</div> </p> <dl>描述列表旨在形成一组键和值，并且经常在这种情况下使用 <dl> <div class="form-group" id="a2ba84-serviceName"> <dt id="a2ba84-title" class="col-sm-4 form-control-title">Some text</dt> <dd id="a2ba84-value" class="col-sm-8 form-control-static">Some value</dd> </div> </dl> 补充说明 aria-labelledby 和 aria-describedby 不能仅用于任何元素。它们用于具有可访问名称的ARIA 角色，主要是交互式控件、地标和表格元素。
我的公司正在构建一个网站，我们遇到了一些 JavaScript 库无法替换某些内容的问题。我们决定将 HTML 放入 W3C 验证器，它告诉我们这是非法的......
为什么前端框架可以创建自定义属性，但我希望在我的前面添加“data-”
为什么前端框架能够在 html 元素上创建自定义属性，例如 以 Vue 为例 如果我自己编造的话，Html 验证器就会抱怨。 为什么前端框架能够在 html 元素上创建自定义属性，例如 以 Vue 为例 <div v-for="..."> 如果我自己编写，Html 验证器会抱怨。 <div something> 告诉我我应该像这样假装数据 <div data-something> 我了解一致性和标准的重要性。但我很好奇前端框架是否在幕后做一些特殊的事情来规避这个规则。 或者他们只是忽略了它？ 关于Vue： 您为 Vue 提供的 HTML 不是渲染的 HTML。它由 Vue 编译成创建虚拟 DOM 的 JS 代码。然后，Vue 默认渲染器将其转换为实际的“正确”HTML，而无需 v-for 和其他指令。 如果您想验证 HTML - 验证呈现的 HTML 页面。 Vue 模板是伪 HTML，有助于为虚拟 DOM 创建渲染功能，从而提高可读性并让设计师等非程序员参与其中。 我想其他框架也是如此 - 您应该验证最终渲染的 HTML。
向 Web 应用程序的所有 HTML 元素添加 ID 属性？
目前我正在使用 RoR、MySQL、HTML、CSS 和 jQuery 等构建一个 Web 门户，我收到自动化测试工程师的请求，要求向所有
如何修复“错误：在前 512 个字节之后找到元元素上的字符集属性。”
我的网站在验证时遇到此错误。 错误：在前 512 个字节之后找到元元素的字符集属性。 这是导致此问题的代码： <...
我习惯于对 Brackets 文本编辑器进行编程，并且我已经安装了 W3C 验证器，但它在我在线时可以工作，但在离线时却不能。我尝试安装 https://validator.w3.org/docs/install.html 并且我...
我在选框标签中有一些文字。 测试测试测试测试测试 我正在使用 html 5 和 css 3。当我在 w3c 验证器中检查我的 html 时，它
我想这是一个标准问题，而不是一个特定的编码问题。 我想知道是否需要使用 W3C HTML 验证之类的工具来验证 HTML？如果我发送 DOCTYPE 和 META t...
请帮助我解决此验证错误。我不明白这意味着什么，或者我的 HTML 不符合标准。 我会在这里重新发布它，因为希望我能修复它，并且该链接不会...
可能的重复： 我真的需要将 '&' 编码为 ' &' 吗？ 我知道 W3C 建议“使用“&”（ASCII 十进制 38）而不是“&”以避免混淆...
我无法让我的网站在 W3C 标记验证中进行验证。 这是验证错误之一的示例。 错误：此处不允许使用属性 xmlns:content。 我做了一些研究...
W3C 验证器给出 XHTML 的“文档类型不允许元素在此处“输入”...”错误
我在使用 W3C 验证器验证我的页面时遇到此错误。 来源： 可以一些...
validator.w3.org 认为以下有效 HTML： 测试...</desc> <question vote="0"> <p>validator.w3.org 认为以下有效 HTML：</p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> </head> <body> <div>This <<<<<<<<<<<<<<<<<<<<<<b>is</b> a test.</div> </body> </html> </code></pre> <p>真的有效吗？</p> </question> <answer tick="true" vote="3"> <p>是的，标签只会被视为附加文本。它不是 HTML 标记的一部分。</p> <p>它只是打印</p> <blockquote> <p>这<<<<<<<<<<<<<<<<<<<<<<strong>是</strong>一个测试。</p> </blockquote> <p>这没有什么问题。</p> </answer> <answer tick="false" vote="2"> <p>此代码已使用 W3C 验证器成功验证。并且该页面将按预期显示在所有主要浏览器（Firefox、Opera、Chrome 和 Internet Explorer）上。</p> <p>您可以在这里查看结果：<a href="http://validator.w3.org/" rel="nofollow">http://validator.w3.org/</a></p> </answer> <answer tick="false" vote="2"> <p>验证为 HTML 时允许，但验证为 XHTML 时不允许。</p> <p>这里您需要使用<pre><code><</code></pre>和<pre><code>></code></pre>，无论如何这是最佳实践。</p> </answer> <answer tick="false" vote="0"> <p>我在 w3c 中测试了你的代码。根据 w3c 标准，它完全有效:)</p> <p>但是使用 HTML 实体始终是一个很好的做法。你可以写“<" or "<" in spite of writing ">”。我们使用 HTML 实体来确保所有浏览器和平台的准确结果。 参考：<a href="http://www.w3schools.com/html/html_entities.asp" rel="nofollow">http://www.w3schools.com/html/html_entities.asp</a></p> <p>最诚挚的问候， 图希德</p> </answer> </body></html>
经过一番研究，我了解到标签在 HTML 中给出了其内容的定义。喜欢 这是一个部分 这是一篇文章 所以如果我写...
我刚刚阅读了 HTML5 作者规范。 它指出 、 和 标签是可选的。 这是否意味着您可以完全将它们排除在外，并且仍然拥有