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

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

Twitter跨数据中心图片存储系统Blobstore解析 摩托罗拉携手中国移动发布Intel Inside智能机新锋丽i MT788 第五届“英特尔杯”全国大学生软件创新大赛圆满落幕 Appro推出液冷超级计算机 Dell:曾敦促微软WinRT放弃Windows品牌 IE10十大优点:渲染页面比Chrome快8% 法国电信:开放平台下的O2O移动产品怎么玩? 客如云创始人彭雷:寻找O2O“失落的半圆” 中国电信宋鹏飞:天翼开放平台的服务及架构解析 W3C小组宣布:HTML5标准制定完成 还记得DUQU吗?起因可能是Windows中存在了20多年的漏洞! API管理的五大规则 Google也节能:挖角美能源部Arun Majumdar博士 预测:云计算领域的5大变革 CTO俱乐部:移动信息化的创新实践及互联网创业 核心组图曝光:BlackBerry 10明年1月30日发布 “蛐蛐儿”创始人朱连兴:音频二维码的技术实现和应用场景 信恩科技创始人林兴陆:QR Code二维码的前世今生 2012移动开发工具盘点:傻瓜式游戏工具引擎 《福布斯》发布年度“未来之星” 扎克伯格上榜 Cloudera透露Impala发行版新功能及开源计划 Nokia落寞身影下 三星成为全球最大手机厂商 乐视网CTO:智能电视,一个诱人的议题 SeatGeek:Web设计师如何转型iOS开发? IE10支持HTML5标准拖放 IBM IT实践达人赛24强出炉 决赛圈比拼创新实践力 [简讯] Perl迎来25岁生日 软件开发者最重要的四大技能 为什么说惠普、戴尔和IBM在互联网发展中站错队 升级iOS 6还得看Google Maps 2012移动开发工具盘点:16大跨平台游戏引擎 我写了一个拨号网络记时的工具,可以设定时间自动断线,提供源码.... 怎么读取外部数据源中的某个表中的某列的数据类型? 如何注册一个DCOM,让它跑在别的机子上? 关于用Win32 API画 BMP 图片问题 !急急急急急急急急急急 !!! Delphi 6 的 lib path 丢失!! help?谁知道Tab Control 控件的用法,12分的感谢!!!! 请问:如何在一般用户环境下启动管理员程序? 我想捕获网卡收到的数据包,该怎么搞? vb中调用sql server和ORACLE数据库的问题 北京的朋友,有谁知道这东西那里有卖的?? 想在c#和java中选一个,给点意见.客观点. 如何得到在另外一个窗口中所选择的结果 dcc32如何使用? 大哥,大姐们,这到题没分给,但我真的想知道答案 求对VSS或者Team Source开发的例子 科鼎校园网V2.3测试版网上演示 关于 WINDOWPLACEMENT Structure 关于用DELPHI联接ACCESS数据库怎样使用insert命令的问题(很急很急)加分多多!!! 学c#要那些知识前提。 请问新建怎么做? 为什么在excel表中可以看到的数字,用data连接后,在text和dbgrid中却看不到。(只显示出了其中的一部分) 简单问题,关于toolbar CTime类型变量的值存到数据库中datetime类型的小问题! vc怎样打开access数据库!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !求助,我的机子不能启动了。。。 XML中华网有好多的C#资料哦! 比较问题一道,关于 == 版主请进 ~ CrystalReport的一个奇怪的问题,Help! 唉,终于解决不了了,如何在运行时,改变LISTBOX的风格。MSDN说不能解决 AnsiString与TStrings之间的区别与联系,急! 有谁知道下载cobol的编译器,能在window下用的 各位兄弟、姐妹,谁能给我一个超星的账号阿!!谢谢了 再请教 Delphi的EXE 请问关于数组的问题 机器的速度太快,玩不了挖金子,有什么办法? web应用中使用Window ActiveX OCX技术存在问题 请教灰色凹下直线问题 jbuilder编译的问题 有关网络视频会议系统的开发模型问题??? 如何实现在DW中取数据? 如何注册一个DCOM,让它跑在别的机子上? 关于条码阅读器输入数据的控件 如何注册一个DCOM,让它跑在别的机子上? 开机后,总是弹出了一个窗口? 闲着没事,贴个歌词,先~~~ editbox控件问题 Delphi6安装之后怎么会… 请教一个非常难的问题,请高手入席! 如何实现在DW中取数据? 初一思想品德,爱因斯坦有一个著名的公式:W=X+Y+Z,他说,w代表成功,x代表艰苦的劳动,y代正确的方法,z代表不浪费时间,这个公式让你对学习有什么新认识? 为什么沿电场线方向电势逐渐降低如果一个负电荷沿电场线运动而负电荷受电场力又是与电场方向相反,那么负电荷做负功电势能增强,因而电势应该增强呀 两个同方向同频率的简谐振动,其振动表达式分别为:x1=0.06cos(5t+0.5π) (SI) ,x2=0.02cos(π-5t) (SI)它们的合振动的振辐为_____________,初相为____________. 用英语介绍一下爱因斯坦.(200词以内)明天急用. 7.如果某种植物的基因型为AABb,去雄后授以aabb植株的花粉,其胚乳可能的基因型是BA.AAaBBb、AAabbb、AAaBbb B.AAaBBb、AAabbb C.AaBb、Aabb D.AaaBbb、Aaabbb4.将某植物细胞放在大于细胞液浓度的甘油 什么是斯托克斯方程?是沉降速度计算式 青藏高原为什么太阳辐射多气温却低 电场线,电场强度,电势.电势沿电场线的方向降落最快.而电势沿电场强度的方向也是降落最快.但是电场强度方向不一定等于电场线方向.上面三句话都正确,但我不明白三句话的联系的关键,而 粒子胶体中胶粒带电荷那它怎么显的中性?有什么东西中和它?粒子胶体是一般都带正电么? 青藏高原东南部太阳辐射较青藏高原高还是低,为什么? 沿电场线方向电势降低,电场强度也逐渐变小.这句话怎么错了求解释. 电势降低的方向就是电场强度的方向.这句话错在哪? 氢氧化铁胶体中除了氢氧化铁胶粒外还有什么成分?什么离子? 一高位槽向喷头供应液体,液体密度为1050kg/m3.为了达到所要求的喷洒条件,喷头入口处要维持40kPa(表压)的压力.液体在管路内的速度为2.2m/s,管长30m,管径为4mm.管路上有一阻力系数为0.75的弯头 什么是信息技术?他经过了哪些发展?并将如何影响人类社会的发展? lmoL氢氧化铁胶体中带多少胶粒?多于1mol还是少于?有这么一段文字 在胶体中存在的微粒准确地说是胶团,胶体就是由胶团组成的.胶团是由胶核、吸附层、扩散层构成的.胶核又是由许多分子或 电话给我们生活带来了哪些便利 电场强度的方向就是电势降落的方向、为何不对 发泡剂AC与ADC有何区别如题 等势面上各点电势相同,电场强度大小也相同?错在哪? 科技进步对社会的影响英语作文一篇 要求用词四级 120词 .要点 1 科技的进步对现代社会的manner(关键词是这个)有深刻影响2上门拜访或者面谈很多被电话交谈所代替3人们上网与人交流,部分 AC发泡剂属于危险品吗?我是做货代的,想知道AC发泡剂是不是属于危险品,是不是要拿拿个MSDS去向船公司申请的 全国高中生物竞赛请问它的判分标准是什么?是不是给了几分就选几个答案?如果没选全?给分吗?再说一下答题技巧 胶体中与胶粒带相反电荷的粒子为什么不会使胶粒聚沉 AC,DC,ADC这三种发泡剂有什么区别 电势降低的方向就是电场强度的方向 胶体粒子带电,为什么胶体不带电?难道胶体里还有与胶粒相反的电荷吗? 发泡剂能承受多高的温度?供热管道的保温层是发泡剂做的吧? 急求2010年全国生物竞赛联赛试卷答案!注意是2010年5月9日考的全国生物联赛是浙江赛区的! 问原方程有几个根和问原方程有几个解一样吗?说明原因,最好举几个个例子如题, 2008年生物竞赛联赛题第21题的解释关于在淡水中生存的动物的内个. 为什么电场强度的方向就是电势降低的最快方向 信息技术发展历程信息技术有哪些历程 太阳辐射量与日照时数区别 科技发展对我们的生活带来了哪些负面影响 传递信息的技术是怎样发展的 山东日照什么时候最冷!气温是多少! 电话给我们的生活带来了哪些危害,哪些方便 流体力学关于纳威斯托克斯方程(NS方程).图中,哈密顿算子为什么有的正常写,有的写在式子底部.如上图圈出的. 温度与地区有什么关系 为什么胶体粒子可以带电荷,但整个胶体呈电中性? 流体力学中,连续方程适用条件… 内蒙古高原的日照时数和太阳辐射量 电势降低的方向,一定是电场强度的方向吗?请举出反例 还可以告诉我发生什么样的反应吗?如果可以,请写一下表达式, 现代的信息传递的方式为我们的生活带来了哪些便利 全国生物学奥林匹克竞赛省赛区一等奖与广东省生物学联赛一等奖有区别吗? 怎么写,要用方程, 信息技术给我们带来哪些便利?我要例子. 电场强度的方向一定是电势降低的方向.为什么? 方程怎么解,如果不对请告诉我怎么写 现代信息技术有哪些? 全国高中生物学联赛与高中生物奥林匹克竞赛的说明?有什么奖?加多少分?一个省多少人获得名次?其他学科呢? 1.简述信息技术发展对企业组织的影响. 爱因斯坦是把成功的秘诀归结为A=x+y+z吗?其中A代表事业的成功,X表示艰苦的劳动,Y代表正确的方法,Z代表少说废话, 电势降低的方向不一定是电场线的方向 检验报告的有效期是多久请问304不锈钢管的检验报告有效期为多久?施工单位报上来的是2003年的,是否能用?还有就是钢管进场后是否要做复试?是做栏杆扶手用的 ;我找过了,报告上没标明有效 青藏高原太阳辐射总量丰富的原因是什么? 1.在自然状态下,ABC三种不同的树木分布同一大片的土地上,三者的个体数量几乎相等,走在这片土地上,时常可以看见A,看到B机会很少,但可在一定的距离下见到C.判断下列正确的是 三种的族群密 一项工程,原计划8天完成,实际每天工作效率提高20%,几天可以完成?【方程解】
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