0元购京东自营斐讯K2路由器返399元活动
置顶

Html5 模板

作者:     目录: 小代码     发表: 2011年05月26日

相对于Html4,Html5在语法上做了较大变动,并且新增了大量新的标签,使得代码更加简洁但功能更加强大。虽然说Html5变动较大,但有Html基础的人依然很容易转到Html5,下面提供了一个基本的Html5模板,并附加了详细说明,希望能让你快速上手。

Html5 模板下载

Html5源代码


<!doctype html>
  <html lang="zh">
  <head>
   <meta charset="utf-8">
   <title>Basic HTML5 Template</title>
   <meta name="description" content="Basic HTML5 Template from renniaofei.com">
   <meta name="keyword" content="renniaofei.com">
  <link rel="stylesheet" href="styles.css">
  <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  </head>
  <body>
   <header>
   <h1 id="logo"><a href="">Logo</a></h1>
   <p id="description">Description</p>
  <nav>
  <ul>
   <li><a href="http://www.bestdesignmag.com" title="Best Design Magazine">Best Design Magazine</a></li>
   <li><a href="http://www.mwtemplate.com" title="Moblie Web Template">Moblie Web Template</a></li>
   <li><a href="http://www.iDesignWallpaper.com" title="iDesignWallpaper">iDesignWallpaper</a></li>
   <li><a href="http://www.iPhoneFaves.com" title="iPhone Faves">iPhone Faves</a></li>
   <li><a href="http://www.IndustryIdea.com" title="Industry Idea">Industry Idea</a></li>
   <li><a target="_blank" href="http://www.twitter.com/noonewebdesign">Twitter</a></li>
  </ul>
  </nav>
  </header>
  <div id="wrap">
   <artcile>
    <section>Article Section</section>
   </article>
   <aside>Sidebar</aside>
  </div>
  <footer>Footer</footer>
  </body>
  </html>

Html5和Html4两者的区别

1. 文档类型 doctype 申明语法

Html4:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>

Html5:
<!doctype html>

2. head 标签

Html4:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Html5:
<meta charset=”utf-8″>

3. html 标签

XHTML:
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”zh”>

Html5:
<html lang=”zh”>

4. 新增标签

Html5 新增 <header> <nav> <article> <section> <aside> <footer> 等,详见 HTML5新增元素标记

Html5 常见布局样式

Html5 模板

Html5 模板

Html5 模板

5 个评论

  1. 北人博客 says:

    想问下博主,你用的是哪的主机,我是河南郑州的,打开的速度稍慢,我用的郑州电信。

  2. 生活随笔 says:

    早听说这个语言,很强的

北人博客进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注