百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 几个实用的HTML5代码片段
分享文章到:

几个实用的HTML5代码片段

发布时间:01/15 来源: 浏览: 关键词:
HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等,帮助你提高开发速度。

当启动一个新的项目的时候,你需要一个启动模板。这里是一个简洁干净的模板,可以作为 HTML5 项目的基础。

HTML5 启动模板


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

获取方位的表单 (Google Maps)

这里是一个简单但功能强大的表单代码,用户可以输入他的位置指示到特定的地方。对于联系页面非常有用。

<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>
Base64 编码的空白 GIF 图片
       我不推荐使用透明的 GIF,但我知道,即使在2013年,很多人都还在使用他们。如果你是其中之一,你可能会享受这个 Base64 编码的 1 * 1px的空白 GIF。这种方式比使用的图像更好。


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Email 校验的正则表达式

HTML5 对表单功能进行了很大的正确,例如允许使用正则表达式模式来验证电子邮件。


<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
嵌入 Flash
      你是否经常需要再 HTML 页面中嵌入 Flash 文件?如果是的话,你会更好地保存下面的 Flash 嵌入代码以供将来使用。


<object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">
<param name="movie" value="your-flash-file.swf" />
<param name="quality" value="high"/>
</object>

HTML5 video with Flash fallback
       新的 HTML5 规范的另一大特点是 Video 标签,让您轻松嵌入视频文件。但不幸的是,一些浏览器不能处理嵌入式 HTML5 视频。因此,这里兼容旧的浏览器的代码,在不支持 HMTL5 视频的浏览器使用 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>

打电话和发短信

在移动网页中,有一种快速的方法来建立呼叫和短信链接。下面是一个示例代码,记得收藏在您的代码片段库里。


<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
自动完成功能

使用 dataList 元素,HTML5 允许你创建一个输入字段自动完成数据的列表。超级有用的!这里是一个示例代码。


<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>
可下载的文件
       HTML5 允许使用 download 属性强制下载文件。这里是一个标准链接到一个可下载的文件。


<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>


Crash IE6
2013 年,带给前端开发人员恶梦的 Internet Explorer 6 市场份额已经降了很多了。但一些人仍然在使用它。如果你想摆脱这种旧的浏览器,这里是一个非常有趣的代码,包括在你的 HTML 页面,让 IE6 崩溃。


感谢/index.html教学,下面是我自己的分类总结:

搜索分类关键词:多媒体类、文字段落类、导航列表表单类,按钮事件绘图类,页面结构缓存类

多媒体:

//嵌入视频<Video>
//controls="controls"向用户显示控件,比如播放按钮; autoplay="autoplay"自动播放; loop="loop"循环播放
//视频资源 相对 URL - 指向网站内的文件(比如 href="song.ogg")

<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
----------------------------------------------------------------------------------------------------------------------

//嵌入音频<audio>
//controls="controls"向用户显示控件,比如播放按钮; autoplay="autoplay"自动播放; loop="loop"循环播放

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
----------------------------------------------------------------------------------------------------------------------

<img> 标签定义 HTML 页面中的图像。
请注意,从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
<img> 标签有两个必需的属性:src 和 alt。alt规定图像的替代文本

<img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />
----------------------------------------------------------------------------------------------------------------------

//<a>标签定义超链接,用于从一个页面链接到另一个页面,最重要的属性是 href 属性,它指定链接的目标
//target属性用于指定目标的打开方式:_blank(新建窗口打开) _self(在同一窗口打开) _parent(在父窗口打开) _top(在窗口主体打开)

<a href="">W3School</a>
<a target="value">

----------------------------------------------------------------------------------------------------------------------

文字段落类:

//<article> 标签定义独立的内容,可能用于报纸文章,论坛帖子,用户评论等
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
</article>

----------------------------------------------------------------------------------------------------------------------
//<aside> 标签定义其所处内容之外的内容,内容可用作文章的侧栏
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
----------------------------------------------------------------------------------------------------------------------

//<b> 标签定义粗体的文本(文字加粗,起强调作用)
<p>It was a <b>red</b> house with a <b>blue</b> door.</p>
----------------------------------------------------------------------------------------------------------------------

//bdi 指的是 bidi 隔离,<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置,在发布用户评论或其他您无法完全控制的内容时,该标签很有用
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

----------------------------------------------------------------------------------------------------------------------

//<blockquote> 标签定义摘自另一个源的块引用,<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
<blockquote>帝国主义都是纸老虎 ... </blockquote>

----------------------------------------------------------------------------------------------------------------------

//<br /> 标签插入简单的换行符,注意没有结束符
This text contains<br />a line break
----------------------------------------------------------------------------------------------------------------------

//<caption> 标签定义表格的标题
//<caption> 标签必须直接放置到 <table> 标签之后

<table>
<caption>每月的存款</caption>
<tr>
<th>月份</th>
<th>存款</th>
</tr>
<tr>
<td>一月</td>
<td>1000 元</td>
</tr>
</table>

