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