1. 程式人生 > >詳解a標籤與iframe標籤

詳解a標籤與iframe標籤

先來說一下iframe標籤。

iframe標籤內聯框架元素 ,有效地將另一個HTML頁面嵌入到當前頁面中.例如加入以下程式碼
<iframe src="http://www.baidu.com"></iframe>
即可在當前頁面巢狀一個百度頁面,該頁面的寬高可自行設定。不過,巢狀頁面之後,當前html的頁面載入速度就變慢了。

接下來我們看一下,iframe標籤結合a標籤如何使用。

<iframe src="http://www.baidu.com"></iframe>
<a href="http://qq.com">QQ</a>
<a href="http://github.com">github</a>

我們能不能點選下面的兩個連結讓該連結的頁面在上面的iframe標籤頁面顯示呢。可將程式碼改成如下形式,即a標籤要在name為xxx的頁面開啟。

<iframe src="#" name="xxx"></iframe>
<a href="http://qq.com" target="xxx">QQ</a>
<a href="http://github.com" target="xxx">github</a>

給iframe加frameboder=”0”,可以去掉內嵌頁面的border.
iframe標籤的src屬性也支援相對路徑。如
<iframe src="./index.html"></iframe>


我們在內嵌頁面index.html中寫入以下程式碼

<a href="http://qq.com" target="_blank">blank</a>
<a href="http://qq.com" target="_self">self</a>
<a href="http://qq.com" target="_top">top</a>
<a href="http://qq.com" target="_parent">parent</a>

_blank是在新開頁面開啟,_self實在當前內嵌頁面開啟,_top是在頂層頁面開啟,_parent是在父級頁面開啟。(index.html頁面是內嵌在當前index4.html中,所以其父級頁面就是index4.html)
a標籤還有個downloda屬性。

<a href="http://qq.com" download>下載</a>

當你下載一個安裝包時,可以用download屬性。
那麼瀏覽器決定要不要下載是由什麼決定的呢,是由http響應決定。如果你把http的響應的content-type設成

Content-Type: application/octet-stream

瀏覽器就會以下載的形式接收這個響應。
如果你的content-type是

Content-Type: text/html

又想讓使用者下載,就可以使用a標籤的download屬性。
當a標籤的href如下時,不會跳轉到騰訊首頁。會把它當成一個檔案,並提示找不到該檔案。

<a href="qq.com">QQ</a>

因為它是相對路徑。
正確的寫法就是

<a href="http://qq.com">QQ</a>

表示我要開啟一個http協議,域名為qq.com的網頁。
但如果寫成

<a href="//qq.com">QQ</a>

此時,當前檔案是什麼協議就用什麼協議。

關於a標籤的javascript的偽協議。

<a href="javascript:alert(2);">qq</a>

點選連結,就可執行一段js程式碼。
當我們需要點選一個連結什麼都不做時,可以寫成這樣。

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

相關推薦

a標籤iframe標籤

先來說一下iframe標籤。 iframe標籤內聯框架元素 ,有效地將另一個HTML頁面嵌入到當前頁面中.例如加入以下程式碼 <iframe src="http://www.baidu.com"></iframe>, 即可在當前頁面

JavaScript新增給定的標籤選項

程式碼實現: HTML程式碼: <h3>haveTags</h3> <div id="havetags"></div> <hr /> <h3>addTags</h3> <div id="a

(轉)shiro權限框架06-shiroweb項目整合(下)

tex web項目 ssd ndis form認證 lec rfi 出身 javadoc http://blog.csdn.net/facekbook/article/details/54962975 shiro和web項目整合,實現類似真實項目的應用 web項目中

Java的位運算符實例——(&)、非(~)、或(|)、異或(^)(僅作記錄)

out 位運算符 異或運算 pri stat 運算 data 操作 amp 位運算符主要針對二進制,它包括了:“與”、“非”、“或”、“異或”。從表面上看似乎有點像邏輯運算符,但邏輯運算符是針對兩個關系運算符來進行邏輯運算,而位運算符主要針對兩個二進制數的位進行邏輯運算。下

通過實例隨機梯度梯度下降

lns 情況 line strong spa www lin span 理論 一、梯度下降、隨機梯度下降、批量梯度下降 梯度下降:梯度下降中,對於θ 的更新,所有的樣本都有貢獻,也就是參與調整θ 。其計算得到的是一個標準梯度。因而理論上來說一次更新的幅度是比較大的。如果樣

【轉】python文件打開方式——aa+、r+、w+區別

不能 mos open col strong cnblogs span ast last 原文地址:http://blog.csdn.net/ztf312/article/details/47259805 第一步 排除文件打開方式錯誤: r只讀,r+讀寫,不創建 w新建只寫

轉 [ORACLE]not innot exists的區別用法(not in的性能並不差!)

