所以，你不知道微信H5居然有8個隱秘技能？

5怎么植入第三方音視頻？

H5怎么設置文件加密下載？

如何“盜取”別人的H5素材？

以下和H5相關的隱秘技能，是我回顧這半年多在iH5.cn做H5的經驗，總結出8個不容易被人發覺，在微信H5上卻十分實用的技巧。

【1】植入音頻

制作一個包含很多音視頻的H5，上傳素材很耗時間，文件的大小也有限制，但這種問題通過外鏈就可以解決。

什么外鏈？必須是音視頻的資源地址，也就是下載地址才行。因為HTML5能對音視頻提供原生支持，MP3、MP4格式文件一般能在國內瀏覽器直接播放。

怎么獲取這個鏈接？以蝦米音樂為例，感謝有高人破解了它加密的音樂資源地址！方法如下：http://link.hhtjim.com/xiami/1769962750.mp3（把左邊這串標識歌曲的數字換成蝦米對應歌曲的ID，就得到這首歌的資源位置）。

那歌曲ID在哪里看？點進歌曲名進入內容頁，比如上面的《因為愛情》，在地址頁中song/后面那串數字1769962750就是ID。

【2】植入視頻

使用“網頁”功能，可以在H5中嵌入第三方頁面。如下，在H5中加入一個“網頁”，資源位置寫網頁地址即可（比如這里是m.baidu.com）。

這和視頻有半毛錢關系？別激動，因為國內視頻利潤空間比音樂大得多，騰訊優酷等網站為防止下載，各種防范手段無所不用其極，“視頻”功能播不了非資源類型的視頻。還好嵌入地址是有的！要不然微信公眾號什么的怎么推送視頻？

如下，把這個地址作為網頁的資源位置，問題就解決了。

http://player.youku.com/player.php/sid/XMTU0OTY0MTE4NA/v.swf（替換XMTU0OTY0MTE4NA為所需視頻ID即可）

https://v.qq.com/iframe/preview.html?vid=l0187ggnc7d（替換l0187ggnc7d為所需視頻ID即可）

上面是優酷和騰訊的視頻嵌入地址，因為都采用了HTML5網頁的響應式設計，能自適應屏幕，所以調整網頁長寬也作用于視頻。

【3】植入地圖導航

地圖導航的植入也不復雜，比如百度地圖的話，先打開百度地圖移動版網頁：http://map.baidu.com/mobile/webapp，搜索你的目標地點。

這里用的是“南方傳媒大廈”，點擊右上角的“地圖”，生成一個詳情頁。復制這個頁面的鏈接，設為網頁的資源位置就OK了，效果如下：

【4】一鍵下載文件

既然說到外鏈就是下載鏈接，前面能植入第三方音頻，也能直接下載這首歌。如下，設置一個事件，在手機中輕觸按鈕就能下載音頻。

使用“文件”功能，可以上傳所有格式的文件，只是為避免服務器過載，文件大小有一定限制。

有時只想上傳個簡單的PDF，但百度云、金山網盤等玩意兒老要登錄煩得很！如果文件不大，可以利用iH5上傳文件生成的資源地址，產生一個能點擊下載的鏈接（根據多次實踐，我可以偷偷告訴你原始地址是file.ih5.cn+資源位置）。

【5】設置加密下載

當然，百度云這些網盤還有一個好處是能規定密碼。可不要小看H5，HTML5有一個優勢是能在瀏覽器驗證表單信息，給文件加個密還不簡單！

如上，只需要加一個輸入框，設置輸入的值是你規定的密碼，匹配成功時下載文件就行。

【6】鎖位置、加書簽

H5在不同設備的自適應一直是個麻煩，但如果只是為避免某個按鈕超出屏幕，可以加一個橫幅，勾選“固定位置”來鎖定它。

