本篇文章，嚴格意義上來說，這是我的第一篇技術博客，我將寫一些有關HTML+CSS 的基礎。
我有過前端布道師的經歷，帶過的學生到目前為止至少在1000+，所授課程基本都會有HTML+CSS布局，所以我對這個技術點，應該可以說是比較熟悉的了。
首先，我個人是比較贊同內容（HTML）和樣式（CSS）分離的思想，在頁面中呈現的內容使用HTML插入，內容的樣式使用CSS來操控，這種思想，對於一個初學者來說，是非常容易理解的。無論是HTML標簽，CSS選擇器剛開始都不要過多去了解，標簽只要三個div、a、img即可，選擇器只需要會兩個，即類名選擇器和通用選擇器，這時就可以開始網頁布局了，而且，市面上很多的頁面都可以只使用這些東西來布局，當對於CSS 的屬性已經比較熟悉，對於HTML+CSS布局基本熟練時，再去了解大量的不同功能的標簽和選擇器，這種學習方法，會事半功倍。
接下來，我來表述一下剛開始需要做哪些事情：
第一步：創建一個index.html的文件，創建一個index.css的文件。
第二步：在index.html文件中，先寫入HTML的文檔結構，這里推薦初學者使用windows環境下的sublime編輯器，可以鍵入一個‘！’，再鍵入一個‘tab’鍵，這時，就會生成一個HTML5的文檔結構，文檔結構中會有一個<body></body>標簽，想要在頁面中顯示的內容，都是要寫入到這個標簽內的。
第三步：在<title></title>標簽下面，寫入link標簽，鍵入‘link’四個字母，再鍵入‘tab’鍵。該標簽的目的是將index.css引入到index.html中。如果第一步創建的兩個文件在同一文件加下，則代碼為：
<link rel="stylesheet" href="index.css">
第四步：在index.css文件中寫入以下代碼：
1 /*通用選擇器*/ 2 *{ 3 /*去除一些標簽的默認樣式*/ 4 padding:0;margin:0; 5 /*去除a標簽的下划線*/ 6 text-decoration:none; 7 }
第五步：HTML中使用div、a、img標簽寫入內容，CSS中使用類名選擇器選擇到每一個元素，去分別賦予樣式。代碼片段，如下：
index.html
<div class=”one”></div>
index.css
1 .one{ 2 width:200px; 3 height:200px; 4 background:red; 5 }
第六步：在瀏覽器中打開index.html，我們將看到一個寬高均為200px的紅色塊，接下來就需要開始大量的學習CSS屬性，這些屬性，可以讓我們非常方便的將HTML標簽變成任意的樣式。
本篇內容到這里就結束了，從下一篇文章開始，將會一一講解重要的CSS屬性。