使用自定义标记来构建页面

在用html5来搭建页面的时候，为了兼容不支持html5标记的浏览器，需要把html5标记全部createElement一遍。

而这让我想起以前接触到的一个有意思的自定义标记构建页面的方法。那么自定义标记怎么能正确的被浏览器解析哪？这里需要用到一个文档命名空间。

XML是支持任意自定义标记的，而xhtml本身是html向XML过渡的产物，他也提供一个命名空间给我们。

比如我们要命名一个nut的前缀，只需要在头部加入这样的标记

其中xmlns就是指xhtml namespace。

下面就是定义标记的方法与格式：

坚果用户体验团队

然后给自己所定义的标签加上样式，一个基本的自定义标签搭建的页面就出来了。

XHTML的处境已经很尴尬，所以这些小知识跟大家分享一下，觉得好玩就行了，总体来说，没有太大的意义和使用价值吧。下面附上一个demo

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns:nut=”http://ux.sohu.com/“>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style>
* {
 padding:0;
 margin:0
 }
body{
 text-align:center;
 }
img{
 border:0px;
 }
nut:工具条{
	height: 40px;
	background-color: #2C2C2C;
	display: block;
}
nut:工具条 nut:团队标志{
	background: url("http://ux.sohu.com/images/logo_s.png") no-repeat scroll 8px center transparent;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 40px 10px 32px;
    color: #999999;
    display: block;
    float: left;
}
nut:页面上部 {
 position:relative;
 display:block;
 margin:0 auto;
 height:150px;
 background:#AD4C4C;
 }
 nut:站点标志{
 	height:150px;
 	overflow: hidden;
 	display:block;
 }
nut:站点标志 img{
	margin:-30px 0 0 0;
}
nut:主体部分 {
 display:block;
 margin:0 auto;
 background:#fff;
 height:400px;
 }
nut:页面下部 {
 display:block;
 margin:0 auto;
 height:100px;
 width:100%;
 background:#D6D6D6;
 position: absolute;
 bottom:0;
 left:0;
 }
nut:导航菜单 {
 background-color: #CCCCCC;
 border-bottom: 1px solid #BBBBBB;
 border-top: 1px solid #EEEEEE;
 height: 28px;
 overflow: hidden;
 text-align: center;
 display:block;
 }
nut:导航菜单 a {
 color: #666666;
 font-size: 14px;
 line-height: 28px;
 padding: 0 10px;
 text-decoration: none;
 }
</style>
</head>
<body>
<nut:工具条>
		<nut:团队标志>坚果用户体验团队User Experience Team for Mysohu</nut:团队标志>
</nut:工具条>
<nut:页面上部>
<nut:站点标志><img alt="" src="http://ux.sohu.com/images/topimg_01.png"></nut:站点标志>
</nut:页面上部>
<nut:导航菜单>
<a href=”#”>日志</a>
<a href=”#”>前端框架</a>
<a href=”#”>文档规范</a>
<a href=”#”>招聘</a>
</nut:导航菜单>
<nut:主体部分>
</nut:主体部分>
<nut:页面下部></nut:页面下部>
</body>
</html>

提示：你可以先修改部分代码再运行。