html5实战
时间：2010-09-15 来源：wqj0405
|
|
|
| 003 | <head> |
| 004 | <meta charset="utf-8" /> |
| 005 | <title>Smashing HTML5!</title> |
| 006 |
| 007 | <link rel="stylesheet" href="css/main.css" type="text/css" /> |
| 008 |
| 009 | <!--[if IE]> |
| 010 | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
| 011 | <!--[if lte IE 7]> |
| 012 | <script src="js/IE8.js" type="text/javascript"></script><![endif]--> |
| 013 |
| 014 | <!--[if lt IE 7]> |
| 015 | <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> |
| 016 | </head> |
| 017 |
| 018 | <body id="index" class="home"> |
| 019 |
| 020 | <header id="banner" class="body"> |
| 021 | <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1> |
| 022 |
| 023 | <nav><ul> |
| 024 | <li class="active"><a href="#">home</a></li> |
| 025 | <li><a href="#">portfolio</a></li> |
| 026 |
| 027 | <li><a href="#">blog</a></li> |
| 028 | <li><a href="#">contact</a></li> |
| 029 | </ul></nav> |
| 030 |
| 031 | </header><!-- /#banner --> |
| 032 |
| 033 | <aside id="featured" class="body"><article> |
| 034 | <figure> |
| 035 | <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" /> |
| 036 | </figure> |
| 037 | <hgroup> |
| 038 |
| 039 | <h2>Featured Article</h2> |
| 040 | <h3><a href="#">HTML5 in Smashing Magazine!</a></h3> |
| 041 | </hgroup> |
| 042 | <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p> |
| 043 |
| 044 | </article></aside><!-- /#featured --> |
| 045 |
| 046 | <section id="content" class="body"> |
| 047 | <ol id="posts-list" class="hfeed"> |
| 048 | <li><article class="hentry"> |
| 049 | <header> |
| 050 | <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2> |
| 051 |
| 052 | </header> |
| 053 |
| 054 | <footer class="post-info"> |
| 055 | <abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> |
| 056 | 10th October 2005 |
| 057 | </abbr> |
| 058 |
| 059 | <address class="vcard author"> |
| 060 |
| 061 | By <a class="url fn" href="#">Enrique Ramírez</a> |
| 062 | </address> |
| 063 | </footer><!-- /.post-info --> |
| 064 |
| 065 | <div class="entry-content"> |
| 066 |
| 067 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p> |
| 068 | </div><!-- /.entry-content --> |
| 069 | </article></li> |
| 070 |
| 071 | <li><article class="hentry"> |
| 072 | ... |
| 073 | </article></li> |
| 074 |
| 075 | <li><article class="hentry"> |
| 076 | ... |
| 077 | </article></li> |
| 078 |
| 079 | </ol><!-- /#posts-list --> |
| 080 | </section><!-- /#content --> |
| 081 |
| 082 | <section id="extras" class="body"> |
| 083 | <div class="blogroll"> |
| 084 | <h2>blogroll</h2> |
| 085 |
| 086 | <ul> |
| 087 | <li><a href="#" rel="external">HTML5 Doctor</a></li> |
| 088 | <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> |
| 089 |
| 090 | <li><a href="#" rel="external">Smashing Magazine</a></li> |
| 091 | <li><a href="#" rel="external">W3C</a></li> |
| 092 | <li><a href="#" rel="external">Wordpress</a></li> |
| 093 |
| 094 | <li><a href="#" rel="external">Wikipedia</a></li> |
| 095 | <li><a href="#" rel="external">HTML5 Doctor</a></li> |
| 096 | <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> |
| 097 |
| 098 | <li><a href="#" rel="external">Smashing Magazine</a></li> |
| 099 | <li><a href="#" rel="external">W3C</a></li> |
| 100 | <li><a href="#" rel="external">Wordpress</a></li> |
| 101 |
| 102 | <li><a href="#" rel="external">Wikipedia</a></li> |
| 103 | <li><a href="#" rel="external">HTML5 Doctor</a></li> |
| 104 | <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> |
| 105 |
| 106 | <li><a href="#" rel="external">Smashing Magazine</a></li> |
| 107 | <li><a href="#" rel="external">W3C</a></li> |
| 108 | <li><a href="#" rel="external">Wordpress</a></li> |
| 109 |
| 110 | <li><a href="#" rel="external">Wikipedia</a></li> |
| 111 | </ul> |
| 112 | </div><!-- /.blogroll --> |
| 113 |
| 114 | <div class="social"> |
| 115 |
| 116 | <h2>social</h2> |
| 117 | <ul> |
| 118 | <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li> |
| 119 | <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li> |
| 120 |
| 121 | <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li> |
| 122 | <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li> |
| 123 | <li><a href="http://website.com/feed/" rel="alternate">rss</a></li> |
| 124 |
| 125 | <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li> |
| 126 | </ul> |
| 127 | </div><!-- /.social --> |
| 128 | </section><!-- /#extras --> |
| 129 |
| 130 | <footer id="contentinfo" class="body"> |
| 131 | <address id="about" class="vcard body"> |
| 132 | <span class="primary"> |
| 133 | <strong><a href="#" class="fn url">Smashing Magazine</a></strong> |
| 134 |
| 135 | <span class="role">Amazing Magazine</span> |
| 136 | </span><!-- /.primary --> |
| 137 |
| 138 | <img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" /> |
| 139 | <span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span> |
| 140 |
| 141 | </address><!-- /#about --> |
| 142 | <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p> |
| 143 | </footer><!-- /#contentinfo --> |
| 144 |
| 145 | </body> |
| 146 |
</html>
The CSS
|
相关阅读 更多 +
