最近看到網上好多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>
看看兩種效果就知道了