说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

分享10段实用的HTML5代码

HTML文档下载 WORD文档下载 PDF文档下载
目前,越来越多的网站使用HTML5进行开发,本文提供了10段HTML5代码,它们可以帮你快速启动HTML5项目。

随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5。

本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使用,帮你快速完成HTML5项目的开发工作,你也可以把它们当做一个学习资源,进行参考。

1.HTML5编写的CSS Reset

CSS Reset也可以写成Reset 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 */

2.HTML5 Video with Flash Fallback

解释下该段代码,如果浏览器不支持HTML5视频播放,那么会自动跳回Flash播放。

<video width="640" height="360" controls>	<source src="__VIDEO__.MP4"  type="video/mp4" />	<source src="__VIDEO__.OGV"  type="video/ogg" />	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">		<param name="movie" value="__FLASH__.SWF" />		<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"		     title="No video playback capabilities, please download the video below" />	</object></video>
3.HTML5 Starter页面

<!DOCTYPE HTML><html>	<head>		<meta charset = "utf-8">		<title></title>		<link rel="stylesheet" href="style.css">		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->		<script scr ="script/script.js"></script>	</head><body>     <header>       <nav>       </nav>    </header>    <footer>    </footer>  </body><html>
4.创建谷歌静态地图

<!DOCTYPE html><html lang="en"><head>	<meta http-equiv="content-type" content="text/html; charset=utf-8">	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />	<title>Geo Location</title>	<style type="text/css" media="screen">		html{ height: 100%; }		body{ height: 100%; margin: 0; padding: 0; }		#map{ width: 100%; height: 100%; }	</style>		<!-- jQuery Min -->		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>		<!-- Google Maps -->		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>		<script charset="utf-8" type="text/javascript">		mapWidth = screen.width;		mapHeight = screen.height;		$(document).ready(function(){			var geo = navigator.geolocation;			if( geo ){				//Used for Static Maps				geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );			}			function createStaticMarker( markerColor, markerLabel, lat, lng ){				return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;			}			function createStaticMap( position ){				var lat = position.coords.latitude;				var lng = position.coords.longitude;				var zoom = 20;				var sensor = true;				var img = $("<img>");					img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +								"center=" +								lat + "," +								lng +								"&zoom=" + zoom +								"&size=" + mapWidth + "x" + mapHeight +								createStaticMarker( "blue", "1", lat, lng ) +								"&sensor=" + sensor } );					return img;			}			function showLocation( position ){				var lat = position.coords.latitude;				var lng = position.coords.longitude;				var latlng = new google.maps.LatLng( lat, lng );				$("#map").html( createStaticMap( position ) )			}			function mapError( e ){				var error;				switch( e.code ){					case 1:						error = "Permission Denied";					break;					case 2:						error = "Network or Satellites Down";					break;					case 3:						error = "GeoLocation timed out";					break;					case 0:						error = "Other Error";					break;				}				$("#map").html( error );			}		});		</script>	</head>	<body>		<div id="map">		</div>	</body></html>
5.纯HTML5 Starter模板

<!DOCTYPE html>	<html>		<head>			<meta charset="utf-8">			<title>Untitled</title>			<!--[if lt IE 9]>			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>			<![endif]-->		</head>		<body>		</body>	</html>
6.HTML5页面结构

<!DOCTYPE HTML><html><head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <title>Your Website</title></head><body>        <header>                <nav>                        <ul>                                <li>Your menu</li>                        </ul>                </nav>        </header>        <section>                <article>                        <header>                                <h2>Article title</h2>                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>                        </header>                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>                </article>                <article>                        <header>                                <h2>Article title</h2>                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>                        </header>                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>                </article>        </section>        <aside>                <h2>About section</h2>                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>        </aside>        <footer>                <p>Copyright 2009 Your name</p>        </footer></body></html>
7.上下文菜单

<section contextmenu="mymenu"><p>Yes, this section right here</p></section><menu type="context" id="mymenu">  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>  <menu label="Social Networks">  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>  </menu></menu>

8.HTML5 Datalist

