源于生活
标题: 几个实用的HTML5代码片段 [打印本页]
作者: vingoo 时间: 2017-1-10 12:33
标题: 几个实用的HTML5代码片段
HTML 很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的 HTML 代码片段，有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等，帮助你提高开发速度。
当启动一个新的项目的时候，你需要一个启动模板。这里是一个简洁干净的模板，可以作为 HTML5 项目的基础。
HTML5 启动模板
[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>
获取方位的表单 (Google Maps)
这里是一个简单但功能强大的表单代码，用户可以输入他的位置指示到特定的地方。对于联系页面非常有用。
[HTML] 纯文本查看 复制代码
<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。这种方式比使用的图像更好。
[HTML] 纯文本查看 复制代码
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Email 校验的正则表达式
HTML5 对表单功能进行了很大的正确，例如允许使用正则表达式模式来验证电子邮件。
[HTML] 纯文本查看 复制代码
<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
嵌入 Flash
你是否经常需要再 HTML 页面中嵌入 Flash 文件？如果是的话，你会更好地保存下面的 Flash 嵌入代码以供将来使用。
[AppleScript] 纯文本查看 复制代码
<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。
[AppleScript] 纯文本查看 复制代码
<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>
打电话和发短信
在移动网页中，有一种快速的方法来建立呼叫和短信链接。下面是一个示例代码，记得收藏在您的代码片段库里。
[HTML] 纯文本查看 复制代码
<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 允许你创建一个输入字段自动完成数据的列表。超级有用的！这里是一个示例代码。
[AppleScript] 纯文本查看 复制代码
<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 属性强制下载文件。这里是一个标准链接到一个可下载的文件。
[HTML] 纯文本查看 复制代码
<!-- 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"）
[AppleScript] 纯文本查看 复制代码
<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"循环播放
[AppleScript] 纯文本查看 复制代码
<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规定图像的替代文本
[AppleScript] 纯文本查看 复制代码
<img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />
----------------------------------------------------------------------------------------------------------------------
//<a>标签定义超链接，用于从一个页面链接到另一个页面，最重要的属性是 href 属性，它指定链接的目标
//target属性用于指定目标的打开方式：_blank（新建窗口打开） _self（在同一窗口打开） _parent（在父窗口打开） _top（在窗口主体打开）
[AppleScript] 纯文本查看 复制代码
<a href="">W3School</a>
<a target="value">
----------------------------------------------------------------------------------------------------------------------
文字段落类:
//<article> 标签定义独立的内容，可能用于报纸文章，论坛帖子，用户评论等
[AppleScript] 纯文本查看 复制代码
<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> 标签定义其所处内容之外的内容，内容可用作文章的侧栏
[AppleScript] 纯文本查看 复制代码
<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> 标签定义粗体的文本（文字加粗，起强调作用）
[AppleScript] 纯文本查看 复制代码
<p>It was a <b>red</b> house with a <b>blue</b> door.</p>
----------------------------------------------------------------------------------------------------------------------
//bdi 指的是 bidi 隔离,<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置,在发布用户评论或其他您无法完全控制的内容时，该标签很有用
[AppleScript] 纯文本查看 复制代码
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
----------------------------------------------------------------------------------------------------------------------
//<blockquote> 标签定义摘自另一个源的块引用,<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
[AppleScript] 纯文本查看 复制代码
<blockquote>帝国主义都是纸老虎 ... </blockquote>
----------------------------------------------------------------------------------------------------------------------
//<br /> 标签插入简单的换行符,注意没有结束符
[AppleScript] 纯文本查看 复制代码
This text contains<br />a line break
----------------------------------------------------------------------------------------------------------------------
//<caption> 标签定义表格的标题
//<caption> 标签必须直接放置到 <table> 标签之后
[AppleScript] 纯文本查看 复制代码
<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 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
[AppleScript] 纯文本查看 复制代码
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
----------------------------------------------------------------------------------------------------------------------
//<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签
[AppleScript] 纯文本查看 复制代码
<p>Do not forget to buy <mark>milk</mark> today.</p>
----------------------------------------------------------------------------------------------------------------------
//<span> 标签用于对文档中的行内元素进行组合。
请使用 span 元素对行内元素进行分组，以便通过样式对它们进行格式化。
[AppleScript] 纯文本查看 复制代码
<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> 标签定义无序列表
[AppleScript] 纯文本查看 复制代码
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
----------------------------------------------------------------------------------------------------------------------
<select> 标签创建下拉列表
[AppleScript] 纯文本查看 复制代码
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
----------------------------------------------------------------------------------------------------------------------
<nav> 标签定义导航链接的部分
[AppleScript] 纯文本查看 复制代码
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
----------------------------------------------------------------------------------------------------------------------
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
[AppleScript] 纯文本查看 复制代码
<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
[AppleScript] 纯文本查看 复制代码
<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 元素定义标题。
对表单中的相关元素进行分组：
[AppleScript] 纯文本查看 复制代码
<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定义链接地址
[AppleScript] 纯文本查看 复制代码
<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重置按钮（清空数据）
[AppleScript] 纯文本查看 复制代码
<button type="button">Click Me!</button>
----------------------------------------------------------------------------------------------------------------------
//<canvas> 标签定义图形，比如图表和其他图像,可以设定height,width
//<canvas> 标签只是图形容器，您必须使用脚本来绘制图形
[AppleScript] 纯文本查看 复制代码
<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 通常用于图像操作、表单验证以及动态内容更改。
[AppleScript] 纯文本查看 复制代码
<script type="text/javascript">
document.write("Hello World!")
</script>
----------------------------------------------------------------------------------------------------------------------
页面结构缓存类：
//HTML5文件声明，放在<html>标签之前，该标签告知浏览器文档所使用的 HTML 规范
<!DOCTYPE HTML>
----------------------------------------------------------------------------------------------------------------------
//离线缓存：
[AppleScript] 纯文本查看 复制代码
<!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>标签，提供联系方式，一般用于页头或页脚
[AppleScript] 纯文本查看 复制代码
<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" />
[AppleScript] 纯文本查看 复制代码
<head>
<base href="/i/" />
</head>
<img src="pic.gif" />
----------------------------------------------------------------------------------------------------------------------
<footer> 标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
假如您使用 footer 来插入联系信息，应该在 footer 元素内使用 <address> 元素。
[AppleScript] 纯文本查看 复制代码
<footer>This document was written in 2010.</footer>
----------------------------------------------------------------------------------------------------------------------
head 元素是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。
下面是可用在 head 部分的标签：
[AppleScript] 纯文本查看 复制代码
<base>
<link>
<meta>
<script>
<style>
<title>
<head>
<title>文档的标题</title>
</head>
| 欢迎光临 源于生活 (http://bbs.vingoo.info/) |
Powered by Discuz! X3.1 |