10条简化工作的HTML5代码段

HTML5 包括了现代网站上常用的元素和属性，融合了 HTML 和 XHTML 标准。它的设计使得老旧的浏览器可以直接忽略新的 HTML 5 结构。

本文推荐了10段 HTML5 代码段，可以大大简化你的工作。

1 配合 HTML5 的 CSS 重设

/*html5doctor.com Reset Stylesheet
(Eric Meyer‘s Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
html5doctor.com/html-5-reset-stylesheet/ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:‘‘; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Source

2 HTML5 视频 （Flash 降级处理）

source

3 HTML5 起始页

source

4 创建 Google 静态地图

source

5 简单HTML5 起始页模板

source

6 HTML5 页面结构

        

Article title
                                
Posted on September 4th 2009 by Writer - 6 comments
                        
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                

                
                        
Article title
                                
Posted on September 4th 2009 by Writer - 6 comments
                        
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                

        
About section
                
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
        

        

source

7 HTML5 上下文菜单

Yes, this section right here

source

8 HTML5 数据列表

source

9 从Google地图获取线路指引

   Enter your location
   

source

10 HTML5 电子邮箱地址验证（基于正则表达式）

source

参见： 10 Best HTML5 Code Snippets to Simplify Your Tasks