溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
塊級元素的特點:
在瀏覽器顯示時，獨占一行,默認(rèn)情況下，其寬度自動填滿其父元素寬度；
可以設(shè)置width，height屬性；
可以設(shè)置margin和padding屬性；
塊級元素包含：
| 元素 | 描述 |
|---|---|
<address> |
定義地址 |
<caption> |
定義表格標(biāo)題 |
<dd> |
定義列表中定義條目 |
<div> |
定義文檔中的分區(qū)或節(jié) |
<dl> |
定義列表 |
<dt> |
定義列表中的項目 |
<fieldset> |
定義一個框架集 |
<form> |
創(chuàng)建表單元素 |
<h2> - <h7> |
標(biāo)題元素 |
<hr> |
水平線 |
<legend> |
給fieldset元素定義標(biāo)題 |
<li> |
定義列表項目 |
<noframes> |
為那些不支持框架的瀏覽器顯示文本，放置于frameset標(biāo)簽內(nèi) |
<noscript> |
為那些不支持腳本的瀏覽器顯示文本 |
<ol> |
有序列表 |
<ul> |
無序列表 |
<p> |
定義段落 |
<pre> |
定義預(yù)格式化文本 |
<table> |
定義表格 |
<tbody> |
定義表格主體 |
<td> |
表格中的標(biāo)準(zhǔn)單元格 |
<tr> |
表格中的行 |
<tfoot> |
表格中的頁腳 |
<th> |
定義表頭單元格 |
<thead> |
定義表格的表頭 |
內(nèi)聯(lián)元素的特點：
內(nèi)聯(lián)元素包含：
| 元素 | 描述 |
|---|---|
<a> |
可定義錨以及超鏈接 |
<abbr> |
表示一個縮寫形式 |
<acronym> |
表示只取title中首字母的縮寫形式 |
<b> |
字體加粗 |
<bdo> |
可覆蓋默認(rèn)的文本方向 |
<big> |
大號字體加粗 |
<br> |
換行 |
<cite> |
引用進(jìn)行定義 |
<code> |
定義計算機代碼文本 |
<dfn> |
定義一個定義項目 |
<em> |
定義為強調(diào)的內(nèi)容 |
<i> |
斜體文本效果 |
<img> |
向網(wǎng)頁中嵌入一張圖像 |
<input> |
輸入框 |
<kbd> |
定義鍵盤文本 |
<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)小號字體效果 |
<span> |
組合文檔中的行內(nèi)元素 |
<strong> |
語氣更強的強調(diào)內(nèi)容 |
<sub> |
定義下標(biāo)文本 |
<sup> |
定義上標(biāo)文本 |
<textarea> |
多行文本輸入控件 |
<tt> |
打字機或者等寬的文本效果 |
<var> |
定義變量 |
| 塊級元素 | 行內(nèi)元素 |
|---|---|
| 獨占一行,默認(rèn)情況下，其寬度自動填滿其父元素寬度 | 相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化 |
| 可以設(shè)置width，height屬性 | 行內(nèi)元素設(shè)置width，height屬性無效 |
| 可以設(shè)置margin和padding屬性 | 行內(nèi)元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。 |
| 對應(yīng)于display:block | 對應(yīng)于display:inline； |
我們在刷題的時候會遇到一個這樣的題：
eg1: 瀏覽器天生默認(rèn)inline-block元素有哪些？（擁有內(nèi)在尺寸，可以設(shè)置高度，但是不會自動換行。）
input button img label texterea
eg2: 請選出所有的置換元素（）
正確答案: A B C D 你的答案: A B C D (正確)
A. img
B. input
C. textarea
D. select
這就引出了我們接下來要講的替換元素和不可替換元素
替換元素瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(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。
常見的替換元素有html中的<img>、<input>、<textarea>、<select>、<object>。
eg1:
<input type="submit" name="submit" value="提交"/>
<input>標(biāo)簽是根據(jù)type屬性來決定是顯示輸入框，還是提交按鈕等等。
| type屬性值 | 描述 |
|---|---|
button |
定義可點擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動腳本）。 |
checkbox |
定義復(fù)選框。 |
file |
定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden |
定義隱藏的輸入字段。 |
image |
定義圖像形式的提交按鈕。 |
password |
定義密碼字段。該字段中的字符被掩碼。 |
radio |
定義單選按鈕。 |
reset |
定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。 |
submit |
定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text |
定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個字符。 |
eg2:
<img src="helloWord.jpg"/>
<img>元素通過src屬性的值來讀取圖片信息并顯示出來，而如果查看html代碼，卻看不到圖片的實際內(nèi)容，而且<img>元素的內(nèi)容通常會被src屬性指定的圖像替換掉；
eg3:
<object>元素
<object> 元素（或者稱作 HTML嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源。
| 屬性 | 描述 |
|---|---|
| data | 一個合法的 URL 作為資源的地址，，需要為 data 和 type 中至少一個設(shè)置值。 |
| type | data 指定的資源的 MIME 類型，需要為 data 和 type 中至少一個設(shè)置值。 |
| usemap | 指向一個 <map>元素的 hash-name；格式為 ‘#’ 加 map 元素 name 元素的值。</map> |
| width | 資源顯示的寬度，單位是 CSS 像素。 |
| height | 資源顯示的高度，單位是 CSS 像素。 |
| name | 瀏覽上下文名稱（HTML5），或者控件名稱（HTML 4）。 |
也有某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如<video>、<audio>、 <picture>和 <canvas>。 通過 CSS content 屬性來插入的對象被稱作匿名可替換元素（anonymous replaced elements）。
html 的大多數(shù)元素是不可替換元素，即其內(nèi)容直接表現(xiàn)給用戶端
<p>不可替換元素</p>
web前端開發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）
width和height在行內(nèi)非替換元素中無效。行內(nèi)非替換元素框的寬度是它的內(nèi)容渲染后（在任何子元素相對偏移之前）的寬度，它的高則是基于字體。
如<a>、<span>是行內(nèi)非替換元素 ，但是浮動后的行內(nèi)非替換元素可以使用width和height。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