塊級(jí)元素的特點(diǎn):
在瀏覽器顯示時(shí)，獨(dú)占一行,默認(rèn)情況下，其寬度自動(dòng)填滿其父元素寬度；
可以設(shè)置width，height屬性；
可以設(shè)置margin和padding屬性；
塊級(jí)元素包含：
| 元素 | 描述 |
|---|---|
<address> | 定義地址 |
<caption> | 定義表格標(biāo)題 |
<dd> | 定義列表中定義條目 |
<div> | 定義文檔中的分區(qū)或節(jié) |
<dl> | 定義列表 |
<dt> | 定義列表中的項(xiàng)目 |
<fieldset> | 定義一個(gè)框架集 |
<form> | 創(chuàng)建表單元素 |
<h2> - <h7> | 標(biāo)題元素 |
<hr> | 水平線 |
<legend> | 給fieldset元素定義標(biāo)題 |
<li> | 定義列表項(xiàng)目 |
<noframes> | 為那些不支持框架的瀏覽器顯示文本，放置于frameset標(biāo)簽內(nèi) |
<noscript> | 為那些不支持腳本的瀏覽器顯示文本 |
<ol> | 有序列表 |
<ul> | 無(wú)序列表 |
<p> | 定義段落 |
<pre> | 定義預(yù)格式化文本 |
<table> | 定義表格 |
<tbody> | 定義表格主體 |
<td> | 表格中的標(biāo)準(zhǔn)單元格 |
<tr> | 表格中的行 |
<tfoot> | 表格中的頁(yè)腳 |
<th> | 定義表頭單元格 |
<thead> | 定義表格的表頭 |
內(nèi)聯(lián)元素的特點(diǎn)：
內(nèi)聯(lián)元素包含：
| 元素 | 描述 |
|---|---|
<a> | 可定義錨以及超鏈接 |
<abbr> | 表示一個(gè)縮寫(xiě)形式 |
<acronym> | 表示只取title中首字母的縮寫(xiě)形式 |
<b> | 字體加粗 |
<bdo> | 可覆蓋默認(rèn)的文本方向 |
<big> | 大號(hào)字體加粗 |
<br> | 換行 |
<cite> | 引用進(jìn)行定義 |
<code> | 定義計(jì)算機(jī)代碼文本 |
<dfn> | 定義一個(gè)定義項(xiàng)目 |
<em> | 定義為強(qiáng)調(diào)的內(nèi)容 |
<i> | 斜體文本效果 |
<img> | 向網(wǎng)頁(yè)中嵌入一張圖像 |
<input> | 輸入框 |
<kbd> | 定義鍵盤(pán)文本 |
<label> | 為input進(jìn)行標(biāo)記/標(biāo)注 |
<q> | 定義短的引用 |
<s> | 表示不準(zhǔn)確不相關(guān)，卻不應(yīng)當(dāng)給予刪除的內(nèi)容 |
<samp> | 定義樣本文本 |
<select> | 定義單選或者多選菜單 |
<small> | 呈現(xiàn)小號(hào)字體效果 |
<span> | 組合文檔中的行內(nèi)元素 |
<strong> | 語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)內(nèi)容 |
<sub> | 定義下標(biāo)文本 |
<sup> | 定義上標(biāo)文本 |
<textarea> | 多行文本輸入控件 |
<tt> | 打字機(jī)或者等寬的文本效果 |
<var> | 定義變量 |
| 塊級(jí)元素 | 行內(nèi)元素 |
|---|---|
| 獨(dú)占一行,默認(rèn)情況下，其寬度自動(dòng)填滿其父元素寬度 | 相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化 |
| 可以設(shè)置width，height屬性 | 行內(nèi)元素設(shè)置width，height屬性無(wú)效 |
| 可以設(shè)置margin和padding屬性 | 行內(nèi)元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會(huì)起邊距效果。 |
| 對(duì)應(yīng)于display:block | 對(duì)應(yīng)于display:inline； |
我們?cè)谒㈩}的時(shí)候會(huì)遇到一個(gè)這樣的題：
eg1: 瀏覽器天生默認(rèn)inline-block元素有哪些？（擁有內(nèi)在尺寸，可以設(shè)置高度，但是不會(huì)自動(dòng)換行。）
重慶分公司
重慶分公司
input button img label texterea
eg2: 請(qǐng)選出所有的置換元素（）
正確答案: A B C D 你的答案: A B C D (正確)
A. img
B. input
C. textarea
D. select
這就引出了我們接下來(lái)要講的替換元素和不可替換元素
替換元素瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定元素的具體顯示內(nèi)容。
替換元素一般有內(nèi)在尺寸，所以具有width和height。
所以替換元素也可增加行框高度，但不影響line-height,內(nèi)容區(qū)高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替換元素居中，可以設(shè)置line-height = height， vertral-align = middle。
常見(jiàn)的替換元素有html中的<img>、<input>、<textarea>、<select>、<object>。
eg1:
<input type="submit" name="submit" value="提交"/>
<input>標(biāo)簽是根據(jù)type屬性來(lái)決定是顯示輸入框，還是提交按鈕等等。
| type屬性值 | 描述 |
|---|---|
button | 定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過(guò) JavaScript 啟動(dòng)腳本）。 |
checkbox | 定義復(fù)選框。 |
file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。 |
submit | 定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text | 定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。 |
eg2:
<img src="helloWord.jpg"/>
<img>元素通過(guò)src屬性的值來(lái)讀取圖片信息并顯示出來(lái)，而如果查看html代碼，卻看不到圖片的實(shí)際內(nèi)容，而且<img>元素的內(nèi)容通常會(huì)被src屬性指定的圖像替換掉；
eg3:
<object>元素
<object> 元素（或者稱(chēng)作 HTML嵌入對(duì)象元素）表示引入一個(gè)外部資源，這個(gè)資源可能是一張圖片，一個(gè)嵌入的瀏覽上下文，亦或是一個(gè)插件所使用的資源。
| 屬性 | 描述 |
|---|---|
| data | 一個(gè)合法的 URL 作為資源的地址，，需要為 data 和 type 中至少一個(gè)設(shè)置值。 |
| type | data 指定的資源的 MIME 類(lèi)型，需要為 data 和 type 中至少一個(gè)設(shè)置值。 |
| usemap | 指向一個(gè) |
| width | 資源顯示的寬度，單位是 CSS 像素。 |
| height | 資源顯示的高度，單位是 CSS 像素。 |
| name | 瀏覽上下文名稱(chēng)（HTML5），或者控件名稱(chēng)（HTML 4）。 |
也有某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如<video>、<audio>、 <picture>和 <canvas>。 通過(guò) CSS content 屬性來(lái)插入的對(duì)象被稱(chēng)作匿名可替換元素（anonymous replaced elements）。
html 的大多數(shù)元素是不可替換元素，即其內(nèi)容直接表現(xiàn)給用戶端
不可替換元素
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）
width和height在行內(nèi)非替換元素中無(wú)效。行內(nèi)非替換元素框的寬度是它的內(nèi)容渲染后（在任何子元素相對(duì)偏移之前）的寬度，它的高則是基于字體。
如<a>、<span>是行內(nèi)非替換元素 ，但是浮動(dòng)后的行內(nèi)非替換元素可以使用width和height。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
