自定义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实现预加载动画效果
Sep 06 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
Content-type 的说明
2006/10/09 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js实现日期级联效果
2014/01/23 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery的框架介绍
2016/05/11 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python 元组(Tuple)操作详解
2014/03/11 Python
python sort、sorted高级排序技巧
2014/11/21 Python
详解Python中dict与set的使用
2015/08/10 Python
python 异常处理总结
2016/10/18 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
骨干教师培训方案
2014/05/06 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
检讨书格式
2015/01/23 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书