1.下表列出了內聯元素和塊級元素的主要區別html
塊級元素 | 行內元素 |
獨佔一行,默認狀況下,其寬度自動填滿其父元素寬度 | 相鄰的行內元素會排列在同一行裏,直到一行排不下,纔會換行,其寬度隨元素的內容而變化 |
能夠設置width,height屬性 | 行內元素設置width,height屬性無效 |
能夠設置margin和padding屬性 | 行內元素起邊距做用的只有margin-left、margin-right、padding-left、padding-right,其它屬性不會起邊距效果。 |
對應於display:block | 對應於display:inline; |
2.按字母順序排列塊級元素主要有瀏覽器
<address> 定義地址
<caption> 定義表格標題
<dd> 定義列表中定義條目
<div> 定義文檔中的分區或節
<dl> 定義列表
<dt> 定義列表中的項目
<fieldset> 定義一個框架集
<form> 建立表單元素
<h1><h2><h3><h4><h5><h6> 標題元素
<hr> 水平線
<legend> 給fieldset元素定義標題
<li> 定義列表項目
<noframes> 爲那些不支持框架的瀏覽器顯示文本,放置於frameset標籤內
<noscript> 爲那些不支持腳本的瀏覽器顯示文本
<ol> 有序列表
<ul> 無序列表
<p> 定義段落
<pre> 定義預格式化文本
<table> 定義表格
<tbody> 定義表格主體
<td> 表格中的標準單元格
<tr> 表格中的行
<tfoot> 表格中的頁腳
<th> 定義表頭單元格
<thead> 定義表格的表頭框架
3.內聯元素有字體
<a> 可定義錨以及超連接
<abbr> 表示一個縮寫形式
<acronym> 表示只取title中首字母的縮寫形式
<b> 字體加粗
<bdo> 可覆蓋默認的文本方向
<big> 大號字體加粗
<br> 換行
<cite> 引用進行定義
<code> 定義計算機代碼文本
<dfn> 定義一個定義項目
<em> 定義爲強調的內容
<i> 斜體文本效果
<img> 向網頁中嵌入一張圖像
<input> 輸入框
<kbd> 定義鍵盤文本
<label> 爲input進行標記/標註
<q> 定義短的引用spa
<s> 表示不許確不相關,卻不該當給予刪除的內容code
<samp> 定義樣本文本orm
<select> 定義單選或者多選菜單
<small> 呈現小號字體效果
<span> 組合文檔中的行內元素
<strong> 語氣更強的強調內容
<sub> 定義下標文本
<sup> 定義上標文本
<textarea> 多行文本輸入控件
<tt> 打字機或者等寬的文本效果
<var> 定義變量htm
<input>和<img>都是行內元素,可是它們是能夠設置寬和高的。這裏就涉及到可替換元素和不可替換元素。圖片
替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。ip
例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來,而若是查看html代碼,則看不到圖片的實際內容;又例如根據<input>標籤的type屬性來決定是顯示輸入框,仍是單選按鈕等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素每每沒有實際的內容,便是一個空元素,例如: <img src=」cat.jpg」 /> <input type="submit" name="submit" value="提交" /> 瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
不可替換元素 html 的大多數元素是不可替換元素,即其內容直接表現給用戶端(例如瀏覽器)。
例如: <p>段落的內容</p> 段落<p>是一個不可替換元素,文字「段落的內容」全被顯示。