HTML a 標籤

一:a標籤詳解

<a> 標籤定義超鏈接,用於從一個頁面鏈接到另一個頁面。<a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。

在所有瀏覽器中,鏈接的默認外觀如下:未被訪問的鏈接帶有下劃線而且是藍色的、已被訪問的鏈接帶有下劃線而且是紫色的、活動鏈接帶有下劃線而且是紅色的

提示:如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性、通常在當前瀏覽器窗口中顯示被鏈接頁面,除非規定了其他 target、請使用 CSS 來改變鏈接的樣式。

charset char_encoding HTML5 不支持。規定目標 URL 的字符編碼。
coords coordinates HTML5 不支持。規定鏈接的座標。
downloadNew filename 指定下載鏈接
href URL 規定鏈接的目標 URL。
hreflang language_code 規定目標 URL 的基準語言。僅在 href 屬性存在時使用。
mediaNew media_query 規定目標 URL 的媒介類型。默認值:all。僅在 href 屬性存在時使用。
name section_name HTML5 不支持。規定錨的名稱。
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
規定當前文檔與目標 URL 之間的關係。僅在 href 屬性存在時使用。
rev text HTML5 不支持。規定目標 URL 與當前文檔之間的關係。
shape default
rect
circle
poly
HTML5 不支持。規定鏈接的形狀。
target _blank
_parent
_self
_top
framename

規定在何處打開目標 URL。僅在 href 屬性存在時使用。

  • _blank:新窗口打開。
  • _parent:在父窗口中打開鏈接。
  • _self:默認,當前頁面跳轉。
  • _top:在當前窗體打開鏈接,並替換當前的整個窗體(框架頁)。
typeNew MIME_type 規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。
注:MIME = Multipurpose Internet Mail Extensions。

ownload 屬性定義了下載鏈接的地址、href 屬性必須在 <a> 標籤中指定、屬性同樣可以指定下載文件的名稱。文件名稱沒有限定值,瀏覽器會自動在文件名稱末尾添加該下載文件的後綴 (.img, .pdf, .txt, .html, 等)。

二:a標籤應用

<a target="_blank" href={record.fileUrl}>
              預覽
            </a>
            <a
              href={record.fileUrl + '?isDown=true'}
              target="_blank"
              download={
                `${record.fileName}xxname.png`
              }
            >
              下載
            </a>

可作爲預覽與下載使用

但是判定是否下載需配置Header type中的Content-Disposition

Content-Disposition

 
在常規的 HTTP 應答中, Content-Disposition 響應頭指示回覆的內容該以何種形式展示,是以 內聯的形式(即網頁或者頁面的一部分),還是以 附件的形式下載並保存到本地。
 

在 multipart/form-data 類型的應答消息體中,Content-Disposition 消息頭可以被用在 multipart 消息體的子部分中,用來給出其對應字段的相關信息。各個子部分由在Content-Type 中定義的分隔符分隔。用在消息體自身則無實際意義。

Content-Disposition 消息頭最初是在 MIME 標準中定義的,HTTP 表單及 POST 請求只用到了其所有參數的一個子集。只有 form-data 以及可選的 name  filename 三個參數可以應用在HTTP場景中。

在常規的 HTTP 應答中, Content-Disposition 響應頭指示回覆的內容該以何種形式展示,是以 內聯的形式(即網頁或者頁面的一部分),還是以 附件的形式下載並保存到本地。
 

在 multipart/form-data 類型的應答消息體中,Content-Disposition 消息頭可以被用在 multipart 消息體的子部分中,用來給出其對應字段的相關信息。各個子部分由在Content-Type 中定義的分隔符分隔。用在消息體自身則無實際意義。

Content-Disposition 消息頭最初是在 MIME 標準中定義的,HTTP 表單及 POST 請求只用到了其所有參數的一個子集。只有 form-data 以及可選的 name  filename 三個參數可以應用在HTTP場景中。

作爲消息主體中的消息頭

在 HTTP 場景中,第一個參數或者是 inline(默認值,表示回覆中的消息體會以頁面的一部分或者整個頁面的形式展示),或者是 attachment(意味着消息體應該被下載到本地;大多數瀏覽器會呈現一個“保存爲”的對話框,將 filename 的值預填爲下載後的文件名,假如它存在的話)。

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

作爲multipart body中的消息頭

在 HTTP 場景中。第一個參數總是固定不變的 form-data;附加的參數不區分大小寫,並且擁有參數值,參數名與參數值用等號('=')連接,參數值用雙引號括起來。參數之間用分號(';')分隔。

Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章