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 m@R_512_2604@in: 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
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
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5高级程序设计第一章之html5的新功能介绍
本文地址： https://pptw.com/jishu/586600.html