高品質的HTML，高品質HTML

高品質的HTML，高品質HTML

本系列源自《編寫高品質代碼-web前端開發修鍊之道》

HTML，CSS，JavaScript三者中，HTML作為結構，CSS作為修飾，JavaScript作為控制。不管是在前端還是後台，結構都是非常重要的，使用HTML時必須要考慮語義化。

1.如何確定你的標籤是否語義化？瀏覽器會給標籤給定預設樣式，所以就算不用CSS修飾也能體現一些簡單的樣式。因此判斷一個網頁標籤是否語義化的簡單方法是：去掉CSS，看網站結構是否組織良好有序，是否仍然有良好的可讀性。你可以手動注釋CSS代碼，也可以使用web調試工具，比如firefox的Web Developer外掛程式，可以禁用CSS。2.如何選用正確的標籤？下面舉了一些常見的例子：2.1標題和內容
要 實現上面這個樣式，可以使用方式情節一：

<div class="container"><h2>標籤的語義<a href="#">更多>></a></h2><p>段落一的內容.....<strong>重要部分</strong>......</p><p>段落二的內容.....<strong>重要部分</strong>......</p><p>段落三的內容很長長長長長長長長長長長長長長長長長長長長.</p></div>

        <style type="text/css">.container{width: 400px;margin: 0 auto;background-color: #ff0;}h2{position: relative;border-bottom: 1px dashed #333;}h2 a{position: absolute;right: 0;top: 0;}p{text-indent: 2em;line-height: 150%;margin: 0 0 1em 0;}strong{color:red;font-weight: normal;}</style>

此方案將錨點放在了h2中，但很明顯錨點”更多“不屬於標題，所以這個是不合語義的。下面是方案二：

<div class="container"><div class="title"><h2>標籤的語義</h2><a href="#">更多>></a></div><p>段落一的內容.....<strong>重要部分</strong>......</p><p>段落二的內容.....<strong>重要部分</strong>......</p><p>段落三的內容很長長長長長長長長長長長長長長長長長長長長.</p></div>

CSS代碼就不貼了，將錨點從標題中提出來，同時在二者外再加一個div塊，表示他們形式上應該屬於一個整體。方案二結構看起來要清晰的多。2.2表單一般來說，表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途。fieldset預設有邊框，可以按需要更改樣式，也可以隱藏legend標籤，以此來兼顧語義和顯示。每個input標籤對應一個label，通過for聯絡起來，下面是樣本：

<form action="" method="" class="fieldset">  <fieldset>    <legend>登入表單</legend>    <p>    <label for="name">帳號：</label>    <input type="text" id="name"/>    </p>    <p>    <label for="pw">密碼：</label>    <input type="text" id="pw"/>    </p>    <input type="submit" value="登入" class="subBtn">  </fieldset></form>

2.3表格
表格經常用在資料顯示頁面上。table常用的標籤有caption、thead、tbody、tfoot、tr、td、th。表格標題要用caption，表頭用thead包圍，主體用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要分開，表頭用th，單元格用td。

<table><caption>表格標題</caption><thead><tr><th>實現方式</th><th>代碼量</th><th>搜尋引擎友好</th><th>特殊終端相容</th></tr></thead><tbody><tr><th>table 布局</th><td>多</td><td>差</td><td>一般</td></tr><tr><th>亂用標籤</th><td>多</td><td>差</td><td>一般</td></tr></tbody></table>

2.4語義化標籤應該注意的問題為了保證網頁去除樣式後的可讀性，並且又符合Web標準，應該注意以下幾點：1.盡量少用div和span，用更加語義化的標籤來代替它們；2.語義不明顯，既可以用p又可以用div的情況下，盡量用p。因為p預設有上下間距，去除樣式後可讀性更好 ，對相容特殊終端有利；3.不要使用純樣式標籤，例如b，font，u等，改用CSS設定。語義上需要強調的用strong和em，二者有強調之意。


前端開發工程師 怎高品質的把設計圖輸出成html頁面的?

自己切圖布局！
 
我是一個編程菜鳥，想學習html5遊戲開發，哪個網站比較豐富的高品質的學習資源？

MDN上有html5的教程, w3school上有js的線上手冊, cnblogs上能找到幾個做html5遊戲的博主有些挺好的入門博文

要先把js熟悉了, html5的內容不算多一兩天就能大致學會了, 之後要做遊戲可以自己參考著cocos2d之類的架構做, 也可以直接找個好用的架構做, 根據要做的遊戲瞭解電腦圖形學, A*之類常用的演算法也是必要的