以圖例來表述行內(nèi)元素和塊級元素的區(qū)別會更加直觀:
注:行內(nèi)元素會再一條直線上,是在同一行的。我是行內(nèi)元素SPAN標(biāo)簽 我是行內(nèi)元素strong標(biāo)簽
注:塊級元素各占一行。是垂直方向的!
我是塊級元素P標(biāo)簽
如果你要將行內(nèi)元素變成塊級元素,那么就只需要在該標(biāo)簽上加上樣式 display:block; 這里已經(jīng)牽涉到了CSS內(nèi)容。塊級元素可以用樣式控制其高、寬的值。
行內(nèi)元素不可以控制寬和高,除非你想將它轉(zhuǎn)變成為塊級元素。它的寬和高,是隨標(biāo)簽里的內(nèi)容而變化。
然后whyboy站長羅列了,所有行內(nèi)元素和塊級元素標(biāo)簽,做好筆記哦!
<address> | 定義地址 |
<caption> | 定義表格標(biāo)題 |
<dd> | 定義列表中定義條目 |
<div> | 定義文檔中的分區(qū)或節(jié) |
<dl> | 定義列表 |
<dt> | 定義列表中的項(xiàng)目 |
<fieldset> | 定義一個框架集 |
<form> | 創(chuàng)建 HTML 表單 |
<h1> | 定義最大的標(biāo)題 |
<h2> | 定義副標(biāo)題 |
<h3> | 定義標(biāo)題 |
<h4> | 定義標(biāo)題 |
<h5> | 定義標(biāo)題 |
<h6> | 定義最小的標(biāo)題 |
<hr> | 創(chuàng)建一條水平線 |
<legend> | 元素為 fieldset 元素定義標(biāo)題 |
<li> | 標(biāo)簽定義列表項(xiàng)目 |
<noframes> | 為那些不支持框架的瀏覽器顯示文本,于 frameset 元素內(nèi)部 |
<noscript> | 定義在腳本未被執(zhí)行時的替代內(nèi)容 |
<ol> | 定義有序列表 |
<ul> | 定義無序列表 |
<p> | 標(biāo)簽定義段落 |
<pre> | 定義預(yù)格式化的文本 |
<table> | 標(biāo)簽定義 HTML 表格 |
<tbody> | 標(biāo)簽表格主體(正文) |
<td> | 表格中的標(biāo)準(zhǔn)單元格 |
<tfoot> | 定義表格的頁腳(腳注或表注) |
<th> | 定義表頭單元格 |
<thead> | 標(biāo)簽定義表格的表頭 |
<tr> | 定義表格中的行 |
<a> | 標(biāo)簽可定義錨 |
<abbr> | 表示一個縮寫形式 |
<acronym> | 定義只取首字母縮寫 |
<b> | 字體加粗 |
<bdo> | 可覆蓋默認(rèn)的文本方向 |
<big> | 大號字體加粗 |
<br> | 換行 |
<cite> | 引用進(jìn)行定義 |
<code> | 定義計算機(jī)代碼文本 |
<dfn> | 定義一個定義項(xiàng)目 |
<em> | 定義為強(qiáng)調(diào)的內(nèi)容 |
<i> | 斜體文本效果 |
<img> | 向網(wǎng)頁中嵌入一幅圖像 |
<input> | 輸入框 |
<kbd> | 定義鍵盤文本 |
<label> | 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記) |
<q> | 定義短的引用 |
<samp> | 定義樣本文本 |
<select> | 創(chuàng)建單選或多選菜單 |
<small> | 呈現(xiàn)小號字體效果 |
<span> | 組合文檔中的行內(nèi)元素 |
<strong> | 語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容 |
<sub> | 定義下標(biāo)文本 |
<sup> | 定義上標(biāo)文本 |
<textarea> | 多行的文本輸入控件 |
<tt> | 打字機(jī)或者等寬的文本效果 |
<var> | 定義變量 |
<button> | 按鈕 |
<del> | 定義文檔中已被刪除的文本 |
<iframe> | 創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架(即行內(nèi)框架) |
<ins> | 標(biāo)簽定義已經(jīng)被插入文檔中的文本 |
<map> | 客戶端圖像映射(即熱區(qū)) |
<object> | object對象 |
<script> | 客戶端腳本 |