HTML5模板源代码下载

2011年6月11日 发表评论 阅读评论

什么是HTML5?

HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。

HTML 5有两大特点:首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。其次,追加了本地数据库等Web应用的功能。HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。

把以下引用中的代码复制粘贴到文本文件里,然后命名为html5.html即可,你的浏览器需要支持html5。

<!doctype html><!– simplified doctype works for all previous versions of HTML as well –>
<!– http://shandian.biz/ –>
<!– Paul Irish’s technique for targeting IE, modified to only target IE6, applied to the html element instead of body –>
<!–[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]–>
<!–[if (gt IE 6)|!(IE)]><!–><html lang="en" class="no-js"><!–<![endif]–>
<head>
    <!– simplified character encoding –>
    <meta charset="utf-8">
    <title>Easy HTML5 Template</title>
    <meta name="description" content="Easy HTML5 Template">
    <meta name="author" content="">
    <!– Delete these two icon references once you’ve placed them in the root directory with these file names –>
    <!– favicon 16×16 –>
    <link rel="shortcut icon" href="/favicon.ico">
    <!– apple touch icon 57×57 –>
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!– Main style sheet. Change version number in query string to force styles refresh –>
    <!– Link element no longer needs type attribute –>
    <link rel="stylesheet" href="css/screen.css?v=1.0">
    <!– Modernizr for feature detection of CSS3 and HTML5; must be placed in the "head" –>
    <!– Script tag no longer needs type attribute –>
    <script src="js/modernizr-1.6.min.js"></script>
    <!– Remove the script reference below if you’re using Modernizr –>
    <!–[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]–>
</head>
<!– If possible, use the body as the container –>
<!– The "home" class is an example of a dynamic class created on the server for page-specific targeting –>
<body class="home">
    <!– ******************************************************************** –>
    <!– The content below is for demonstration of some common HTML5 elements  –>
    <!– More than likely you’ll rip out everything except header/section/footer and start fresh –>
    <!– First header has an ID so you can give it individual styles, and target stuff inside it –>
    <header id="hd1">
        <!– "hgroup" is used to make two headings into one, to prevent a new document node from forming –>
        <hgroup>
        <h1>Easy HTML5 Template</h1>
        <h2>tagline</h2>
        </hgroup>
        <!– Main nav, styled by targeting "#hd1 nav"; you can have more than one nav element per page –>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header><!– #hd1 –>
    <!– This is the main "div" that wraps the content generically; don’t use "section" for this –>
    <div id="main">
        <!– The first of two "section" elements for demo purposes; optional class added for styling (hs1 = "home section 1") –>
        <section class="hs1">
        <!– Each section should begin with a new h1 (not h2), and optionally a header –>
        <!– You can have more than one header/footer pair on a page –>
            <header>
            <h1>This is a Page Sub Title</h1>
            </header>
            <p>Some content…</p>
            <!– The h2 below is a sub heading relative to the h1 in this section, not for the whole document –>
            <h2>Demonstrating EM and STRONG</h2>
            <!– "strong" is used for SEO and contextual hierarchy –>
            <p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>
            <!– "b" is used for stylistic offset of text that’s NOT important contextually –>
            <p><b>This text has visual importance but has no contextual or SEO importance</b></p>
            <!– "em" is used for colloquial-style emphasis –>
            <p>This is a <em>very</em> colloquial expression.</p>
            <!– There can be multiple footers on each page –>
            <!– Secondary headers and footers don’t necesarily need ids; they can be targeted via context (i.e. ".hs1 footer") –>
            <footer>
            <!– incite a riot: http://24ways.org/2009/incite-a-riot –>
            <p>Author: <cite>Louis Lazaris</cite></p>
            </footer>
        </section><!– .hs1 –>
        <!– This is another section; doesn’t have header/footer because it’s not required –>
        <section class="hs2">
        <h1>This is another section</h1>
        <p>This is some dummy content</p>
        </section><!– .hs2 –>
    </div><!– #main –>
    <!– The "aside" element could be a sidebar (outside an article or section) –>
    <!– Or it could reference other tangentially-related content within an article or section –>
    <aside id="sidebar">
    <p>Sidebar content</p>
    </aside>
    <!– The main footer has an ID for targeting, similar to the main header –>
    <footer id="f1">
    <p>copyright ? year</p>
    </footer><!– #f1 –>
<!– Remote jQuery with local fallback; taken from HTML5 Boilerplate http://html5boilerplate.com –>
<!– jQuery version might not be the latest; check jquery.com –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape(‘%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E’))</script>
<!– Below is your script file, which has a basic JavaScript design pattern that you can optionally use –>
<!– Keep this and plugin scripts at the bottom for faster page load; combining and minifying scripts is recommended –>
<script src="js/general.js"></script>
<!– asynchronous analytics code by Mathias Bynens; change UA-XXXXX-X to your own code; http://mathiasbynens.be/notes/async-analytics-snippet –>
<!– this can also be placed in the <head> if you want page views to be tracked quicker –>
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = (‘https:’ == location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
    s.parentNode.insertBefore(g, s);
})(document, ‘script’);
</script>
</body>
</html>


