那么,如果自定义HTML属性不是有效的XHTML呢?

时间:2009-06-15 07:26:42

标签: html unobtrusive-javascript xhtml

我知道这是有些人不同意他们的原因,但这真的很重要吗?我认为他们提供的功能,与JavaScript交互以及从服务器存储和发送信息,都超过了验证问题。我错过了什么吗? “无效”HTML的后果是什么?并且自定义DTD不会解决它们吗?

15 个答案:

答案 0 :(得分:76)

分支是w3c在2年,5年,10年后出现并创建一个具有相同名称的属性。现在您的页面已损坏。

HTML5将为合法的自定义属性(例如data-myattr =“foo”)提供数据属性类型,所以也许你现在就可以开始使用它,并且在未来的名称冲突中相当安全。

最后,您可能会忽略自定义逻辑是class属性背后的理性。尽管通常将其视为样式属性,但实际上它是在元素上设置自定义元属性的合法方式。不幸的是,你基本上只限于布尔属性,这就是HTML5添加数据前缀的原因。

顺便说一下,“基本上是布尔”我原则上是指。实际上,没有什么可以阻止你在类名中使用分隔符来定义自定义值和属性。

class="document docId.56 permissions.RW"

答案 1 :(得分:22)

是的,您可以使用“数据”合法地添加自定义属性。

例如:

<div id="testDiv" data-myData="just testing"></div>

之后,只需使用最新版本的jquery来执行以下操作:

alert($('#testDiv').data('myData'))

或设置数据属性:

$('#testDiv').data('myData', 'new custom data')

由于jQuery几乎适用于所有浏览器,因此您不应该遇到任何问题;)

<强>更新

  • data-myData可以在某些浏览器中转换为data-mydata,就javascript引擎而言。最好一直保持小写。

答案 2 :(得分:10)

验证本身并不是目的,而是一种用于帮助及早发现错误的工具,并减少在多种浏览器类型上使用时网页可能面临的神秘渲染和行为问题的数量。

添加自定义属性现在不会影响这些问题,也不会在将来影响这些问题,但由于它们不会验证,这意味着当您评估页面验证的输出时,需要仔细挑选重要的验证问题和不重要的验证问题。每次更改页面并重新验证时,都必须重复此操作。如果您的页面完全验证,那么您将获得一个很好的绿色PASS消息,您可以继续进行下一个测试阶段,或者进行下一个需要进行的更改。

答案 3 :(得分:8)

我看到人们痴迷于验证做得比使用简单的自定义属性更糟糕/奇怪的事情:

<base href="http://example.com/" /><!--[if IE]></base><![endif]-->

在我看来,自定义属性确实无关紧要。正如其他人所说,注意标准中未来添加的属性可能会很好。但是现在我们在HTML5中有data- *属性,所以我们已经保存了。

真正重要的是你有正确的嵌套标签和正确引用的属性值。

我甚至使用自定义标记名称(HTML5引入的名称,如页眉,页脚等),但这些名称在IE中存在问题。

顺便说一句,我常常讽刺地发现所有那些验证狂热者都会在Google的聪明技巧面前鞠躬,如iframe上传。

答案 4 :(得分:7)

您可以使用JSON:

将HTML元素与属性相关联,而不是使用自定义属性
var customAttributes = { 'Id1': { 'custAttrib1': '', ... }, ... };

关于后果,请参阅SpliFF's answer

答案 5 :(得分:5)

在class属性中存储多个值不是正确的代码封装,只是一种令人费解的黑客行事方式。以自定义广告旋转器为例,使用jquery。在页面上做得更干净

<div class="left blue imagerotator" AdsImagesDir="images/ads/" startWithImage="0" endWithImage="10" rotatorTimerSeconds="3" />

让一些简单的jquery代码从这里开始工作。 现在,任何开发人员或网页设计人员都可以处理广告轮播,并在没有太多麻烦的情况下将值更改为此。

一年后重新投入项目或进入一个新的项目,前一个开发人员拆分并前往太平洋某个地方的某个岛屿,当代码以不明确的加密方式编写时,他们会试图找出意图:

<div class="left blue imagerotator dir:images-ads endwith:10 t:3 tf:yes"  />

当我们用c#和其他语言编写代码时,我们不会编写将所有自定义属性作为空格分隔字符串放在一个属性中的代码,并且每次我们需要访问或写入时都必须解析该字符串。想想下一个会对你的代码起作用的人。

答案 6 :(得分:2)

验证的事情是,今天它可能无关紧要,但你不知道它明天是否重要(并且,根据墨菲定律,它明天会很重要。)

选择面向未来的替代方案会更好。如果它们不存在(they do in this particular case),那么走的路就是发明一个未来证明的替代方案。

