大數(shù)據(jù)開發(fā)基礎(chǔ)之HTML表格與表單

TML作為一種用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言，是制作網(wǎng)頁(yè)必不可少的，但HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language），本著為了更好的了解大數(shù)據(jù)開發(fā)的基礎(chǔ)，今天就帶著大家更進(jìn)一步的了解HTML的使用，HTML的表格與表單。

1.HTML表格

表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來(lái)更簡(jiǎn)潔直觀有序性。

下面給大家?guī)?lái)一些常用的標(biāo)簽：

<table> 表格的最外層容器

<tr> 定義表格行

<th> 定義表頭

<td> 定義表格單元

<caption>定義表格表題

　　<width>:寬度。可以用像素或百分比表示。常用960像素。

　　<border>：邊框，常用值為0。

　　<cellpadding>：內(nèi)容跟邊框的距離，常用值為0。

　　<cellspacing>：?jiǎn)卧衽c單元格之間的間距，常用值為0。

　　<algin>：對(duì)齊方式。

　　<bgcolor>：背景色。

<background>：背景圖片。

<align>: 一行內(nèi)容的水平對(duì)齊方式。

<valign>: 一行內(nèi)容的垂直對(duì)齊方式。

<height>：行高。

創(chuàng)建表格

在HTML網(wǎng)頁(yè)中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。

創(chuàng)建表格的基本語(yǔ)法：

<table>

<tr>

...

</tr>

...

</table>

舉個(gè)例子

其中：table用于定義一個(gè)表格標(biāo)簽。

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

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

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

再比如說(shuō)我們可以建立個(gè)有顏色的格子，如下圖

表格的作用除了可以顯示一個(gè)表格外，有的時(shí)候還可以用于輔助排版。但現(xiàn)在都不怎么使用了，因?yàn)闀r(shí)代的進(jìn)步，以前的表格排版的網(wǎng)頁(yè)已經(jīng)被淘汰了。

2. HTML表單

關(guān)于表單的制定，因?yàn)樵跒g覽器中輸入的內(nèi)容都必須要經(jīng)過(guò)網(wǎng)絡(luò)提交到服務(wù)器端再處理，所以需要把所有的控件都包含在一個(gè)form表單控件中，然后一次提交給服務(wù)器，再由服務(wù)器處理用戶提交的數(shù)據(jù)。

HTML 支持有序列表(有序列表是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。

有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。)無(wú)序列表(無(wú)序列表也是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)“典型的小黑圓圈“進(jìn)行標(biāo)記。)和定義列表(自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。)。

表單常用標(biāo)簽：

form: 表單的最外層容器

input: 用于搜集用戶信息,根據(jù)不同的type屬性值,展示不同的控件

Text：普通的文本輸入框

Password：密碼輸入框

Checkbox：復(fù)選框

Radio：?jiǎn)芜x框

File：上傳文件

Submit：提交按鈕

Reset：重置按鈕

Cols：列

Rows：行

注意事項(xiàng)：

<form id="" name="" method="post/get" action="負(fù)責(zé)處理的服務(wù)端">--輸入系統(tǒng)時(shí)，必須有

Name ：定義表單的名稱；

Method: 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方式，默認(rèn)參數(shù)為：get

