在网站制作中随时可用的10个 HTML5 代码片段

最新推荐文章于 2024-09-29 00:57:39 发布

我心V飞翔

最新推荐文章于 2024-09-29 00:57:39 发布

阅读量829

点赞数

分类专栏： jQuery Mobile + html5

jQuery Mobile + html5 专栏收录该内容

6 篇文章

订阅专栏

本文提供了10个实用的HTML5代码片段，包括启动模板、方位表单、Base64图片、邮件验证、Flash嵌入等，帮助开发者提高工作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 崩溃。

 
         <style>*{position:relative}</style><table><input></table>

文章来源：梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源