如上，在頁面加一個橫幅，設置底部對齊（bottom），縱向偏移-150，就能保證橫幅和它包含的按鈕一直保持在頁腳往上150個像素的位置——即便在電腦上縮放頁面比例也能保持。

這樣一來，滾動頁面時按鈕位置也不受影響！還能做在頁面頂端放個透明按鈕，設置點擊橫幅時，就對“舞臺”做“跳至對象”的動作，跳到透明按鈕——相當于把透明按鈕當做書簽，跳到對應書簽的位置。

【7】監測頁面打開率

H5頁面的打開情況，原理上其實和實時投票差不了多少，只是觸發的事件變成了頁面顯示與否，編輯效果如下：

為了方便理解，我設計了如下邏輯圖進行表達：

（1）用數據庫整形變量保存頁面1的打開次數（或顯示次數）；

（2）頁面1每顯示一次，上面的變量就加1；

（3）頁面2放計數器，綁定整形變量，來顯示次數的大小；

（4）舞臺放時間軸，用來控制打開次數的刷新，每隔三秒更新一次變量。

【8】臨摹作品的捷徑

最后一個技巧是壓軸的。當你看到特別好玩的H5要臨摹怎么辦？怎么在桌面模擬移動頁面布局？可以使用開發者工具（Chrome瀏覽器快捷鍵Ctrl+Shift+I）。

比如騰訊TGideas的《移動頁面用戶行為報告》，打開開發者工具后激活右側代碼上方的設備標識（Toggle device mode，切換設備模式）。

回到左側頁面上方，選擇合適的設備（比如iPhone 6S），再刷新頁面就可以模擬移動端效果了。

最后點擊菜單中的“Source”（源），就可以在目錄下翻找圖片等緩存出來的原始素材。從素材既可以看出H5的設計框架，又可以保存素材作為臨摹備用。

看到這里，會不會發現自己錯過了很多實用技能？技術改變世界，彎路請少走！

lt;head>

<style>

td input[type="text"],td input[type="email"],td input[type="password"], td input[type="date"]{

width:98%;

}

</style>

function checkLength(){

var pwd=document.getElementById("pwd").value;

var spanLen=document.getElementById("spanLen");

if(pwd.length<=3&&pwd.length>0)

spanLen.innerHTML="弱";

else if(pwd.length<=6)

spanLen.innerText="中";

else

spanLen.innerText="強";

}

function checkPSW(){

var pwd1=document.getElementById("pwd").value;

var pwd2=document.getElementById("pwd2").value;

var pswInfo=document.getElementById("pswInfo");

if(pwd1!=pwd2)

pswInfo.innerText="兩次密碼不同"; // alert("兩次密碼不同");

else

pswInfo.innerText="";

}

</script>

</head>

<body>

<form>

用戶注冊頁面

</legend>

<caption>用戶登錄信息</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

</table>

<br>

<caption>用戶基本信息</caption>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

<td>

</td>

</tr>

</table>

</fieldset>

</form>

</body>

超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

千鋒《全棧H5+》講解HTML會由淺入深帶入課堂案例中，使得學員在學習過程中學習到如何講基礎知識實際運用到項目中。

一、由來

萬維網上的一個超媒體文檔稱之為一個頁面（外語：page）。作為一個組織或者個人在萬維網上放置開始點的頁面稱為主頁（外語：Homepage）或主頁，主頁中一般包含有指向其他相關頁面或其他節點的指針（超級鏈接），所謂超級鏈接，就是一種統一資源定位器（Uniform Resource Locator，外語縮寫：URL）指針，經過激活（點擊）它，可使瀏覽器方便地獲取新的網頁。這也是HTML獲得廣泛應用的最重要的原因之一。在邏輯上將視為一個全體的一系列頁面的有機調集稱為網站（Website或Site）。超級文本標記語言（英文縮寫：HTML）是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。

