html 部分標籤
本文主要講述以下內容:
<iframe>
<a>及偽協議
<form>
<input>
<table> 及 <colgroup>
可替換元素
其他
一.iframe
iframe 標籤 用於巢狀頁面,新開一個視窗(沙箱隔離,引用第三方內容)
src指定:<iframe src="https://www.baidu.com" name="xxx"></iframe>
連結開啟:
<iframe src="#" name="xxx" frameBorder=0></iframe>
<a target="xxx" href="http://qq.com">QQ</a>
<a target="xxx" href="http://baidu.com">baidu</a>
iframe可用於所見即所得的網頁編輯器。
二. a (anchor) , 偽協議
-
<a>用於http get 請求
-
屬性download 下載連結指定檔案
-
<a> 檢視使用<a>來建立可點選圖片,如何建立email連結,電話連結
-
<a> 的示範:
<a href="qq.com
<a href="//qq.com">qq</a>
-
瀏覽器會根據當前協議,補全無協議連結的協議
-
如果用 file:// 協議瀏覽頁面,就會訪問到 file://qq.com,這是一個不存在的路徑
-
應該儘量不使用 file:// 協議預覽網頁,以免無協議連結出錯
<a href="?name='li'">link</a> 瀏覽器發起 GET /?name=li HTTP/1.1 請求
<a href="#">anchor</a> 頁面內跳轉,
<a href="javascript:alert("a") > 偽協議,
<a href="javascript:;"> 阻止頁面跳轉
偽協議:
-
可以在使用者點選 a 時執行一段 javascript 程式碼
-
在位址列輸入 javascript:alert(1) 可以在當前頁面執行一段程式碼
-
偽協議可以實現「點選之後沒有任何動作的 a 標籤」,滿足一些奇葩需求
<a href="#">滾回頂部
<a href="">重新整理頁面
<a href="/..">link</a> 瀏覽器發起 GET / HTTP/1.1 的請求
-
target屬性
-
_self : 當前頁面載入,即當前的響應到同一HTML 4 frame
-
_blank : 新視窗開啟,即到一個新的未命名的HTML4視窗或HTML5瀏覽器上下文
-
_parent : 載入響應到當前框架的HTML4父框架或當前的HTML5瀏覽上下文的父瀏覽上下文。如果沒有parent框架或者瀏覽上下文,此選項的行為方式相同_self。
-
_top : HTML4中:載入的響應成完整的,原來的視窗,取消所有其它frame。 HTML5中:載入響應進入頂層瀏覽上下文(即,瀏覽上下文,它是當前的一個的祖先,並且沒有parent)。如果沒有parent框架或者瀏覽上下文,此選項的行為方式相同_self
三. form
<form> 必須有提交按鈕,一般作為post請求
get 預設會把引數放在查詢引數裡面
post預設會把引數放在請求header的第四部分裡面
form 具有target屬性
如果一個<form>裡面只有一個<button>btn</button> ,他會自動升級為提交按鈕
只有一個<button type="button">或者<input type="button"> 依然只是普通按鈕
只有一個<input type="submit">可以提交,是唯一能確定form是否可以提交
四.input
如果 input 不加 name,那麼在表單提交時,input 的值就不會出現在請求裡,checkbox, radio 的 name表示一組。
<label>把input包起來,可以關聯,input
type部分型別
-
submit / reset
-
range
-
search
-
data / datatime /datetime-local
-
image
-
file
-
email
-
hidden
五.<table> 及<colgroup>
<table>: thead tbody tfoot caption tr td/th
<colgroup> : 定義表格內的一組列。
示例:
<table border=1>
<colgroup>
<col width=100>控制列寬
<col width=100>......
六.可替換元素
CSS 裡,展現不是由CSS來控制的。這些元素是一類外觀渲染獨立於CSS的 外部物件。 典型的可替換元素有 img object video audio 表單元素,textarea canvas 。自頻寬高,可以用屬性覆蓋,或者css控制。
七.其他
<select> 下拉列表,指定name! multiple 多選
<textarea> resize:none 禁止拖動
<aside> 跟文章不相關的內容,旁邊經常作為側邊欄或標註框出現
全域性屬性contenteditable 內容可編輯
除了div 和 span 其他標籤都有預設樣式
<b> 與 <strong>的區別:<strong>元素表示更重要的內容,而<b>元素用於提醒,
dl > dt +dd
<meta charset="utf-8"> 等價於 <meta http-equiv="content-type" content="text/html;charset=utf-8"> :http-equiv:http 的等價物