Action ：用來(lái)指定表單處理程序的位置(服務(wù)器端腳本處理程序）

Fieldset：把表單分組；

Legend：分組名稱。

id不可重復(fù)，name可重復(fù)，get提交有長(zhǎng)度限制，并且編碼后的內(nèi)容在地址欄可見(jiàn)，post提交沒(méi)有長(zhǎng)度限制，且編碼后內(nèi)容不可見(jiàn)。

舉個(gè)例子

</form>

得到結(jié)果如圖

本期的內(nèi)容比較多，大家可以在平日里多加練習(xí)，這是大數(shù)據(jù)開發(fā)基礎(chǔ)的重要部分，做到能更熟練，更準(zhǔn)確，希望大家能有所進(jìn)步。

篇介紹了html 中文本格式及段落等標(biāo)簽，今天說(shuō)下列表，什么是列表？它就是一種數(shù)據(jù)排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：

無(wú)序列表
有序列表
定義列表

無(wú)序列表 —— ul

無(wú)序列表在每行開始位置顯示一個(gè)符號(hào)，語(yǔ)法如下：

<html>
<body>
<h4>一個(gè)無(wú)序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

顯示效果：

無(wú)序列表的符號(hào)可以通過(guò)在ul 標(biāo)簽上設(shè)置 type 屬性顯示不同的符號(hào)，比如：

1、disc —— 實(shí)心圓點(diǎn) (默認(rèn)類型)
2、circle —— 空心圓圈
3、square —— 實(shí)心方塊

實(shí)例代碼：

<html>
<body>
<h4>一個(gè)無(wú)序列表：</h4>
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個(gè)無(wú)序列表：</h4>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一個(gè)無(wú)序列表：</h4>
<ul type="square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>

顯示效果：

有序列表 —— ol

有序列表使用數(shù)字或字母符號(hào)排列，表示文本按一定順序顯示，語(yǔ)法如下：

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

效果如下：

同無(wú)序列表一樣，在ol上通過(guò)type 屬性設(shè)置使用那種符號(hào)表示順序，有以下幾種：

1、1，表示數(shù)字 1、2、3..... （默認(rèn)數(shù)字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....

顯示效果如下：

html代碼：

<!DOCTYPE html>
<html>
<body>
數(shù)字
<ol type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫字母
<ol type="a">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫字母
<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

有序列表還可以通過(guò)start 屬性設(shè)置起始數(shù)組，如下：

<ol  start="3">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

顯示效果：

定義列表——dl

不同以上2種列表，定義列表主要用來(lái)解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細(xì)地解釋文字，語(yǔ)法如下：

<html>
<body>
<h2>一個(gè)定義列表：</h2>
<dl>
   <dt>計(jì)算機(jī)</dt>
   <dd>用來(lái)計(jì)算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>

顯示效果：

第一行<dt>是要解釋的名詞，第二行標(biāo)簽<dd>是解釋文本，會(huì)自動(dòng)縮進(jìn)。

列表的嵌套

以上三種列表是可以嵌套使用的，看如下示例：

<html>
<body>
<h4>一個(gè)嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果：

每嵌套一層，它的符號(hào)是不一樣的，你可以試試再嵌套一層看看效果。

當(dāng)然，不同列表類型也可互相嵌套，根據(jù)顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無(wú)序列表中嵌套有序列表：

<html>
<body>
<h4>一個(gè)嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ol>
      <li>中國(guó)茶</li>
      <li>非洲茶</li>
      </ol>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果如下：

總結(jié)

列表是網(wǎng)頁(yè)制作中經(jīng)常會(huì)使用的標(biāo)簽，比如在制作網(wǎng)頁(yè)導(dǎo)航欄菜單時(shí)會(huì)經(jīng)常用到ul列表，以后會(huì)講如何通過(guò)ul標(biāo)簽制作一個(gè)下拉菜單，感謝您閱讀及關(guān)注，祝你學(xué)習(xí)愉快。

上篇：前端入門——html 文字格式、標(biāo)題與段落

下篇：前端入門——html 超鏈接

多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。

HTML表單的一些基本原則

選擇適合于收集的數(shù)據(jù)類型和提供交互方式的控件。
清楚標(biāo)記每一個(gè)控件，這樣用戶就可以理解其功能。
盡可能將標(biāo)簽對(duì)齊。將控件的左邊緣對(duì)齊。
將相關(guān)的標(biāo)簽分組，并且通過(guò)設(shè)計(jì)中使用空白將每一個(gè)分組分開。
表單上的控件順序應(yīng)該類似于用戶操作他們的順序。

創(chuàng)建基本HTML表單

首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。

創(chuàng)建HTML結(jié)構(gòu)

包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁(yè)面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁(yè)面中可以使用任何HTML標(biāo)簽?；镜谋韱问褂肍ROM標(biāo)簽來(lái)說(shuō)明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過(guò)表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

合并控件

兩個(gè)常用的基本控件：文本框和提交按鈕。

文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過(guò)名稱準(zhǔn)確訪問(wèn)其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。

示例：一個(gè)完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

使用多個(gè)表單

可以在一個(gè)HTML頁(yè)面中包含多個(gè)表單，注意下一個(gè)表單的FORM開始之前需要結(jié)束前一個(gè)FORM表單。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創(chuàng)建表單控件

創(chuàng)建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大??；MAXLENGTH指明用戶鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

創(chuàng)建文本區(qū)域

文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見(jiàn)文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。

值	說(shuō)明
off	禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行
virtual/soft	各行顯示為換行，但是換行并沒(méi)有被發(fā)送到服務(wù)器
physica/hard	啟用了單詞換行

<inputarea name="" rows="" cols="" wrap="">

創(chuàng)建密碼框

創(chuàng)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

創(chuàng)建復(fù)選框

取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：

<input type="checkbox" name="" checked value="">

創(chuàng)建單選按鈕

語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

創(chuàng)建列表框

用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶可以通過(guò)按下crtl鍵并單擊多個(gè)選項(xiàng)來(lái)選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

創(chuàng)建隱藏域

<input type="hidden" name="text"value="">

實(shí)現(xiàn)上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過(guò)使用MIME碼指定。常用的格式如下：

超文本標(biāo)記語(yǔ)言文本 .html,.html text/html

　　普通文本：txt text/plain

　　word文檔：application/msword

　　RTF文本：rtf application/rtf

　　GIF圖形：gif image/gif

　　JPEG圖形：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂(lè)文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂(lè)文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

整合營(yíng)銷服務(wù)商

大數(shù)據(jù)開發(fā)基礎(chǔ)之HTML表格與表單

無(wú)序列表 —— ul

有序列表 —— ol

定義列表——dl

列表的嵌套

總結(jié)

HTML表單的一些基本原則

創(chuàng)建基本HTML表單

創(chuàng)建表單控件

更多提交表單的信息

您的項(xiàng)目需求