html自定义标签

大部分浏览器支持自定义HTML标签和为标准标签自定义属性，而且很多浏览器对这两种自定义行为的支持都很直接了当。

自定义HTML标签

在firefox、chrome这种现代浏览器里，自定义标签很简单，就像标准的标签那样写就可以了，而且CSS和JavaScript存取自定义标签和标准标签并无二致。

</span> </div> <div class="line number1 index0 alt2" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript plain"><foo id=</code> <code class="jscript string">"Foo"</code> <code class="jscript plain">style=</code> <code class="jscript string">"color:red"</code> <code class="jscript plain">data-bar=</code> <code class="jscript string">"bar"</code> <code class="jscript plain">>foo tag!</foo></code> </div> <div class="line number2 index1 alt1" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript plain"><script></code> </div> <div class="line number3 index2 alt2" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">    </code> <code class="jscript plain">(</code> <code class="jscript keyword">function</code> <code class="jscript plain">(){</code> </div> <div class="line number4 index3 alt1" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log($(</code> <code class="jscript string">"foo"</code> <code class="jscript plain">).text());</code> <code class="jscript comments">//foo tag!</code> </div> <div class="line number5 index4 alt2" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log($(</code> <code class="jscript string">"foo"</code> <code class="jscript plain">).data(</code> <code class="jscript string">"bar"</code> <code class="jscript plain">));</code> <code class="jscript comments">//bar</code> </div> <div class="line number6 index5 alt1" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log(document.getElementById(</code> <code class="jscript string">"idFoo"</code> <code class="jscript plain">).innerHTML);</code> <code class="jscript comments">//foo tag!</code> </div> <div class="line number7 index6 alt2" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log(document.getElementById(</code> <code class="jscript string">"idFoo"</code> <code class="jscript plain">).getAttribute(</code> <code class="jscript string">"data-bar"</code> <code class="jscript plain">));</code> <code class="jscript comments">//bar</code> </div> <div class="line number8 index7 alt1" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">    </code> <code class="jscript plain">})();</code> </div> <div class="line number9 index8 alt2" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript plain">

firefox 21,chrome 27,IE 10表现都十分正常。IE9没有测试，据说也没问题。

不过据说在IE8及之前，自定义标签没那么简单，可以通过添加命名空间或者是document.createElement(“自定义标签名称”)来进行自定义HTML标签，不过如果你想在自定义的标签上使用CSS选择器，则必须使用document.createElement(“自定义标签名称”)，不管有没有定义过XML命名空间。参见这里。

还有人报告一个IE8自定义标签的问题，”事先已document.createElement(‘thetag’)，但后续通过innerHTML的方式添加的该元素，IE8是不认的,createElement + appendChild 则可以“。

新的项目已经决定只支持Firefox,Chrome,IE9+版本，IE6,7,8之类的随它去吧。

标签自定义属性

自定义标签属性经常会用到，但是一直是没有规范来约束如何自定义标签属性，导致一些混乱和移植性问题。现在HTML5增加了一个自定义data属性的特性。

很简单，只要自定义属性以data-开头，后面至少跟随一个字符即可，但是不能包含字符U+0041到U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z)。每个元素可包含多个自定义属性。

这些data-属性在页面上是不显示的，不会影响页面布局和风格，但它却是可读可写的。

jQuery已经支持通过data方法来读取自定义的data-属性，而且支持json格式的属性值，很方便。

"idFoo" style= "color:red" data-bar= "bar" data-obj= '{"key1":"value1"}' >foo tag!
</code> </div> <div class="line number3 index2 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">    </code> <code class="jscript plain">(</code> <code class="jscript keyword">function</code> <code class="jscript plain">(){</code> </div> <div class="line number4 index3 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log($(</code> <code class="jscript string">"foo"</code> <code class="jscript plain">).text());</code> <code class="jscript comments">//foo tag!</code> </div> <div class="line number5 index4 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log($(</code> <code class="jscript string">"foo"</code> <code class="jscript plain">).data(</code> <code class="jscript string">"bar"</code> <code class="jscript plain">));</code> <code class="jscript comments">//bar</code> </div> <div class="line number6 index5 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log($(</code> <code class="jscript string">"foo"</code> <code class="jscript plain">).data(</code> <code class="jscript string">"obj"</code> <code class="jscript plain">).key1);</code> <code class="jscript comments">//value1</code> </div> <div class="line number7 index6 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log(document.getElementById(</code> <code class="jscript string">"idFoo"</code> <code class="jscript plain">).innerHTML);</code> <code class="jscript comments">//foo tag!</code> </div> <div class="line number8 index7 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log(document.getElementById(</code> <code class="jscript string">"idFoo"</code> <code class="jscript plain">).innerText);</code> <code class="jscript comments">//foo tag!注:firefox 21不支持</code> </div> <div class="line number9 index8 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">        </code> <code class="jscript plain">console.log(document.getElementById(</code> <code class="jscript string">"idFoo"</code> <code class="jscript plain">).getAttribute(</code> <code class="jscript string">"data-bar"</code> <code class="jscript plain">));</code> <code class="jscript comments">//bar</code> </div> <div class="line number10 index9 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript spaces">    </code> <code class="jscript plain">})();</code> </div> <div class="line number11 index10 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:1em !important;"> <code class="jscript plain">

上面的代码中，在自定义属性中使用json数据需要注意，一定要在外层使用单引号’，内层使用双引号”,如果反过来,firefox和chrome都会报undefined。

自定义标签的innnerText属性，firefox 21不支持，输出”undefined”,chrome 27和IE 10输出正常。

也可以通过data(key,value)方式为自定义data属性赋值。

自定义data属性代码在friefox 21,chrome 27,IE 10测试通过。