HTML 較常用及複雜的標籤詳解

Roy Kwok

10 min readJan 26, 2019

<a> <button> <form> <iframe> <input> <table>

<a> achor

可以創建一個到其他網頁、文件、同一頁面內的位置、電子郵件地址或任何其他URL的超鏈接。

一般以 HTTP GET 的形式發出請求

常用屬性 attributes

href

<a href="" downlaod></a> 下載指定路徑

額外知識點：
如果HTTP 迴應(Response)以 Contct-type:application/octet-stream 定義，瀏覽器便會以下載的形式接受請求(Require)，而不會以頁面顯示；但是
如果以 Contct-type:text/html 定義，以你又想讓用戶下載便可以使用<a href="" downlaod></a> 用戶下載指定路徑

<a href="google.com"></a>

這是相對路徑，瀏覽器會當成檔案名稱，而不會鏈接 https://google.com

<a href="//google.com"></a>

當前是沒有協議。瀏覽器會按當前的協議去解析路徑，如當前是file://協議，便會當成file://google.com；反之當前是http://協議便會當成http://google.com

<a href="https://google.com"></a>

鏈接指定url：https://google.com

<a href="xxx.html"></a>

瀏覽器以目錄為準，直接前往 xxx.html，而不是 index.html/xxx.html

<a href=""></a>

重新整理當前頁面

<a href=?name=qqq">

瀏覽器會在當前頁面發出?name=qqq 請求。

<a href="javascript: alert(1)"></a>

這是javascript 偽協議，點擊後運行 JavaSctipt 指定功能

<a href="javascript:;"></a>

這是javascript 偽協議，點擊後不進行任何加載

<a href=#id"></a>

跳到當前頁面的內部目標指定(#id)位置

這是#錨點不會發出請求，#是用來跳轉到頁面內指定位置

<a href="#"></a> ／ <a href="#top"></a>

返回網頁頂部

這是#錨點不會發出請求，#是用來跳轉到頁面內指定位置

target

<a href="" target="_self"></a>

當前頁面加載

<a href="" target="_blank"></a>

新窗口加載頁面

<a href="" target="_parent"></a>

當前的HTML5瀏覽上下文的父瀏覽上下文

<a href="" target="_top"></a>

HTML5中：加載響應進入頂層瀏覽上下文

_parent _top例子：

<!--當前頁面是index.html-->
<iframesrc="./index2.html"frameborder="0"></iframe><!--當前頁面是index2.html-->
<iframesrc="./index3.html"frameborder="0"></iframe><!--當前頁面是index3.html-->
<ahref=""target="_parent"></a><!--如果按_parent就會在父瀏覽index2.html加載-->
<ahref=""target="_top"></a><!--如果按_top就會在最頂層瀏覽index.html加載-->

iframe

<iframesrc="./index.html"name="xxx"frameborder="0"></iframe>
<ahref=""target="xxx"></a>

常用屬性 attributes

src

在 iframe 內加載指定url

name

必需結合<a href ="" target=""></a>使用，在iframe內加載<a href ="" target=""></a> 的鏈接，以target與name作為對應鏈接目標。

例子：http://www.w3school.com.cn/tiy/t.asp?f=html_iframe_name

frameborder="0"

不顯示 iframe 的四周邊框

額外知識點：
Iframe 有什麼好處，有什麼壞處？國內還有哪些知名網站仍用Iframe，為什麼？有哪些原來用的現在拋棄了？又是為什麼？ — 知乎
https://www.zhihu.com/question/20653055

form & input

一般form的內容會以 POST 形式發出 HTTP 請求(Require)，把 form 的內容發送至 Server。你也可以以 GET 形式發出 HTTP 請求，但不會包含內form的內容。

知識點：HTTP 方法：GET 對比 POST
http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

常用屬性 attributes

type

表單必需加上以下按鍵元素才能把表單內容發出：

1 <input type="submit" value="submit">

<formaction="users"method="post"><!--以 POST 形式發出 HTTP 請求才能把表單內容發給伺服器-->
   <inputtype="text"value="username">
   <inputtype="password"value="password">
   <inputtype="submit"value="submit"><!--必需加上type="submit"才能發出表單內容-->
</form>

2 <button></button>

<formaction="users"method="post"><!--以 POST 形式發出 HTTP 請求才能把表單內容發給伺服器-->
<inputtype="text"value="username">
<inputtype="password"value="password">
<button>sumbmit</button><!---必需加上<button></button>才能發出表單內容-->
</form>

<input type="button" value="submit">

沒有效的按鈕設定，它已經在HTML5被 <button>元素取代

<input type="checkbox"> & <label>

多選選項

<inputtype="checkbox"id="xxx"><labelfor="xxx">標題與checkbox綁在一起</label>

<!--這種方法input必需加id，而label必需加for與input id相同--><label><inputtype="checkbox"neme="標題與checkbox綁在一起">標題與checkbox綁在一起</label>

<!--這種法方法input必需加 name="" 才會把內容一同發出-->

<input type="radio">

單選選項

<label><input name="areyouhappy" type="radio" value="YES">YES</label><label><input name="areyouhappy" type="radio" value="NO">NO</label>

<select> <option>

下拉單選選單或多選選單

<select name="group" multiple> <!--multiple 多選設定，刪去則變成下拉單選選單-->
<option value="">-</option>
<option value="1">group 1</option>
<option value="2">group 2</option>
<option value="3" disabled>group 3</option> <!--disabled 不能選擇-->
<option value="4" selected>group 4</option> <!--disabled 默認選擇-->
</select>

<textarea>

表示一個或多行純文本編輯框

<table>代表表格數據

<thead>標籤定義表格的表頭

<tbody>標籤表格主體（正文）

<tfoot>標籤定義表格的頁腳（腳註或表注）

<th> h for head 表頭單元格 — 包含表頭信息

<td> d for data 標準單元格 — 包含數據

額外知識點：
代碼按這個次序<tfoot><tbody><thead>編寫與實際顯示次序無關，不論你如何編寫，瀏覽器只會按元素定義去顯示順序，最後均是以<thead><tbody><tfoot>顯示。
如沒有加上<thead><tbody><tfoot>，瀏覽器竟會按你的代碼內<tr><th><td>次序去顯示。
table 每個一格都有邊框，會造成雙變框，如要合併成單邊框則要使用CSS:table{border-collapse: collapse;}

<table>
            <thead>
                <tr>
                    <th></th>
                    <th>name</th>
                    <th>gender</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th></th>
                    <td>Dom</td>
                    <td>M</td>
                    <td>16</td>
                </tr>
                <tr>
                    <th></th>
                    <td>Peter</td>
                    <td>M</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th></th>
                    <td>Tom</td>
                    <td>M</td>
                    <td>18</td>
                </tr>
                <tr>
                    <th>Average</th>
                    <td></td>
                    <td></td>
                    <td>17</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                </tr>
            </tfoot>
        </table>

其他與table有關的元素

<colgroup></colgroup>

定義表格框內的闊度高度或顏色或添加class配合CSS使用

<colgroup>
 <col width=100>
 <col bgcolor=red width=200>
 <col width="100">
 <col width="70">
</colgroup>

<colgroup>詳解：

http://www.w3school.com.cn/tags/tag_colgroup.asp

總結：

本文是小弟學習前端寫有關於簡述：HTTP 請求 require 及回應 response 解析，請大家多多指教。如有任何意見及交流，可在下方留言，謝謝！

HTML 較常用及複雜的標籤詳解

總結：

Written by Roy Kwok

No responses yet