分享10段实用的HTML5代码

最新推荐文章于 2021-06-17 09:06:57 发布
最新推荐文章于 2021-06-17 09:06:57 发布
阅读量954 收藏 1
点赞数
摘要：目前，越来越多的网站使用HTML5进行开发，本文提供了10段HTML5代码，它们可以帮你快速启动HTML5项目。

随着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,
h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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}"  />

woshishuoshuoa
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
12个精美实用的html5消息提示框代码.
02-06
12个精美实用的html5消息提示框代码,html5消息提示框,精美实用的消息提示框 12个精美实用的html5消息提示框代码,html5消息提示框,精美实用的消息提示框
在网站制作中随时可用的10个 HTML5 代码片段
Tree3170 的专栏
11-11 764
转自：http://www.html5cn.org/article-5732-1.html   HTML 很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的 HTML 代码片段，有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等，帮助你提高开发速度。 HTML5 启动模板        当启动
html5代码_html5精选特效代码分享（收藏）
weixin_39558391的博客
11-29 585
在网页设计过程中，我们会经常用到一些HTML5特效代码，下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码，可以放心在您的应用程序中使用。一、Canvas跟随鼠标光标动画特效演示、下载地址：http://www.php.cn/xiazai/js/845二、HTML5 Canvas泡泡悬浮鼠标特效演示、下载地址：http://www.php.cn/xiazai/js/1599三、HTML...
HTML5比较实用的代码
weixin_33804990的博客
09-27 69
增强IE兼容性 <!--[if IE]> 　　<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> HTML5输入类型 <input type="search"> <input t...
10个值得收藏的实用HTML5代码片段分享
小朱
06-17 1406
HTML5是WEB技术发展的重要的里程碑，对于前端开发来说，如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话，相信大家一定不会拒绝，下面是我们精心收集的10多个HTML5代码片段，相信大家一定喜欢！ HTML5的最简单模板 如果你需要开始一个新的HTML5项目的话，大家肯定会需要一个最简单的模板，这里是一个非常简单并且清晰的HTML5模板，相信大家会喜欢！ HTML5是W
jQuery+HTML5加入购物车代码分享
01-21
为大家分享的jQuery+HTML5加入购物车代码如下 <head lang=en> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=width=device-width, ...
超火的圣诞树代码html源码分享
最新发布
02-24
超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火...
元旦倒计时代码+HTML5
12-14
2023年春节马上就要到来了，给大家分享一款倒计时源码吧，源码比较简单，属于简约风格的(没有其它多余的样式)，具体可以看下面的图片演示，在源码里面也添加了一个背景音乐，烘托一下气氛也是非常不错的。...
html5教程画矩形代码分享
12-13
复制代码代码如下:<!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画矩形</title>[removed][removed]http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>...
html5 canvas实现圆形时钟代码分享
01-19
复制代码代码如下:<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>HTML CLOCK</title></head><body> ”500″ height=”500″ id=”clock”> 你的浏览器...
我的心灵小阁-绿色网页模板
01-13
我的心灵小阁-绿色网页模板
分享10段实用的HTML5代码（一）
疯狂紫萧
01-12 1089
随着HTML5的流行，许多网站开始介绍HTML5元素和属性的用法，以及各种教程，并且越来越多老的浏览器开始兼容HTML5。 　　本文作者编译了10段非常实用的HTML5代码片段，开发者可以直接拿过去使用，帮你快速完成HTML5项目的开发工作，你也可以把它们当做一个学习资源，进行参考。 　　1.HTML5编写的CSS Reset 　　CSS Reset也可以写成Reset CSS，
分享html代码的博客,html5精选特效代码分享（收藏）
weixin_42361495的博客
06-17 129
在网页设计过程中，我们会经常用到一些HTML5特效代码，下面就是H5教程为大家整理分享的一些好看炫酷且实用的HTML5特效代码，可以放心在您的应用程序中使用。一、Canvas跟随鼠标光标动画特效演示、下载地址：http://www.php.cn/xiazai/js/845二、HTML5 Canvas泡泡悬浮鼠标特效演示、下载地址：http://www.php.cn/xiazai/js/1599三、...
HTML5 常用代码
RobinWu
10-27 208
HTML5检测技术 Moderniz [code="java"] http://www.quanlei.com/2011/02/html5%E6%A3%80%E6%B5%8B%E6%8A%80%E6%9C%AF/ [/code] Modernizr Test Suite [code="java"] https://github.com/Modernizr/Modernizr ht...
html5里面相关知识代码演示展示
qq_50991473的博客
11-29 199
表格 代码示例 <!doctype html> <html> <head> <meta charse="utf-8"> <title>笔记本</title> </head> <body> <table border="1"> <caption>本周畅销笔记本排名TOP3</caption> <thead> <tr> <th>排名</th
html5展示页面代码教程,HTML5注册页面示例代码
weixin_39650784的博客
06-03 176
register.htmlfunction play(){document.getElementById("menu_item").style.display = "";}function noplay(){document.getElementById("menu_item").style.display = "none";}function passwd(){var pass = docume...
绝对不可错过的超实用HTML5代码片段
weixin_30279315的博客
03-19 74
日期：2013-3-15来源：GBin1.com HTML5绝对是一个流行元素，受到如此多的公司组织的追捧，作为极客来说，岂能错过呢？在今天这篇文章中，我们将分享一些超实用的HTML5的代码片段，相信大家一定会喜欢！ HTML5视频和fallback 实用HTML5的一个好处就是简化了视频和音频的嵌入代码量，不过呢，如何兼容老版本的浏览器绝对是一个令人头疼的问题，特别是在天朝...
html5+实现一键分享多张图片到朋友圈
老虎帅呆了的博客
11-24 4210
示例图 代码部分&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&amp;quot;utf-8&amp;quot;/&amp;gt; &amp;lt;meta name=&amp;quot;viewport&amp;quot;
html5shiv：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题...
weixin_30558305的博客
10-29 254
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个： 1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。 2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值