在百度前端技術(shù)學(xué)院2016的春季任務(wù)中竟稳，第一階段系列任務(wù)作為基礎(chǔ)練習(xí)属桦，主要是讓學(xué)員熟練html及css。其中他爸，task1-9提供了從零開始到整個(gè)靜態(tài)頁面的整個(gè)搭設(shè)過程思路聂宾。task10/11涉及移動(dòng)端，task12涉及css3新特性诊笤。
我的博客：smallstarz.com系谐。歡迎做客，相互學(xué)習(xí)讨跟，相互進(jìn)步纪他。
task1主要是使用html搭設(shè)網(wǎng)頁框架。之前通過模仿課程晾匠、書籍例子茶袒，已經(jīng)搭建過網(wǎng)頁，但當(dāng)時(shí)未使用html5語義化標(biāo)簽混聊。因此弹谁，在做這個(gè)任務(wù)的時(shí)候，有兩個(gè)目標(biāo)：再次熟悉html語言句喜；使用語義化標(biāo)簽。以下為完成html之后沟于，無css情況下的頁面圖：
通過4個(gè)列表對(duì)ul咳胃、ol、dd標(biāo)簽進(jìn)行練習(xí)旷太；通過一個(gè)表格對(duì)table標(biāo)簽進(jìn)行練習(xí)展懈，通過數(shù)個(gè)圖片及鏈接對(duì)img销睁、a標(biāo)簽進(jìn)行練習(xí)；通過1個(gè)表單對(duì)form標(biāo)簽進(jìn)行練習(xí)存崖。此外冻记，就是使用語義化標(biāo)簽，本次任務(wù)中使用了article来惧、header冗栗、aside及footer標(biāo)簽。對(duì)各語義化標(biāo)簽的使用供搀，下圖應(yīng)該可以一目了然：
具體來說隅居，各標(biāo)簽的使用情況如下：
1.header:代表“網(wǎng)頁”或“section”的頁眉。通常包含h1-h6元素或hgroup葛虐，作為整個(gè)頁面或者一個(gè)內(nèi)容塊的標(biāo)題胎源。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框屿脐，一個(gè)nav涕蚤，或者任何相關(guān)logo。
2.footer:代表“網(wǎng)頁”或“section”的頁腳的诵，通常含有該節(jié)的一些基本信息万栅，譬如：作者，相關(guān)文檔鏈接奢驯，版權(quán)資料申钩。如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄瘪阁，索引撒遣，提拔，許可協(xié)議管跺，標(biāo)簽义黎，類別等一些其他類似信息。
3.hgroup:代表“網(wǎng)頁”或“section”的標(biāo)題豁跑，當(dāng)元素有多個(gè)層級(jí)時(shí)廉涕，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合艇拍。
4.nav:代表頁面的導(dǎo)航鏈接區(qū)域狐蜕。用于定義頁面的主要導(dǎo)航部分。
5.aside:被包含在article元素中作為主要內(nèi)容的附屬信息部分卸夕，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料层释、標(biāo)簽、名次解釋等快集。在article元素之外使用作為頁面或站點(diǎn)全局的附屬信息部分贡羔。最典型的是側(cè)邊欄廉白，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航乖寒，甚至廣告猴蹂，這些內(nèi)容相關(guān)的頁面。
6.section:代表文檔中的“節(jié)”或“段”楣嘁，“段”可以是指一篇文章里按照主題的分段磅轻；“節(jié)”可以是指一個(gè)頁面里的分組。section通常還帶標(biāo)題马澈，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)瓢省，但是最好手動(dòng)給他們降級(jí)。
7.article:最容易跟section和div容易混淆痊班，其實(shí)article代表一個(gè)在文檔勤婚，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用涤伐。譬如論壇的帖子疟暖，博客上的文章扬舒，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。
task2利用css編寫樣式瞧哟，使用在task1所寫頁面脏答。通過練習(xí)尖淘，對(duì)以下內(nèi)容有深刻體會(huì)：
1.設(shè)置單行文本line-height等于父元素以上第一個(gè)高度定值的父級(jí)元素的height萍摊，可以使文本垂直居中于容器；
2.使用浮動(dòng)（float）屬性使列表橫排山害；
3.縮進(jìn)：text-indent纠俭；
4.表單的居中對(duì)齊（下文詳細(xì)敘述）；
5.border-radius:可設(shè)置元素四角圓滑浪慌。
表單的居中對(duì)齊（或者定于某個(gè)值對(duì)齊）：為表單每個(gè)項(xiàng)加層（div）冤荆，再設(shè)置所有層浮動(dòng)屬性、寬度（主要控制對(duì)齊的軸線位置）屬性权纤、及文本對(duì)齊屬性即可钓简。
html代碼：
<form>
<div>
<label for="email" class="blign">請(qǐng)輸入郵箱地址：</label>
<input type="text" name="emailss" id="email"><br>
</div>
<p>郵箱地址請(qǐng)按要求格式輸入</p>
<div>
<label for="pw1" class="blign">請(qǐng)輸入密碼：</label>
<input type="password" name="pwd1" id="pw1">
</div>
<div>
<label for="pw2" class="blign">請(qǐng)重復(fù)輸入密碼：</label>
<input type="password" name="pwd2" id="pw2"><br>
</div>
<p>密碼請(qǐng)為6-16英文數(shù)字</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">運(yùn)動(dòng)
<input type="checkbox" name="checkbox2" value="checkbox">藝術(shù)
<input type="checkbox" name="checkbox1" value="checkbox">科學(xué)
</div>
<div>
<label class="blign">個(gè)人描述：</label>
<textarea>這是一個(gè)多行輸入框，輸入你的個(gè)人描述</textarea>
<div>
<input type="submit" value="確認(rèn)提交" id="smit">
</form>
css代碼：
.blign{
float: left;
width: 36%;
text-align: right;
}
頁面樣式：
