10個HTML5程式碼片段可在網站製作中隨時可用詳解-H5教程-PHP中文網

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

登入後複製

以上是10個HTML5程式碼片段可在網站製作中隨時可用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

10個HTML5程式碼片段可在網站製作中隨時可用詳解

HTML5 啟動範本

取得方位的表單 (Google Maps)

Base64 編碼的空白 GIF 圖片

Email 校驗的正規表示式

嵌入 Flash

HTML5 video with Flash fallback

打電話和發送簡訊

自動完成功能

可下載的檔案

Crash IE6

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題