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

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

天气预报(id后面的9位数字为城市代码)年月日,星期,当前时间(仅用于javascript) PHP 5.5.0发布 不再支持Windows XP和2003 专访ThinkPHP创始人刘晨:用最简单最快速的方式开发PHP应用 重构:仔细查看,改进代码 加速编码的17款最棒的CSS工具 生于微信:专访疯狂猜图CEO曹晓刚 谷歌:受感染的合法网站远比恶意网站危险性大 Mozilla正式发布Firefox 22应用程序开发者受益 支持3D游戏、视频通话和文件分享 直接拿来用!最火的前端开发项目(一) Salesforce.com和Oracle在云合作上达成长期协议 即将到来的数据中心僵尸末日,谁能成为最后的幸存者?! Andorid APK反逆向解决方案:梆梆加固原理探寻 科技拥抱设计:体验设计如何创新? Rails 4.0正式发布 命途多舛的webOS,两度易主,生生死死多少回 Citrix全面开源XenServer 为了三十亿人的网络幸福:Google投资O3b发射网络卫星 Windows 8.1中IE 11开始支持WebGL和SPDY/3 微软Build 2013开发者大会:盘点Windows 8.1的15个重大更新 瞧!这是摩托罗拉移动新Logo,你有什么感觉? 专访UEditor创始人战毅:打造最佳的用户编辑体验 Eclipse 4.3 正式版发布 代号Kepler 为兴趣而生 七大编程挑战项目,你敢来吗? iOS 7辅助功能:左右摇头控制iOS设备 挑战传统关系型数据库:Facebook图形数据库TAO揭秘 揭秘“棱镜计划”幕后的技术 你更新了吗?Visual Studio 2013 Preview和.NET 4.5.1同时发布 你主要使用什么编程语言? 跨平台游戏开发工具App Game Kit或将新增更多强悍功能 移动应用推广的那些事儿:应用发现篇 DDoS攻击也能成为一种云计算服务 什么样程序风格才最好的? 有关计算机方面的国标大家有列表吗,只要列表呀,我在论谈上找不到呀,谁给我一份了谢了! 如何知道串口上来数据了 在线等待:Windows启动时弹出“Exception EStackOverflow in moudle ...”的错误提示而无法运行Delphi的程序,why? 请高手指点一二。 简单问题:我却搞不定:--- vc7.0里面为什么不认cos、sin等数学函数? OracleOraHome81ManagementServer服务的启动问题。 activex 发布 用C#怎样得到一个dll文件的版本号呢? 问一个比较简单的问题! 关于msgbox的简单问题,才鸟求知,谢谢帮忙!!!!! 困惑。什么工作好啊,来者有分 大哥、大姐们,快拔刀吧! 如何取得SQL SERVER2000数据库某字段的空值? 如何用split分割纵向字符串?在线等候. 关于java workshop的问题(急) 向高手请教一个问题(硬编译),至少200分相送 为什么我用request.getPathInfo()取到的结果为空? c# 版的朋友们大家好!!新手登录,多多帮助! oracle触发1器 一个好多人问过的问题,可是我这里还是不能用,请在帮下忙 发布Applet出现的错误,帮忙撒 本人在PB开发中遇到莫名其妙的问题 强烈建议成立crack专栏,同意的请跟帖。 textbox的输入问题 我的98系统在重新启动后再进入系统时屏幕上会出现一闪闪的雪花点,这是为什么呀? 请教!谁会使用这个API函数(DbiPackTable),该函数在BDE32.HLP中。 一个循环问题,急急急!! mysql -h remotehost -u root连不上对方机子? 分布式应用中的服务器端访问当地窗口的问题 打印的问题,大家请看,得到你们的思路,马上给分! 我想做一个保存图片资源的dll文件,谁有这方面的文章和代码啊? 看一下这个ServiceApp.出错信息! 有专家吗?Cache问题 那里有linux原码下栽?不全也可以? 怎么用OPENCV?(50分) winsock下载FLASH动画的错误问题 好好看看这个妞,天机不可泄漏啊,哈哈哈哈 VxD 中如何使用 sprintf 等函数?[200 分] help me !!! 急急急!!! 有关datareport的问题! 我下载了Core SDK,《windows核心编程》的示例还是编译不成功? SQL Server中定义image类型的问题? 鼠标拖拽效果 简单的问题?高分相送,UP者有分。。。。。。。。 到底到哪里找weblogic 7的破解文件啊? 请教向win2000 server申请证书的问题 我有了一只小猫,好可爱啊!为它散分!TMD,只有最后125分了! query1.CanModify:= true;???? 2-甲基乙烯和丙烯的区别 三氧化二铝能否吸附氢气中的水蒸气和氧气? 对甲苯磺酸的作用 求2-甲基-1-丙烯物理常数 化学污染如何危害到食品安全? 对甲苯磺酸做酯化反应的催化剂的机理. 氮气与氢气在高温高压和催化剂作用下会生成NH3 ,问制的的NH3是气态还是液态?已知:NH3加压下易液化 (不知道这条信息有没有用,我不好下决定)请高手指教! 马蹄形磁铁如何分辨磁极 对甲苯磺酸的生产商有哪些?催化硬脂酸酯化反应 离心机甩料 振动我有一同事,他操作离心机比较心急,恨不得把物料一次性甩完,离心机甩料 如果物料过多,并产生 振动,对离心机有什么损坏?请各位给予指教. 怎样辨别圆形磁铁的磁极? 请问对甲苯磺酸变红了,是吸潮的原因吗?用其做催化剂,影响反应质量吗? 离心机堵料之后怎么处理 现有一个尺寸为长800宽800深400的不锈钢机箱,环境温度为零下10℃,需加热到20℃,需要多少功率的加热器.机箱带保温棉30mm 厚求计算公式~ 二氧化碳是怎样溶解倒可乐中的?那为什么摇可乐是会将可乐中的二氧化碳分离出来呢? (灯箱、标牌、工艺品盒)(饮料瓶)(牙刷柄)由什么物质制成,有饮料瓶 聚酯材料 聚苯乙烯材料3个候选答错了,不是饮料瓶 是有机玻璃 没有磁极的磁铁,怎么辨别 烯烃加氢包和反应产生什么?有没芳烃产生? 什么品牌的ZR-BVV阻燃型铜芯聚氯乙烯绝缘聚氯乙烯护套电缆好? 20%的硫酸,20%的硝酸和2%的氢氟酸,需要用不锈钢加热器加热到80°左右,加热器用什么样的不锈钢材质最好不锈钢不能在80°的温度下和这三种酸发生反应 芳烃的亲电反应活性的快慢(六元环、五元环、苯) 选购ZCN-VV阻燃(C类)耐火铜芯聚氯乙烯绝缘聚氯乙烯护套电力电缆的话,关注哪个牌子的? 亲们好,请问5立方的水加热到38度,用什么加热器?不锈钢圆桶,直径1.8米,高2米.顶部有一40厘米的口,谢 一只蚂蚁从长4㎝,宽3㎝,高是12㎝的长方体纸箱的a点沿纸箱爬到b点,那么它所行最短路线的长是? BOD为什么可以反映某些污染物的量和污水浓度 如何用分子筛去除无水乙醇中的水想用3A分子筛除去无水乙醇和邻苯二甲酸二丁酯中的水分,需浸泡多长时间啊? 质量相同的H2O和D2O所含中子数之比怎么算? 说明文,至少500字要把假设、对比、列数字、举例子、打比方、作比较都给加进去. place of interest用英文翻译 五年级语文下册第三单元口语交际 劝说 450~500字 物理的两个一样的磁铁 一个是磁铁 一个是铁棒 不用任何工具 怎么样将他们分开 铝粉膏是否有毒 如何鉴别可乐中冒出的气体是二氧化碳?如何鉴别可乐中冒出的气体是二氧化碳呢?谁谁谁知道么? 两个形状大小完全相同的铁棒和磁铁不借助任何工具怎样区分它们 关于红甘蓝汁加什么水果变成什么颜色的报告 人体呼吸具有净化空气的作用.能使吸入的气体变清洁的结构有什么 如何不借助其他工具判断磁铁的磁极 秋天熟的果子.什么颜色,像什么? 芦荟净化空气吗?净化空气中的哪些有害物质 加热器是利用什么制成的加热设备? 什么花长青色的果子然后变成红色的果子大小和花生差不多,是观赏花卉 什么品种的芦荟对人的身体、净化空气等最好? 什么仪器能在火焰上直接加热 怎样区别药物催化剂水果和自然水果 导致各种类型食品安全事件的原因是什么 铁在封闭的水环境中会生锈吗比如说铁暖气片.暖气片里常年满水,暖气片什么时候会生锈到漏水?那么,跟完全在在空气中和在半有水的环境中比较呢,哪个快?还有,假设铁管子里面是满水且密封 危化品登记在危化品名录找不到咋办啊?比如混合芳烃、重芳烃的危化品信息怎么找啊? 哪些公司用食品安全检测系列产品Ⅰ、酶联免疫(ELISA)试剂盒Ⅱ、胶体金速测试纸条(卡)Ⅲ、荧光定量PCR检测试剂盒上述这些产品,都是哪些公司在用呢?我是做销售的,有这方面的货源,想 一小铁棒与磁铁的北极接触后哪一端变为南极? 纤维素醚是危险品吗?如果是危品,它是几类危品? 身体权被侵害有哪些种类? 用磁铁N极在一根铁棒上沿同一方向摩擦,铁棒被磁化,则铁棒左端为什么极? 食品安全对人有哪些危害?具体点讲.zhidao.baidu.com/question/533812619.html 口语交际 劝说10字 我要一篇500字的有关学校环境的说明文. 什么是烟气分析采样加热器? 急求牛津9a 第3课place of interest的课文和单词、单词最好有意思.答得好追加分、 求一篇500字说明文 仪器分析问题•在法庭上,涉及到审定一种非法的药品,起诉表明该非法药品经气相色谱分析测得的保留时间在相同条件下,刚好与已知非法药品的保留时间相一致;而辨护证明有几个无毒的 对甲苯磺酸是不是可以酯化反应?不是做催化剂哈,就是它本身做反应物.它与羟基作用是不是生成酯?反应条件一般是什么?小妹在此先谢过!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