----------------------------------------------------------------------------------------------------------------------
//<del> 标签定义文档中已删除的文本
a dozen is <del>21</del> 12 pieces

----------------------------------------------------------------------------------------------------------------------
//<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

----------------------------------------------------------------------------------------------------------------------
//<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签
<p>Do not forget to buy <mark>milk</mark> today.</p>
----------------------------------------------------------------------------------------------------------------------
//<span> 标签用于对文档中的行内元素进行组合。
请使用 span 元素对行内元素进行分组,以便通过样式对它们进行格式化。

<p>This is a paragraph <span style="color:#00ff00;">This is a paragraph</span>
This is a paragraph</p>

----------------------------------------------------------------------------------------------------------------------
//<abbr>单词缩写标签,将People's Republic of China的内容缩写成PRC
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1948.

----------------------------------------------------------------------------------------------------------------------

导航列表表单类:

<ul> 标签定义无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>

----------------------------------------------------------------------------------------------------------------------
<select> 标签创建下拉列表
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

----------------------------------------------------------------------------------------------------------------------
<nav> 标签定义导航链接的部分
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

----------------------------------------------------------------------------------------------------------------------
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时,私钥存储在本地,公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
----------------------------------------------------------------------------------------------------------------------

<form> 标签标签用于创建供用户输入的 HTML 表单。
form 元素包含一个或多个表单元素,比如:
button
input
keygen
object
output
select
textarea

<form action="form_action.asp">
First name: <input type="text" name="fname" value="Mickey" /><br />
Last name:<input type="text" name="lname" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>

----------------------------------------------------------------------------------------------------------------------
<fieldset> 标签用于从逻辑上将表单中的元素组合起来。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 fieldset 元素定义标题。
对表单中的相关元素进行分组:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>

----------------------------------------------------------------------------------------------------------------------
//注释标签,其中内容不会显示
<!--这仅仅是一个注释-->

----------------------------------------------------------------------------------------------------------------------

按钮事件绘图类:

//<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像),area 元素始终嵌套在 <map> 标签内部
//shape定义点击区域形状,coords定义区域坐标,href定义链接地址

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">
<area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

----------------------------------------------------------------------------------------------------------------------
//<button> 标签定义按钮,您可以在 button 元素内放置内容,比如文本或图像。这是该元素与通过 input 元素创建的按钮的不同之处。
//autofocus="autofocus"自动获得焦点
//type有submit提交按钮,reset重置按钮(清空数据)
<button type="button">Click Me!</button>
----------------------------------------------------------------------------------------------------------------------

//<canvas> 标签定义图形,比如图表和其他图像,可以设定height,width
//<canvas> 标签只是图形容器,您必须使用脚本来绘制图形

<canvas id="myCanvas"></canvas>
<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

----------------------------------------------------------------------------------------------------------------------
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。

<script type="text/javascript">
document.write("Hello World!")
</script>
----------------------------------------------------------------------------------------------------------------------

页面结构缓存类:

//HTML5文件声明,放在<html>标签之前,该标签告知浏览器文档所使用的 HTML 规范
<!DOCTYPE HTML>

----------------------------------------------------------------------------------------------------------------------
//离线缓存:
<!DOCTYPE HTML>
<html manifest="demo.appcache"> //mainfest文件后缀最后为appcache
...
</html>

//mainfest文件配置:
CACHE MANIFEST //在此标题下列出的文件将在首次下载后进行缓存,离线后可用
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK: //在此标题下列出的文件需要与服务器的连接,且不会被缓存,或者使用一个*号代表其他文件都要联网
login.asp

FALLBACK: //在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
/html5/ /404.html

----------------------------------------------------------------------------------------------------------------------

//<address>标签,提供联系方式,一般用于页头或页脚
<address>
Written by W3School.com.cn<br />
<a href="mailto:us@example.org">Email us</a><br /> //Email
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78 //Phone
</address>

----------------------------------------------------------------------------------------------------------------------
//<base> 标签为页面上的所有链接规定默认地址或默认目标,请把 <base> 标签排在 head 元素中第一个元素的位置,这样 head 中其他元素就可以利用 <base> 元素中的信息了
//下面等价于<img src="/i/pic.gif" />

<head>
<base href="/i/" />
</head>
<img src="pic.gif" />

----------------------------------------------------------------------------------------------------------------------
<footer> 标签定义 section 或 document 的页脚。
在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
假如您使用 footer 来插入联系信息,应该在 footer 元素内使用 <address> 元素。
<footer>This document was written in 2010.</footer>

----------------------------------------------------------------------------------------------------------------------
head 元素是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。
下面是可用在 head 部分的标签:
<base>
<link>
<meta>
<script>
<style>
<title>

<head>
<title>文档的标题</title>
</head>

----------------------------------------------------------------------------------------------------------------------

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有8人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板