web前端开发基础入门教程之HTML5 浏览器支持
目前市面上的浏览器有很多版本,你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。
HTML5 浏览器支持
现代的浏览器都支持 HTML5。
此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。
正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。
甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。 |
将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是块级 元素。
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:
实例
header, section, footer, aside, nav, main, article, figure {
display: block;
}
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
为 HTML 添加新元素
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
尝试一下 »
JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。
Internet Explorer 浏览器问题
你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。 |
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。
注意:国内用户请使用百度静态资源库(Google 资源库在国内不稳定):
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
完美的 Shiv 解决方案
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
学技术,从W3Cschool开始!
</article>
</body>
</html>
尝试一下 »
html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
关于HTML5的新元素,我们将会在“HTML 新元素”部分作出详细的介绍!
web前端开发基础入门教程之HTML5 浏览器支持相关推荐
- web前端基础入门教程之HTML5 新元素
随着HTML版本的更新迭代,有很多元素的使用也在不断的发生着变化,本节我们将介绍HTML5中的一些新的元素! HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML ...
- html前端学习基础入门教程之HTML代码的优化 关键词密度
与Google和MSN相比,Yahoo!对HTML代码的关注程度更高.很多测试表明,HTML文件中的错误,可能在Google或MSN中影响很小甚至几乎没有,不妨碍该页面出现在SERP的前端;但在Yah ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
- web前端零基础入门(一)
web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...
- HealthKit开发快速入门教程之HealthKit数据的操作
HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知 ...
- HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...
- HealthKit开发快速入门教程之HealthKit开发概述简介
HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为&qu ...
- web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格 文章目录 web前端开发基础--在网页中使用表格 前言 一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码 前言 本篇主要 ...
最新文章
- 计算机录入技能考试题,计算机文字录入员高级技能考试试卷
- 优质网站策划从四个方面进行判断
- 基于SSM的宠物医院信息管理系统javaweb毕业设计项目源码论文
- ppt转pdf使用哪种pdf虚拟打印机
- python如何运行整个项目_如何运行django项目
- 国美易卡存储引擎和事务的关系(国美易卡)
- Java实训——学生信息管理系统
- 赛码网在线考试无法使用外接摄像头解决方案
- PyQt5 文件保存对话框
- 中旅投资计划战略入股开元森泊,成为其第二大股东
- 中国2016最热门应用和技术盘点,看到第3条就惊呆了!
- maven异常记录-must be unique
- 离心泵水力设计——叶轮设计——5 进口边
- WebDriver定位元素的方法
- 6个月计算机专硕408备考经验
- 重复网页,网址已提交但未被选为规范网址—google
- 百度云盘帐号2019年2月最新
- 使用redis和mq完成接口的统一管理进化过程
- WIN7搜索不到共享打印机怎么办? 亲测成功
- EasyUi之动态数据表格的实现