在百度前端技術學院2016的春季任務中，第一階段系列任務作為基礎練習，主要是讓學員熟練html及css。其中，task1-9提供了從零開始到整個靜態頁面的整個搭設過程思路。task10/11涉及移動端，task12涉及css3新特性。
我的博客：smallstarz.com。歡迎做客，相互學習，相互進步。
task1主要是使用html搭設網頁框架。之前通過模仿課程、書籍例子，已經搭建過網頁，但當時未使用html5語義化標簽。因此，在做這個任務的時候，有兩個目標：再次熟悉html語言；使用語義化標簽。以下為完成html之后，無css情況下的頁面圖：
通過4個列表對ul、ol、dd標簽進行練習；通過一個表格對table標簽進行練習，通過數個圖片及鏈接對img、a標簽進行練習；通過1個表單對form標簽進行練習。此外，就是使用語義化標簽，本次任務中使用了article、header、aside及footer標簽。對各語義化標簽的使用，下圖應該可以一目了然：
具體來說，各標簽的使用情況如下：
1.header:代表“網頁”或“section”的頁眉。通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。
2.footer:代表“網頁”或“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。
3.hgroup:代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合。
4.nav:代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。
5.aside:被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
6.section:代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。
7.article:最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。
task2利用css編寫樣式，使用在task1所寫頁面。通過練習，對以下內容有深刻體會：
1.設置單行文本line-height等于父元素以上第一個高度定值的父級元素的height，可以使文本垂直居中于容器；
2.使用浮動（float）屬性使列表橫排；
3.縮進：text-indent；
4.表單的居中對齊（下文詳細敘述）；
5.border-radius:可設置元素四角圓滑。
表單的居中對齊（或者定于某個值對齊）：為表單每個項加層（div），再設置所有層浮動屬性、寬度（主要控制對齊的軸線位置）屬性、及文本對齊屬性即可。
html代碼：
<form>
<div>
<label for="email" class="blign">請輸入郵箱地址：</label>
<input type="text" name="emailss" id="email"><br>
</div>
<p>郵箱地址請按要求格式輸入</p>
<div>
<label for="pw1" class="blign">請輸入密碼：</label>
<input type="password" name="pwd1" id="pw1">
</div>
<div>
<label for="pw2" class="blign">請重復輸入密碼：</label>
<input type="password" name="pwd2" id="pw2"><br>
</div>
<p>密碼請為6-16英文數字</p>
<div>
<label class="blign">性別：</label>
<input type="radio" checked="checked" name="Sex" value="male">男
<input type="radio" name="Sex" value="female">女
</div>
<div>
<label class="blign">城市：</label>
<select name="">
<option value="北京">北京</option>
<option value="廣州">廣州</option>
<option value="上海">上海</option>
</select>
</div>
<div>
<label class="blign">愛好：</label>
<input type="checkbox" name="checkbox1" value="checkbox">運動
<input type="checkbox" name="checkbox2" value="checkbox">藝術
<input type="checkbox" name="checkbox1" value="checkbox">科學
</div>
<div>
<label class="blign">個人描述：</label>
<textarea>這是一個多行輸入框，輸入你的個人描述</textarea>
<div>
<input type="submit" value="確認提交" id="smit">
</form>
css代碼：
.blign{
float: left;
width: 36%;
text-align: right;
}
頁面樣式：
