欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-10 22:52:13
1. 今天看了下html5高级程序设计这本书的第一章，现将自己觉得比较重要的一些东西罗列在这 2. HTML5包括了一下的一些新的功能点: 3. ...

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

上一篇： ES6 理解ES2015(ES6)的Module

下一篇： html编程开发中模板编译实例

推荐阅读