转载请注明来自:[闪电博客]http://shandian.biz/1098.html

分类: 建站教程 标签:
  1. 免费体验金
    2013年11月23日18:28 | #1

    昨天不知出于什么原因,在网吧玩着LOL,心血来潮的喊了一句,谁能让我不玩LOL我就娶她!然后意想不到的事情发生了,网吧女网管直接把我电源线给拔掉了!我瞬间石化了……

  2. www.520haoma.com/en/
    2013年11月25日15:28 | #2

    今早去公司楼下新开的一家超市买了个2元钱的面包,注意,是2元。付款的时候,收银员给我说,现在超市搞活动,买任意面包,加2元可再得同款面包一个,然后。。。我给了她2元,她再给了个面包给我。。。我满意的走了。。。就这么满意的走了。。

  3. ea平台百家乐
    2013年11月25日21:36 | #3

    早上上班经过十字街的时候,一个小男孩叫住了我,他说: 姐姐,我的小鸡鸡好可爱,摸起来手感好好的!姐姐,你摸摸吧! 我一听,顿时脸上浮出了三根黑线 小男孩将一只小鸡递给我,看我一脸的不悦;也没在意说: 姐姐,看吧,这只小鸡鸡多可爱呀!摸起来手感多好啊! 我听了,顿时便凌乱了

  4. 现金棋牌游戏
    2013年12月2日04:35 | #4

    ,在这世上惟一件事比别人议论更糟,那就是无人议论你

  5. 体育博彩排行
    2013年12月22日14:36 | #5

    1.时688年,博州刺史琅琊王李冲起兵谋反 ,反对武则天当政,豫州刺史越王李贞起兵响应。 叛军一路烧杀掳掠,奸淫掠夺,无恶不作。张光辅上京,将沿途所见,于殿上泣声奏曰:“吾皇,臣于途中亲眼所见,敌人节操丧失”一旁的狄仁杰怒目圆睁,大喝道:“你胡说!我何时操过丧尸!” 2.某男看破红尘准备出家。寺院方丈提出一条件:全身赤裸JJ上挂一铃铛,看见美女而铃不响则为成功。方丈请出一PL美女,铃铛大响。此男怒:我就不信你们寺院和尚的铃铛都不会响。方丈遂请出全寺的和尚,均挂一铃铛 美女再出,果然只有此男的铃铛大响。此男羞愧,弯腰去捡,听得后面铃声响成一片! 3.唐僧:悟空,你变成套套吧,今天为师要亲自收拾这个女妖精。 唐僧:悟空,你变成伟哥吧,今天为师收拾这个女妖精,直到她求饶。 唐僧:今天好无聊悟空,你变成女妖精吧! 唐僧:悟空,为师已经厌倦这种生活了, 你把我变成女妖精吧。唐僧:悟空,你今天变成为师吧! 唐僧:悟空,你今天不用变了! 4.”母后,您当着儿臣面和父皇行房真的没事吗?” “傻孩子,你可以当做是一次学习啊。” “可是……父皇一个时辰前已经驾崩了啊!” “可是……你父皇只有这个时候是硬的啊!” 5.老婆,刘翔比赛马上就开始了,你看选 手都准备 下蹲起跑了,让我看完咱们再做 好吗?” “不嘛不嘛,人家现在就想要!” 男 人无奈关了电视,与老婆大干一番。完事之 后,男人缓缓打开电视, 这时电视里解说 员激动地喊着:“刘翔冲刺!赢了!冠军 12秒88 6.甲:经过昨晚,我终于不是处男了!?乙:恭喜恭喜,坐下来,慢慢说!甲:还不能坐。。。 7.傍晚在小区散步,看到一个老奶奶不小心把拐杖掉在了地上,费了好大力气也没能捡起来。这时老奶奶看到了我,她连忙说:“孩子,我年纪大了,弯不下腰,你帮帮忙吧。“ 我说:“没问题!” 说完,双手摁住老奶奶的头,用力把她的腰压弯了下去。 8.一禅师见一蝎子掉到水里,决心救它。谁知一碰,蝎子蛰了他手指。禅师无惧,再次出手,岂知又被蝎子狠狠蛰了一次。一根手指被蛰得又肿又粗,禅师不惧蝎蛰,换一指继续,旁有一人忍不住说:它老蜇人,何必救它? 禅师打量着肿大的两根手指自语:师太应该满意了。。。9.「把胸罩脱了。」「干嘛啦人家喜欢!嘻嘻!」「我叫你脱了。」 「就不脱呢你来抓我呀嘤嘤嘤!」 「再说一次,脱了。」「你今天怎么了?不觉得人家这样「MLGB的离婚!!!!!!!!」 「脱啦脱啦,别生气嘛老婆!」 10..不要……不要……不要……!要……要…要……!大力……大力……大力……!深入……深入……深入……!还要…还要……还要……!高举……加快……推进……探索……坚持……两手抓……要硬……狠抓……奋力……!!!啪啪啪啪啪啪啪…某大会结束了……你懂的,吓尿,。。。?PK

  6. 足球赔率澳门盘
    2013年12月25日00:22 | #6

    一伙人无聊的说笑,看见远处一个姑娘,打扮的花枝招展,粉末艳丽,有人就开腔了,说道;这女子要给我的话哈哈,我一晚能干她几十次,不一会女子到身边经过。 只听那女子叫了说话那人一声;爸..在干吗呢? 哈哈哈哗然一片笑声,那个笑声好贼啊..老婆,对不起

  7. 注册送22元
    2013年12月26日13:09 | #7

    白雪公主是怎么死的 小雨今天和同学逛超市,看见有免费试吃,大爱有木有! 然后小雨在那里一边试吃一边调戏卖试吃的MM。 同学在旁边等久了就幽幽来句: 你知道白雪公主是怎么死的吗? 就是让巫婆的免费苹果试吃给弄死的 小雨仿佛看见卖试吃MM的头上好多黑线啊 .你们副总可能定不了 小蔡公司老总姓傅,身价几千万,一次见个大客户, 刚到会议室,小蔡热情的介绍: 陈总,这是我们公司傅总 , 结果对方经理还很好心地跟小蔡说: 小蔡,这么大的项目, 还是跟你们老总直接谈吧,你们副总可能定不了…. 。 小蔡瞬间凌乱啊。。。 周瑜回请诸葛亮。当天正是清明, 席间诸葛亮突然想起去世多年的父亲,忍不住潸然泪下。 周瑜好奇的问: 先生在想谁呢? 诸葛亮眼泪汪汪的看着周瑜说: 我爸。 周瑜一愣,旋即红着脸低下头, 拉着诸葛亮的手柔声说: 讨。。。讨厌,怎么说韩语了?么么哒。 玉树临风是什么意思 鱼鱼见一个小孩,就过去逗他, 鱼鱼问: 玉树临风是什么意思呀? 他答: 就是一个树被雨淋湿了就变疯子了。 以后你天天都得读英语 小公鸡英语不好,高考前还不好好学习, 鸡妈妈生气地说: 你还不好好学英语,以后你天天都得读英语。 小公鸡没理睬,自顾自去玩去了。后来小公鸡高考果然落榜, 第二年去复读,变成了复读鸡,主人天天用它学英语。一看你就还没结婚 本人在一私人老板工厂打工一个月还没发工资, 面试成功后财务让交两个银行卡帐号,当时很不解, 但还是交了,今天发工资了,两张卡,一张进账五百, 剩下的全进另外一张卡。。好奇问同事: 同事说了句,小伙子, 一看你就还没结婚,好好跟这老板干,这年头这样的老板不好找啊。。 读书破万卷,下笔如有神。 孙悟空参加唐朝公务员考试,有一个监考老师老是站在他的桌旁, 他把笔竖立桌上,然后越来越高,突然朝监考老师砸去,老师拔腿就跑。 老师跟后面的监考老师说: 那猴子的笔很神,可以变得又粗又长。 后面的监考老师说: 你算见识了 读书破万卷,下笔如有神 了。 语文课,老师布置作文《校园一角》, 小明觉得从美丽的花坛、宽阔的操场等方面来取材太俗,独辟蹊径 写厕所。 厕所是大家都要去的地方,谁都离不了。 他说大力发掘厕所与人方便的美好品质,选材才有新意! 当然厕所人们都是迫不得已而去之, 但在文章里却不能显露出对厕所有丝毫不敬的态度。杀完毒才能打开经书 大唐国王: 御弟,你为何还不动身去西天求取真经? 唐僧: 弟子给如来佛祖发了封电邮,让他把真经打包发到弟子的邮箱了。 大唐国王: 真经现在何处,拿来我看! 唐僧: 佛祖回信说得到真经需历经九九八十一难, 所以他随信发来八十一个病毒,杀完毒才能打开经书。 我的地盘我做主 中移动老总上公厕。守门大爷: 进3毛出2毛。 老总一愣: 出来还收费? 大爷: 双向收费。 老总出来又被拦: 你蹲的8号坑,交1元选号费, 放了个屁,交1元漫游费,超3分钟,交1元超时费。 厕所有背景音乐,彩铃2毛。常客办套餐划算。 老总怒: 哪的王法? 大爷: 动感地带,我的地盘我做主!替你超度呢

  8. 博狗
    2013年12月29日17:35 | #8

    (《傲慢与偏见》) .认识自己的无知是认识世界的最可靠的方法

  9. 江西时时彩走势图
    2014年1月3日11:04 | #9

    学校的电脑烂,无法偷菜。于是妈妈打电话叮嘱我及时帮她偷菜。电话如是说:女儿,我同事的得偷,我学生的更得偷,偷到他们没钱升级,就认真学习了!

  10. 网上现金棋牌游戏平台
    2014年1月5日12:06 | #10

    8、嫦娥在信心中吻月,汶川在信心中重建,甲流在信心中防控,经济在信心中复苏,日子在信心中红火,虎年在信心中和美!

  11. 全讯网
    2014年1月28日03:21 | #11

    人生若只如初见

  12. 现金斗地主
    2014年2月9日21:40 | #12

    我们之间的演变,从甜蜜变成失联,一直到微笑点头的底线