Html5知识点以及兼容性
什么的HTNL5?
- HTML5 是最新的 HTML 标准。
- HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
- HTML5 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
HTML5 - 新特性
- 新的语义元素,比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件,比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由 <canvas> 和 <svg>)
- 强大的多媒体支持(借由 <video> 和 <audio>)
- 强大的新 API,比如用本地存储取代 cookie。
把 HTML5 元素定义为块级元素
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。可以把 CSS display 属性设置为 block,以确保老式浏览器中正确的行为:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Internet Explorer 的问题(完整的Shiv解决方案)
注意:Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
引用 shiv 代码的链接必须位于 <head> 元素中,因为 Internet Explorer 需要在读取之前认识所有新元素。
HTML5 Skeleton
<!DOCTYPE html>
<html> <head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head> <body> <h1>My First Article</h1> <article>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</article> </body>
</html>
亲自试一试
引用 shiv 代码的链接必须位于 <head> 元素中,因为 Internet Explorer 需要在读取之前认识所有新元素。
HTML5 Skeleton
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8"> <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]--> <style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head> <body> <header>
<h1>HTML5 SKeleton</h1>
</header> <nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav> <section> <h1>Famous Cities</h1> <article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article> <article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article> <article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article> </section> <footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer> </body>
</html>
Html5知识点以及兼容性的更多相关文章
- HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...
- HTML5 知识点
HTML5 知识点 (1)语义化标记 <header>,<footer>,<nav>,<article>,<section> ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】
摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...
- 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...
- html5新增标签兼容性
很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...
- html5标签的兼容性处理
HTML5的语义化标签以及属性 1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单 2.使用他们能让代码语义化更直观,而且更方便SEO ...
- HTML5知识点总结(一)
最近在复习前端的基础知识,在这里做一个总结,这是HTML5篇. 新特性 取消了过时的显示效果标记<font></font>和<center></center& ...
- html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...
随机推荐
- if __name__=='__main__'使用场景,彻底明白
本博中有一篇文章写了 if __name__=='__main__'的作用与原理http://www.cnblogs.com/fennudexiaoniao/p/7458324.html,但是好像似懂 ...
- kafka数据祸福和failover
k CAP帽子理论. consistency:一致性 Availability:可用性 partition tolerance:分区容忍型 CA :mysql oracle(抛弃了网络分区) CP:h ...
- 对CNN感受野一些理解
对CNN感受野一些理解 感受野(receptive field)被称作是CNN中最重要的概念之一.为什么要研究感受野呐?主要是因为在学习SSD,Faster RCNN框架时,其中prior box和A ...
- mysql工具使用
mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...
- Python基本数据类型之字典,集合,range
注: ange()是python的内置函数,用于创建整数的列表,可以生成递增或者递减的数列.ange也是python的内置函数,用于创造xrange对象用于迭代. 在python3中,range() ...
- Nopi 导出设置行高
1.导出excel行显示不完整数据客户不满意,需要我们处理 ; rowNum <= sheet.LastRowNum; rowNum++) { HSSFRow currentRow = shee ...
- const 有什么用途
可以定义const 常量:const可以修饰函数的参数.返回值,甚至函数的定义体.被const 修饰的东西都受到强制保护,可以预防意外的变动,能提高程序的健壮性
- 微信小程序上传报错:以下文件没有被打包上传: · .gitignore
简单粗暴的办法就是:找到gitignore文件,把该文件删除掉即可. 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这 ...
- 微信小程序开发(一)
引自http://www.cnblogs.com/mdnx/p/6004653.html 第一步 (下载开发工具) https://mp.weixin.qq.com/debug/wxadoc/dev ...
- DES、RSA、MD5、SHA、随机生成加密与解密
一.数据加密/编码算法列表 常见用于保证安全的加密或编码算法如下: 1.常用密钥算法 密钥算法用来对敏感数据.摘要.签名等信息进行加密,常用的密钥算法包括: DES(Data Encr ...