<input name="frameworks" list="frameworks" /><datalist id="frameworks">	<option value="MooTools">	<option value="Moobile">	<option value="Dojo Toolkit">	<option value="jQuery">	<option value="YUI"></datalist>
9.从谷歌地图上获取路线

<form action="http://maps.google.com/maps" method="get" target="_blank">   <label for="saddr">Enter your location</label>   <input type="text" name="saddr" />   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />   <input type="submit" value="Get directions" /></form>
10.HTML5电子邮件正则表达式验证

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
来自: CodeGeekz

普元CTO焦烈焱:专注于基础软件 在Spark上的深入实践 Python 3.4.0正式发布 未添加任何新语法特性 谷歌受困邮件挖掘丑闻,企图抹掉庭审记录 Python 3.4.0发布,增加了多个功能模块 美的+阿里,“云端”战略第一把火是智慧家居 对产业互联网战略的战术思考——争夺企业信息入口的战争 加入Cassandra,OpenStack发力DBaaS生态圈 死磕Google Keep,微软正式发布Mac免费版OneNote 《近匠》安管云CTO石磊:降维安全的开放平台 2014 Unity亚洲开发者大会·中国站讲师名单议题全部出炉 【独家专访】红旗Linux元老:猎猎红旗永飘扬 借助三大技巧 助你提升API状态页面 集成GemFire,Hadoop生态圈的又一把火 次世代光照体验:Unity 5面世,功能系统全升级 深入浅出,以咖啡店为例演示Web应用程序扩展 百度Clouda:可依赖的实时JavaScript开发框架 Oracle发布Java 8正式版及JDK 8 编程语言中一些令人抓狂的规则 廉颇未老,微软股价创14年新高 中国云计算大会PPT集萃(三):核心架构及应用实践 特性是增多了,但是Google的云服务仍然不温不火 全国云计算大数据创新项目评选活动正式启动 【独家专访】Perl发明者首次来华:将在OSTC大会分享其编程人生 腾讯核心创始人张志东半年后卸任首席技术官 改任终身荣誉顾问和学院讲师 咱们约会吧,Web设计师教你不一样的语言 开发者不容错过的10款免费JavaScript游戏引擎 付费授权、开放源码,全新虚幻引擎4正式发布! Larry Page未来计划:用科技创造美好生活 AWS 8周年,收入超四主要对手之和 分析:北京网络广播电视台私有云实践 腾讯云总经理陈磊分享微信云三步曲 请assdeng(山野村夫)看看 pb,delphi,vb三种快速成型的语言都分别适合开发那些软件?欢迎大家来讨论 请问各位同仁如何设置sybase anywhere服务器参数? 串口通讯能否用pb做成动态连接库的形式?(急) 怎样使Response.redirect打开一个新窗口 为什么环境变量替换不正确? 怎么打开foxpro中,通过剪切板考过去的图片,dbimage和image控件都不能打开,显示“bitmap is not valid” vaj中如何使用自己的JAR? 怎样改变当前窗口的大小,是当前窗口最大化? 高手争峰 如何把一个log文件读到数据结构中去 请教一个很菜的问题:) 这个程序有什么问题? 怎样做???? 简单问题,可就是搞不定!! 请问jsp中servelet在win2000中的设置方法,需要下载什么类库文件么? 一个新问题,那就是点击工具栏的退出按钮以后只退出当前打开的窗口,而不是整个应用! 如何在 index.htm 中引用 count.asp ? 远程数据库访问的问题--亟待高手们解答 王国荣的电子信箱是哪里? 我的程序生活 先给50分,稍后在加:我正在做一个系统,需要做到每次开机时提醒用户有哪些事情要做! [Tips]获取Memo&Richedit中光标坐标的最简单方法! 急急,如何才能把图片的底色与窗口的底色自然地融为一体? 如何改变按钮的颜色? 在mtml help workshop 中如何制作带上下文关联ID的帮助 调试程序时,控制台程序与直接建立的C++程序有区别吗? 给菜鸟推荐本书 VB调用外部DLL问题 【洗心革面,重新做人,割发断指,庄严声明】 从今以后 kook 不近女色,不灌疯水,以 panda_w 为榜样,苦练VC,研习汇编,做一个 CSDN 的正面典型! 谁有ULTRAEDIT 的注册码 能否推荐几本关于VB提高和关于VB数据库的书 紧急问题,关于SSL通过MS PROXY String类的问题 连接数据库的东东真是奇怪! 如何打开pdm格式文件 ===========灌水传说=========== 奇怪的问题,怎么办? 呵呵,初学者,请多多指教 剖 尸 小问题:自定义组件的显示 怎样打印picturebox中的内容??? 关于Datawindow的Group的问题 谁能告诉我 Delphi6的序列号 紧急问题,关于SSL通过MS PROXY! 请问,如果用ASP作邮件发送,接收的功能,win2k怎么设置????????? 各位大侠,谁用visual age for java3.5 开发过 ejb呀,发个例子及过程给我好吗?没例子,有过程也可以!以分做谢! 哪位大哥能将解一下notify()和wait()的用法 我用delphi做的工程是一个exe+n个DLL的,请问datamodule放哪里合适;请高手们详细讲讲. 如何除去这可恶的标题? 请问如何取得动态数组的维数,换言之如何取得动态数组的值? 为了迎接2012年的元旦,实验小学准备制作一些小红花,平均分给一些同学制作,如果7个人做,则多做3朵,如果4个人做,则少做2朵,如果9个人做,则多做5朵.你知道他们最少想做多少朵.(用最大公因 小红在班级小银行储蓄的钱数是小刚的2分之3,后来小红又存进4元钱,而小刚取出6元钱此时小红的钱数是小刚的钱数的4分之3,现在小刚,小红各储蓄多少元? 买同一个书包,小明花去了他所带钱的5/8,小红花去了她所带钱的3/5求两个人所带钱的比,如果是方程就要把解的过程详细的打出来好么 怎么剪小红花 小红体重与小亮的比2比3.小亮与小刚体重的体重3比4.那么小红和小刚的体重比是多少 小明和小红一共有250元,当小明花掉他自己的5分之2,小红花掉40元后两人剩下的钱相等求小明原来的钱是多少? 老师把一些小红花分给同学,如果减少一个同学,每人正好分5朵,如果增加一个同学,每人正好分4朵一共有多少朵小红花? 小红的存钱是小刚的三分之二,小红存进4元,而小刚取出6元,这时小红是小刚的四分之三,小红和小刚各?元 小红和小明带同样多的钱去买练习本.小红花光了自己的钱,并向小明借1元钱,刚好买了8本练习本 我今天语文课得了朵小红花,求英语 小红在班级小银行存储的钱是小刚的三分之二,后来小红有存进4元,而小刚取出6元钱小红在班级小银行储蓄的钱数是小刚的三分之二,后来小红又存进4元钱,而小刚取出6元钱此时小红的钱数是 小莉买文具和图书共用去54元,其中买图书的钱数比买文具的2倍还多3元,买文具和图书各用多少元? 修改病句:国庆节那天,天安门前挂满了五颜六色的红旗 小林在少儿银行存款50元,小刚存款88元,以后小林每月存5元,小刚每月存12元,几个月后小刚存款数是小林存款数的2倍?求算式,急!谢谢 假期里,小莉用一天学习时间的45%看课外书,她每天看课外书时间是90分,小莉每天用于学习的时间有多长?小莉每天用于学习的时间占一天的百分之几? 广场上到处是五颜六色的红旗(修改病句) 小红在班级小银行储存的钱数是小刚的3分之2,后来小红又存进4元钱,而小刚取出6元钱此时小红的钱数是小刚4分之3,现在小刚小红储存多少元钱? 一.1.小星和小莉看课外书,小星看了40页,是小莉所看页数的5分之4.小莉看了多少页?2.小星和小莉看课外书,小星看了40页,比小莉所看的页数多4分之1.小莉看了多少页?3.小星和小莉看课外书,小星 节日的校园里,插满了五颜六色的红旗.(修改病句) 小红在班级小银行储蓄的钱数是小刚的2分之3,后来小红又存进4元钱,而小刚取出6元钱此时小红的钱数是小刚的钱数的4分之3,现在小刚,小红各储蓄多少元?小红在班级小银行储蓄的钱数是小刚 假期里,小莉用一天学习时间的45%看课外书,她每天看课外书的时间是90分.小莉 修改病句:校园里生满了白的、红的、黄的等五颜六色的花. 小红在班级小银行里储蓄的钱数是小刚的三分之二,后来小红又存进4元,而小刚取出6元,此时小红的钱数是小刚钱数的四分之三,现在小刚.小红各储蓄多少元? 小莉看一本书,5天看了全书的20%,照这样计算,把剩下的书全部看完还需多少天? 分别以花、草、树、木四个字结尾的成语例如妙笔生花 春风吹得满山的桃树绽开了五颜六色的花,一片火红,非常精彩.修改病句按题修改 小红在班级小银行储蓄的钱数是小刚的三分之二,后来小红又存进4元钱,而小刚取出6元钱此时小红此时小红的钱数是小刚的钱数的4分之3,现在小刚,小红各储蓄多少元?要方程和算式不要方程 要 有树有花的成语有树有花字的(必须)急!1 <修改病句> 1.公园里生长着各种树和五颜六色的鲜花请修改以上病句 小红的零花钱比小刚多4分之1,小晓的零花钱比小刚的少3分之1.小红和小晓的零花钱相差14元.三人各有零花钱多少元? 植物花的结构名称分别是什么?带插图~急用 病句:春天公园里五颜六色的花,竞相开放.请问怎么修改?急 这次考试小红考了98分.小红比小刚的分数的七分之八还多2分.你知道小刚考了多少分吗? 花朵是季节的衣裳,请你分别写出四季中最有代表性的花、花卉的名称.写4个,春( ) 夏( )秋( )冬( ) 孩子穿着红衣服和白帽子(修改病句) 小红捐360小刚是小红的9分之10小刚捐的是小红的8分之7小刚捐了多少元? 植物花的各部分名称请大家根据上面写出个名称,1.()2.()3.()4.() 改病句:他穿着一身崭新的衣服和帽子. 在一次跳绳比赛中小明跳了92个 小红跳了85个 小刚跳了87个 小敏跳了几个 注.我跳的个数是我们5个的平均数上面的写错了 在一次跳绳比赛中小明跳了92个 小红跳了85个 小刚跳了87个 小敏 图中植物的名称竹类 “他今天穿着一件新衣服和一顶新帽子”怎么改病句? 学校举行一分钟跳绳比赛,小红跳了120下,小玲跳的下数是小红的八分之九,小刚跳的下数比小玲少十五分之二小刚跳的下数比小玲少多少下?不用方程 冬天里,有哪些长绿叶和开花的植物主要说一下室外的 . 改病句:刘艳同学今天真漂亮,穿着新衣服和帽子 一个数是2和3的倍数这个数是 绿叶在植物生长过程中有什么作用 今天,小芳穿着新衣服和新帽子高高兴兴去上学.(修改病句) 一个数同时是2 3的倍数,这个是数有什么的特征? 植物的枝条和其绿叶 都是由植物的哪一部分发育而来 “尽管明天下雨,我们还要去爬山.”修改病句卷子上的题目急 2和3的倍数的共同特征是什么 能帮我看看这是什么植物吗? 看,空中有一道五颜六色的彩虹.(修改病句) 三位同学购物,小明花去钱数的1/2等于小琳花去钱数的1/3,小琳花去钱数的3/4等于军军花去钱数的4/7,结果军军比小明多花93元,他们三人共花了多少钱?急 植物花期随海拔高度是怎样变化的需要具体的 比如说同一种植物随海拔的升高花期向后推迟的天数变化规律 修改病句:明天上午去爬山 小明和小红共带了200元去购物,购完后2人剩下的钱正好相等,已知小明花去的和原来的钱比是3比7,小红花去小红花去的和原来的比是9比13,小明花去多少元 一条红绳长120分米,可以做4朵小红花,做25朵小红花需要红绳多少分米? 脱下了五颜六色的衣裳 小红花和小明去超市购物,小红买了6个果冻,每个2.1元.小明买了2块巧克力,比你多花3元,每块巧克力多少元
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn