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 <p 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 </p>
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浏览器测试。
10. 使用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 <p>Select various checkboxes, then hit the button to identify them using querySelectorAll("*:checked").</p>
49 <button type="button" id="findChecked" autofocus>Find checked boxes</button>
50 <p id="checkedResult"></p>
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>
今天先写这么多，有时间再写。
摘自 Keep Running
上一篇： 用户运营中有什么经典模型可以套用?
下一篇： jQuery实现统计复选框选中数量
推荐阅读
-
html5高级程序设计第一章之html5的新功能介绍
-
HTML5 笔记之 HTML5 的常见用法介绍
-
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
-
html5高级程序设计第一章之html5的新功能介绍
-
HTML5 笔记之 HTML5 的常见用法介绍
-
html5中关于canvas画图之画圆形的实例介绍
-
html5之使用web存储的具体介绍
-
HTML5之pushstate和popstate操作history无刷新改变当前url的详细介绍
-
html5中关于canvas画图之画圆形的实例介绍
-
html5之使用web存储的具体介绍