最近所接手的一個項目是一個前後端分離的項目,因爲公司暫時抽調不出前端支援這個項目,所以我被臨時抽調在這個項目中充當一個前端開發的一個角色.由於之前做過一年多的J2EE開發,所以對於前端開發還是很快能上手的.只是因爲之前的html、css常用標籤與用法在腦海裏面已經很模糊了,所以導致在開發的過程中經常是不明其所以然,一個標籤一個標籤的、一個屬性一個屬性的試,導致開發效率極低,所以我打算趁國慶假期開始好好的複習鞏固下,廢話不多說,開始正文.
一.塊級元素與行內元素的區別
1.1 在標準文檔流裏面，塊級元素具有以下特點：
(1).塊級元素總是在新行上開始，佔據一整行，其寬度自動填滿其父元素寬度,垂直向下排列.(注:若想使其水平方向排序，可使用左右浮動（float:left/right）讓其水平方向排列.)
(2).塊級元素可以設置寬高,並且寬度高度以及外邊距,內填充都可隨意控制.(注:塊級元素即使設置了寬度，仍然是獨佔一行的)
(3).塊級元素可以包含行內元素和其他塊級元素.
1.2 在標準文檔流裏面，行內元素具有以下特點：
(1).行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的
(2).行內元素不可以設置寬高，寬度高度隨文本內容的變化而變化，但是可以設置行高（line-height），同時在設置外邊距margin上下無效，左右有效，內填充padding可以隨意控制；
(3).行內元素不能包含塊級元素，只能容納文本或者其他行內元素.
二.塊級元素與行內元素的相互轉換
行內元素與塊級函數可以相互轉換，通過修改display屬性值來切換塊級元素和行內元素，行內元素display：inline，塊級元素display：block。
2.1 塊級元素轉換爲行級元素：
2.2 行級元素轉換爲塊級元素：
三.塊級元素與行內元素的分類
3.1 常見塊級元素與行內元素的分類：
3.2 基本塊級元素與行內元素的分類：
html中的塊級元素：
| 標籤 | 描述 |
|---|---|
| <address> | 定義地址。 |
| <article> | 定義文章。 |
| <aside> | 定義頁面內容之外的內容。 |
| <audio> | 定義聲音內容。 |
| <blockquote> | 定義長的引用。 |
| <canvas> | 定義圖形。 |
| <caption> | 定義表格標題。 |
| <dd> | 定義定義列表中項目的描述。 |
| <div> | 定義文檔中的節。 |
| <dl> | 定義定義列表。 |
| <dt> | 定義定義列表中的項目。 |
| <details> | 定義元素的細節。 |
| <fieldset> | 定義圍繞表單中元素的邊框。 |
| <figcaption> | 定義 figure 元素的標題。 |
| <figure> | 定義媒介內容的分組，以及它們的標題。 |
| <footer> | 定義 section 或 page 的頁腳。 |
| <form> | 定義供用戶輸入的 HTML 表單。 |
| <h1> to <h6> | 定義 HTML 標題。 |
| <header> | 定義 section 或 page 的頁眉。 |
| <hr> | 定義水平線。 |
| <legend> | 定義 fieldset 元素的標題。 |
| <li> | 定義列表的項目。 |
| <menu> | 定義命令的列表或菜單。 |
| <meter> | 定義預定義範圍內的度量。 |
| <nav> | 定義導航鏈接。 |
| <noframes> | 定義針對不支持框架的用戶的替代內容。 |
| <noscript> | 定義針對不支持客戶端腳本的用戶的替代內容。 |
| <ol> | 定義有序列表。 |
| <output> | 定義輸出的一些類型。 |
| <p> | 定義段落。 |
| <pre> | 定義預格式文本。 |
| <section> | 定義 section。 |
| <table> | 定義表格。 |
| <tbody> | 定義表格中的主體內容。 |
| <td> | 定義表格中的單元。 |
| <tfoot> | 定義表格中的表注內容（腳註）。 |
| <th> | 定義表格中的表頭單元格。 |
| <thead> | 定義表格中的表頭內容。 |
| <time> | 定義日期/時間。 |
| <tr> | 定義表格中的行。 |
| <ul> | 定義無序列表。 |
html中的行內元素:
| 標籤 | 描述 |
|---|---|
| <a> | 定義錨。 |
| <abbr> | 定義縮寫。 |
| <acronym> | 定義只取首字母的縮寫。 |
| <b> | 定義粗體字 |
| <bdo> | 定義文字方向。 |
| <big> | 定義大號文本。 |
| <br> | 定義簡單的折行。 |
| <button> | 定義按鈕 (push button)。 |
| <cite> | 定義引用(citation)。 |
| <code> | 定義計算機代碼文本。 |
| <command> | 定義命令按鈕。 |
| <dfn> | 定義定義項目。 |
| <del> | 定義被刪除文本。 |
| <em> | 定義強調文本。 |
| <embed> | 定義外部交互內容或插件。 |
| <i> | 定義斜體字。 |
| <img> | 定義圖像。 |
| <input> | 定義輸入控件。 |
| <kbd> | 定義鍵盤文本。 |
| <label> | 定義 input 元素的標註。 |
| <map> | 定義圖像映射。 |
| <mark> | 定義有記號的文本。 |
| <objec> | 定義內嵌對象。 |
| <progress> | 定義任何類型的任務的進度。 |
| <q> | 定義短的引用。 |
| <samp> | 定義計算機代碼樣本。 |
| <select> | 定義選擇列表（下拉列表）。 |
| <small> | 定義小號文本。 |
| <span> | 定義文檔中的節。 |
| <strong> | 定義強調文本。 |
| <sub> | 定義下標文本。 |
| <sup> | 定義上標文本。 |
| <textarea> | 定義多行的文本輸入控件。 |
| <time> | 定義日期/時間。 |
| <tt> | 定義打字機文本。 |
| <var> | 定義文本的變量部分。 |
| <video> | 定義視頻。 |
| <wbr> | 定義可能的換行符。 |
四.結束語
在創作這邊文章的時候有借鑑一下文章,在此表示感謝: