html5中列表和表格的區(qū)別有哪些

這篇文章主要介紹“html5中列表和表格的區(qū)別有哪些”，在日常操作中，相信很多人在html5中列表和表格的區(qū)別有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5中列表和表格的區(qū)別有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

html5中列表和表格的區(qū)別：1、表格主要是用于顯示數(shù)據(jù)的，而列表主要是用于給數(shù)據(jù)進(jìn)行布局；2、表格是使用table標(biāo)簽配合tr、td、th等標(biāo)簽進(jìn)行定義的，列表是利用li標(biāo)簽配合ol、ul等標(biāo)簽進(jìn)行定義的。

本文操作環(huán)境：Windows10系統(tǒng)、html5版、Dell G3電腦。

html5中列表和表格的區(qū)別是什么

1.表格標(biāo)簽

1.1表格的基本使用

• 表格主要用于顯示、 展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格就顯得很重要。 一個(gè)清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。

• pink老師：表格不是用來布局頁面的，而是用來展示數(shù)據(jù)的。
  

1.2表格的基本用法

<table>
    <tr>
        <td>單元格內(nèi)的文字</td>
        ...    </tr>
    ...</table>

1. <table></table>是用于定義表格的標(biāo)簽。

2. <tr></tr>標(biāo)簽用于定義表格中的一行，必須嵌套在<table></table>標(biāo)簽中。

3. <td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。

4. 字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內(nèi)容。

1.3表頭單元格標(biāo)簽

• 一般表頭單元格位于表格的第一行或者第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示。

• <th>標(biāo)簽標(biāo)示HTML表格的表頭部分（table head）的縮寫。

<table>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>電話</th>
    </tr>
    <tr>
        <td>內(nèi)容1</td>
        <td>內(nèi)容2</td>
        ...    </tr></table>

pink老師總結(jié)：表頭單元格也是單元格，常用于表格第一行，突出重要性，表頭單元格里面的文字會加粗居中顯示。

1.4表格屬性

案例

案例分析：

1. 第一行里面是th表頭單元格；

2. 第二行開始里面是td普通單元格；

3. 單元格里面可以放任何元素，文字鏈接圖片等都可以；

4. 用到寬度和高度邊框cellpadding和cellspacing；

5. 表格瀏覽器中對其align；

1.5表格結(jié)構(gòu)標(biāo)簽

• 使用場景:因?yàn)楸砀窨赡芎荛L,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分.在表格標(biāo)簽中，分別用：**<thead>**標(biāo)簽 表格的頭部區(qū)域、 **<tbody>**標(biāo)簽 表格的主體區(qū)域. 這樣可以更好的分清表格結(jié)構(gòu)。

• 內(nèi)容

1. <thead></thead>：用于定義表格的頭部，<thead>內(nèi)部必須擁有<tr>標(biāo)簽，一般是位于第一行。

2. <tbody></tbody>：用于定義表格的主體，主要用于放數(shù)據(jù)本體。

3. 以上標(biāo)簽都是放在<table></table>標(biāo)簽中。

1.6合并單元格

特殊情況下，可以把多個(gè)單元格合并為一個(gè)單元格，這里同學(xué)們會最簡單的合并單元格即可。

1. 合并單元格

2. 目標(biāo)單元格

3. 合并單元格的步驟

1.6.1合并單元格方式：

• 跨行合并：rowspan=“合并單元格的個(gè)數(shù)”

• 跨列合并：colspan=“合并單元格的個(gè)數(shù)”

1.6.2目標(biāo)單元格：

• 跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼

• 跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼

1.6.3合并單元格三部曲

1. 先確定是跨行還是跨列合并；

2. 找到目標(biāo)單元格，寫上合并方式=合并的單元格數(shù)量。比如：<td colspan="2"></td>;

3. 刪除多余的單元格。

1.7表格總結(jié)

表格學(xué)習(xí)整體可以分為三大部分：

1. 表格的相關(guān)標(biāo)簽

2. 表格的相關(guān)屬性

3. 合并單元格

• 表格的相關(guān)標(biāo)簽：table標(biāo)簽、tr行標(biāo)簽、td單元格標(biāo)簽、th表頭單元格標(biāo)簽、thead表格頭部區(qū)域標(biāo)簽、tbody表格主體區(qū)域標(biāo)簽

• 表格的相關(guān)屬性：align、border、cellpadding、cellspacing、width

• 合并單元格

2.列表標(biāo)簽

• 表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。

• 列表最大的特點(diǎn)就是整齊、整潔、有序，它作為布局會更加自由和方便。

• 根據(jù)使用情景不同，列表可以分為三大類：無序列表、 有序列表和自定義列表。
  

