前端新手需要知道的CSS規范-分類方法

前端開發標準盡管沒有一個徹底的一致標準，可是在每個團隊中必定有自己的開發標準。如果是獨自的個人，也需求具有一套屬于自己的標準。

CSS文件的分類和引證次序

我們依照CSS的性質和用途，將CSS文件分紅“公共型款式”、“特別型款式”、“皮膚型款式”，并以此次序引證（按需求決議是否增加版本號）。

CSS內部的分類及其次序

一致處理：建議在這個方位一致調用背景圖（這兒指多個布局或模塊或元件共用的圖）和鏟除起浮（這兒指通用性較高的布局、模塊、元件內的鏟除）等一致設置處理的款式！

模塊（module）（.m-）：一般是一個語義化的能夠重復運用的較大的全體！比方導航、登錄、注冊、各種列表、談論、查找等！

功用（function）（.f-）：為便利一些常用款式的運用，我們將這些運用率較高的款式剝離出來，按需運用，一般這些選擇器具有固定款式體現，比方鏟除起浮等！不行亂用！

狀況（.z-）：為狀況類款式參加前綴，一致標識，便利辨認，她只能組合運用或作為子孫出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），詳細詳見命名規矩的擴展相關項。

功用類和皮膚類款式為體現化的款式，請不要亂用！以上次序能夠按需求恰當調整。

