html標籤使用

Limyes發表於2018-04-14
HTML

iframe標籤

iframe常常用於在一個頁面裡再巢狀一個頁面，一個基本用法可以是這樣的：

<iframe src="http://qq.com"  frameborder="0"></iframe>複製程式碼

src="",裡面的地址可以是一個url地址，比如http://qq.com這樣的，也可以寫一個相對路徑，則會對應開啟該目錄檔案。

frameborder="0"，iframe標籤自己有預設的樣式，使用frameborder可以去掉預設樣式。

當和a標籤的target搭配使用時：

<iframe name="qq"  src="#"  frameborder="0"></iframe>
<a href="http://qq.com" target="qq">QQ</a>
複製程式碼

點選a標籤會發現本來應該在當前頁面直接開啟連結，此時新頁面是在iframe裡開啟的，相當於新開了一個名叫qq的視窗，而a標籤指定了要在名為qq的視窗裡開啟，所以才會這樣，如果去掉iframe的name屬性或者a標籤的target則不會在iframe裡開啟。

a標籤

a標籤通常用於開啟一個新頁面，a標籤也是一個按鈕，但它和button的使用區別就是，如果你想在當前頁面進行什麼操作，建議使用button,如果想開啟的是一個新頁面，就選擇使用a標籤，a標籤常見用法及屬性:

<a href="" target="" download=""><a>複製程式碼

href屬性：

取值如果是一個http協議地址，就直接跳轉對應地址，如果是相對路徑，就找到對應檔案開啟，如果是"//地址"這樣的無協議地址，會跳轉當前協議下的對應地址；

取值為空，會重新整理一次當前頁面；

取值為#，相當於一個錨點，會直接返回頁面頂部；

取值為javascript語句，可以直接執行一段js語句，格式為：javascript:js語句;，如果想要點選a標籤但是不做反應，那麼href="javascript:;"。

target屬性值分別有：

_blank，在新視窗開啟地址；

_self，在當前視窗開啟地址；

_parent，在父級視窗開啟；

_top，在頂層視窗開啟；

可以和iframe搭配使用瞭解什麼是父級視窗和頂層視窗：

index.html

<iframe name="1"  src="#" frameborder="0">
      <a href="" target="_parent">xx</a>
      <iframe name="2" src="#" frameborder="0">
            <a href="" target="_top">ZZ</a>
      </iframe>
</iframe>
<a href="" target="">yy</a>
複製程式碼

在以上的結構裡，當點選name為1的iframe下的子元素a標籤時，a標籤指向的連結會在這個index.html所在的視窗裡開啟，即index.html是a標籤的父級視窗；當點選name為2的iframe下的子元素a標籤時，a標籤指向的連結會在這個index.html所在的視窗裡開啟，即index.html是a標籤的頂級視窗，也就是祖宗視窗，同時name為1的iframe是name為2的iframe的父級視窗；

 download屬性，想要下載一個東西有兩種方式：

一種是給a標籤加download屬性，就會下載連結指向的內容；

一種是在html頭部裡設定content-type:application/octet-stream；

form標籤

a標籤和form標籤的區別就是a標籤點選之後發起一個get請求，form標籤提交後發起一個post請求，form標籤也可以發起get請求，但是通常只用來發起post請求。除此之外，如果form標籤裡沒有提交按鈕，那麼表單就無法提交，提交按鈕有兩種可能，一種是input標籤設定type="submit",一種是沒有設定type屬性的button標籤預設type為submit。

<form  action="" methord=""></form>複製程式碼

action的值,form資訊會被提交到這個地址進行處理；

methord，form的提交方式，可以是get或者post；

input標籤

<input  type=""  name="" value=""/>複製程式碼

type，設定input型別，常用的有text(文字框)，password(密碼)，radio(單選框)，checkbox(核取方塊)，submit(提交)，button（按鈕）；

input的type屬性為radio和checkox時可以和label結合起來使用，使點選label裡內容同時選中input,有兩種方法：一種需要給label設定for屬性，屬性值為對應的input 的id；另一種直接把input標籤包裹在label標籤中，如下所示：

<input type="radio" id= "xxx"/><label  for="xxx"></label>
<label><input type="radio" /></label>
複製程式碼

如果給input設定checked="checked"時將預設被選中；

name,提交時顯示每一項資訊代表的內容，如果不加name，form提交的資訊將不會顯示,checkbox的name設定為相同的時代表屬於同一類別，radio的name設定為相同時，代表這些選項中只能選一個。

select標籤

結構：

<select mutiple>
    <option  selected="selected"></option>
    <option  disabled></option>
</select>
複製程式碼

給option設定selected="selected"時該項預設被選中，設定disabled時代表該項不可選，給select設定mutiple可以多選。

textarea標籤

用來輸入多行文字，預設使用者可以自己拖動大小，設定樣式resize:none可以禁止使用者拖動

textarea有自己的屬性cols和rows來規定可寫區域的行數和列數，但一般用css來固定寬高。

table標籤

table所有標籤：

<table>//table標籤
    <colgroup>
        <col></col>//單獨設定每一列的樣式，可以設定的有width,bgcolor，不經常用
    </colgroup>
    <thead><tr><th></th></tr></thead>//表頭,th表示table header
    <tbody><tr><td></td></tr></tbody>//td表示table data
    <tfoot><tr><td></td></tr></tfoot>
</table>
複製程式碼

img標籤

兩個必需屬性：

src：規定了顯示影象的URL，瀏覽器會對該URL發起Http Get請求。
alt ：則規定了影象的替代文字，在影象無法顯示或者使用者禁用影象顯示時，代替影象顯示在瀏覽器中的內容。

< img>標籤的onload/onerror/onabort事件，在什麼情況下會被觸發？

onload: 事件會在影象載入完成後立即發生。

onerror: 事件會在文件或影象載入過程中發生錯誤時被觸發。

onabort: 事件會在影象載入被中斷時發生。例如使用者單擊了瀏覽器的Stop按鈕，或者在影象下載的過程中。

html標籤使用

使用img標籤發起跨域請求：

function setImageSrc() {
    var i = new Image();
    i.onload = function() {    // do sth.
    i.onload = null;//解除迴圈引用，防止記憶體洩漏
    i = null;
   }    i.onerror = function() {
        // do sth.
    }

    i.onabort = function() {
        // do sth.
    }
    i.src = "http://.../1.gif";
    //屬性src賦值操作應該在事件繫結之後：否則，有可能出現圖片已經載入完畢,但事件繫結尚未完成的情況。
}
複製程式碼

怎樣判斷使用者有沒有設定禁止顯示圖片：

參考連結：http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html




相關文章