任務描述
1.通過實現一個常見的技術產品官網，加深對于HTML，CSS的實戰能力
2.學習掌握如何在沒有標注的情況下實現設計稿到頁面的精確轉變
這算第一次做比較完整的頁面了。因為設計稿沒有標注，所以一邊測量尺寸和距離，一邊加css屬性，還是挺麻煩的，而且有點枯燥。但是，這些都是后續知識必備的基礎。
總結：
1.標簽語義化
為什么標簽要做到語義化？
（1）有意義的標記標簽可以方便的添加css屬性，而不必要添加其他標識符（id or class）,減少了代碼量（簡潔）。
（2）除了人之外，程序和其他設備也可以理解語義標簽。比如：搜索引擎可以識別出標題（因為它被包圍在h1標簽中）并予以重視。很多網頁也是利用標簽語義化，來讓搜索引擎更容易理解網頁內容，從而提高網站排名。
如何使用語義標簽？
利用h5新增結構標簽去代替div，避免滿屏div的窘境。
<section></section>
用來對網頁內容進行分塊，一個section元素通常由內容以及標題組成
<nav></nav>
可以作為頁面導航的鏈接組（只需將主要的基本的鏈接放進來）——全局導航
<header></header>用來放置整個頁面或者一個頁面區塊的引導（導航）元素，例如頁首
<main></main>表示網頁的主要內容（每個網頁所特有的，不包括全局導航）
<footer></footer>用來放置整個頁面或者一個頁面區塊的腳注（如作者，版權信息，相關閱讀鏈接等）
其它此次任務中未能運用的語義標簽
article 代表頁面中可以獨自被外部引用的內容，可以是一篇博客或文章，帖子，評論，插件等
aside 當前頁面的附屬信息部分（側邊欄，廣告，導航條）
address 用來在文檔中呈現聯系信息，包括作者，地址，維護者，電話號碼，郵箱等。
2.細節處理
如何消除標簽換行后產生的間隙？
如圖，文本輸入框和提交按鈕之間因為標簽換行產生了間隙。
解決方法：
在父級元素中加入font-size:0; 子級元素中加入font-size:xxpx 即可消除間隙，當然另外一種方法是直接把倆個標簽寫成一行，但是這樣會顯得代碼凌亂。
