HTML5最佳實踐

時間 2019-11-11

標籤 html5 html 最佳實踐欄目 HTML5 简体版

原文原文鏈接

首先先給你們推薦個不錯的前端網站：http://www.tystudio.netjavascript

HTML5正迅速稱爲web前端開發技術標準，做爲一名前段開發人員，瞭解並正確的使用HTML5製做網站變得愈來愈重要。經過兩年的HTML5開發經驗，我總結出下面的這個列表，「HTML5最佳實踐」，但願它們對你的HTML5開發有所幫助。html

1.使用HTML5生成器

當你須要創建一個新的網站的時候，一般你會先根據網站的佈局創建一個模板頁，而後每一個頁面都使用這個結構。你能夠徹底本身去寫這樣的一個模板頁，可是，很慶幸的是如今網上有不少的在線HTML5模板生成工具，你只須要作一些選擇，就會獲得一個使用HTML5創建好的模板頁。這裏推薦一個很是不錯的HTML5模板在線生成網站SwitchToHTML5，填寫一些基本信息以後選擇你須要佈局模塊，點擊Generate HTML5 Framework！一個自定義的HTML5模板頁就出現了，使用起來很是的方便。前端

固然若是你想要能夠直接使用的HTML5模板，那麼你必定會喜歡HTML5 Boilerplate。html5

2.使用HTML5備忘錄

HTML5具備不少的新標籤和事件以及不一樣瀏覽器支持程度，而且會隨着時間不短的新增或更新一些，顯然把他們所有記住是有很大的難度的。InMotion Hosting提供了這樣的一個備忘錄，能夠幫助你解決這個問題，而且上面的信息始終是最新的。java

備忘錄提供了三個圖片，分別是標籤，事件和瀏覽器支持，你能夠點擊這裏下載三張圖片。web

3.注意瀏覽器兼容問題

HTML5是一個新的技術，雖然如今可使用它，可是不少瀏覽器還不支持一些特殊的HTML5標籤和事件。瀏覽器

當你開發HTML5的時候Can I Use.com是一個你必須收藏的網站，你能夠快速的知道某個元素的在各個瀏覽器的支持狀況。同時網站還包含了CSS3 、SVG和Javascript兼容性圖表。ide

4.如何使老版本IE支持HTML5

IE瀏覽器是前端開發者永遠的痛，ie6/7/8對於html5沒有任何的支持。好消息是你能夠引用一個很小的js庫，使得ie6/7/8支持HTML5，使用起來很是簡單隻須要在<head>中引入下面的這段代碼：svn

查看代碼

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

另一個很是不錯的工具Modernizr，這個js庫可使你的HTML5完美的運行在全部瀏覽器上。工具

使用Modernizr的是很是容易的，只須要到這個頁面選中你打算用的HTML5元素和CSS3屬性，而後下載定製後的js。最後在你的頁面中引入這個js，剩下的就交給Modernizr去作吧。

5.正確的使用HTML5元素

在使用HTML5以前，咱們一般會在頁面使用不少的<div>元素。使用div最大的缺點就是html結構很不容易閱讀。這就是爲何HTML5制定出新的標籤來代替之前很不錯的<div>。

HTML5新標籤包含header, footer, article, section, aside, nav等。下面列出一個基礎的而且語義正確的HTML5頁面結構：

查看代碼

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
...
</header>
<div role="main">
...
</div>
<footer>
...
</footer>
</body>
</html>

6.最後驗證你的代碼

在製做完成一個HTML5頁面以後，爲了確保代碼符合標準，你須要使用W3C validator來驗證你的網頁，老的html驗證依然可使用在驗證新的HTML5. 一個符合W3C標準的網頁纔是一個好的網頁。

英文文章連接：http://www.catswhocode.com/blog/best-practices-for-efficient-html5-coding

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。