什么的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知识点以及兼容性的更多相关文章

  1. HTML5知识点总结

    HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...

  2. HTML5 知识点

    HTML5 知识点   (1)语义化标记       <header>,<footer>,<nav>,<article>,<section> ...

  3. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  4. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  5. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  6. html5新增标签兼容性

    很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...

  7. html5标签的兼容性处理

    HTML5的语义化标签以及属性 1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单 2.使用他们能让代码语义化更直观,而且更方便SEO ...

  8. HTML5知识点总结（一）

    最近在复习前端的基础知识,在这里做一个总结,这是HTML5篇. 新特性 取消了过时的显示效果标记<font></font>和<center></center& ...

  9. html5 video标签兼容性与自定义控件

    Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...

随机推荐

  1. dp练习集

    动态规划(DP) // 以下题目来自牛客网 删括号 f[i][j][k] 表示序列s的前i个匹配序列t的前j个,序列s删除部分左括号与右括号数量差为k的情况是否可行 答案为 f[sl][tl][0] ...

  2. HashMap 和 concurrentHashMap

    从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. 在JDK1.5中,伟大的Doug Lea给我们带来了concurrent包,从 ...

  3. ubuntu 安装samba共享文件夹

    安装samba sudo apt-get install samba smbclient 配置samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf ...

  4. mysql批量增加表中新列存储过程

    一般访问量比较大的网站,请求日志表都是每天一张表独立创建. 业务需要为每张表都添加一个新列,纠结了半天,写了个存储过程如下: 日志表结构类型 tbl_ads_req_20140801, tbl_ads ...

  5. 原子操作atomic

    一.原子操作:即不可再细分的操作,最小的执行单位,在操作完之前都不会被任何事件中断. 整型原子操作:对int类型的操作变成原子操作.                 int i = 0;       ...

  6. 模板：数位DP

    第一次听说dp还有模板的... 当然你要是记忆化搜索的话,就可以有一些套路 这是一个伪代码: LL Dfs(LL now,限制,LL top){ if(!now) return 判断条件; if(!t ...

  7. c++设计模式：适配器模式

    1.主要思想:将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.  对于不同的客户我们可以这样使用适配器模式. 2.实现方法: # ...

  8. Django项目：CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  9. 第一个SpringBoot插件-捕获请求并且支持重新发起

    SpringBoot 插件入门 简介 公司用的是SpringBoot,api框架用的是swagger-ui,确实用的不错,但是在使用过程中发现一个问题,就是当前端正式调用的时候,如果参数一多的话模拟请 ...

  10. Django--Cookie和Session组件

    什么是Cookie: cookie的工作原理是:由服务端产生内容,浏览器收到请求之后保存在本地:当浏览器再次访问的时候,浏览器会自动带上这个cookie,这样服务端就能去通过这个cookie来判断你是 ...