/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默許 */
strong,em{font-style:normal;font-weight:bold;}
/* 一致調用背景圖 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 一致鏟除起浮 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模塊 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功用 */
.f-tac{text-align:center;}
/* 皮膚 */
.s-fc,a.s-fc:hover{color:#fff;}

想要更深入學習的小伙伴可以加下我的前端學習交流群386250991，最新的免費學習資料，視頻。歡迎各位的到來，覺得寫的還可以的點下關注，歡迎大家轉載文章！

上一節說到，我們可以快速的生成HTML的結構，如下圖所示：

雖然能快捷生成，但是我們必須了解HTML的結構組成：

<!DOCTYPE html>

這是第一行代碼，[DOC意思是document]，TYPE為類型，html為文件，這個是和瀏覽器說明，這是一個html的一個文件類型。

<!DOCTYPE html>
<html></html>

接下來我們將創建HTML標簽，HTML所有的標簽都應在此標簽之中。

<!DOCTYPE html>
<html>
<head></head>
</html>

接著就像描述一個人一樣，先把頭給描述出來，頭部元素在瀏覽器窗口是不可見的，所以這里會有一些標題，一些頁面信息，以及鏈接CSS等其他東西

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

頭出來了，就來創造我們的身體，身體元素是在瀏覽器頁面上可見的，所以我們在頁面的上能看見的元素都應該添加至身體元素里面。
剛剛說了，我們的HTML的標題需要包含在頭部元素，這時候我們來為頁面添加一個標題

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的網頁語言</title>       
</head>
<body></body>
</html>

現在我們在身體元素里面添加一些瀏覽器頁面可見的元素，例如一級標題

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的網頁語言</title>       
</head>
<body>
    <h1>HTML是最基本的網頁語言</h1>
</body>
</html>

現在我們保存代碼，然后雙擊該html文件即可在瀏覽器打開查看效果。

天繼續為大家分享前端的知識，如果對前端比較感興趣的小伙伴，可以關注我，我會更大家繼續分享更多與前端相關的內容，當然如果內容中又不當的或者文字錯誤的，歡迎大家在評論區留言，我會及時修改糾正。

1.初識HTML

HTML指的是超文本標記語言（Hyper Text Markup Language），是用來描述網頁的一種語言。
HTML不是一種編程語言，而是一種標記語言（markup language），標記語言是一套標記標簽（markup tag）。
HTML標簽描述網頁元素，比如圖片標簽、文字標簽、鏈接標簽等。
HTML標簽有自己的語法規范，并且所有的HTML標簽都是用尖括號（<>）包起來。

2.HTML骨架結構

HTML基本骨架語法如下所示：

HTML基本骨架結構

HTML骨架標簽說明：

HTML骨架標簽說明

下面通過對HTML骨架的基本認識，你也可以小試牛刀，打開記事本，新建一個帶有HTML骨架標簽的.txt文件。

在.txt中寫入HTML骨架標簽，保存，并將.txt的后綴名修改為.html，右鍵單擊你寫好的文件，然后選擇你要顯示的瀏覽器，本人習慣用谷歌的瀏覽器，這個根據個人的習慣來選擇就好了。

示例代碼如下：

我的第一個HTML頁面

注意：HTML標簽名、標簽的屬性名以及大部分屬性值都統一用小寫，不要問我為什么，這是人家W3C的規范，咱們按規范行事就好啦。

正確示范：

書寫規范

錯誤示范：

錯誤的規范

3.HTML標簽的分類

HTML標簽：在HTML頁面中，帶有“<>”尖括號符號的元素被稱為HTML標簽元素，如上面的<html>、<head>、<body>，它們都是用尖括號包起來，而且這幾個標簽還是HTML的骨架結構標簽，就好比人之所以能站立，就是因為有骨架支撐。

通常我們將其分為常規元素和空元素，以下是對兩種類型的介紹。

常規元素（雙標簽）

語法：<標簽名>內容</標簽名>，如<body>我的網頁內容</body>。

說明：

該語法中"<標簽名>"表示該標簽的作用開始，一般稱為"開始標簽（start tag）"，"</標簽名>"表示該標簽的作用結束，一般稱為"結束標簽（end tag）"。
和開始標簽相比，結束標簽只是在前面加了一個封閉符"/"。
提示：HTML多數都是雙標簽。

空元素（單標簽或自封閉標簽）

語法：<標簽名 /> ，比如 <br />

說明：

空元素用單標簽來表示。簡單說，就是里邊不需要包含內容，屬于自封閉標簽。
提示：此類標簽較少，只需要用到的時候記住就行，在開發過程中自己不斷的積累。

4.HTML標簽的關系

標簽之間的關系主要是針對雙標簽，雙標簽之間的關系分為如下幾種。

嵌套關系：

嵌套關系

并列關系：

并列關系

提示：在開發的過程中，如果標簽之間是嵌套關系，那么子元素可以通過tab鍵進行縮進，讓其結構和格式更加的清晰。

5.前端開發工具

之前我們是通過記事本來寫html骨架結構，會發現這種情況針對幾行代碼，還是能消化的，但是碰上幾千甚至幾萬以及更多，此時應該怎么辦呢？這個時候就得用到我們的前端開發工具，通過前端開發工具，可以更快更高效的提高我們的開發效率，那我們常見的前端開發工具有如下幾種：

常見的前端開發工具

說明：

Dreamweaver：學校用得多。
Sublime：推薦使用，輕量級，效率高，打開速度快，優點多，但是使用插件的時候，需要下載哦。
WebStorm：這個我沒用過，但是有的人很喜歡，屬于付費的。
Hbuilder：推薦使用，輕量級，免費，效率高，打開速度快，現在都是使用HbuilderX版本，這個是可以去官網下載到的，重點它免費、免費、免費，重要的事情說三遍！！！。
VS Code：這個是微軟的，也屬于開源免費的，功能很強大的，尤其是在JavaScript開發方面，也是本人推薦使用的。

提示：Hbuilder和VS Code誰更好？我只能說各有千秋，根據個人的習慣，我個人就比較喜歡Hbuilder，偶爾會用VS Code，如果你習慣用VS Code，繼續用就行了。

以上開發工具的安裝使用，在網絡上都會有很多資料，可以動動小手指就能查到哦。

今天就分享到這兒吧，如果喜歡的記得點關注哦，也歡迎在留言區留言。

在線咨詢

上一篇：你還在用靜態線性羅列知識點復習？《滑輪》思維導圖來了
下一篇：JavaScript 文字跟隨鼠標

您的項目需求

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

整合營銷服務商

前端新手需要知道的CSS規范-分類方法

您的項目需求