游戲網(wǎng)站風(fēng)格dz論壇seo
目錄
?1.表格標(biāo)簽：
前言:
定義表格:
總結(jié)：
2.表單標(biāo)簽：
前言：
表單的定義：
表單的屬性：
表單控件：
3.列表標(biāo)簽：
前言:
定義列表：
1.有序列表：
2.無序列表：
3.定義列表：
示例代碼如下:
總結(jié)：
?1.表格標(biāo)簽：
前言:
在HTML中<table>標(biāo)簽是用來定義表格的。定義完之后發(fā)現(xiàn)其結(jié)構(gòu)和Excel的標(biāo)簽是非常相似的，都有行，列，單元格，表頭等等，但是Excel畢竟還是專業(yè)，不像HTML既不支持排序又不支持求和，還不支持很多數(shù)學(xué)計(jì)算，只能用來展示數(shù)據(jù)。
HTML常用的圖片標(biāo)簽和超鏈接標(biāo)簽-CSDN博客?，?HTML常用文本標(biāo)簽-CSDN博客
定義表格:
在表格標(biāo)簽有：
- <table>：表示表格，表格的所有內(nèi)容需要寫在<table>和</table>之間。
- <tr>：是table row的簡稱，表示表格的每一行，表格中有多少個(gè)<tr>標(biāo)簽就表示有多少行數(shù)據(jù)。
- <td>：是table datacell的簡稱，表示表格的單元格，這是存放表格數(shù)據(jù)的標(biāo)簽，單元格的數(shù)據(jù)可以是文本，圖片，列表，段落，表單，水平線，表格等多種形式。
- <th>：是table heading的簡稱，表示表格的表頭。<th>其實(shí)是<td>單元格的一種變體，本質(zhì)上還是一種單元格。<th>一般位于第一行，充當(dāng)每一列的標(biāo)題。大多數(shù)的瀏覽器會把表頭顯示為粗體居中的文本。
- <caption>：HTML允許使用此標(biāo)簽當(dāng)做表格的標(biāo)題，需要注意的是：一個(gè)表格只能有一個(gè)標(biāo)題。
一般情況下，HTML定義的表格是沒有邊框的，但是我們可以通過設(shè)置<table>標(biāo)簽的border屬性來設(shè)置表格的邊框?qū)挾?#xff0c;單位是像素(px).
HTML的<table>標(biāo)簽也支持單元格的合并，跨行合并和跨列合并，如下：
- rowspan：表示跨行合并，在HTML中，允許我們使用rowspan特性來表明單元格索要跨越的行數(shù)。rowspan表示向下合并單元格。
- colspan：表示跨列合并，在HTML中，允許我們使用colspan的特性來表明單元格索要跨越的列數(shù)。colspan表示向右合并單元格。
- 每次合并n個(gè)單元格記得要n-1個(gè)<td>標(biāo)簽。
一個(gè)基本的表格定義如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- border在是邊框這里是設(shè)置邊框?yàn)?像素 --><table border="1" style="border-collapse: collapse;"><!-- 整個(gè)表格的標(biāo)題 --><caption>此表格為網(wǎng)頁信息表</caption><tr><!-- 第一行 --><th>網(wǎng)站名</th><th>網(wǎng)站地址</th><th>網(wǎng)站作用</th></tr><tr><td>bilibili</td><td>https://www.bilibili.com/?from_start_menu</td><td>以視頻為主流的網(wǎng)站</td></tr><tr><!-- 向下合并一個(gè)單元格 --><td rowspan="2">淘寶</td><td>https://www.taobao.com/</td><td>以購物為主流的網(wǎng)站</td></tr><tr><!-- 向右合并一個(gè)單元格 --><td colspan="2">https://uland.taobao.com/sem/tbsearch?refpid=mm_26632360_8858797_29866178&keyword=%E5%A5%B3%E8%A3%85&clk1=2d5e46421962bba06c0498319872fcd7&upsId=2d5e46421962bba06c0498319872fcd7</td></tr></table></body></html>上述代碼的運(yùn)行結(jié)果如下圖：
總結(jié)：
表格標(biāo)簽在如今的網(wǎng)頁設(shè)計(jì)中依然是有用的，因?yàn)楸砀衲軌蚋鼫?zhǔn)確分明直觀的展示數(shù)據(jù)，后面學(xué)習(xí)了javascript就可以替換表格中的數(shù)據(jù)了。
2.表單標(biāo)簽：
前言：
如果想要通過網(wǎng)頁來收集一些用戶的信息(如電話，郵箱地址，用戶名等)，就需要用HTML表單，表單可以接收用戶輸入的信息，然后將其發(fā)送到后端應(yīng)用程序，如PHP,Java,Python等，后端應(yīng)用程序?qū)⒏鶕?jù)定義好的業(yè)務(wù)邏輯對表單傳遞進(jìn)來的數(shù)據(jù)進(jìn)行處理。
其實(shí)表單也屬于HTML文檔中的一部分，其中包含了輸入框，復(fù)選框，單選按鈕，提交按鈕等不同的表單控件，用戶通過修改表單中的元素(如輸入文本，選擇某個(gè)選項(xiàng)等)來完成表單，通過表單中提交按鈕將表單數(shù)據(jù)提交給后端的程序。
表單的定義：
在HTML中如果需要?jiǎng)?chuàng)建表單則需要用到<form>標(biāo)簽，語法如下:
<form action="URL" method="GET|POST">表單里的元素
</form>說明如下:
- action：屬性用來指明表單中的數(shù)據(jù)要提交到的頁面。
- method：表示提交數(shù)據(jù)的方式，分為GET和POST，他們區(qū)別是：
- GET：用戶點(diǎn)擊提交之后，要提交的信息會被顯示在頁面的地址欄中，一般情況下，GET提交并不建議包含密碼，因?yàn)椴话踩?/li>
- POST：如果表單包含密碼這種信息，建議使用POST方式提交，這樣數(shù)據(jù)會傳到后臺并不會在地址欄中顯示，相對來說安全。
表單的屬性：
HTML為<form>標(biāo)簽提供了一些專用的屬性，其中action和method是最常用的兩個(gè)屬性，如下表:
| 屬性 | 可選值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5中不再支持，設(shè)置服務(wù)器接收的文件類型。 |
| accept-charset | character_set | 設(shè)置表單數(shù)據(jù)的字符集(默認(rèn)為HTML文檔字符集)。 |
| action | URL | 設(shè)置要將表單提交到何處(默認(rèn)為當(dāng)前頁面)。 |
| autocomplete | on，off | 設(shè)置是否啟用表單的自動(dòng)完成功能(默認(rèn)打開)。 |
| enctype | application/x-www-form-urlencoded,multipart/form-data,text/plain | 設(shè)置在提交表單數(shù)據(jù)之前如何對數(shù)據(jù)進(jìn)行編碼(適用于method="post"的情況)。 |
| method | get，post | 設(shè)置使用哪種HTTP方法來提交表單數(shù)據(jù)(默認(rèn)為get)。 |
| name | text | 設(shè)置表單的名稱。 |
| novalidate | novalidate | 如果使用該數(shù)據(jù)，則提交表單時(shí)不進(jìn)行驗(yàn)證。 |
| target | _blank,_self,_parent,_top | 設(shè)置在何處打開action屬性設(shè)定的鏈接(默認(rèn)為_self) |
表單控件：
在HTML中表單是用來收集用戶數(shù)據(jù)的，但是用戶的數(shù)據(jù)需要填寫在表單控件里面，如下是HTML表單中可以包含的表單控件：
| 控件/標(biāo)簽 | 描述 |
|---|---|
| <input> | 定義輸入框。 |
| <textarea> | 定義文本域(一個(gè)可以輸入多行文本的控件)。 |
| <label> | 為表單中的各個(gè)控件定義標(biāo)題。 |
| <fieldset> | 定義一組相關(guān)的表單元素，并使用邊框包裹起來。 |
| <legend> | 定義<fieldsel>元素的標(biāo)題。 |
| <select> | 定義下拉列表。 |
| <optgroup> | 定義選項(xiàng)組。 |
| <option> | 定義下拉列表中的選項(xiàng)。 |
| <button> | 定義一個(gè)可以點(diǎn)擊的按鈕。 |
| <datalist> | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表。 |
| <keygen> | 定義表單的密鑰對生成器字段。 |
| <output> | 定義一個(gè)計(jì)算結(jié)果。 |
下面就通過代碼來實(shí)現(xiàn)一個(gè)完整的示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><form action="./userinfo.php" method="POST"><!-- 文本輸入框控件 --><label>用戶名： </label><input name="username" type="text"><br><!-- 密碼框控件 --><label>密 碼： </label><input name="password" type="password"><br><!-- 下拉菜單控件 --><label>性 別：</label><select name="sex"><option value="1">男</option><option value="2">女</option><option value="3">未知</option></select><br><!-- 復(fù)選框控件 --><label>愛 好：</label><input type="checkbox" name="hobby" value="1">聽音樂<input type="checkbox" name="hobby" value="2">看電影<input type="checkbox" name="hobby" value="3">運(yùn)動(dòng)<br><!-- 單選按鈕控件 --><label>學(xué) 歷：</label><input type="radio" name="education" value="1">小學(xué)<input type="radio" name="education" value="2">中學(xué)<input type="radio" name="education" value="3">本科<input type="radio" name="education" value="4">碩士<input type="radio" name="education" value="5">博士<br><!-- 按鈕 --><input type="submit" value="提 交">  <input type="reset" value="重 置"></form></body></html>填寫好用戶數(shù)據(jù)，點(diǎn)擊“提交”按鈕，即可使用 POST 方式將數(shù)據(jù)提交到當(dāng)前目錄下的 userinfo.php 頁面，在服務(wù)器端通過 PHP 代碼可以接收提交的數(shù)據(jù)。
3.列表標(biāo)簽：
前言:
HTML列表(List)可以將若干條相關(guān)的內(nèi)容整理起來，讓內(nèi)容看起來更加分明，列表里面可以放文本，圖像，鏈接，也可以在列表中定義另一個(gè)列表（嵌套）。
定義列表：
在HTML我們有三種方式可以定義列表:
- 有序，<ol>+<li>標(biāo)簽。
- 無序，<ul>+<li>標(biāo)簽。
- 定義列表,<dl>+<dt>+dd>標(biāo)簽。
1.有序列表：
在HTML中，<ol>標(biāo)簽是用來表示有序列表，有序列表的每一項(xiàng)前面都會有一個(gè)數(shù)字表示這一項(xiàng)是這個(gè)列表的第幾個(gè)。一般都是<ol>和<li>一起出現(xiàn)，在有序列表中可以包含圖片，文本，鏈接，另一個(gè)列表。
2.無序列表：
<ul>無序列表中沒有順序之分，每一項(xiàng)前面使用●表示，一般都是跟<li>標(biāo)簽配合使用的。
3.定義列表：
<dl>標(biāo)簽是用于創(chuàng)建列表的，定義的列表由標(biāo)題和描述兩部組成，描述是對標(biāo)題的解釋，標(biāo)題是最描述的總結(jié)和提煉。其中<dt>是定義標(biāo)題的，<dd>是定義描述的
示例代碼如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>這里存放了一個(gè)網(wǎng)頁的標(biāo)題</title>
</head><body><dl><dt>有序列表示例</dt><dd><ol><li>有序列表第一項(xiàng)</li><li>有序列表第二項(xiàng)</li><li>有序列表第三項(xiàng)</li></ol></dd><dd>上面定義了3個(gè)有序列表</dd><dt>無序列表示例</dt><dd><ul><li>無序列表第一個(gè)</li><li>第二個(gè)</li><li>第三個(gè)</li></ul></dd><dd>上面定義了3個(gè)無序列表</dd><dt>為啥沒有定義列表的，因?yàn)樗旧砭褪?lt;/dt></dl>
</body>
</html>上述代碼的運(yùn)行結(jié)果如下:
總結(jié)：
<ol>表示有序列表，里面的<li>表示列表的每一項(xiàng)，前面默認(rèn)使用阿拉伯?dāng)?shù)字。<ul>表示無序列表，其中<li>表示列表的每一項(xiàng)，前面使用●符號作為每一項(xiàng)的標(biāo)記。定義列表中使用<dl>,其中<dt>表示術(shù)語，<dd>表示描述，一般情況下，么個(gè)<dt>搭配一個(gè)<dd>,一個(gè)<dl>可以包含多對<dt>和<dd>.