三分28

    <label id="ahfmu"><legend id="ahfmu"></legend></label>
    <acronym id="ahfmu"><legend id="ahfmu"><blockquote id="ahfmu"></blockquote></legend></acronym><output id="ahfmu"></output>

    <var id="ahfmu"></var>

    1. <cite id="ahfmu"></cite><meter id="ahfmu"><ol id="ahfmu"></ol></meter>

    2. 關于HTML5的22個初級技巧(圖文教程)_HTML5教程

      編輯Tag賺U幣

      推薦:開發人員所需要知道的HTML5性能分析面面觀
      以下這篇文章是由一位名為張黎明的IT技術人員所寫,其發表于InfoQ的網頁上。這次他在全文里面從9個不同的方面分析HTML5的性能,還是很值得相應的開發人員閱讀的。

      Web技術的發展速度太快了,如果你不與時俱進,就會被淘汰。因此,為了應對即將到來的HTML5,本文總結了22個HTML5的初級技巧,希望能對你進一步學習好HTML5會有所幫助。
      1. 新的Doctype聲明
      XHTML的聲明太長了,我相信很少會有前端開發人員能手寫出這個Doctype聲明。

      復制代碼 代碼如下:www.nwzww.com

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       
      HTML5的Doctype聲明很短,看到這個聲明相信你馬上就能記住,不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明了。
      <!DOCTYPE html>
      HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入(準)標準模式,你可能會奇怪IE6/7居然也可以支持HTML5 Doctype,事實上,IE是只要doctype符合 這種格式,都會進入標準模式。
      2. <figure>標簽
      看看下面一段簡單的代碼:

      復制代碼 代碼如下:www.nwzww.com

      <img alt="About image" src="path/to/image">
      <h6>image of Mars.</h6>

       
      遺憾的是,這里的h6標簽和img標簽好像沒有什么關系,語義不夠明確。HTML5意識到了這一點,于是就采用了<figure>標簽。當<figure>結合<figcaption>標簽的使用,可以讓h6標簽和img標簽組合起來,代碼就更具語義化了。

      復制代碼 代碼如下:www.nwzww.com

      <figure>
      <img alt="about image" src="path/to/image">
      <figcaption>
      <h6>This is an image of something interesting. </h6>
      </figcaption>
      </figure>


      3. 重新定義<small>
      不久前,我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽,使之更能表現語義化,在<small>的字號都會變小,想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。
      4. 去掉了Javascript和CSS標簽的type屬性
      通常你會在<link>和<script>加上type屬性:

      復制代碼 代碼如下:www.nwzww.com

      <link rel="stylesheet" type=text/css href="path/to/stylesheet.css">
      <script type="text/javascript" src="path/to/script.js"></script>


      在HTML5中,不再需要type屬性了,因為這顯得有點多余,去掉之后可以讓代碼更為簡潔。

      復制代碼 代碼如下:www.nwzww.com

      <link href="path/to/stylesheet.css">
      <script src="path/to/script.js"></script>


      5. 是否使用雙引號
      這有點讓人糾結,HTML5并不是XTHML,你可以省去標簽中的雙引號。相信大多數同志也包括我都習慣了加上雙引號,因為這讓代碼看起來會更標準。不過,這可以根據你的個人喜好來確定是到底要不要雙引號。

      復制代碼 代碼如下:www.nwzww.com

      <h6 id="someid" class="myclass"> start the reactor. </h6>


      6. 使網頁內容可以編輯

      7. 電子郵件輸入框
      HMTL5中新增了一個輸入框的電子郵件屬性,可以檢測輸入的內容是否符合電子郵件的書寫格式,功能越來越強大了吧,在HTML5之前只能依靠JS來檢測。雖然內置的表單驗證功能很快就會成為現實,但這個屬性很多瀏覽器都還不支持,只會當作普通的文本輸入框來處理。

      復制代碼 代碼如下:www.nwzww.com

      <form method=get>
      <label for="email">email:</label>
      <input id="email" type="email" name="email">
      <button type="submit"> submit form </button>
      </form>



      到目前為止,包括現代瀏覽器在內都不支持該屬性,所以這個屬性暫時還是靠不住的。
      8. 占位符
      文本框中的占位符(看看本博的搜索框效果)有利于提升用戶體驗,之前,我們只能依靠JS來實現占位符的效果,在HTML5中新增了占位符屬性placeholder。

      復制代碼 代碼如下:www.nwzww.com

      <input type="email" name="email" placeholder="doug@givethesepeopleair.com">


      同樣,目前的主流現代瀏覽器對該屬性的支持不大好,暫時只有Chrome和Safari支持該屬性,Firefox和Opera不支持該屬性。

      9. 本地存儲
      HTML5的本地存儲功能,可以讓現代瀏覽器“記住”我們輸入的,就算瀏覽器關閉和刷新也不會受影響。雖然這個功能有些瀏覽器不支持,但是IE8, Safari 4, 還有 Firefox 3.5還是支持這個功能的,你可以測試下。

      10. 更有語義的header和footer
      下面的代碼在HTML5中將不復存在

      復制代碼 代碼如下:www.nwzww.com

      <div id=header>
      ...
      </div>
      <div id=footer>
      ...
      </div>


      通常我們都會給header和footer定義一個div,然后再添加一個id,但是在HTML5中可以直接使用<header>和<footer>標簽,所以可以將上面的代碼改寫成:

      復制代碼 代碼如下:www.nwzww.com

      <header>
      ...
      </header>
      <footer>
      ...
      </footer>


      要注意不要將這兩個標簽和網站的頭部和頁腳混淆起來,它們只是代表它們的容器。
      11. IE對HTML5的支持
      IE瀏覽器目前對HTML5的支持并不好,也是阻礙HTML5的更快普及的一大絆腳石,不過,IE9對HTML5的支持度還是很不錯的。
      IE把HTML5新增的標簽都解析成內聯元素,而實際上它們是塊級元素,所以有必要為它們定義一個樣式:

      復制代碼 代碼如下:www.nwzww.com

      header, footer, article, section, nav, menu, hgroup {
      display: block;
      }


      盡管如此,IE還是不能解析這些新增的HTML5標簽,這個時候就需要借助Javascript來解決這個問題:

      復制代碼 代碼如下:www.nwzww.com

      document.createElement("article");
      document.createElement("footer");
      document.createElement("header");
      document.createElement("hgroup");
      document.createElement("nav");
      document.createElement("menu");


      你可以借助這一段Javascript代碼來修復IE更好的解析HTML5

      復制代碼 代碼如下:www.nwzww.com

      <script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

      12. 標題群( hgroup)
      這個類似于第二點技巧。如果用h1和h2標簽分別表示網站的名稱和副標題,但這會讓兩個本義上密切相關的標題并沒有關聯起來。這個時候可以使用<hgroup>標簽將它們組合起來,這樣代碼會更有語義。

      復制代碼 代碼如下:www.nwzww.com

      <header>
      <hgroup>
      <h1> Recall Fan Page </h1>
      <h2> Only for people who want the memory of a lifetime. </h2>
      </hgroup>
      </header>


      13. 必填項屬性
      前端人員肯定做過不少表單驗證的項目,其中很重要的一點就是有些輸入框的內容是必須填寫的,這里就需要使用Javascript來檢查。在HTML5中,新增了一個“必須填寫”的屬性:required。required屬性有兩種使用方法,第二種方法顯得更有結構性,而第一種更簡潔。

      復制代碼 代碼如下:www.nwzww.com

      <input type="text" name="someInput" required>
      <input type="text" name="someInput" required="required">


      有了這個屬性,使表單的提交驗證變得更簡單了,看看下面簡單的例子:

      復制代碼 代碼如下:www.nwzww.com

      <form method=post>
      <label for=someInput> your name: </label>
      <input id=someInput type=text name=someInput placeholder="Douglas Quaid" required="required">
      <button type="submit">Go</button>
      </form>



      如果輸入框為空,表單將無法提交成功。
      14. 自動獲取焦點
      同樣的,HTML5也不再需要Javascript來解決輸入框的自動獲取焦點,如果某個輸入框應當被選擇或是獲取到輸入焦點,HTML5新增了自動獲取焦點屬性autofocus:

      復制代碼 代碼如下:www.nwzww.com

      <input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">

      autofocus也同樣可以寫成”autofocus=autofocus”,這樣看起來標準些,這個根據自己的個人喜好而定。
      15. 音頻播放的支持
      HTML5中提供了<audio>標簽,解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止,還只有少數的最新瀏覽器支持該標簽。

      復制代碼 代碼如下:www.nwzww.com

      <audio controls="controls" autoplay="autoplay">
      <source src="file.ogg" _fcksavedurl=""file.ogg"" />
      <source src="file.mp3" />
      <a href="file.mp3">Download this file.</a>
      </audio>


      為什么會有兩種格式的音頻文件?因為Firefox和Webkit瀏覽器所支持的格式存在差異,Firefox只能支持.ogg文件,而Webkit只支持.mp3的文件,解決的辦法就是創建兩個版本的音頻文件,這樣就可以兼容Firefox和Webkit的瀏覽器了,需要注意的是IE不支持該標簽。
      16. 視頻播放的支持
      和<audio>標簽一樣,HTML5也提供了<video>標簽對播放視頻文件的支持。YouTube也宣布了一項新的HTML5的視頻嵌入。不過有點遺憾,HTML5的規范并沒有指定特定的視頻解碼器,而是讓瀏覽器自己來決定。這就造成了個瀏覽器的兼容問題,雖然Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放),Firefox和Opera則支持開源的Theora和Vorbis格式。因此,當顯示HTML5視頻的時候,也得準備2種格式。

      復制代碼 代碼如下:www.nwzww.com

      <video controls preload>
      <source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
      <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
      <div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
      </video>

      需要注意的是,type屬性雖然可以省略掉,但是如果加上的話,瀏覽器就可以更快的準確的解析該視頻文件。并不是所有的瀏覽器都支持HTML5的視頻,所以得做好使用Flash版本來代替,當然,這個決定權在于你。
      17. 預加載視頻
      預加載屬性:preload,首先要確定是否需要預先加載視頻,假如,訪客在訪問一個有很多視頻展示的頁面,那么就有必要預先加載一段視頻,這樣可以節省訪客的等待時間,提高用戶體驗。你可以給<video>標簽添加一個preload屬性來實現預先加載的功能。

      <video preload="preload">
       ...
      </video>
      [/code]

      18. 顯示控件
      顯示控件屬性可以給視頻添加一個播放暫停的控件,需要注意的是每個瀏覽器顯示的效果可能會有些差異。

      復制代碼 代碼如下:www.nwzww.com

      <video controls="controls" preload="preload">
      ...
      </video>

      19. 使用正則表達式
      在HTML5中,我們可以直接使用正則表達式。
      <form method=post action="">
          <label for="username">create a username: </label>
      <input id="username" type="text" name="username" placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}">
          <button type="submit">Go </button>
      </form>


      20. 檢測瀏覽器對HTML5屬性的支持
      由于各瀏覽器對HTML5屬性的支持度不同,這就造成了一些兼容問題。但是可以使用方法來檢測該瀏覽器是否支持這些屬性,上例中的代碼如果要檢測pattern屬性是否被瀏覽器識別,可以使用Javascript代碼來檢測。

      復制代碼 代碼如下:www.nwzww.com

      alert( 'pattern' in document.createElement('input') ) // boolean;


      其實這是確定瀏覽器兼容常用的方法,jQuery庫就經常使用這種方法。上面的代碼中創建了一個input標簽,并檢測pattern屬性是否被瀏覽器支持,如果能支持的話,瀏覽器就支持這個功能,否則就不支持。

      復制代碼 代碼如下:www.nwzww.com

      <script>
      if (!'pattern' in document.createElement('input') ) {
      // do client/server side validation
      }
      </script>


      21. Mark標簽
      <mark>標簽用于高亮顯示那些需要在視覺上向用戶突出其重要性的文字,包裹在此標簽里的字符串必須與用戶當前的行為相關。例如,如果我在一些博客中搜索“Open your Mind” ,我可以使用在<mark>標簽里使用JavaScript 來包裹每一次動作。

      復制代碼 代碼如下:www.nwzww.com

      <h3> search results </h3>
      <h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>

      22. 該如何正確的使用div標簽
      有些人可能會有疑問,有了<header>和<footer>等這些標簽,<div>標簽在HTML5中還有用嗎?答案是肯定的,比如你想創建一個能包裹特殊內容的容器自由靈活的<div>肯定是首選,而你要創建一篇文章或者一個導航菜單,建議你使用更有語義的<article>和<nav>標簽。
      很多人認為HTML5可能還是很遙遠的事,所以直接無視,其實不然,現在很多網站都已經開始使用HTML5了,事實上,HTML5的一些新增屬性和功能是讓代碼變得更簡潔,這總歸是一件好事,應該值得我們推崇。最后感謝你閱讀了這篇HTML5的入門級文章,希望能為你進一步學習HTML5提供一些幫助。

      分享:HTML5 Web Database 數據庫的SQL語句的使用方法
      本文將詳細介紹HTML5 Web Database 數據庫的SQL語句的使用方法,需要了解的朋友可以參考下

      來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
      相關HTML5教程
      淳安| 威宁| 宿迁| 南宁城区| 宁乡| 逊克| 甘谷| 榆次| 万盛| 漳州| 秦皇岛| 沙雅| 汪清| 广饶| 固镇| 栾城| 彬县| 塔中| 达日| 常熟| 吐尔尕特| 大陈| 凤台| 哈密| 武川| 万山| 夏邑| 神木| 巴中| 巨鹿| 上虞| 三穗| 屯昌| 甘谷| 益阳| 都安| 青田| 辛集| 政和| 永顺| 银川| 浑源| 衡山| 吐尔尕特| 和布克赛尔| 舒兰| 政和| 乌拉特中旗| 桂东| 介休| 侯马| 汝州| 鄞县| 安义| 祁连| 农安| 台南| 二连浩特| 兰坪| 色达| 长兴| 云霄| 徐闻| 修武| 望江| 新晃| 满洲里| 巨野| 宁海| 上虞| 陇西| 崇阳| 余姚| 任丘| 富裕| 大兴安岭| 铜仁| 行唐| 瑞丽| 罗田| 凤城| 万源| 林西| 定远| 个旧| 胡尔勒| 广安| 库米什| 孟连| 怀柔| 固阳| 新民| 天等| 襄樊| 子洲| 罗源| 天池| 景洪| 卓资| 兰考| 中甸| 文水| 九江| 合肥| 固始| 无锡| 民权| 克拉玛依| 隆子| 武强| 贡山| 裕民| 石嘴山| 三明| 桦南| 邱北| 揭阳| 恩施| 宾阳| 海拉尔| 虎林| 漯河| 筠连| 库伦旗| 普陀| 灌云| 泰兴| 礼泉| 大同县| 清水河| 黄山区| 桃园| 济源| 华阴| 常山| 崇庆| 蔡家湖| 象山| 广德| 普宁| 彭州| 荔波| 大兴| 青神| 绿葱坡| 融安| 永春| 曲阜| 陵川| 金寨| 枣庄| 麻阳| 渝北| 巴音布鲁克| 南华| 金山| 黎川| 洪洞| 高唐| 吴堡| 错那| 赵县| 勐海| 岑巩| 万山| 湟源| 邵武| 安平| 隆林| 金山| 化州| 泰顺| 纳溪| 昆明农试站| 龙胜| 应城| 浦口| 海门| 霍尔果斯| 奉化| 内乡| 娄烦| 鄂伦春旗| 孟津| 阳泉| 巴塘| 佛坪| 小金| 潮连岛| 中阳| 化州| 喀左| 丰县| 凤凰| 镇远| 永平| 凉城| 喀喇沁旗| 邱北| 阳春| 万年| 象州| 瑞安| 宁波| 临县| 吉林| 鄞县| 桦甸| 墨竹贡卡| 建平| 六安| 全州| 西乌珠穆沁旗| 交城| 文登| 朝城| 洋县| 海西| 砀山| 安庆| 伊吾| 科尔沁左翼后旗| 济宁| 平遥| 邢台| 福州| 扎赉特旗| 单县| 无为| 砚山| 石拐| 海南| 洪家| 东安| 南宁城区| 平阴| 太原| 靖宇| 北塔山| 万宁| 虎林| 威宁| 垦利| 儋州| 社旗| 集贤| 山丹| 乐至| 唐山| 阿坝| 皮口| 沂源| 紫金| 綦江| 祁连| 新和| 河津| 昌黎| 宾县| 徐家汇| 桃江| 江山| 胡尔勒| 崇礼| 柏乡| 星子| 巴盟农试站| 全南| 麦积| 陆川| 交口| 兰州| 睢县| 泗县| 南昌| 三台| 石柱| 新巴尔虎左旗| 淮阴| 泰安| 玉田| 正定| 南澳| 宜阳| 东方| 沛县| 钦州| 湟源| 贵溪| 玉田| 淮阴县| 韩城| 互助| 彭阳| 东港| 乌什| 特克斯| 界首| 宝应| 永登| 岗子| 资源| 淮阴县| 建湖| 通辽钱家店| 叶县| 乌鲁木齐牧试站| 彭泽| 宁城| 吉木乃| 丰都| 枣庄| 沙雅| 乌恰| 塔中| 海原| 庆城| 库米什| 商城| 石岛| 漠河| 永新| 眉山| 青神| 贵德| 柳江| 垦利| 资中| 舍伯吐| 江口| 穆棱| 巩留| 当阳| 宿松| 当涂| 巴东| 利川| 孟津| 霍城| 河曲| 嘉定| 高要| 滑县| 榆社| 绵阳| 平邑| 赤水| 青龙| 武夷山| 淳化| 江山| 惠水| 安新| 伊宁县| 莲花| 渭南| 临城| 胡尔勒| 祁连| 拜城| 公主岭| 穆棱| 芷江| 范县| 赞皇| 将乐| 康保| 元江| 万全| 平湖| 石棉| 广灵| 天池| 启东| 东乡| 彭山| 普定| 奉化| 舞钢| 泽当| 太原| 新港| 都昌| 潮连岛| 大石桥| 大勐龙| 唐河| 东胜| 平顶山| 都安| 化隆| 古丈| 北安| 扎兰屯| 范县| 武冈| 屯昌| 都安| 越西| 遂昌