HTML5教程：html標簽屬性通過w3c驗證

2024-08-26 00:16:47

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：html標簽的用用戶屬性通過w3c驗證.

昨天一個朋友的項目，客戶需要通過w3c驗證（可能你認為這是很操蛋的一件事情，其實我也這樣認為，瀏覽器兼容才是硬道理，但顧客就是死了很多年但人們還以為他還活著一個扯蛋的東東，西方人叫做上帝-god, 狗的，就差一個ri，他們的需求，不滿足就沒辦法呀）。但是他在標簽里寫了一些用戶屬性，所以通不過。問我解決的方案，想了一些方法給他。
首先解釋一下什么叫用戶屬性，如果你是高手，可以不用看。 <tag yourAttr="yourAttrValue" ></tag>。紅色的部分就是用戶屬性，有時候我們需要用javascript code某些東西的時候，這個必不可少。但他確實不能通過W3C的驗證。

下面是我能想到的一些解決方案：
一、用子標簽隱藏來代替用戶屬性。
<tag class="normal">
<tag class="myAttr">myAttrValue</tag>
<tag>內容</tag>
</tag>
然后設置css
.myAttr{display:none;}
怎么獲取那個數據，可以自己去查一下。

二、使用HTML5 DTD + data- 來解決
html5支持用戶自定義屬性，但要求必須以“data-”開始，可以通過驗證。
<tag data-myAttr="myAttrValue"></tag>

三、使用通用屬性來解決
title屬性是大多數標簽都可以有的，完全可以通過驗證。
<tag title="myAttrValue"></tag>
可是，問題來了，當鼠標移動到標簽上，title直接顯示出來，很不好的用戶體驗。
所以，想到了用javascript或者jquery來解決這個問題：
(function($){
$.fn.setUserAttr=function(options){
var defaults={dataName:"userData"};
var opts = $.extend({},defaults,options||{});
return this.each(function(){
$this=$(this);
var userAttrVal=$this.attr("title");
$this.attr("title","").data(opts.dataName,userAttrVal);
})
};
})(jQuery)

html:
<tag class="useAttr" title="myAttrValue"></tag>

應用：
$(".useAttr").setUserAttr();
通過$(".useAttr").data("userData")來獲取數據.
或者
$(".useAttr").setUserAttr({dataName:"yourAttrName"});
通過 $(".useAttr").data("yourAttrName ")來獲取數據

當然，只是個人的一些想法。

上一篇：Chrome瀏覽器使用技巧:快速熟練的使用Chrome

下一篇：網頁圖片處理教程:優化帶鋸齒PNG圖片