Html5 代码

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

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

CSS Reset也可以写成Reset CSS，即重设浏览器样式。

/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;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>

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

<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

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

</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>

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电子邮件正则表达式验证

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

Html5 代码的更多相关文章

html5代码,获取地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
获取地理位置的html5代码
/** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { / ...
极客无极限一行HTML5代码引发的创意大爆炸
摘要:一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器.这件事在分享到Code Wall.Hacker News之后,引起了众 ...
HTML5代码规范
HTML5代码规范html标签里面等号两边不要留空格在IE下可能会识别不了html5等号前后可以使用空格,但仍不推荐使用. HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少.在 ...
在网站制作中随时可用的10个 HTML5 代码片段
HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮 ...
关于HTML5代码总结。
在阅读完HTML5后,自己把一些常用的代码总结了一下,自认为比较全,如果有什么错误请指出. 1.<!DOCTYPE html>声明这是一个HTML5的页面 2.<HTML lang＝ ...
绝对应当收藏的10个实用HTML5代码片段（转）
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
10段实用的HTML5代码
1.HTML5编写的CSS ResetCSS Reset也可以写成Reset CSS,即重设浏览器样式. /* html5doctor.com Reset Stylesheet (Eric Mey ...
!!常用HTML5代码
HTML5提供的新特性 2016-2-16 Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信. Web Storage 定义了一套API, 能 ...

随机推荐

HTTP协议2之基本认证--转
http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌面应用程序(比如新浪桌面客户端)跟Web服务器之间是如何身份识别呢? 什么是HTTP基本认证桌面应用程序也通过H ...
如何排版微信公众号「代码块」之 MarkEditor
前段时间写过一篇文章如何排版微信公众号「代码块」,讲的是如何使用浏览器插件 Markdown Here 来排版代码块.虽然用 Markdown Here 排版出来的样式还不错,但存在一个问题,就是代 ...
XMLHttpRequest发送请求
*open(method,url,async) *send(string)//在使用get请求的时候,是没有主体的,所有的信息都会拼在url当中,所以使用send的时候括号里的string可以为空!如 ...
CSS---------------之文本颜色
CSS2支持如下名字的颜色注意点: 你的浏览器有可能支持更多名字,但是在实际用的过程中尽量少使用名字的,因为各个浏览器对颜色的会存在差异:查看颜色可以参考对于更多地颜色,你可以使用代表红,绿,蓝三 ...
jquery插件datepicker
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. <script ...
PHP学习笔记二十一【全局变量】
<?PHP //定义全局变量 global $a; $a=9; //给全局变量赋值 function test1() { global $a; $a=45; } test1(); echo $a ...
oracle行号排序问题
1.创建一个student,并且插入数据 ),age int) '); '); '); '); '); commit; 2.直接按照age进行排序显示行号: select * from(select ...
Struts2学习笔记国际化（Internationalization）
概述国际化(Internationalization),通途的讲,就是让软件实现对多种语言的支持.可以通过简单的设置就可以从一种语言切换到另一种语言.用的最多的地方就是在应用程序的界面表示上.我们经 ...
js 之 Post发送请求
// ajax 对象 function ajaxObject() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new X ...
【Python学习】由于windows环境问题导致的不能安装某些需要VC编译的插件
由于windows环境问题导致的不能安装某些需要VC编译的插件下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装方法: 在CMD中输入 pip in ...

Html5 代码

Html5 代码的更多相关文章

随机推荐

热门专题