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

今天看了下html5高级程序设计这本书的第一章，现将自己觉得比较重要的一些东西罗列在这
HTML5包括了一下的一些新的功能点:
新的DOCTYPE和字符集，和html4相比html5更加简洁明了如下所示：<!DOCTYPE html> 和 <meta charset="utf-8">

语义化标记，新的片段类元素

header    //标记头部区域的内容(用于整个页面或页面中的一块区域)
footer     //标记尾部区域的内容(用于整个页面或页面中的一块区域)
section   //WEB页面中的一块区域
article    //独立的文章内容
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     -webkit-box-shadow: 2px 2px 20px #888;
 46     -webkit-transform: rotate(-45deg);
 47     -moz-box-shadow: 2px 2px 20px #888;
 48     -moz-transform: rotate(-45deg);
 49     position: absolute;
 50     padding: 0px 150px;
 51     top: 50px;
 52     left: -120px;
 53     text-align:center;
 54     
 55 }
 56 
 57 nav {
 58     display:block;
 59     width:25%;
 60     float:left;
 61 }
 62 
 63 nav a:link, nav a:visited {
 64     display: block;
 65     border-bottom: 3px solid #fff;
 66     padding: 10px;
 67     text-decoration: none;
 68     font-weight: bold;
 69     margin: 5px;
 70 }
 71 
 72 nav a:hover {
 73     color: white;
 74     background-color: #F47D31;
 75 }
 76 
 77 nav h3 {
 78     margin: 15px;
 79     color: white;
 80 }
 81 
 82 #container {
 83     background-color: #888;
 84 }
 85 
 86 section {
 87     display:block;
 88     width:50%;
 89     float:left;
 90 }
 91 
 92 article {
 93     background-color: #eee;
 94     display:block;
 95     margin: 10px;
 96     padding: 10px;
 97     -webkit-border-radius: 10px;
 98     -moz-border-radius: 10px;
 99     border-radius: 10px;
100 }
101 
102 article header {
103     -webkit-border-radius: 10px;
104     -moz-border-radius: 10px;
105     border-radius: 10px;
106     padding: 5px;
107 
108 }
109 
110 article footer {
111     -webkit-border-radius: 10px;
112     -moz-border-radius: 10px;
113     border-radius: 10px;
114     padding: 5px;
115 }
116 
117 article h1 {
118     font-size: 18px;
119 }
120 
121     
122 aside {
123     display:block;
124     width:25%;
125     float:left;
126 }
127 
128 aside h3 {
129     margin: 15px;
130     color: white;
131 }
132 
133 aside p {
134     margin: 15px;
135     color: white;
136     font-weight: bold;
137     font-style: italic;
138 }
139     
140 
141 footer {
142     clear: both;    
143     display: block;
144     background-color: #F47D31;
145     color:#FFFFFF;
146     text-align:center;
147     padding: 15px;
148 }
149 
150 footer h2 {
151     font-size: 14px;
152     color: white;
153 }
154 
155 
156 /* links */
157 a {
158     color: #F47D31;
159 }
160 
161 a:hover {
162     text-decoration: underline;
163 }

注意：以上的例子最好使用chrome浏览器测试。

使用Selectors API简化选取操作：新的QuerySelector方法包括了：

querySelector()    //根据指定的选择规则，返回在页面中找到的第一个匹配元素

                       例如：querySelector("input.error"); 表示返回第一个                      CSS类名为“error”的文本输入框

querySelectorAll   //根据指定规则返回页面中所有想匹配的元素
                        例如：querySelectorAll("#results td");
                               表示返回ID为result的元素下所有的单元格

下面这个例子使用到了selector API的方法：

View Code

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <meta charset="utf-8" />
 6   <title>Query Selector All Demo</title>
 7 
 8   <style type="text/css">
 9     td {
10       border-style: solid;
11       border-width: 1px;
12       font-size: 200%;
13     }
14 
15 
16     #checkedResult {
17       color: green;
18       font-size: 200%;
19     }
20   </style>
21 
22 </head>
23 
24 <body>
25 
26   <section>
27 
28     <table>
29       <tr>
30         <td><input type="checkbox" name="A1">A1</td>
31         <td><input type="checkbox" name="A2">A2</td>
32         <td><input type="checkbox" name="A3">A3</td>
33       </tr>
34 
35       <tr>
36         <td><input type="checkbox" name="B1">B1</td>
37         <td><input type="checkbox" checked name="B2">B2</td>
38         <td><input type="checkbox" name="B3">B3</td>
39       </tr>
40 
41       <tr>
42         <td><input type="checkbox" name="C1">C1</td>
43         <td><input type="checkbox" name="C2">C2</td>
44         <td><input type="checkbox" name="C3">C3</td>
45       </tr>
46 
47     </table>
48     <div>Select various checkboxes, then hit the button to identify them using querySelectorAll("*:checked").</div>
49     <button type="button" id="findChecked" autofocus>Find checked boxes</button>
50     <div id="checkedResult"></div>
51 
52       <script type="text/javascript">
53         document.getElementById("findChecked").onclick = function() {
54 
55           var selected = document.querySelectorAll("*:checked");
56           var result = "Selected boxes are: ";
57 
58           for (var i = 0; i < selected.length; i++) {
59             result += (selected[i].name + " ");
60           }
61 
62           document.getElementById("checkedResult").innerHTML = result;
63 
64         }
65       </script>
66   </section>
67 
68 </body>
69 
70 </html>

今天先写这么多，有时间再写。

posted on 2012-05-10 08:00 Keep Running 阅读(2572) 评论(0) 编辑收藏举报

刷新页面返回顶部

Keep Running

导航

公告

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