HTMLCSS學習筆記（六）-元素類型

素類型

根據css顯示分類，XHTML元素被分為 ?
三種類型:
塊狀元素，內聯元素，可變元素 ?

&& ?

三種類型：塊狀元素，內聯元素，內聯塊元素(css2.1增加)

塊狀元素的特點

A:塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區域，
B:默認情況下，塊狀元素都會占據一行，通俗地說，兩個相鄰塊狀元素不會出現并列顯示的現象；默認情況下，塊狀元素會按順序自上而下排列。
C:塊狀元素都可以定義自己的寬度和高度。
D:塊狀元素一般都作為其他元素的容器，它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個子。

內聯元素的特點

A:內聯元素的表現形式是始終以行內逐個進行顯示；
B:內聯元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀；
C:內聯元素也會遵循盒模型基本規則，如可以定義padding,border,margin,background等屬性，但個別屬性不能正確顯示;(padding-top:;margin-top/bottom:;)

可變元素

需要根據上下文關系確定該元素是塊元素或者內聯元素。

常見的標簽

塊

div -最常用的塊級元素
dl - 和dt-dd 搭配使用的塊級元素
form - 交互表單
h1 -h6- 大標題
hr - 水平分隔線
ol – 有序列表
p - 段落
ul - 無序列表
li
fieldset - 表單字段集
colgroup-col - 表單列分組元素
table-tr-td  表格及行-單元格

內聯

a –超鏈接（錨點）                               
b - 粗體(不推薦) 
br - 換行                             
i - 斜體
em - 強調                             
img - 圖片                         
input - 輸入框               
label - 表單標簽                  
span - 常用內聯容器，定義文本內區塊
strong - 粗體強調
sub - 下標   
sup - 上標
textarea - 多行文本輸入框
u - 下劃線
select - 項目選擇

元素類型的轉換

display屬性

盒子模型可通過display屬性來改變默認的顯示類型

A、大部分塊元素display屬性值默認為block，其中列表li的默認值為list-item。
B、大部分內聯元素的display屬性值默認為inline,其中img,input，默認為inline-block（行內塊元素）。

inline-block ( 行內塊元素 )

設置一個元素在一個容器中垂直居中，必須更改默認的display屬性值為inline-block;并加上同級元素（標尺）

（同級元素[標尺]樣式設置為vertical-align:middle;width:0;height:100%;display:inline-block;）

三個條件：

必須給容器（父元素）加上text-align:center;
必須給當前元素轉成行內塊元素（display:inline-block;）再給當前元素加上vertical-align:middle;
在當前元素的后面（沒有回車）加上同級元素span;并對span進行vertical-align:middle;width:0;height:100%;display:inline-block

元素類型案例

置換元素

一、引題
在之前的淺談HTML中的塊級元素和內聯元素中了解到了內聯元素一般是不能設置寬高的，但是也有特殊。比如img是內聯元素，但可以設置寬高，這肯定讓不少人迷惑。這樣我們就要引入HTML中置換元素的概念（非置換元素在w3c中沒有給出明確的解釋，姑且我們就把除置換元素外的元素當作非置換元素吧）。
二、置換元素與非置換元素
a) 置換元素：瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。例如：瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內容；<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素往往沒有實際的內容，即是一個空元素。

? 置換元素在其顯示中生成了框，這也就是有的內聯元素（img,input）能夠設置寬高的原因。

? b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（如瀏覽器）。

本文轉自知乎號：千鋒HTML5學院

顏色設置的簡便方法

昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作》（目錄在結尾）中學習了設置單元格以及其中內容的空間間距和背景顏色。

其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性，而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？

當然有！

開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。

<colgroup></colgroup>標簽是一個給行向單元格打組的標簽，在頁面中不會顯示。

<col></col>標簽是來具體設置行向單元格數量和顏色的標簽。

示例代碼如下：

<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

這段代碼添加到"第一個頁面.html"當中就可以，具體代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

頁面效果如圖：

因為第一列和最后一列只有一行所以，也都變紅了。

其中span的數量代表行數。

如果把span等號后面的數改成2，因為表格只有兩行，所以整個表格都紅了。

表格嵌套

我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

代碼示例如下：我們把"一列一行"分割成列向兩個單元格。

<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border = "1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

這段代碼替換文字"一列一行"即可。

頁面效果如圖所示：

留個思考題，大家可以思考一下行向分割單元格怎么寫。

今天的內容結束了。

全部示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

學到這里，相信大家已經有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話，學完16進制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結束這套教程。

如果您有任何疑問或不解歡迎關注并私信我。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

例

一個簡單的 HTML 表格，帶有兩個單元格：

<tr>

</tr>

</table>

瀏覽器支持

所有主流瀏覽器都支持 <td> 標簽。

標簽定義及使用說明

<td> 標簽定義 HTML 表格中的標準單元格。

HTML 表格有兩種單元格類型：

表頭單元格 - 包含頭部信息（由 <th> 元素創建）
標準單元格 - 包含數據（由 <td> 元素創建）

<th> 元素中的文本通常呈現為粗體并且居中。

<td> 元素中的文本通常是普通的左對齊文本。

提示和注釋

提示：如果需要將內容橫跨多個行或列，請使用 colspan 和 rowspan 屬性！

HTML 4.01 與 HTML5之間的差異

HTML 5 中不再支持 HTML 4.01 中的某些屬性。

屬性

屬性	值	描述
abbr	text	HTML5 不支持。規定單元格中內容的縮寫版本。
align	leftrightcenterjustifychar	HTML5 不支持。規定單元格內容的水平對齊方式。
axis	category_name	HTML5 不支持。對單元格進行分類。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已廢棄。規定單元格的背景顏色。
char	character	HTML5 不支持。規定根據哪個字符來進行內容的對齊。
charoff	number	HTML5 不支持。規定對齊字符的偏移量。
colspan	number	規定單元格可橫跨的列數。
headers	header_id	規定與單元格相關聯的一個或多個表頭單元格。
height	pixels%	HTML5 不支持。HTML 4.01 已廢棄。設置單元格的高度。
nowrap	nowrap	HTML5 不支持。HTML 4.01 已廢棄。規定單元格中的內容是否折行。
rowspan	number	設置單元格可橫跨的行數。
scope	colcolgrouprowrowgroup	HTML5 不支持。定義將表頭單元格與數據單元格相關聯的方法。
valign	topmiddlebottombaseline	HTML5 不支持。規定單元格內容的垂直排列方式。
width	pixels%	HTML5 不支持。HTML 4.01 已廢棄。規定單元格的寬度。

全局屬性

<td> 標簽支持 HTML 的全局屬性。

事件屬性

<td> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：1分鐘了解谷歌開發者大會
下一篇：C++知識點 44：繼承中靜態成員的處理

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商