自定义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样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python2 与python3的print区别小结
2018/01/16 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
中药专业自荐信范文
2014/03/18 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
委托书英文
2015/01/28 职场文书
党员活动总结
2015/02/04 职场文书
简历自荐信范文
2015/03/09 职场文书
第二次离婚起诉书
2015/05/18 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
Kubernetes控制节点的部署
2022/04/01 Servers
如何利用python实现Simhash算法
2022/06/28 Python