自定义html标记替换html5新增元素


Posted in HTML / CSS onOctober 17, 2008

在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。
代码如下:<!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>

用自定义标签可以解决浏览器兼容的问题
代码如下:
<!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>

HTML / CSS 相关文章推荐
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 #HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 #HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 #HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 #HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 #HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 #HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
You might like
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php设计模式小结
2013/02/15 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python 从相对路径下import的方法
2018/12/04 Python
使用python制作一个解压缩软件
2019/11/13 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
python中if及if-else如何使用
2020/06/02 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
附答案的Java面试题
2012/11/19 面试题
红领巾心向党演讲稿
2014/09/10 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL