HTML編碼建議And​​如何更好的編碼

HTML5 and CSS3

今天Designrock分享一篇"HTML編碼建議And​​如何更好的編碼"的文章給你喔!主要也是多看看一些別人的想法和是意見來多做學習,希望對你有幫助喔!

1、<!DOCTYPE HTML>

讓瀏覽器自己選擇渲染頁面的標準,同時為了擁抱未來

 

2、<meta charset="utf-8″ />

定義頁面字符編碼,精簡的代碼,同樣的效果

 

3、樣式文件放頭部,且盡量減少引入的文件數量

<head>
<!–CSS样式–>
<link rel="stylesheet" href="xxx.min.css" />
</head>

 

4、腳本文件放底部,當發布項目的時候盡量壓縮合併

<body>
<!–JS代碼–>
<script src="xxx.min.js"></script>
</body>

 

5、為頁面添加註釋

<!–頭部header–>
<header></header>

<!–頭部header–>
<div class="content"></content>

<!–底部Footer–>
<footer></footer>

 

6、縮進和換行

使用4個空格作為一個縮進層級,大多數時候,開發工具幫助我們完成了此項內容。

// 不建議
<ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>

// 建議
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

 

7、標籤閉合

// 不建議
<br >
<p> xxxx
<p>xxxx

// 建議
<br />
<p>xxx</p>
<p>xxx</p>

 

8、標籤名小寫,標籤屬性值添加雙引號

// 不建議
<P data-id=p1></P>

// 建議
<p data-id="p1″></p>

 

9、使用CSS為頁面添加圖片

當然頁面上的動態內容還是必須使用<img src="#" />標籤的

 

10、為圖片標籤添加alt和title屬性,圖片的src屬性不能為

<img alt="" title="" src="#" />

 

11、為頁面當中的塊結構底部添加空白行

<header>
<h1>w3cfuns</h1>
</header>

<div class="content">
// something
</div>

<footer>
<p class="copyRight"></p>
</footer>

 

12、去除樣式引用和腳本引用當中的type屬性

 

13、標籤語義化

結構性元素

p:表示段落,只能包含內聯元素,不能包含塊級元素

div:本身舞特殊含義,可用於佈局,幾乎可以包含任何元素

br:表示換行符

hr:表示水平分隔符

h1-h6:表示標題。其中h1用於表示當前頁面最重要內容的標題,建議每個頁面只有一個H1標籤

blockquote:表示引用,可以包含多個段落。請勿純粹為了縮進而使用blockquote,大部分瀏覽器默認將blockquote渲染為帶有左右縮進

pre:表示一段格式化好的文本

 

頭部元素

title:每個頁面必須有且僅有一個title元素

base:可用場景——首頁,頻道等大部分鏈接為新窗口打開的頁面

link:用於引入CSS資源時,可省去media和type屬性

style:type默認為text/css,可以省去

script:type屬性可以省去;不贊成使用lang屬性;不要使用古老的<!-//–>這種hack腳本,它用於阻止第一代瀏覽器將腳本顯示成文字;

 

列表元素

ul:表示無須列表

ol:表示有序列表,可用於排行榜等;

li:表示列表項,必須是ol/ul的子元素

dl:表示關聯列表,dd是對dt的解釋;dt和dd的對應關係比較隨意:一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd,都合法;可用於名稱單詞解釋、日程列表、站點目錄;

 

文本元素

a:存在href屬性時表示鏈接,無href屬性但有name屬性表示錨點

em,strong,i,b:表示句意強調,加與不加會引起語義變化,可用於表示不同的心情或語調;strong表示重要性強調,可用於局部或全局,strong強調的是重要性,不會改變句意;

abbr:表示縮寫

sub,sup:主要用於數學和化學公式,sup還可用於腳註

span:本身舞特殊含義

ins,del:分別表示從文檔中增加(插入)和刪除

 

表單元素

推薦使用button代替input,但必須聲明type屬性

推薦使用fieldset,legend組織表單

表單的name不能設定為action,enctype,method,novalidate,target,submit會導致表單提交混亂

 

上面說的都是一些基本的東西,在開發過程當中多注意養成習慣就好了,一方面是為了網頁的性能優化,另一方面是為了團隊之間的可維護性。下面是在HTML開發過程當中我自己的想法,分享出來給大家參考參考。

首先就是先背熟HTML標籤以及相對應每個標籤的含義和附加的屬性,只有在掌握了每一種HTML標籤的的含義,我們才能夠更合理的把他們應用到我們的頁面當中,萬丈高樓平地而起,這些看是很基礎的東西,有時候會搞的我們崩潰,踏踏實實把這些了解清楚,真的很重要,儘管不全部了解他們仍然能夠勝任日常的工作,但要是想在這條路上走的長久,還是建議熟被他們,這應該花費不了多長時間。

然後就是閱讀別人網站的源代碼,模仿開始,多看看那些優秀網站的源代碼,了解下他們是如果針對頁面上的組件編寫結構代碼的。比如:下拉框、選項卡、橫向圖片輪播,瀑布流,留言板,商品篩選,商品列表和商品詳情等等,然後比較下它們之間的不一樣,區別在哪裡,相同點在哪裡,自己消化之後就可以為我所用了,當然這部分工作平常不用去做,等到我們拿到設計師做好的效果圖的時候,再去了解應該會比較有動力一些。

接下來就是搭建頁面的框架,我強力抗議,在一張頁面的HTML結構代碼沒有寫完之前,就動手開始寫CSS樣式,一定要先把頁面的整個HTML代碼結構定義好了之後,再去寫你的CSS樣式表。在開始寫CSS樣式表之前,你可以打開它在瀏覽器當中查看下,看看在沒有樣式表的時候,能不能像讀文章一樣知道,哪裡是標題,哪裡是列表,哪裡是段落,哪裡是重複的內容。

下面就可以開始編寫CSS樣式表了,找出頁面當中那些是可以復用的部分,定義好class類名,一步一步編寫,最後項目差不多結束的時候,優化CSS樣式文件,提取可複用的部分,進行精簡。

關於前端項目文件結構目錄的一些見解,下次有機會在說吧,如果你有好的工作方法方式,優美的項目文檔結構方案,也可以分享下!

 

文章來源:http://www.w3cfuns.com/home.php?mod=space&uid=5435321&do=blog&id=5402088

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s