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

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <title>Styling HTML5</title>
 6   <!--[if lt IE 9]>
 7   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8   <![endif]-->
 9 </head>
10 
11 <body>
12 
13 <h1>My First Article</h1>
14 
15 <article>
16 London is the capital city of England. 
17 It is the most populous city in the United Kingdom, 
18 with a metropolitan area of over 13 million inhabitants.
19 </article>
20 
21 </body>
22 </html>
23 亲自试一试
24 引用 shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素。
25 HTML5 Skeleton
26 实例
27 <!DOCTYPE html>
28 <html lang="en">
29 <head>
30 <title>HTML5 Skeleton</title>
31 <meta charset="utf-8">
32 
33 <!--[if lt IE 9]>
34 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
35 </script>
36 <![endif]-->
37 
38 <style>
39 body {font-family: Verdana, sans-serif; font-size:0.8em;}
40 header,nav, section,article,footer
41 {border:1px solid grey; margin:5px; padding:8px;}
42 nav ul {margin:0; padding:0;}
43 nav ul li {display:inline; margin:5px;}
44 </style>
45 </head>
46 
47 <body>
48 
49 <header>
50   <h1>HTML5 SKeleton</h1>
51 </header>
52 
53 <nav>
54 <ul>
55   <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
56   <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
57   <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
58 </ul>
59 </nav>
60 
61 <section>
62 
63 <h1>Famous Cities</h1>
64 
65 <article>
66 <h2>London</h2>
67 <p>London is the capital city of England. It is the most populous city in the United Kingdom,
68 with a metropolitan area of over 13 million inhabitants.</p>
69 </article>
70 
71 <article>
72 <h2>Paris</h2>
73 <p>Paris is the capital and most populous city of France.</p>
74 </article>
75 
76 <article>
77 <h2>Tokyo</h2>
78 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
79 and the most populous metropolitan area in the world.</p>
80 </article>
81 
82 </section>
83 
84 <footer>
85 <p>© 2014 W3Schools. All rights reserved.</p>
86 </footer>
87 
88 </body>
89 </html>
View Code

 

posted @ 2017-05-08 13:26  gq_orange  阅读(322)  评论(1)  编辑  收藏  举报