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

在用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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

6276
来自专栏微信小程序开发

微信小程序常见问题(三)

知晓程序员,专注微信小程序开发的程序员! 一、获取formId 相信使用过小程序的同学,多少都收到过小程序的通过消息,如下: 这类通知消息,是和好友消息一样展示...

5216
来自专栏Jackson0714

【博客美化】07.添加打赏按钮

37410
来自专栏月色的自留地

在越狱的iPhone/iPad上安装自开发环境

自开发跟自编译意思一样,后者表示一个开发语言的开发能力成熟度;前者则表示一个开发平台的开发能力成熟度。 iPhone跟iPad面世这么多年,一直无法摆脱“...

3451
来自专栏Flutter入门

Android 屏幕录制GIF脚本

因为一直需要将Android手机上的效果录制下来,转成gif,然后上传到博客上。 原来都需要手动操作好几次,所以索性的写了一个脚本来配合使用。

2741
来自专栏数据小魔方

左右用R右手Pyhon系列——趣直播课程抓取实战

本文将以趣直播课程信息数据抓取为例,展示如何使用RCurl进行结合浏览器抓包操作进行简易数据抓取。 library("RCurl") livrary("XML"...

3467
来自专栏互联网杂技

AngularJS 对SEO是硬伤

在过去的2014年, 前端开发因为大量前端框架的出现开发模式有了巨大的改变,MVC这个web服务器端开发的模式,由于angularjs们的出现,变成了前端MVV...

7877
来自专栏IT大咖说

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务中遇到的问题吗? 因为在业务中引入Redux而带来的额外成本是否让你苦恼过? 会不会是我们打开R...

3394
来自专栏DeveWork

jQuery Builder:jQuery 库的精简之道

最近在做一个手机主题,为了用上看似华丽的Ajax 特效,不得不用上jQuery(不要问我为什么不用原生js,要是我会写就不用那么费劲了)。但众所周知Jquery...

2307
来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

2947

扫码关注云+社区

领取腾讯云代金券