2.1無序列表

<ul>標(biāo)簽表示 HTML 頁面中項(xiàng)目的無序列表，一般會以項(xiàng)目符號呈現(xiàn)列表項(xiàng)，而列表項(xiàng)使用 <li>標(biāo)簽定義。
無序列表的基本語法格式如下：

<ul>
    <li>列表項(xiàng)1</li>
    <li>列表項(xiàng)2</li>
    <li>列表項(xiàng)3</li>
    ...</ul>

1. 無序列表的各個(gè)列表項(xiàng)之間沒有順序級別之分，是并列的。

2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。

3. <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。

4. 無序列表會帶有自己的樣式屬性，但是在實(shí)際使用的時(shí)候，我們會使用CSS來設(shè)置。

2.2有序列表

• 有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)會按照一定的順序排列定義。

• 在HTML標(biāo)簽中，<ol>標(biāo)簽用于定義有序列表，列表排序以數(shù)字來顯示，并且使用<li>標(biāo)簽來定義列表項(xiàng)。

• 有序列表的基本語法格式如下：

<ol>
    <li>列表項(xiàng)1</li>
    <li>列表項(xiàng)2</li>
    ...</ol>

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法也是不被允許的。

2. <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。

3. 有序列表會帶有自己的樣式屬性，但在實(shí)際使用的時(shí)候，我們一般會使用CSS來設(shè)置。

2.3 自定義列表

自定義列表的使用場景：

自定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。

在HTML標(biāo)簽中，<dl>標(biāo)簽用于定義描述列表（或定義列表），該標(biāo)簽會與<dt>（定義項(xiàng)目/名字）和<dd>（描述每一個(gè)項(xiàng)目/名字）一起使用。

其基本語法如下：

<dl>
    <dt>名詞</dt>
    <dd>名詞2</dd>
    <dd>名詞3</dd>
    ...</dl>

1. <dl></dl>里面只能包含<dd>和<dt>.

2. <dd>和<dt>沒有個(gè)數(shù)限制，經(jīng)常是一個(gè)<dt>對應(yīng)多個(gè)<dd>.

• 在 HTML 標(biāo)簽中，

• 標(biāo)簽用于定義描述列表（或定義列表），該標(biāo)簽會與      （定義項(xiàng)目/名字）和

• （描述每一個(gè)項(xiàng)目/名字）一起使用。

2.4列表總結(jié)

注意：

1. 學(xué)會什么時(shí)候使用無序列表，什么時(shí)候使用自定義列表。

2. 無序列表和自定義列表代碼怎么寫？

3. 列表布局在學(xué)習(xí)完CSS后再完成。

3.表單標(biāo)簽

現(xiàn)實(shí)中的表單，類似于我們?nèi)ャy行辦理信用卡填寫的單子。

網(wǎng)頁中的表單展示

3.1為什么需要表單

• 使用表單的目的就是為了用戶的信息。

• 在我們網(wǎng)頁中，我們也需要跟用戶進(jìn)行交互，手機(jī)用戶資料，此時(shí)就需要填寫表單。

3.2表單的組成

在HTML中，一個(gè)完整的表單通常由表單域、表單控件和提示信息3個(gè)部分組成。

3.3表單域

表單域是一個(gè)包含表單元素的區(qū)域。

在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞。

<form>會把它范圍內(nèi)的表單元素信息提交給服務(wù)器。

<form action="url地址" method="提交方式" name="表單域名稱">
    各種表單控件</form>

常用屬性：

基礎(chǔ)班來說,我們暫時(shí)不用表單域提交數(shù)據(jù),只需要寫上 form 標(biāo)簽即可. 就業(yè)班等學(xué)習(xí)服務(wù)器編程階段會重新講解.

這里只需要記住兩點(diǎn):

1. 在我們寫表單元素之前,應(yīng)該有個(gè)表單域把他們進(jìn)行包含.

2. 表單域是 form標(biāo)簽

3.4表達(dá)控件（表單元素）

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。

主要有以下內(nèi)容：

1. input輸入表單元素

2. select下拉表單元素

3. textarea文本域元素

3.4.1<input>表單元素

在英文單詞中，input是輸入的意思，而在表單元素中<input>標(biāo)簽用于收集用戶信息。

在<input>標(biāo)簽中，包含一個(gè)type屬性，根據(jù)不同的type屬性值，輸入字段擁有很多形式（文本字段、復(fù)選框、掩碼后的文本空間、單選按鈕、按鈕等）。

<input type="屬性值" />

• <input>標(biāo)簽為單標(biāo)簽

• type屬性設(shè)置不同的屬性值用來指定不同的控件類型

type屬性的屬性值及其描述如下：

