#1. What is HTML5?

  • Html5有新的语法，界面和多媒体元素
  • Html有新的form元素 和更方便简历web应用的新的API函数
  • HTML5 is cross-platform, designed to work on types of hardware (PCs, Tablets, Phones, TVs, etc.).
  • Html5是跨平台，设计在多种类型的硬件上的

##1.1. What is New in HTML5?

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html> <!--新的文件类型-->
<html>
<head>
<meta charset="UTF-8">  <!-- 编码机制-->
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>
</html>

##1.2. New Attribute Syntax
新标准允许有四种语法属性， 以input为例

1
2
3
4
5
<input type="text" value="John Doe" disabled> <!--空属性-->
<input type="text" value=John Doe><!--无引号属性-->
<input type="text" value="John Doe"><!--双引号属性-->
<input type="text" value='John Doe'><!--单引号属性-->
//四种属性都可能用到

##1.3. HTML5 - New Features

  1. 新的语法元素，例如<header>, <footer>, <article>, and <section>.
  2. 新的form控制，例如 number, date, time, calendar, and range
  3. <canvas> and <svg>强大的图像支持和<video> and <audio>多媒体支持
  4. 强大的新API

##1.4. HTML5 - Removed Elements

1
2
3
4
5
6
7
8
9
10
11
12
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

#2. HTML5 Browsers
帮助浏览器处理html5语言

##2.1. Browser Support

无论新旧服务器都会处理为识别的html文本为内联元素inline elements.，因此可以帮助浏览器处理未识别元素

##2.2. The Browser Trick（欺骗）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script> <!--The JavaScript statement document.createElement("myHero") is added-->
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

#3. HTML5 New Elements
New Semantic/Structural Elements
具体改变看文档
HTML5文档

#4. HTML5 Semantic Elements
语义元素Semantic elements是元素的意义

语义元素可以清晰的给开发者和浏览器描述含义, 没有语义的元素没有告诉任何含义， 例如：`: <div> and <span>`，带有语义的元素清晰的定义了含义：<form>, <table>, and <img>

##4.1. Browser Support
IE9（IE8及以下不支持） chrome 火狐 欧朋（opera）

##4.2. New Semantic Elements in HTML5

  • 现今许多web网站包含html代码，例如： <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer
  • html5提供新语义元素用以更清楚的定义网站的每个模块布局
    web site

##4.3. HTML5

Element
<section> 元素定义了一个文档中的片段

1
2
3
4
<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

##4.4. HTML5

Element

<article> element表示独立，自用的内容

article应该有意义，并应该尽可能在网站的剩余空间中独立分布
<article>应该用于：

  • Forum post
  • Blog post
  • News story
  • Comment
1
2
3
4
5
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

##4.5. HTML5