使用自定义属性可能是无害的,但是,为什么选择潜在有害的解决方案只是因为您认为(您永远无法确定)它会造成无害?如果未来证明替代方案过于昂贵或不实用,可能值得进一步讨论,但情况肯定不是这样。

答案 7 :(得分:2)

旧的讨论但是;在我看来,因为html是标记而不是编程语言,所以它应该总是被宽大地解释为标记“错误”。浏览器完全可以这样做。我认为这不会也不会改变。因此,唯一重要的实际标准是大多数浏览器都会正确显示您的html,并且会在几年内继续这样做。在那段时间之后,无论如何都会对你的html进行重新设计。

答案 8 :(得分:2)

只需将我的成分添加到混合物中,当您需要创建可以/可以使用自动化工具进行后处理的内容时,验证也很重要。如果您的内容有效,您可以更轻松地将标记从一种格式转换为另一种格式。例如,在解析您知道并可以验证遵循可预测格式的数据时,使用特定模式对XML执行有效的XHTML会更容易。

我,例如,我的内容是有效的XHTML,因为它经常被转换为XML用于各种作业,然后转换回来而不会丢失数据或出现意外的渲染结果。

答案 9 :(得分:1)

这取决于你的客户/老板/等等。他们是否要求它验证XHTML?

有些人说有很多变通办法 - 根据场景,他们可以很好地工作。这包括添加类,利用rel属性,以及甚至编写自己的解析器以从HTML注释中提取JSON的人。

HTML5提供了一种标准方法,使用“data-”为自定义属性添加前缀。无论如何,我建议你现在这样做,因为你有可能使用一个将在标准XHTML中使用的属性。

答案 10 :(得分:0)

使用非标准HTML可以使浏览器以“怪癖模式”呈现页面,在这种情况下,页面的某些其他部分可能呈现不同的方式,而定位等其他内容可能略有不同。但是,使用自定义DTD可能会解决这个问题。

答案 11 :(得分:0)

因为它们不是标准的,所以你不知道现在或将来会发生什么。正如其他人所说,W3C将来可能会开始使用这些相同的名称。但更危险的是你不知道“浏览器xxx”的开发者在遇到它们时做了什么。

也许页面以怪癖模式呈现,也许页面不会在某些不起眼的移动浏览器上的所有呈现,也许浏览器会泄漏内存,也许病毒杀手会在你的页面上窒息等等,等等。

我知道遵循这些标准可能看起来像势利一样。然而,一旦你因为不遵循它们而遇到问题,你就会不再这样想。然而,那时候为时已晚,您需要从头开始使用不同的框架...

答案 12 :(得分:0)

我认为开发人员验证只是为了验证,但是有一些事情要说它保持标记清洁。但是,因为每个(夸张警告!)浏览器都以不同的方式显示,所以没有标准。我们试图遵循标准,因为它让我们觉得我们至少有一些方向。有些人认为保持代码标准可以防止将来出现问题和冲突。我的观点:无论如何,没有人正确地完全执行标准,也可能假设你的所有代码最终都会失败。如果它工作正常,使用它,除非它凌乱或你只是试图忽略标准将其粘贴到W3C或其他东西。我认为重要的是要记住,标准实施得非常缓慢,网络在5年内发生了很大变化。我相信当他们需要解决潜在的冲突时,任何人都会多年​​注意。当你甚至不能依赖今天的标准时,没有理由计划未来的标准兼容性。

哦,我差点忘了,如果你的代码没有验证10只小猫会死。你是小猫杀手吗?

答案 13 :(得分:0)

如果标记无效,则Jquery .html(标记)不起作用。

答案 14 :(得分:0)

验证

您不需要自定义属性来提供验证。更好的方法是根据字段实际任务添加验证。

使用类分配含义。我有类名:

  • date(日期)
  • zip(邮政编码)
  • area(地区)
  • ssn(社会安全号码)

示例标记:

<input class="date" name="date" value="2011-08-09" />

示例javascript(使用jQuery):

$('.date').validate(); // use your custom function/framework etc here.

如果您需要针对特定​​情况或方案的特殊验证器,您只需为您创建新类(或使用selectors) 特例:

检查两个密码是否匹配的示例:

<input id="password" />
<input id="password-confirm" />

if($('#password').val() != $('#password-confirm').val())
{
 // do something if the passwords don't match
}

(这种方法与jQuery验证和mvc .net框架非常无缝,也可能与其他框架无关)

奖励:你可以分配多个用空格分隔的类=“ssn custom-one custom-two”

“从服务器发送信息”

如果您需要传回数据,请使用<input type="hidden" />。它们开箱即用。

(确保您没有传递任何带有隐藏输入的敏感数据,因为用户可以完全修改它们)