網頁的實質便是超級文本標記言語，通過結合使用其他的Web技術（如：腳本言語、公共網關接口、組件等），能夠創造出功能強大的網頁。因而，超級文本標記言語是萬維網（Web）編程的根底，也便是說萬維網是建立在超文本根底之上的。超級文本標記言語之所以稱為超文本標記言語，是因為文本中包含了所謂“超級鏈接”點。

二、定義

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準。

它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

超級文本符號言語文檔制造不是很雜亂，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特色如下：

1、簡易性：超級文本符號言語版本晉級采用超集方式，然后愈加靈活便利。

2、渠道無關性：盡管個人計算機大行其道，但運用MAC等其他機器的大有人在，超級文本符號言語可以運用在廣泛的渠道上，這也是萬維網（WWW）盛行的另一個原因。

3、可擴展性：超級文本符號言語的廣泛應用帶來了加強功能，增加標識符等要求，超級文本符號言語采納子類元素的方式，為體系擴展帶來保證。

4、通用性：另外，HTML是網絡的通用言語,一種簡單、通用的全置符號言語。它答應網頁制造人建立文本與圖片相結合的雜亂頁面，這些頁面可以被網上任何其他人閱讀到，無論運用的是什么類型的電腦或閱讀器。

三、編輯

它其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為三種。

基本文本、文檔編輯軟件，使用微軟自帶的記事本或寫字板都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣就方便瀏覽器認出直接解釋執行了。

推薦編輯器：Dreamweaver、HBuilder、Sublime Text代碼編輯器。

一個網頁對應多個HTML文件，超文本標記語言文件以.htm（磁盤操作系統DOS限制的外語縮寫）為擴展名或.html（外語縮寫）為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件，只用修改文件后綴即可。

標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用于頁面整體結構的確認。

標記符<html>,說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的,它是文件的開頭;而</html>,則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。

<head></head>；這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用作書簽和收藏清單。

設置文檔標題和其它在網頁中不顯示的信息，比如direction方向、語言代碼Language Code（實體定義!ENTITY % i18n）、指定字典中的元信息、等等。

<body></body>；，網頁中顯示的實際內容均包含在這2個正文標記符之間。正文標記符又稱為實體標記。

超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準）：

HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854于2000年6月發布之后被宣布已經過時

HTML 3.2——1997年1月14日，W3C推薦標準

HTML 4.0——1997年12月18日，W3C推薦標準

HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

HTML 5——2014年10月28日，W3C推薦標準[4] （詳見本處參考資料）

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發布，基于嚴格的HTML 4.01語法，是國際標準化組織和國際電工委員會的標準。

Wijmo是基于HTML5、jQuery、CSS3和SVG的一個控件包，能夠滿足構建當今Web系統的需求。基于Wijmo，您的系統運行將更加快速和流暢，外觀也會更加引人入勝。Wijmo中所有新的控件都是在符合最新的UI設計潮流的基礎上，對新的以及改良后的主題進行封裝。優美的、專業的控件外觀會讓您的應用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包內置的6個主題，同時可以使用jQuery UI項目提供的 30 多個主題，甚至可以使用 ThemeRoller 創建屬于您自己的系統主題。

HTML沒有1.0版本是因為當時有很多不同的版本。有些人認為蒂姆·伯納斯-李的版本應該算初版，這個版本沒有IMG元素。當時被稱為HTML+的后續版的開發工作于1993年開始，最初是被設計成為“HTML的一個超集”。第一個正式規范為了和當時的各種HTML標準區分開來，使用了2.0作為其版本號。HTML+的發展繼續下去，但是它從未成為標準。

HTML3.0規范是由當時剛成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字繞排和復雜數學元素的顯示。雖然它是被設計用來兼容2.0版本的，但是實現這個標準的工作在當時過于復雜，在草案于1995年9月過期時，標準開發也因為缺乏瀏覽器支持而中止了。3.1版從未被正式提出，而下一個被提出的版本是開發代號為Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器，例如Netscape和Mosaic的元素和屬性。HTML對數學公式的支持最后成為另外一個標準MathML。

