1. 程式人生 > >html 部分標籤

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

">qq</a> 錯誤示範,表示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 的等價物