现在的位置: 首页 > 综合 > 正文

分享10段实用的HTML5代码

2013年06月10日 ⁄ 综合 ⁄ 共 7499字 ⁄ 字号 小 中 大 ⁄ 评论关闭

随着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>
        <
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）