HTML 4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時也開始“清理”這個標準，把一些元素和屬性標記為過時，建議不再使用它們。HTML的未來和CSS結合會更好。

HTML 5草案的前身名為Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發布。

XHTML1.0——發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布。

XHTML 1.1，于2001年5月31日發布，W3C推薦標準。

XHTML 2.0，W3C工作草案。

XHTML 5，從XHTML 1.x的更新版，基于HTML 5草案。

HTML4.01 是常見的版本。

在編輯超文本標記語言文件和使用有關標記符時有一些約定或默認的要求。文本標記語言源程序的文件擴展名默認使用htm（磁盤操作系統DOS限制的外語縮寫為擴展名）或html（外語縮寫為擴展名），以便于操作系統或程序辨認，除自定義的漢字擴展名。在使用文本編輯器時，注意修改擴展名。而常用的圖像文件的擴展名為gif和jpg。

超文本標記語言源程序為文本文件，其列寬可不受限制，即多個標記可寫成一行，甚至整個文件可寫成一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。

標記符中的標記元素用尖括號括起來，帶斜杠的元素表示該標記說明結束；大多數標記符必須成對使用，以表示作用的起始和結束；標記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“ （注意此字母必須小寫，方可空格）”；許多標記元素具有屬性說明，可用參數對元素作進一步的限定，多個參數或屬性項說明次序不限，其間用空格分隔即可；一個標記元素的內容可以寫成多行。標記符號，包括尖括號、標記元素、屬性項等必須使用半角的西文字符，而不能使用全角字符。

HTML注釋由"“結束結束，例如。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號，即被標識為注釋，不予顯示。

XHTML常用標記

1、文本標題（h1-h6）

...

2、傾斜：傾斜標記

（1）<em></em>

（2）<i></i>

3、段落(p)

<p>段落文本內容</p>

標識一個段落(段落與段落之間有段間距)

4、加粗：有兩個標記

（1）<b>加粗內容</b>

（2）<strong>加粗內容</strong>

5、列表（ul,ol,dl）

HTML中有三種列表，分別是：無序列表，有序列表，自定義列表。

*無序列表

無序列表組成：

<ul>

．．．．．．

</ul>

*有序列表

有序列表組成：

<ol>

．．．．．．

</ol>

*自定義列表

<dl>

．．．．．．

</dl>

6、插入圖片

7、超鏈接的應用

語法：

8、數據表格的作用及組成

*作用：顯示數據

<tr>

</tr>

</table>

注：個tr表示一行;一個td表示一列(一個單元格)

*數據表格的相關屬性

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

4）bgcolor="表格的背景色"

5）cellspacing="單元格與單元格之間的間距"

6）cellpadding="單元格與內容之間的空隙"

7）對齊方式：align="left/center/right";

8)合并單元格屬性：

colspan=“所要合并的單元格的列數"合并列;

rowspan=“所要合并單元格的行數”合并行;

9、表單的應用

表單的作用：用來收集用戶的信息的;

*表單框

</form>

1）文本框

2)密碼框

3)提交按鈕

4)重置按鈕

5）單選框/單選按鈕

<input type="radio" name="ral" checked="checked" />(默認選中；)

6）復選框

<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)

(checked="checked" :默認選中)

7)下拉菜單

</select>

8）多行文本框（文本域）

</textarea>

9)按鈕

（他和submit的區別是，submit是提交按鈕起到提交信息的作用，button只起到跳轉的作用，不進行提交。）

div的用法

文檔區域，文檔布局對象

span的用法

<span></span>文本結點（某一小段文本，或是某一個字）

在線咨詢

上一篇：熱點情報局0726：頁游強心劑Html5游戲來襲
下一篇：HTML5來了：5個好用的混合式App開發工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

所以，你不知道微信H5居然有8個隱秘技能？

您的項目需求