自定义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模块的目前的状况分析
Feb 24 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
python模块之re正则表达式详解
2017/02/03 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
广告学专业应届生求职信
2013/10/01 职场文书
简单租房协议书
2014/04/09 职场文书
文案策划专业自荐信
2014/07/07 职场文书
党员三严三实心得体会
2014/10/13 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
公司员工奖惩制度
2015/08/04 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
python urllib库的使用详解
2021/04/13 Python
Python数据类型最全知识总结
2021/05/31 Python
比较几种Redis集群方案
2021/06/21 Redis
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server