1. 程式人生 > >html 標籤屬性總結

html 標籤屬性總結

該標籤主要作用

-通過href屬性來建立指向另一個文件的連結
-通過name屬性建立文件內的書籤
href或name是必選屬性

href屬性

href 規定了連結地址:

-文字連結

<a href="http://www.baidu.com">百度一下</a>

-圖片連結:

<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>

href三種可能的值:

-絕對 URL - 指向另一個站點

href="http://www.example.com/index.htm"

-相對 URL - 指向站點內的某個檔案

href="index.htm"

-錨 URL - 指向頁面中的錨

href="#top"

用法-設定一個沒有下劃線的連結

<a href="http://www.baidu.com" style="text-decoration:none">這是一個連結</a>

name規定了錨的名稱

相對連結

<a href="#h1">跳到第一章</a>
... <h1> <a name="h1">第一章</a> <!--這裡的name可以換成id--> </h1> <p>本章的內容有....</p>

絕對連結

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
<!--這段程式碼會讓使用者直接進入這個網站的這個anchor下-->

關於name和id

id和name都可以與href結合起來使用,同理name的值在同一文件必須是唯一的

關於圖形對映:

<a href="http://www.baidu.com/xxx.html" shape="rect" coords="0,0,96,99">sun</a>

-只有圖形可以新增對映,儘量用map元素和area元素設定影象對映
-<a>標籤的shape和coords屬性只支援opera和firefox瀏覽器

shape 規定連結的形狀

shape的值:

default 全部區域
rect 矩形
circle 圓形
poly 多邊形

coords 規定連結的座標

coords的值:

如果shape是rect,coords的值為x1,y1,x2,y2,規定左上角和右下角的座標
如果shape是circle,coords的值為x,y,radius,規定圓心的座標和半徑
如果shape是poly,coords的值為x1,y1,x2,y2,xn,yn,規定多邊形各邊的座標,如果最後一個座標和第一個不一致,瀏覽器為了關閉圖形,會新增最後座標

關於上下文關係

rel 指定從源文件到目標文件的關係
rev 指定從目標文件到源文件的關係
(rel和rev是寫給瀏覽器看的,表明了上下文關係,w3school提出html和xhtml並沒有正式提出這兩種屬性)
以下是一些值:

描述
alternate 文件的可選版本(例如列印頁、翻譯頁或映象)
stylesheet 文件的外部樣式表
start 集合中的第一個文件
next 集合中的下一個文件
prev 集合中的前一個文件
contents 文件目錄
index 文件索引
glossary 文件中所用字詞的術語表或解釋
copyright 包含版權資訊的文件
chapter 文件的章
section 文件的節
subsection 文件的子段
appendix 文件附錄
help 幫助文件
bookmark 相關文件
nofollow 用於指定 Google 搜尋引擎不要跟蹤連結
licence 授權
tag 標籤
friend 友情連結

target定義被連結的文件在何處顯示

<a href="http://www.baidu.com" target="_blank">這是一個連結</a>

target的值:

_top 跳出框架開啟網頁
_parent 在父視窗開啟網頁
_blank 在新視窗開啟網頁
_self 預設值,在同一框架中開啟網頁
framename 在指定的框架中開啟網頁

用法例項:

<a href="/index.html"
target="_top">請點選這裡!</a>

其他

download 規定被下載的目標,即點選後直接下載某個目標 (H5)
media 規定目標文件是專為什麼樣的平臺設計的,沒有實際作用 (H5)
type 規定了文件的mime型別,比如”text/css”
X/charset 規定連結的字符集(w3shool標記為所有瀏覽器不支援)
X/hreflang 規定連結文件的語言(w3shool標記為所有瀏覽器不支援)

用mailto:建立郵件

一個完整的格式

<a href="mailto:jk.2013@qq.com?cc="sipallan@163.com&bbc="joe5213@qq.com&subject=這是一封郵件&body=我想你">傳送郵件</a>

注意點
1、多個收件人,抄送和密件抄送人用分號;分割
2、收件地址和抄送地址用?號分割,其他用&號分割