10段实用的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 { color:#000; text-decoration:none; }
- mark { 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>
复制代码
- <!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>
复制代码
- <!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>
复制代码
- <!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>
复制代码
- <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>
复制代码
- <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>
复制代码
- <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
复制代码
10段实用的HTML5代码的更多相关文章
- Html5 代码
随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5. 本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使 ...
- 绝对应当收藏的10个实用HTML5代码片段(转)
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- [转载].NET开发常用的10条实用代码
1.读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine(“Platform: {0}” ...
- 21 段实用便捷的 PHP 代码
PHP 是目前使用最广泛的基于 Web 的编程语言,驱动着数以百万计的网站,其中也包括如 Facebook 等一些大型站点.这里收集了 21 段实用便捷的 PHP 代码摘录,对每种类型的 PHP 开发 ...
- 实用的JS代码段(表单篇)
整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onloa ...
- 10款很酷的HTML5动画和实用应用 有源码
10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...
随机推荐
- Google chrome的字体设置
http://blog.sina.com.cn/s/blog_a3b863da01016sv3.html 谷歌浏览器(Google chrome)速度很快,很好用.问题是字体显示有时候不对:用英文版的 ...
- 李洪强iOS开发之【零基础学习iOS开发】【02-C语言】08-基本运算
计算机的基本能力就是计算,所以一门程序设计语言的计算能力是非常重要的.C语言之所以无所不能,是因为它不仅有丰富的数据类型,还有强大的计算能力.C语言一共有34种运算符,包括了常见的加减乘除运算.这讲就 ...
- windows8 64位 IIS8 PHP5.5 安装 Imagemagick 组件
为什么这里一定要说 windows 系统是64位呢,因为如果是系统是64位,那么PHP5.5 一般都会选择64的, Imagemagick 组件也会选择64位的, 但是操蛋的是 64位的Imagema ...
- pointcut 表达式的含义
execution(* com.spring.dao.*.add*(..)) 第一个*表示任意返回值 第二个*表示com.spring.dao包中所有类 第三个*表示以add开头的所有方法 (..)表 ...
- java内存模型 年轻代/年老代 持久区
jvm中的年轻代 老年代 持久代 gc 虚拟机中的共划分为三个代:年轻代(Young Generation).老年代(Old Generation)和持久代(Permanent Generatio ...
- jdbc操作mysql
本文讲述2点: 一. jdbc 操作 MySQL .(封装一个JdbcUtils.java类,实现数据库表的增删改查) 1. 建立数据库连接 Class.forName(DRIVER); connec ...
- SQL Server常见问题总结
写在前面 在QQ群,微信群,论坛中经常帮助使用SQL Server数据库的朋友解决问题,但是有一些最常见最基本的问题,每天都有人问,回答多了也不想再解答了,索性把这些问题整理一下,再有人问到直接发链接 ...
- linux地址映射1、2、3(☆☆☆)
欢迎关注瘋耔新浪微博:http://weibo.com/cpjphone 一.线性映射与非线性映射 ...
- C#中配置文件的使用
1. 向项目添加app.config文件: 右击项目名称,选择“添加”→“添加新建项”,在出现的“添加新项”对话框中,选择“添加应用程序配置文件”:如果项目以前没有配置文件,则默认的文件名称为“app ...
- poj2186Popular Cows(强连通分量)
http://poj.org/problem?id=2186 用tarjan算出强连通分量的个数 将其缩点 连成一棵树 则题目所求即变成求出度为0 的那个节点 在树中是唯一的 即树根 #includ ...