values 我們 and ons 一點 pla 出現 開始 min 在網上搜了下關於oracle中not exists和not in性能的比較,發現沒有描述的太全面的,可能是問題太簡單了,達人們都不屑於解釋吧。於是自己花了點時間,試圖把這個問題簡單描述清楚,其實歸根結底一

Git及githubgitlab使用

down 使用 第五章 AR IT 初始 配置 ref hub 第一章 關於版本控制 第二章 GIT簡介 第三章 GIT安裝 第四章 初次運行GIT前配置 第五章 初始化倉庫 Git詳解及github與gitlab使用

Linux命令--文件目錄查找

Linux命令詳解--文件與目錄查找一·文件搜索 which:用來查找命令的絕對路徑-- 顯示shell命令的絕對路徑-- 僅僅會在PATH變量中搜索要查找的命令-- 搜索時先查找別名,然後從PATH中查找1、查看用戶的PATH變量:命令的搜索路徑# echo $PATH/usr/lib64/qt-3.3/b

連接池,c3p0dbcp的區別!

次數 數據庫連接池 data 的區別 其中 數據庫服務 耗時 JD cto 連接池: 連接池是創建和管理一個連接的緩沖池的技術,這些連接準備好被任何需要它們的線程使用。這項技術能明顯提高對數據庫操作的性能。 連接池的好處:(1)對於大多數應用程序,當它們正在處理事務

linux中FTP服務搭建--1.匿名權限

一行 ext enforce 實驗環境 沒有 allow umask pda yar 實驗環境:在redhat6.5中安裝配置FTP服務,並使用一臺win7系統訪問驗證。理論:FTP連接方式 支持兩種連接模式:主動模式(Port)和被動模式(Pasv),這兩種模式

[轉] xargs命令,xargs管道的區別

ddd 接受 設計 pad display sof report 程序 at命令 [From] https://www.cnblogs.com/wangqiguo/p/6464234.html 閱讀目錄 為什麽要用xargs,問題的來源 xargs是什麽,與管道有什

python文件打開方式——aa+、r+、w+區別

詳解 pytho r+ 可讀的 報錯 覆蓋 只讀 文件 方式 r只讀,r+讀寫,不創建 w新建只寫,w+新建讀寫,二者都會將文件內容清零 (以w方式打開,不能讀出。w+可讀寫) w+與r+區別: r+:可讀可寫,若文件不存在,報錯;w+: 可讀可寫,若文件不存在,創建 r+

HTML5中table標籤form標籤的區別

html中form表示一個表單,用來把一系列的控制元件包圍起來,然後再統一發送這些資料到目標,比如最常見的註冊,你說需要填寫的資料,都是被封裝在form裡的,填寫完畢後,提交form內的內容,如果不再form內則不會提交。 table 則是用來佈局的 當你填寫資料的時候 你有沒有發現頁面

正則表示式(貪婪懶惰、前瞻後顧、後向引用等)

之前嫌正則麻煩,一直沒有深入去了解過正則,能不用的地方就不使用。 最近專案中遇到了不可避免的正則使用,所以花了點時間去了解並整理了一下,理解不一定完全準確,如有不對歡迎指出,希望對大家有所幫助。 一、名詞解釋 首先我們瞭解幾個名詞:元字元 、 普通字元、列印字元、非列印字元、 限定符 、定位符、非列

[譯]例項防抖節流(乾貨!!!)

lodash原始碼中推薦的文章,為了學習(英語),翻譯了一下~ 原文連結 作者:DAVID CORBACHO 本文來自一位倫敦前端工程師DAVID CORBACHO的技術投稿。我們在之前討論過這個話題(關於防抖與節流),但這次,DAVID CORBACHO通過生動的演示會將它們講的十分清晰,通俗易懂。

HTML5中section標籤content標籤的區別

開發中不經意發現section和content標籤的明顯區別,在看書時並沒有對此做解釋,這裡補充說明。 分別用section標籤和content標籤包一段文字,設定邊框樣式border:1px solid #bbb,得到如下效果。 section標籤 content標籤

Android中JNI使用(4)---JavaC之間資料型別轉換

Jni中基本型別轉換對應的表格 Java型別 本地型別 說明 boolean jboolean 無符號,8位 byte jbyte

quartz5-quartzspring結合

1. spring中quartz依賴 2. quartz配置作業的兩種方式及配置檔案 慕課網_《Java定時任務排程工具詳解之Quartz篇》學習總結 1. spring中quartz依賴

quartz4-Scheduler屬性配置

1. Scheduler 工廠模式 SchedulerFactory 有兩個實現類,最常用的是StdSchedulerFactory,宣告式、配置式 (另一個實現類程式碼式已不用) SchedulerFactory | | Sched