`

绝对应当收藏的HTML5代码片段

 
阅读更多

文章源自:http://www.gbtags.com/gb/share/2268.htm

绝对应当收藏的HTML5代码片段

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>
    web的主要内容
</body>
</html>

 

表单获取Google地图

这里有一段非常简单的代码，通过用户输入地点，获取google地图地点，非常适合生成联系人表单

<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">输入地点</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编码的1x1大小的空白GIF文件

个人不推荐使用这个透明的空白gif，但是即使在2013年，很多人仍旧使用。可能你也喜欢使用这种方式。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

 

正则表单式验证电子邮件

HTML5中允许使用正则表单式来做输入验证：

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

 

正确的嵌入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>

 

视频并且支持flash的fallback

另外一个HTML5中最有用的特性是video标签，允许你很方便的嵌入video文件。但是很多老版本的浏览器不支持，所以下面这段代码将会非常有用

<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&amp;image=__POSTER__.JPG&amp;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>

 

iPhone call & sms links

iphone中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下：

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

 

HTML5的数据自动补齐功能

使用datalist元素，HTML5允许使用一组数据来生成自动补齐功能，现在你不需要使用第三方js代码或者类库啦！

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

 

可直接下载文件

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

 

HTML5直接添加项目到浏览器的右键菜单

使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中，代码如下：

<section contextmenu="mymenu">
<p>右键点击这里</p>
</section>
<menu type="context" id="mymenu">
<menuitem label="极客社区" icon="http://gbtags.com/gb/networks/themes/img/logo_small_hover.jpg"></menuitem>
<menu label="极客应用">
<menuitem label="在线教程" onclick="window.location.href = http://www.gbtags.com/gb/postgroups.htm"> </menuitem>
</menu>
</menu>

 

元素的自动focus

无须使用javascript，代码很简单：

<input autofocus="autofocus" />

 

 

分享到：
| 7个实用的Mobile移动相关HTML、CSS、Java ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    javascript 实现页面加载进度条代码

    在实际的HTML代码中，我们应当补全这些信息，确保图片能够正确显示。 综合上述分析，要实现一个简单的页面加载进度条，我们需要考虑以下几个要素： 1. 页面加载时展示一个进度条提示用户页面正在加载。 2. 使用...

    纯js代码制作的网页时钟特效【附实例】

    例如，上述代码片段中使用了绝对定位（POSITION:absolute）和宽高（WIDTH、HEIGHT）以及边距（MARGIN）来调整各部分在页面中的位置和尺寸。 2. JavaScript的基本使用：在文中提供的JavaScript代码中，我们可以看到...

    javascript 图片裁剪技巧解读

    在提供的代码片段中，使用了jQuery库（`***"&gt;&lt;/script&gt;`）。jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax交互，让编写JavaScript代码变得更加简单。在这个示例中...

    atombianjiqi_v1.38.0.zip

    它支持HTML、CSS、JavaScript等前端语言的智能提示和代码片段，使得前端开发变得更加流畅。 Atom的强大之处在于它的扩展性。通过Atom的包管理器（APM），用户可以安装各种第三方插件，以增加更多功能。例如，"Git...

    css面试试题汇总.pdf

    根据提供的文件内容，这段文字似乎是CSS代码片段以及相关的HTML标记混合在一起，夹杂着一些描述性的文字，可能是一些面试题目的答案或者解释。由于内容较为混乱且不完整，我会尽量从这些信息中提取相关的CSS知识点并...

    JavaScript对IE操作的经典代码(推荐)

    在本文中，我们将探讨一些专用于Internet Explorer (IE) 的JavaScript代码片段，这些代码在特定场景下能增强用户体验或实现特定的安全功能。然而，请注意，由于浏览器兼容性问题，这些代码可能在非IE浏览器如Firefox...

    一波CSS制作的三角形和圆形小按钮示例

    CSS（层叠样式表）是用于控制网页样式和布局的一种技术，它能够让网页开发者在不...需要注意的是，在理解本篇内容时，应当掌握HTML和CSS的基本知识，这样才能更好地理解代码片段的含义，并能够应用于自己的开发项目中。

    CSS网站布局实录

    通过对给定代码片段的分析，我们将深入了解CSS在实际开发中的应用技巧。 #### 二、核心概念解析 1. **文档类型定义（DOCTYPE）**：`&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    Javascript中最常用的55个经典技巧

    15. **窗口控制**: 虽然示例中的代码片段未完整展示，但其意图在于通过`&lt;object&gt;`标签实现窗口的最小化、最大化或关闭，这在开发复杂的Web应用程序时有时是必要的。 这些技巧不仅体现了Javascript在网页开发中的...

    CSS实现HTML背景图片拉伸铺满示例

    在HTML代码片段中，我们看到一个`&lt;img&gt;`标签，它的`src`属性设置了一个路径，这里应该是图片的实际路径。然后是一个`&lt;div&gt;`元素，它含有文本“导入后督系统的用户表到会计标准化”，这表明页面的某部分内容被包裹在...

    jquery+css3实现熊猫tv导航代码分享

    - 如果是实际开发，应确保所有代码的正确性，上述代码片段中存在一些扫描错误，如`allease-in-out`应为`all ease-in-out`，`display: block;`可能需要添加到`.header_nav_shadow`中以确保遮罩层能够正确显示。 - ...

    PHP文章采集URL补全函数(FormatUrl)

    例如，假设我们有以下HTML代码片段： ```php $surl = "//***/"; $gethtm = '首页&lt;/a&gt;&lt;a href="Resolvent/index.htm"&gt;解决方案&lt;/a&gt;'; ``` 使用FormatUrl函数后，输出将变为： ```html ***/index.htm"&gt;首页&lt;/a&gt;&lt;a ...

    js实现抽奖效果

    例如，代码中的变量命名和函数定义存在遗漏，另外，一个完整的抽奖程序应当具有一个明确的抽奖规则和条件，比如限制抽奖次数、设置中奖概率等，这些细节在此代码片段中并没有体现。 总结来说，实现JS抽奖效果涉及到...

    Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

    - 提供了CSS样式代码片段，涉及`.drag`类的样式设置，`.handler`类控制滑块样式，以及`.handler_bg`类的背景图片处理。这些样式为滑块验证提供视觉效果和基本布局。 - 拖动滑块功能的核心在于JavaScript逻辑的编写...

    js超漂亮的鼠标提示，带人性化缺口

    以下是核心代码片段的解释和说明： - `&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;` 这行代码用于声明文档的编码方式为GBK，确保中文字符能正确显示。 - `&lt;style&gt;`标签中的CSS代码为...

    JSP和JSTL获取服务器参数示例

    在上述提供的代码片段中，我们看到了如何使用JSP脚本片段和Java代码获取服务器的各种参数，并将这些参数存储到一个HashMap中。现在，让我们逐一解析这些参数的含义及其在Web开发中的重要性： 1. `SERVER_NAME`：...

    php模拟服务器实现autoindex效果的方法

    4. 输出HTML格式的目录列表：利用PHP生成HTML代码，可以创建一个友好的用户界面，列出目录和文件，并为它们提供链接。在这个例子中，使用`&lt;pre&gt;`标签来保持列表格式，用`&lt;a&gt;`标签创建超链接，链接指向文件或目录的...

    JS实现仿QQ聊天窗口抖动特效

    这些代码片段一起工作，以实现类似QQ聊天窗口的抖动特效。这些技术不难，主要依靠JavaScript定时器和CSS样式控制。实现这样的效果，可以让网页界面显得更加生动有趣。 需要注意的是，实现这类动画时，过多地使用...

Magicbox
Global site tag (gtag.js) - Google Analytics