<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
常用屬性 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 解析,請大家多多指教。如有任何意見及交流,可在下方留言,謝謝!