2014.01.18 笔记
HTml5 页面示例:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 Demo</title> 6 <!--[if IE]> 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 8 <![endif]--> 9 <style> 10 body { 11 width: 480px; margin: 0px auto; 12 } 13 14 header h1 { 15 font-size: 36px; margin: 0px; 16 } 17 18 header h2 { 19 font-size: 18px; margin: 0px; color: #888; 20 font-style: italic; 21 } 22 23 nav ul { 24 list-style: none; padding: 0px; display: block; 25 clear: right; background-color: #666; 26 padding-left: 4px; height: 24px; 27 } 28 29 nav ul li { 30 display: inline; padding: 0px 20px 5px 10px; 31 height: 24px; border-right: 1px solid #ccc; 32 } 33 34 nav ul li a { 35 color: #EFD3D3; text-decoration: none; 36 font-size: 13px; font-weight: bold; 37 } 38 39 nav ul li a:hover { 40 color: #fff; 41 } 42 43 article > header time { 44 font-size: 14px; display: block; width: 130px; 45 padding: 2px; text-align: center; background-color: #993333; 46 color: #fff; font-weight: bold; -moz-border-radius: 6px; 47 -webkit-border-radius: 6px; border-radius: 6px; float: left; 48 margin-bottom: 10px; 49 } 50 51 article > header time span { 52 font-size: 10px; font-weight: normal; 53 text-transform: uppercase; 54 } 55 56 article > header h1 { 57 font-size: 20px; float: left; 58 margin-left: 14px; text-shadow: 2px 2px 5px #333; 59 } 60 61 article > header h1 a { 62 color: #993333; 63 } 64 65 article > section header h1 { 66 font-size: 16px; 67 } 68 69 article p { 70 clear: both; 71 } 72 73 footer p { 74 text-align: center; font-size: 12px; 75 color: #888; margin-top: 24px; 76 } 77 78 article > section form { 79 border: 1px solid #888; 80 -moz-border-radius: 10px; 81 -webkit-border-radius: 10px; 82 border-radius: 10px; 83 -moz-box-shadow: 10px 10px 5px #888; 84 -webkit-box-shadow: 10px 10px 5px #888; 85 box-shadow: 10px 10px 5px #888; 86 background-color: #eee; 87 padding: 10px; margin-bottom: 30px; 88 } 89 90 article > section label { 91 font-weight: bold; font-size: 13px; 92 } 93 94 article > section input { 95 margin-bottom: 3px; font-size: 13px; 96 } 97 98 article > section div#no-canvas { 99 display: none; 100 } 101 102 canvas { 103 border: 1px solid #888; 104 -moz-border-radius: 10px; 105 -webkit-border-radius: 10px; 106 border-radius: 10px; 107 -moz-box-shadow: 10px 10px 5px #888; 108 -webkit-box-shadow: 10px 10px 5px #888; 109 box-shadow: 10px 10px 5px #888; 110 background-color: #eee; 111 } 112 </style> 113 </head> 114 <body> 115 <header> 116 <hgroup> 117 <h1>Page Subject</h1> 118 <h2>An example of HTML5 and CSS3 in action</h2> 119 </hgroup> 120 </header> 121 122 <nav> 123 <ul> 124 <li><a href="#">Html5 Test</a></li> 125 <li><a href="#">hello</a></li> 126 <li><a href="#">some thing</a></li> 127 </ul> 128 </nav> 129 130 <article> 131 <header> 132 <time datetime="2014-01-18" pubdate> 2014/01/18 </time> 133 <h1> 134 <a href="#" title="Link to this post" rel="bookmark">Article Heading</a> 135 </h1> 136 </header> 137 <p>This is an article that demonstrates some of the new features that HTML5 and CSS3 has to offer. This article contains several sections, each with its own heading, as well as a video element which will play a video without Flash on browsers that support it.</p> 138 <section> 139 <header> 140 <h1>This is a section heading</h1> 141 </header> 142 <p>This is an example of a basic section of a document. A section can refer to different parts of a document,application, or page. According to the draft W3C spec, HTML5 sections usually have headings.</p> 143 </section> 144 145 <section> 146 <header> 147 <h1>This is a video section</h1> 148 </header> 149 <p> 150 <video src="aaa" controls autoplay> 151 <div class="no-html5-video"> 152 <p>This video will work in Mozilla Firefox or Google Chrome only.</p> 153 </div> 154 </video> 155 </p> 156 </section> 157 158 <section> 159 <header> 160 <h1>This is a feedback form</h1> 161 </header> 162 <p><form> 163 <label for="contact_name">Name:</label> 164 <input id="contact_name" placeholder="Enter your name" autofocus><br /> 165 <label for="contact_email">E-mail:</label> 166 <input type="email" id="contact_email" placeholder="Enter your email address"><br /> 167 <label for="contact_phone">Phone:</label> 168 <input type="tel" id="contact_phone" placeholder="Enter your phone number"><br /> 169 <label for="contact_callback">Callback on:</label> 170 <input type="datetime" id="contact_callback"><br /> 171 <label for="contact_priority">Priority:</label> 172 <input type="range" min="1" max="5" value="1" id="contact_priority"><br /><br /> 173 <input type="submit" value="Request Call"> 174 </form></p> 175 </section> 176 177 </article> 178 179 <footer> 180 <p>This is Footer.</p> 181 </footer> 182 </body> 183 </html>
