1. Today I have read the first chapter of the html5 advanced programming book. Now I want to list some important things here.
2. HTML5 includes some new features:
3. The new DOCTYPE and character set are more concise and clear than html4: <! DOCTYPE html> and <meta charset = "UTF-8">
4. semantic tag, new fragment class Elements
5. header // indicates the content of the header area (used for an area of the entire page or page)
6. footer // content that marks the ending area (used for an area of the entire page or page)
7. section // a part of the WEB page
8. article // independent article content
9. aside // independent article or citation
Nav // navigation content
In actual html5 programming, developers must use css to define styles. The following Code includes the new DOCTYPE, Character Set, and semantic markup elements.
View Code
1 <! DOCTYPE html>
2 3
4 5 <meta charset = "UTF-8"/>
6 <title> HTML5 </title>
7 <link rel = "stylesheet" href = "html5.css">
8
9 10
11 <body>
12
13 14 15 16 17 18
19 <div id = "container">
20
21 <nav>
22 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 31 32 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 37 </footer>
38 </article>
39 <article>
40 41 42 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 46 </footer>
47 </article>
48 </section>
49
50 <aside>
51 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 56 </footer>
57 </div>
58 </body>
59
60
If the preceding page is not configured with CSS, the following CSS sample html5.css is used, for example, border-radius and 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;
59width: 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: whitelist;
131}
132
133 aside p {
134 margin: 15px;
135 color: whitelist;
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: whitelist;
153}
154
155
156/* links */
157 {
158 color: # F47D31;
159}
160
161 a: hover {
162 text-decoration: underline;
163}
Note: The preceding example is best tested using chrome.
10. Use the Selectors API to simplify the selection operation: the new QuerySelector method includes:
QuerySelector () // returns the First Matching Element found on the page based on the specified selection rule
For example: querySelector ("input. error"); returns the text input box named "error" in the first CSS class.
QuerySelectorAll // return all elements on the page to be matched according to the specified rule
For example: querySelectorAll ("# results td ");
Returns all cells under the element whose ID is result.
The following example uses the selector API method:
View Code
1 <! DOCTYPE html>
2 3
4 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 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
Today, I write so much data that I have time to write.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
