HTML基本標籤、表單相關標籤
阿新 • • 發佈：2018-12-11
HTML基本標籤
標題標籤及水平線：
標題標籤
<h1></h1>~<h6></h6>標籤在HTML頁面中建立標題，標題預設加粗，換行。
水平線 在 HTML 頁面中建立一條水平分隔線，用於定義內容中的主題變化。
- size屬性：水平線的高度，單位畫素
- noshade屬性：沒有陰影，取值：noshade，表示顯示純色
<!--水平線-->
<hr />
<hr size="5"/>
<hr noshade="noshade" />
字型標籤 用於設定字型尺寸、字型顏色等。
- size屬性：設定字型的大小。可能的值：從 1 到 7 的數字。瀏覽器預設值是 3。
- color屬性：設定字型的顏色
- 顏色的取值：#xxxxxx 或 colorname
- #xxxxxx 表示使用紅綠藍三原色設定顏色。
- 紅綠藍分別取值：00 – FF，此處使用16進位制。（FF就是十進位制的255）
- #000000 表示黑色，#FFFFFF白色
- #FF0000紅色，#00FF00綠色，#0000FF藍色
- 紅綠藍2位取值相同可以省略成1位。例如：#112233 簡化成#123
- colorname 使用英文單詞確定顏色。red 紅色，blue 藍色，green綠色
<!--字型--> <font size="7">我個大</font> <font color="#FF0000">我很紅</font> <font color="blue">我是藍色的</font>
格式化標籤
<!-- 格式化-->
<b>粗體</b>
<i>斜體</i>
段落標籤
<!-- 段落標籤 --> <p> 噫籲嚱，危乎高哉！蜀道之難，難於上青天！蠶叢及魚鳧，開國何茫然！爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。地崩山摧壯士死，然後天梯石棧相鉤連。上有六龍回日之高標，下有衝波逆折之回川。黃鶴之飛尚不得過，猿猱欲度愁攀援。青泥何盤盤，百步九折縈巖巒。捫參歷井仰脅息，以手撫膺坐長嘆。<br/> 問君西遊何時還？畏途巉巖不可攀。但見悲鳥號古木，雄飛雌從繞林間。又聞子規啼夜月，愁空山。蜀道之難，難於上青天，使人聽此凋朱顏！連峰去天不盈尺，枯鬆倒掛倚絕壁。飛湍瀑流爭喧豗，砯崖轉石萬壑雷。其險也如此，嗟爾遠道之人胡為乎來哉！ 劍閣崢嶸而崔嵬，一夫當關，萬夫莫開。所守或匪親，化為狼與豺。朝避猛虎，夕避長蛇；磨牙吮血，殺人如麻。錦城雖雲樂，不如早還家。蜀道之難，難於上青天，側身西望長諮嗟！ </p>
圖片標籤 在html頁面中引用一張圖片
- src ：指定需要顯示圖片的URL（路徑）。
- alt ：圖片無法顯示時的替代文字。
- width ：設定影象的寬度。
- height ：定義影象的高度。
<!--顯示圖片“registImg.jpg”-->
<img src="#" alt="蜀道之難" width="200px" height="200px" title="滑鼠移上顯示"/>
<img src="#" alt="難於上青天" width="200px" height="200px" title="滑鼠移上顯示"/>
列表標籤
ol有序列表。
- type 列表型別，取值：A、a 、I 、i 、1 等
ul無序列表。
- type 符號的型別，取值：disc 實心圓、square 方塊 、circle 空心圓
li列表項。
是有序列表 或無序列表 的子標籤
<!--列表標籤-->
<ul type="circle"> <!--以“空心圓”顯示無序列表-->
<li>無序</li>
<li>無序</li>
<li>無序</li>
</ul>
<ol type="I"> <!--以大寫阿拉伯數字顯示序號-->
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
超連結標籤
是在html頁面提供一種可以訪問其他位置的實現方式。
- href：用於確定需要顯示頁面的路徑（URL）
- target：確定以何種方式開啟href所設定的頁面。常用取值：blank、self 等
- _blank 在新視窗中開啟href確定的頁面。
- _self 預設。使用href確定的頁面替換當前頁面。
<!--超連結-->
<a href="http://www.baidu.com" target="_self">
訪問“百度”官網，以預設方式開啟
</a><br />
<a href="http://www.taobao.com" target="_blank">
訪問“淘寶”官網，以新視窗方式開啟
</a><br />
表格標籤
HTML表格由table標籤以及一個或多個tr、th或td標籤組成。
- table 是父標籤，相當於整個表格的容器。
- border 表格邊框的寬度。
- width 表格的寬度。
- cellpadding 單元邊沿與其內容之間的空白。
- cellspacing 單元格之間的空白。
- bgcolor 表格的背景顏色。
- tr標籤用於定義行
- td標籤用於定義表格的單元格（一個列）
- colspan 單元格可橫跨的列數。
- rowspan 單元格可橫跨的行數。
- align 單元格內容的水平對齊方式, 取值：left 左 、right 右、center 居中。
- nowrap 單元格中的內容是否折行。
- th標籤用於定義表頭。單元格內的內容預設居中、加粗。
編寫3*3表格，使用修飾表頭
<!--3*3表格,設定寬度和邊線，並顯示1畫素的邊線-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<th>1標題</th>
<th>2標題</th>
<th>3標題</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
編寫3*3表格，將第一行全部合併
<!--3*3表格,將第一行全部合併-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#ddd">a</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
編寫3*3表格,將第一列全部合併
<!--3*3表格,將第一列全部合併-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" bgcolor="#ddd">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
表單相關標籤
form>表單標籤，在html頁面建立一個表單，表單標籤在瀏覽器上沒有任何顯示。如果資料需要提交到伺服器，負責蒐集資料的標籤必須存放在表單標籤體內容。
- action屬性：請求路徑，確定表單提交到伺服器的地址（路徑）
- method屬性：請求方式。常用的取值：GET、POST
- GET：預設值
- 提交的資料追加在請求路徑上。例如：/1.html?username=jack&password=1234，資料格式k/v，追加是使用?連線，之後每一對資料使用&連線
- 因為請求路徑長度有限，所有GET請求提交的資料有限。 - 敏感資料會在位址列顯示,不適合做密碼等資料提交
- POST： - 提交的資料不再請求路徑上追加（及不顯示在位址列上）
- 提交的資料大小不顯示 ``` ```
輸入域標籤
input 標籤用於獲得使用者輸入資訊，type屬性值不同，蒐集方式不同。最常用的標籤。
- type屬性
- text：文字框，單行的輸入欄位，使用者可在其中輸入文字。預設寬度為 20 個字元
- password：密碼框，密碼欄位。該欄位中的字元以黑圓顯示。
- radio：單選框，表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變為非選中的
- submit：提交按鈕。提交按鈕會把表單資料傳送到伺服器。一般不寫name屬性，否則將“提交”兩個字提交到伺服器。 因為不同專案註冊需要的欄位不同，需要完成的案例中沒有覆蓋所有的表單元素，以下標籤使用也需要大家掌握。
- checkbox： 複選框
- image: 按鈕上的圖片
- file：檔案上傳元件,提供"瀏覽"按下可以選擇需要上傳檔案.
- hidden：隱藏欄位. 資料會發送給伺服器，但瀏覽器不進行顯示。
- reset：重置按鈕。將表單恢復到預設值。
- button：普通按鈕，常用於與JavaScript結合使用。
- name：元素名，如果需要表單資料提交到伺服器，必須提供name屬性值，伺服器通過屬性值獲得提交的資料。
- value屬性：設定input標籤的預設值。submit和reset為按鈕顯示資料
- checked屬性：單選框或複選框被選中。
- readonly：是否只讀
- disabled：是否可用
下拉列表標籤
select>下拉列表。可以進行單選或多選。需要使用子標籤指定列表項
- name屬性：傳送給伺服器的名稱
- multiple屬性：不寫預設單選，取值為“multiple”表示多選。
- size屬性：多選時，可見選項的數目。
- 子標籤：下拉列表中的一個選項（一個條目）。 - selected ：勾選當前列表項 - value ：傳送給伺服器的選項值。
文字域標籤
textarea文字域。多行的文字輸入控制元件。
- cols屬性：文字域的列數
- rows屬性：文字域的行數