美文网首页
自定义html标记替换html5新增元素

自定义html标记替换html5新增元素

作者: 爱上小媳妇 | 来源:发表于2020-04-01 10:57 被阅读0次

在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标记替换html5新增元素

      本文链接:https://www.haomeiwen.com/subject/ceeouhtx.html