1.行內(nèi)元素
行內(nèi)元素按照文檔流按照從左到右流的方式布局，遇到阻礙或者寬度不夠自動換行，然后繼續(xù)從左到右。
* 行內(nèi)元素：`<title> <lable> <span> <br> <a> <em> <strong>`
2.塊級元素
塊級元素單獨(dú)占據(jù)一行，并按照從上到下的方式布局。
* 塊級元素：`<body> <div> <h1>-<h6> <p> <ol> <ul> <hr> <select> <button> <textarea>`
3. 塊級和行內(nèi)元素的區(qū)別和轉(zhuǎn)換
-
區(qū)別：
1.塊級元素可以設(shè)置寬高，行級元素不能設(shè)置寬高（只能根據(jù)文字來設(shè)置，比較特殊的是img\input是可以設(shè)置寬高的行內(nèi)塊元素）；
2.塊級元素是獨(dú)占一行，行級元素不是；
-
互變：
1.轉(zhuǎn)行級元素：
display: inline（設(shè)置寬高無效）2.轉(zhuǎn)塊級元素：
display: block（獨(dú)占一行，可以設(shè)置寬高）3.轉(zhuǎn)行內(nèi)塊元素：
display: inline-block（不會獨(dú)占一行，可以設(shè)置寬高）
4.HTML中元素對應(yīng)名稱
塊元素(block element) HTML標(biāo)簽分類明細(xì)：
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級元素
* dl - 定義列表
* form - 交互表單 （只能用來容納其它塊元素）
* h1 - 大標(biāo)題
* h2 - 副標(biāo)題
* h3 - 3級標(biāo)題
* h4 - 4級標(biāo)題
* h5 - 5級標(biāo)題
* h6 - 6級標(biāo)題
* hr - 水平分隔線
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
內(nèi)聯(lián)元素(inline element) HTML標(biāo)簽分類明細(xì) ：
* a - 錨點(diǎn)
* abbr - 縮寫
* acronym - 首字
* big - 大字體
* br - 換行
* code - 計算機(jī)代碼(在引用源碼的時候需要)
* em - 強(qiáng)調(diào)
* i - 斜體
* img - 圖片
* input - 輸入框
* label - 表格標(biāo)簽
* q - 短引用
* select - 項目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
* strong - 粗體強(qiáng)調(diào)
* textarea - 多行文本輸入框
* u - 下劃線
5.表格的屬性和作用
1. 創(chuàng)建表格
定義表格：
<table></table>創(chuàng)建表行：
<tr></tr>創(chuàng)建列(單元格):
<td></td>注意：默認(rèn)情況下，每行中的列數(shù)是統(tǒng)一的。
2. table表格的特點(diǎn)：
獨(dú)占一行
寬度自適應(yīng)(由內(nèi)容來決定)
3. table的表格屬性：
<table>
width：設(shè)置表格寬度
height：設(shè)置表格高度
align：設(shè)置表格在其父元素中的水平對齊方式，取值：left,center,right
border：邊框,邊框?qū)挾龋詐x為單位的數(shù)值，px可以省略
cellpadding：單元格內(nèi)邊距單元格邊框與內(nèi)容之間的距離
cellspacing：單元格外邊距單元格與單元格之間或者單元格與表格之間的距離
bgcolor：背景顏色
<tr>
align：該行的內(nèi)容水平對齊方式
valign該行的內(nèi)容垂直對齊方式。取值：top，middle，bottom
bgcolor
<td>
width
height
align
valign
bgcolor
colspan：設(shè)置單元格跨列
rowspan：設(shè)置單元格跨行
4. 還有表格中的其他標(biāo)記：
<caption></caption>
作用：為表格定義標(biāo)題
位置：表格正上方居中顯示
<th></th>
行(列)標(biāo)題列標(biāo)題：第一行中的每一列（或每行里面的第一列），加粗，水平居中的效果顯示。
5. 表格的復(fù)雜應(yīng)用
* 行分組表格可以被劃分成3個部分:
1、表頭
<thead></thead>
2、表主體
<tbody></tbody>
3、表尾
<tfoot></tfoot>
注意：如果不對表格行進(jìn)行分組的話，那么默認(rèn)都屬于tbody
* 不規(guī)則表格每行中的列數(shù)，不是統(tǒng)一化的。
1.跨列合并列，讓指定的單元格，橫向向右，合并幾個單元格(包含自己)語法：td 的 colspan 屬性
2.跨行合并行，讓指定的單元格，縱向向下，合并幾個單元格(包含自己)語法：td 的 rowspan 屬性
注意：無論是跨行還是跨列，被合并的單元格一定從代碼中刪除出去
* 表格的嵌套在一個表格中
又嵌入了另外一個表格被嵌套的表格必須出現(xiàn)在<td>中。
6. html table表格特有的樣式屬性
* html table表格樣式屬性之邊框合并
屬性：border-collapse
取值：
- separate：默認(rèn)值，分離邊框模式
- collapse：邊框合并模式
* html table表格樣式屬性之邊框邊距
作用：設(shè)置相鄰單元格邊框之間的距離(類似于cellspacing)
屬性：border-spacing取值：
- 取1個值.表示水平和垂直間距相等.
- 取2個值.第一個值表示的水平間距,第二個值表示的垂直間距,兩個值之間用空格隔開.
- 要求border-collapse必須為separate必須為分離邊框模式時有效
* html table表格樣式屬性之標(biāo)題位置:
<caption></caption>
作用：將標(biāo)題位置由默認(rèn)的位置改到表格之下
屬性：caption-side
取值：
- top：默認(rèn)
- bottom：標(biāo)題位于表格之下
* html table表格樣式屬性之顯示規(guī)則:
作用:
指定瀏覽器以什么樣的方式來布局一個表格。實(shí)際是指定了單元格的算法規(guī)則默認(rèn)算法：單元格的寬由內(nèi)容來決定，不受設(shè)置的width值來限定。
屬性：table-layout
取值：
- auto：默認(rèn)值，自動，列寬由內(nèi)容來決定
- fixed：固定表格布局，列寬由設(shè)定的值決定。
- 自動表格布局&固定表格布局1
- 自動表格布局(auto)單元格的大小會適應(yīng)內(nèi)容大小在表格復(fù)雜時，加載會比較慢適用于不確定每列大小時使用傳統(tǒng)表格表現(xiàn)方式
- 固定表格布局(fixed)單元格的大小由設(shè)定的值來決定，與內(nèi)容無關(guān)會加速顯示表格，瀏覽器在加載完第一行的時候就不用再計算了。
* 隱藏的顯示效果屬性：
visibility：collapse用在表格元素上，刪除一行或一列，不影響表格整個布局
6.HTML表單
1. 表單元素
<input>
<input> 元素根據(jù)不同的 type 屬性，可以變化為多種形態(tài)
<select>
<select> 元素定義下拉列表。
<option> 元素定義待選擇的選項。
<texarea>
<textarea> 元素定義多行輸入字段（文本域）：
<button>
<button> 元素定義可點(diǎn)擊的按鈕
<datalist>
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項列表。
用戶會在他們輸入數(shù)據(jù)時看到預(yù)定義選項的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。
2. 輸入類型（input元素）
text：定義文本輸入字段
password：定義密碼字段
submit：定義提交表單數(shù)據(jù)到表單處理程序的按鈕
radio：定義單選框
checkbox：定義復(fù)選框
button：定義按鈕
3. 輸入屬性（input元素）
value：規(guī)定輸入字段初始值。
readonly：只讀。
disabled：禁用。
size：輸入字段尺寸（按字符計）。
maxlength：最大輸入尺寸。
autocomplete：規(guī)定表單或輸入字段是否應(yīng)該自動完成。
