自定义html标签和表单属性_在 html 网页中,定义表单使用 (回答 ) 标签元素。-CSDN博客

本文链接：https://blog.csdn.net/peter_666/article/details/7620559

最近看到网上好多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>

看看两种效果就知道了