自定义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 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
canvas探照灯效果的示例代码
Nov 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
PHP4.04简明安装
2006/10/09 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python实现外卖信息管理系统
2018/01/11 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
财务工作个人求职的自我评价
2013/12/19 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
《颐和园》教学反思
2014/02/26 职场文书
争先创优演讲稿
2014/09/15 职场文书
中秋节寄语2015
2015/03/24 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle