创建响应式HTML5模版.doc

创建响应式HTML5模版 HTML5目前发展势头良好，已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时，目前基于响应式的网页设计理念也得到了广泛的认同，开发者在开发基于HTML 5的网页时，如果能创建响应式的页面，则会增色不少，特别是能适配各类移动终端。在本文中，读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。 　　 创建良好的HTML 5模版的特征有： 新的特性应该只是基于HTML、CSS、DOM和Javscript 减少使用外部插件（如Flash） 良好的容错设计 使用更多的标签而不是太多的脚本 HTML 5应该是和设备无关的 开发过程应该是可视化的 在本文中，使用Adobe Macromedia Dreamweaver进行开发 步骤1 创建空白的HTML 5模版 首先，我们创建一个空白的模版，代码很简单，如下所示： !DOCTYPE HTML html head title/title /head body /body /html 步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示： !DOCTYPE HTML html head title/title /head body div id=wrapper !—开始区域 -- header/header nav/nav section class=content/section aside class=sidebar/aside footer/footer !—结束区域-- /div /body /html 读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的步骤3 往HTML 5标签中增加代码a) 首先往标题中增加如下代码： header hgroup 　h1 class=site-titlea href=#Simple HTML5 Template/a/h1/hgroup /header b) 往nav导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航： nav ul lia href=#Home/a/li lia href=#About/a/li lia href=#Parent Page/a ul lia href=#Child One/a/li lia href=#Child Two with child/a ul lia href=#Child One/a/li lia href=#Child Two/a/li lia href=#Child Three/a/li /ul /li lia href=#Child Three/a/li /ul /li lia href=#Contact/a/li /ul /nav b) 使用article标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用article标签了。如下代码所示： section class=content !—文章１-- article class=post h1 class=post-titlea href=#This is a title for post/a/h1 !-- 文章元数据-- div class=entry post-meta span class=post-authorRichard KS/span span class=post-date20th March 2013/span span class=post-categoryTutorials/span span class=post-tagHTML5, CSS3 and Responsive/span span class=post-comment10 Comments/span /div !-- 文章的内容 content -- div class=ent