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

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

1.HTML5编写的CSS Reset

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*   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播放。

1
2
3
4
5
6
7
8
9
10
<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页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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.创建谷歌静态地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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模板

1
2
3
4
5
6
7
8
9
10
11
12
<!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页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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.上下文菜单

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
8
<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.从谷歌地图上获取路线

1
2
3
4
5
6
<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 代码的更多相关文章

  1. html5代码,获取地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  2. 获取地理位置的html5代码

    /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { / ...

  3. 极客无极限 一行HTML5代码引发的创意大爆炸

    摘要:一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器.这件事在分享到Code Wall.Hacker News之后,引起了众 ...

  4. HTML5代码规范

    HTML5代码规范html标签里面等号两边不要留空格在IE下可能会识别不了html5等号前后可以使用空格,但仍不推荐使用. HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少.在 ...

  5. 在网站制作中随时可用的10个 HTML5 代码片段

    HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮 ...

  6. 关于HTML5代码总结。

    在阅读完HTML5后,自己把一些常用的代码总结了一下,自认为比较全,如果有什么错误请指出. 1.<!DOCTYPE html>声明这是一个HTML5的页面 2.<HTML lang＝ ...

  7. 绝对应当收藏的10个实用HTML5代码片段（转）

    HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...

  8. 10段实用的HTML5代码

    1.HTML5编写的CSS ResetCSS Reset也可以写成Reset CSS,即重设浏览器样式. /*   html5doctor.com Reset Stylesheet (Eric Mey ...

  9. !!常用HTML5代码

    HTML5提供的新特性 2016-2-16 Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信. Web Storage 定义了一套API, 能 ...

随机推荐

  1. IoC容器Autofac之实例引入(一)

    先不必尝试理解IOC,先来看段代码. 一.一个没有使用IoC的例子 public class MPGMovieLister { public Movie[] GetMPG() { var finder ...

  2. 前端--关于CSS盒模型

    CSS样式规则的学习是很繁琐和枯燥的,因为它不像物理.数学或者其他编程语言一样有一些基本概念.有一些基本公理或者规则,其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏,CSS是有一些基本概念,但 ...

  3. WebApi官网学习记录---web api中的路由

    如果一条路由匹配,WebAPI选择controller和action通过如下方式: 1.找到controller,将"controller"赋值给{controller}变量 2. ...

  4. java 去除重复项

    import java.util.Arrays; import java.util.HashSet; import java.util.Set; class Demo20 { public stati ...

  5. Vim知识点收集

    (注意: 只记录工作中实际使用的命令) 删除带有pattern的所有行    :g/pattern/d 删除不带pattern的所有行   :g!/pattern/d 匹配red和blue,无次序   ...

  6. SQL Server -SET ANSI_NULLS

    当ANSI_NULLS 为ON时,遵循SQL92的标准,只能使用IS NULL 来判断值是否为NULL, 而不能使用=或<>来与NULL做比较,任何值包括NULL值与NULL值做=或< ...

  7. ios属性和成员变量写在.h文件和.m文件中 区别？

    1  其实是一样的.在.m文件上只能.m文件内部的才能访问的这个变量,如果在.h文件中,其他的文件也可以访问到这个变量. 2  写.h文件里边可以和其他的类进行交互,写.m里边只是在本类中使用! 3 ...

  8. rub、sass和compass的安装

    长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...

  9. 初学者必看：精心整理的Javascript操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  10. centos源码安装git

    因为Centos上yum安装的话可能版本比较低,使用中会有一些难以预料的问题出现. 从源代码编译安装方法: #Centos执行: yum install curl-devel expat-devel ...