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

分享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

VB用API函数控制光驱的开关 VB用注册表保存数据(VB函数篇) 有关Tray系统盒的VB API函数 在VB中调用API函数动态改变及恢复屏幕设置 在VB中控制Ctrl+Del+Alt键 在VB中使用API函数 (之二) 在VB中使用API函数 (之三) 在VB中使用API函数 (之四) 在VB中使用API函数 (之五) 在VB中使用API函数 (之一) 在VB中用API实现多媒体 VB怎样用VB在应用程序中调用API VB怎样在DELPHI中使用API函数 指定文件夹-VB资料 VB5中注册控件三法 Bug:维护 Internet Transfer Control 之 Username 及 Pass VB对低层硬件访问控制 HitTest的妙用 -VB资料 ListBox项的控制-VB资料 VB 6.0中类聚集关系的实现 VB6编程中如何获取硬盘分区信息 VB的坐标系统综述 VB调用C程序动态链接库的方法 VB对低层硬件的访问控制 VB软件开发中的错误捕获及处理技术 VB中Combo的一种输入检查制约方法的实现 VB中Winsock控制的UDP协议的使用 VB中的时间处理问题 Windows操作平台下CGI的实现 -VB资料 按下某组键(HotKey)便执行某程式-VB资料 把所有的字体名称放到 ComboBox -VB资料 未老先衰吗? 用什么方法可以把DBGrid查询的内容打印处理,查询是用sql语句的,有什么好控件? 怎样重烖 滚动条的滚动消息? 请问高手:IIS5.0+PHP4.0安装问题 怎么样取得数据窗口中所有的TEXT和计算字段的列表? 如何实现(单击一个下拉菜单,同时刷新另外一个下拉菜单中的值??) 我的Red Hat 7.3启动盘丢了。怎么办? 哪里有讲Object Pascal的书下载? vb里怎么调用vc写的dll,还有为什么vc的dll不好用regsvr32直接注册,老说dll enter point not found ★★★同志们好,我想在北京找工作,什么人才网站比较好? 怎样实现在一个窗体中控制另外一个窗体及其控件? 创建一个线程来接收串口数据,为什么正常收一段时间后(10多分钟)就不再收任何东西了? 关于设计一个防震系统!欢迎讨论! 请问各位高手!Win32 SDK里面有没有用来设置麦克风音量的函数? 用.Net技术实现:与扫描仪直接连接,将扫描图像保存为文件,其他子内容保存到数据库中? 请大虾介绍一款好用的web报表打印控件,最好有说明文档,谢谢 CString类型怎样转换成unsigned char * 关于使用System.Net.Sockets时的一些不明白的问题 关于.net编辑器操作的问题? 将main函数移动后出现的编译错误 请各位大佬帮忙,sql server是否有..start with..这样语句? 读"征集2001参加工作的程序员的工作感受和打算"有感! 我知道问提出在那里了,再问: 求职 怎么修改RTE控件的字体大小? 删除文件的问题 出大问题了?????!!!!! 有没有人用CORBA,JBUILER编写JSP? 请问有没有vc.net方面的好书呀 哪位大侠在使用JMAIL3。7来发送邮件时,出现,邮件成功发送但收件人收到的邮件没有内容???? 关于nt4.0下 hp -cdrw 不见了 在redhat linux中怎样配置dns和apache。本人是初次接触,希望您能详细点,多谢!! 在FTP服务器上删除文件用什么函数啊 一个奇怪的网络连接现象!请高手帮忙! @怎样比较数据库中的时间??急急急!!! 我知道我搞不定的,有高手肯定可以的!!!!!! 关于frame的问题 如何在Turbo C中加入汇编代码 vb中如何遍历文件夹 一个关于COM注册的小问题 急!如何安装 SMTP Service? 怎么设置treeview中每个分支中的背景色? first time vb中如何遍历文件夹 怎样调用别人的东西? 询问关于JAVA类库的问题 如何在.NET开发环境中为控件写事件与方法的代码? video for window 在2000下碰到的问题(急急急!!!!) 请问,如何才能将一个很大(多媒体)的文件上传到服务器上?如果我将这个一功能做成一个active.oxc控件然后放在网页上,可否正常使用呢? 多个终端向一个服务器发送数据时不能成功,而一个终端是成功的,刚开始学习网络编程,多指教 谁把大富翁2发给本人(newmon.wei@utstar.com),并提供其在2000底下的用法,不胜感谢 盐的水解,弱电解质的电离,沉淀溶解反应均为化学反应.这句话对吗? 一个标有"220V,120W"的电灯,接在照明的电路中,求:电灯的灯丝电阻是多大?正常工作2一个标有"220V,40W"的电灯,接在照明的电路中,求:若加在电灯上的实际电压220伏此时灯泡的实际功率是多少瓦?课 就是钾钠铵硝溶水快,盐酸盐不溶硫酸钡.接下去是什么? 多余的细胞是不是可以自我破坏? 高梁涨白了脸 稻子笑弯了腿 怎样修改病句 下列分子式表示的物质中,具有同分异构体的是 A:C2H5CL B:C3H8 C:CH2CL2 D:C2H6O急呐...摆脱拉... 高中地理必修1里各种气候类型的特点 关于人跑步做功的问题?计算的时候是身体起伏高度变化*G 还是F*S?人跑步的时候重心应该有变化啊,应该也有克服重力做功吧.F*S,- - 谁能告诉我是什么力做功咧? 1.5HP电机能耗 电离反应是不是都是化学反应 人跑步时什么力对人做功? 蚕豆是双子叶植物吗? 桃和草莓共有980克,橘子和草莓共有870克,桔子和桃共有350克,桃桔子草莓各有多少克? 通过相同的路程,骑车和跑步哪个费力些?哪个做功大?为什么? “碳磷钾钠铵可溶”? 水和碳可以变成石油吗 2-乙基戊烷命名错在哪,C5H12 C4H10有几种物质 什么可溶于钡钙钾钠铵? 水为什么不可以变成石油呢 C4H10 和C5H12 有什么区别?从各个方面 为什么钾钠铵都可溶 硫酸钡 氯化银等又不可溶 关于弱电解质的电离问题1)将等质量的锌粉分别投入10毫升0.1摩每升的HCL和10毫升0.1摩每升的CH3C00H溶液中.若锌不足量,反应快的是HCL;若锌过量产生H2量相等.为什么?2)将等量锌粉分别投入c(H 铝和硝酸根在碱性条件下离子方程式 偏铝酸钠变为氢氧化钠加氢离子和加二氧化碳两种的化学方程式 弱电解质的电离度是指当弱电解质在溶液里达到电离平衡时,溶液中已电离的电解质分子数占原来总分子数的百分数.常温下,某一元弱酸HA的电离度为a,溶液的Ph=1 lga,则该HA溶液的物质的量浓度 宣传科学知识,揭露伪科学,是我们的义务.下列各项中属于伪科学的是A 使白磷在空气中自燃 B 用催化剂将水变为燃油(由碳氢元素组成)C 用氢液发射火箭 D 用扫描隧道显微镜可观察到分子的图 写出指定转化的化学方程式①钠转化为过氧化钠②铝与氢氧化钠反应转化为偏铝酸钠③氢氧化亚铁与氧气反应转化为氢氧化铁 弱电解质的电离度跟什么有关.有什么规律..当其他条件改变是.弱电解质的电离度怎么改变 印度港口中文名称查询哪位知道印度港口TUGLAKABAD, DELHI.的确切中文名称?请告知.另外如能一并告知该口岸的有关情况,更好.多谢! 偏铝酸钠溶液与少量氢氧化钠溶液反应的化学方程式? 某灯泡接在220V的电路中是,消耗的电功率是40W,通过灯丝的电流是多大?等死的电阻是多少?条件和上面的相同,工作10min,消耗电能多少J? 这几个印度港口的中文名称是什么呀?急DahejPopavavMundra这都是什么呀! 把标有“220V 100W”“220V 25W"字样的电灯泡串接到220V的照明电路中,较亮的是? 碱性:Mg(OH)2>Al(OH)3.为什么?相同浓度的强碱和弱碱是指OH占的质量分数还是整个碱性物质所占的质量分数?照你们说的,那如果我只告诉你有两种酸性物质:盐酸和醋酸,能不能直接从他们的化学 一盏电灯25h耗电1kW·h,这盏电灯的功率是多少? 下列现象中 电能转化为机械能的是1.电熨斗烫衣服2.电动玩具车开动3.水轮机带动发电机发电4.给电池充电5.电水壶烧水 亚硝酸根离子与铝反应,强碱性时生成什么 化学反应中越容易生成最难电离物质的化合物优先反应的意思有甲与乙两物质 他们均能和丙反应分别生成难电离物质丁1,丁2 甲与乙相比 比乙更容易与丙反应生成难电离物质丁1 但是乙与丙 汽车或摩托车一般用的铅蓄电池在用电过程中蓄电池中能量转化是____能转化为____能;在电池用完后充电的过程中,能量的转化是____能转化为_____能.维持人体的生命活动需要能量,人们从事生 怎么比较mg(oh)2 al(OH)3 碱性强弱?做到一题,往两沉淀加NAOH,AL(OH)3溶,MG(OH)2没溶,就可以了.为什么?可不可以测PH啊. 在化学反应中( )发生了变化,生成了新物质的( ),而( )仍然是原来( ). 黄豆是单子叶植物还是双子叶植物 亚硝酸根(NO2-)在碱性条件(OH-)下与铝粉(Al)发生反应的方程式 所有化学反应都会生成新物质嘛所有化学反应都会生成新物质,但不一定都会对环境造成污染 “白色沉淀不溶硝”如何理解?“白色沉淀不溶硝”如何理解?BaSO4 AgCl 是白色? 硝酸铵是强电解质吗 那电离呢?他是盐 也就是说是强电解质吧 在水中的电离是完全的吗?写方程式的时候写直等于? 化学反应一定有新物质生成,这句话对还是错? 大豆是单子叶植物吗?快 什么是台湾岛最大的港口 一氧化氮与二氧化氮属于酸性氧化物还是碱性呢,会与过氧化钠反应吗? 水稻属于单子叶植物还是双子叶植物 怎样制取氢氧化铁胶体? 强电解质KHSO4的电离解释那个KHSO4真烦---它是强电解质对吧,但它在水中电离出K+ H+ SO4 2- 而在熔融状态下 电离出的是K+ 和 HSO4 2- 这是怎么一回事啊?还有,这个NaHCO3 在水中怎么又只能完全电离出 用菲林试剂鉴定还原性糖时,为什么试管底不能碰烧杯底1 关于弱电解质的电离为什么弱电解质加水稀释后离子浓度减小我能明白加水后会促进电离,但是为什么离子浓度减小 台湾省第一大机场是什么 一氧化氮与二氧化氮会反应吗 弱电解质的电离醋酸溶液中存在电离平衡CH3COOH=(可逆号)H+(氢离子)+CH3COO-(醋酸根),若只改变下列条件之一,溶液中水的电离平衡不移动的是( )A.升高温度B.加水C.加少量醋酸钠晶体D. 台湾省最大的海港是明确 钾钠铵硝溶水快……这个公式怎么背来着?就是什么盐溶于水什么盐不溶.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