识别html5标签:
html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article></article>什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持,也没多大重视,今天早上在群里面看到这些标签的讨论,心里顿时冒出一个疑惑,我在chrome等现代浏览器下面用这些标签固然可以,那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。
复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出来了,不用想也知道这几个浏览器是不认这几个标签的,因此只是出现了一行文本:nav aside;
而现代浏览器下这两个是正常的块级标签,因此有换行。
我冒着试试看的心理,给nav和aside标签加上样式试试。
复制代码代码如下:
nav {color: red;}
aside {color:blue;}
自然也不行,那么我加上class呢,并添加样式呢。同样宣告失败。
网上搜了一番,原因是那些老式浏览器诞生的时候压根儿还没有这些标签呢,自然就不认了。解决办法也是有的,那就是在head里面添加如下脚本,让浏览器识别到这是一个标签,这样css也就能顺利渲染了。
复制代码代码如下:
document.createElement("nav");
document.createElement("aside");
不过这样写了之后字体颜色是变了,仍然是内联元素,所有还得把样式定义为display:block,不过这些css代码很多reset.css里已经有了。
为了支持所有新增html5标签,你可以这么写
复制代码代码如下:
function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者调用谷歌代码库:
复制代码代码如下:
<!--[if lt ie 9]>
<script src="/UploadFiles/2021-03-30/html5.js"><![endif]-->
也有写作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">< ![endif]-->
这个html5.js功能应该更强大,不仅仅是让老式浏览器识别html5标签那么简单。
联想:自定义标签
既然这些个html5里的标签对于老式浏览器来说都是“陌生人”,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。
复制代码代码如下:
<my>my</my>
<you>you</you>
复制代码代码如下:
my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能识别,并且也加上了样式。
但是在IE下面同样要用createElement创建之后才能识别。
html5 DOCTYPE:
以前一直傻乎乎的以为html5里面那行简洁的<!doctype html>文档头也是只能用在支持html5的浏览器里的,今天查了下资料才发现大错特错,自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合这种格式,都会进入标准模式。
html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article></article>什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持,也没多大重视,今天早上在群里面看到这些标签的讨论,心里顿时冒出一个疑惑,我在chrome等现代浏览器下面用这些标签固然可以,那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。
复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出来了,不用想也知道这几个浏览器是不认这几个标签的,因此只是出现了一行文本:nav aside;
而现代浏览器下这两个是正常的块级标签,因此有换行。
我冒着试试看的心理,给nav和aside标签加上样式试试。
复制代码代码如下:
nav {color: red;}
aside {color:blue;}
自然也不行,那么我加上class呢,并添加样式呢。同样宣告失败。
网上搜了一番,原因是那些老式浏览器诞生的时候压根儿还没有这些标签呢,自然就不认了。解决办法也是有的,那就是在head里面添加如下脚本,让浏览器识别到这是一个标签,这样css也就能顺利渲染了。
复制代码代码如下:
document.createElement("nav");
document.createElement("aside");
不过这样写了之后字体颜色是变了,仍然是内联元素,所有还得把样式定义为display:block,不过这些css代码很多reset.css里已经有了。
为了支持所有新增html5标签,你可以这么写
复制代码代码如下:
function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者调用谷歌代码库:
复制代码代码如下:
<!--[if lt ie 9]>
<script src="/UploadFiles/2021-03-30/html5.js"><![endif]-->
也有写作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">< ![endif]-->
这个html5.js功能应该更强大,不仅仅是让老式浏览器识别html5标签那么简单。
联想:自定义标签
既然这些个html5里的标签对于老式浏览器来说都是“陌生人”,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。
复制代码代码如下:
<my>my</my>
<you>you</you>
复制代码代码如下:
my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能识别,并且也加上了样式。
但是在IE下面同样要用createElement创建之后才能识别。
html5 DOCTYPE:
以前一直傻乎乎的以为html5里面那行简洁的<!doctype html>文档头也是只能用在支持html5的浏览器里的,今天查了下资料才发现大错特错,自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合这种格式,都会进入标准模式。
标签:
识别html5,标签,浏览器
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“在IE6/7/8下识别html5标签(让老式浏览器识别html5)”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]