除了type屬性外，<input>標(biāo)簽還有其他很多屬性，其常用屬性如下：

1. name和value是每個(gè)表單元素都有的屬性值，主要是給后臺人員使用。

2. name表單元素的名字，要求單選按鈕和復(fù)選框要有相同的name值。

3. checked屬性主要是針對于單選框和復(fù)選框，主要作用-打開頁面，就要可以默認(rèn)選中某個(gè)表單元素。

4. maxlength是用戶可以在表單元素輸入的最大字符數(shù)，一般較少使用。

1.有些表單元素想剛打開的時(shí)候就迷人顯示幾個(gè)文字怎么做

可以給這些表單元素設(shè)置value屬性=“值”

用戶名：<input type="text" value="請輸入用戶名" />

2.頁面中的表單元素很多，如何區(qū)別不同的表單元素？

name屬性：當(dāng)前input表單的名字，后臺可以通過這個(gè)name屬性找到這個(gè)表單，頁面中的表單很多，name的主要作用就是區(qū)別于不同的表單。

用戶名：<input type="text" value="請輸入用戶名" name="username">

• name 屬性后面的值，是自定義的；

• radio（或者CheckBox）如果是一組，我們必須給他們命名相同的名字；

<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

3.如果頁面一打開就讓某個(gè)單選按鈕或者復(fù)選框的按鈕是選中狀態(tài)？

checked屬性：表示默認(rèn)選中狀態(tài)，用于單選框和復(fù)選框。

性別：<input type="radio" name="sex" value="男" checked="checked" /> 男<input type="radio" name="sex" value="女" checked="checked" /> 女

4.如何讓input表單元素展示不同的形態(tài)？比如單選框或者文本框

type屬性：type屬性可以讓input表單元素設(shè)置不同的形態(tài)；

<input type="radio" name="sex" value="男" checked="checked" />男<input type="text" value="請輸入用戶名">

3.4.2<label>標(biāo)簽

• <label>標(biāo)簽為input元素定義標(biāo)注（標(biāo)簽）；

• <label>標(biāo)簽用于綁定一個(gè)表單元素，當(dāng)點(diǎn)擊<label>標(biāo)簽內(nèi)的文本時(shí)，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到或者選擇對應(yīng)的表單元素上面，用來增加用戶體驗(yàn)。

• 語法：

<label for="sex">男</label><input type="radio" name="sex" id="sex" />

核心：<label>標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同。

3.4.3<select>表單元素

• 使用場景：在頁面中，如果有多個(gè)選項(xiàng)讓用戶選擇，并且想要節(jié)約頁面空間時(shí)，我們可以使用<select>標(biāo)簽空間定義下拉列表。

• 語法：

<select>
    <option>選項(xiàng)1</option>
    <option>選項(xiàng)2</option>
    <option>選項(xiàng)3</option>
    ...</select>

1. <slect>中至少包含一對<option>;

2. 在<option>中定義selected= “selected”時(shí)，當(dāng)前默認(rèn)選中項(xiàng)。

3.4.4<textarea>表單元素

• 使用場景：當(dāng)用戶輸入內(nèi)容較多的情況下，我們就不能使用文本框表單了，此時(shí)我們可以使用<textarea>標(biāo)簽。

• 在表單元素中，<textarea>標(biāo)簽是用于定義多行文本輸入的控件。

• 使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評論。

• 語法：

<textarea rows="3" cols="20">
    文本內(nèi)容</textarea>

1. 通過<textarea>標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框。

2. cols=“每行中的字?jǐn)?shù)”，rows=“顯示的行數(shù)”；實(shí)際開發(fā)中一般使用CSS來改變大小

3.5表單元素的總結(jié)

1. 在表單元素中我們學(xué)習(xí)了三大組：input輸入表單元素 select下拉表單元素 textarea文本域表單元素；

2. 這三組表單元素都應(yīng)該包含在form表單域里面，并且有name屬性。

<form>
    <input type="text" name="username">
    <select name="jiguan">  
        <option>北京</option>
        <option>寧夏</option>
        ...    </select>
    <textarea name="message"></textarea></form>

3. 有三個(gè)名字非常相似的標(biāo)簽：

• 表單域form使用場景：提交區(qū)域內(nèi)表單元素給后臺服務(wù)器；

• 文件域file是input type屬性值，使用場景：上傳文件；

• 文本域textarea使用場景：可以輸入多行文字，比如留言板、網(wǎng)站介紹等

4. 我們當(dāng)前階段不需要提交表單元素，所以我們只負(fù)責(zé)表單元素的外觀形態(tài)即可。

4.綜合案例

到此，關(guān)于“html5中列表和表格的區(qū)別有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！