html5高级程序设计第一章之html5的新功能介绍

1. 今天看了下html5高级程序设计这本书的第一章，现将自己觉得比较重要的一些东西罗列在这
2. HTML5包括了一下的一些新的功能点:
3. 新的DOCTYPE和字符集，和html4相比html5更加简洁明了如下所示：<!DOCTYPE html> 和 <meta charset="utf-8">
4. 语义化标记，新的片段类元素
5. header    //标记头部区域的内容(用于整个页面或页面中的一块区域)
6. footer     //标记尾部区域的内容(用于整个页面或页面中的一块区域)
7. section   //WEB页面中的一块区域
8. article    //独立的文章内容
9. aside    //独立文章或者引文
nav      //导航类辅助内容

在html5的实际编程中，开发人员必须使用css来定义样式，下面的代码包括了新的DOCTYPE，字符集和语义化标记元素。
View Code

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5   <meta charset="utf-8" />
6   <title>HTML5</title>
7   <link rel="stylesheet" href="html5.css">
8
9 </head>
10
11 <body>
12
13    <header>
14      <h1>Header</h1>
15      <h2>Subtitle</h2>
16      <h4>HTML5 Rocks!</h4>
17    </header>
18
19     <div id="container">
20
21         <nav>
22           <h3>Nav</h3>
23           <a href="">Link 1</a>
24           <a href="">Link 2</a>
25           <a href="">Link 3</a>
26         </nav>
27
28         <section>
29             <article>
30                 <header>
31                     <h1>Article Header</h1>
32                 </header>
33                 <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
34                 <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
35                 <footer>
36                     <h2>Article Footer</h2>
37                 </footer>
38             </article>
39             <article>
40                 <header>
41                     <h1>Article Header</h1>
42                 </header>
43                 <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
44                 <footer>
45                     <h2>Article Footer</h2>
46                 </footer>
47             </article>
48         </section>
49
50         <aside>
51             <h3>Aside</h3>
52             <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
53         </aside>
54         <footer>
55             <h2>Footer</h2>
56         </footer>
57     </div>
58 </body>
59
60 </html>

以上的页面是没有经过css来设置样式的，下面的css样式html5.css使用到了如：圆角(border-radius)和旋转变换(transform:roate();)
View Code

1 /* html5 css file, Copyright ?Pro HTML5 Programming */
2
3 body {
4     background-color:#CCCCCC;
5     font-family:Geneva,Arial,Helvetica,sans-serif;
6     margin: 0px auto;
7     max-width:900px;
8     border:solid;
9     border-color:#FFFFFF;
10 }
11
12 header {
13     background-color: #F47D31;
14     display:block;
15     color:#FFFFFF;
16     text-align:center;
17 }
18
19 header h2 {
20     margin: 0px;
21 }
22
23 h1 {
24     font-size: 72px;
25     margin: 0px;
26 }
27
28 h2 {
29     font-size: 24px;
30     margin: 0px;
31     text-align:center;
32     color: #F47D31;
33 }
34
35 h3 {
36     font-size: 18px;
37     margin: 0px;
38     text-align:center;
39     color: #F47D31;
40 }
41
42 h4 {
43     color: #F47D31;
44     background-color: #fff;
45   &nb

补充：web前端 , HTML 5 ,