詳解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-shiro與web項目整合(下)
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文件打開方式詳解——a、a+、r+、w+區別
不能 mos open col strong cnblogs span ast last 原文地址:http://blog.csdn.net/ztf312/article/details/47259805 第一步 排除文件打開方式錯誤: r只讀,r+讀寫,不創建 w新建只寫
轉 [ORACLE]詳解not in與not exists的區別與用法(not in的性能並不差!)
values 我們 and ons 一點 pla 出現 開始 min 在網上搜了下關於oracle中not exists和not in性能的比較,發現沒有描述的太全面的,可能是問題太簡單了,達人們都不屑於解釋吧。於是自己花了點時間,試圖把這個問題簡單描述清楚,其實歸根結底一
Git詳解及github與gitlab使用
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
連接池詳解,c3p0與dbcp的區別!
次數 數據庫連接池 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文件打開方式詳解——a、a+、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)---Java與C之間資料型別轉換
Jni中基本型別轉換對應的表格 Java型別 本地型別 說明 boolean jboolean 無符號,8位 byte jbyte
quartz詳解5-quartz與spring結合
1. spring中quartz依賴 2. quartz配置作業的兩種方式及配置檔案 慕課網_《Java定時任務排程工具詳解之Quartz篇》學習總結 1. spring中quartz依賴
quartz詳解4-Scheduler與屬性配置
1. Scheduler 工廠模式 SchedulerFactory 有兩個實現類,最常用的是StdSchedulerFactory,宣告式、配置式 (另一個實現類程式碼式已不用) SchedulerFactory | | Sched