自定义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的定位页面元素
Aug 29 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python实现bucket排序算法实例分析
2015/05/04 Python
基于Django用户认证系统详解
2018/02/21 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python实现word2Vec model过程解析
2019/12/16 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
C++:局部变量能否和全局变量重名
2014/03/03 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
理想国读书笔记
2015/06/25 职场文书
简短清晨问候语
2015/11/10 职场文书
诚信高考倡议书
2019/06/24 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL