自定義html標籤和表單屬性

peter_666發表於2012-05-31
HTML

最近看到網上好多html原始碼不是很明白 ，經過一番研究才知道是html自定義標籤

如：

<style type="text/css"> 
longdu\:my{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} 
longdu\:your{border:1px solid red;background-color: #FFF5F4;font-weight:bold;} 
</style> 

<longdu:my>我是龍犢</longdu:my> 
<longdu:your>你是龍犢</longdu:your>

可以實現不同的樣式


article\:文章正文{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;} 

<article:文章標題 style="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;"> 
這裡是文章的標題 
</article:文章標題> 
<article:文章正文> 
這裡是文章的正文 
</article:文章正文>


還有自定義表單屬性

如：

<input name="username" stand="10" />

在IE和Chrome中可以用
var s = document.getElementsByTagName("input")[0].stand;

取到stand屬性值

但是在Firefox中不能，怎麼辦呢，不要著急，這裡要用到html自定義表單屬性知識了

例如：

用javascript 物件的attributes屬性可以做到

var s = document.getElementsByTagName("input")[0].attributes["stand"].nodeValue;

哈哈，還算強大吧

下面的程式碼會更強大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文件</title>

<style type="text/css">

<!--

*{

margin:0;

padding:0;

}

header{

background:#090;

font-weight:bold;

position:absolute;

top:10px;

}

footer{

background:#f90;

font-weight:bold;

position:absolute;

bottom:10px;

}

-->

</style>

</head>

<body>

<header>這裡是頂部</header>

<footer>這裡是尾部</footer>

</div>

</body>

</html>

這段程式碼有IE中是通不過，在FireFox和chrome中可以，但是通過自定義標籤可以解決瀏覽器相容問題 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:layout>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>自定義html標籤</title>

<style type="text/css">

<!--

*{

margin:0;

padding:0;

}

layout\:header{

background:#090;

font-weight:bold;

position:absolute;

top:10px;

}

layout\:footer{

background:#f90;

font-weight:bold;

position:absolute;

bottom:10px;

}

-->

</style>

</head>

<body>

<layout:header>這裡是頂部</layout:header>

<layout:footer>這裡是尾部</layout:footer>

</body>

</html>

看看兩種效果就知道了


相關文章