<a> 除了全域屬性外，另有定義其他屬性 (attribute)
- href
- target
- download
- ping
- rel
- media
- hreflang
- type
href 用以設定超連結網址， target 為連結網頁開啟的方式，若是設定為 "_blank" 就會以新分頁或新視窗開啟， download 設定超連結下載檔案的檔名，若非下載就不必設定， rel 設定超連結的種類， media 設定超連結的媒體， hreflang 設定超連結的語言， type 設定超連結的 MIME 型態。
此外， <a> 的文件物件模型 (DOM) 介面為 HTMLAnchorElement ，有如下的屬性
- href
- target
- download
- ping
- rel
- relList
- media
- hreflang
- type
- text
- protocol
- host
- hostname
- port
- pathname
- search
- hash
除了對應到 <a> 相同名稱的屬性外， relList 對應到rel ， text 對應到 textContent ，其他屬於 URL 相關屬性。
舉例如下
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 DEMO</title>
<style>
header, nav, section, article, footer {
display: block;
}
header, nav, section, article, footer {
color: white;
}
header, footer {
text-align: center;
width: 100%;
}
header {
background-color: red;
font-size: 36px;
font-weight: bold;
}
nav {
position: fixed;
top: 40px;
right: 25px;
background-color: blue;
width: 100px;
}
section {
width: 86%;
background-color: gray;
padding: 20px;
margin: 20px;
}
footer {
background-color: green;
font-size: 10px;
}
</style>
</head>
<body>
<header>
header
</header>
<nav>
<ul>
<li>nav 1</li>
<li>nav 2</li>
</ul>
</nav>
<section>
<article>
<a target="_blank" href="http://pydoing.blogspot.com/">程式語言教學誌</a>
</article>
</section>
<footer>
<p>
footer © 2011
</p>
</footer>
</body>
</html>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：atest.html
功能：示範 HTML 5 標記語言
作者：張凱慶
時間：西元 2011 年 12 月 -->此例， <a> 放在 <article> 中，超連結的預設字型顏色為藍色，有底線
<section>
<article>
<a target="_blank" href="http://pydoing.blogspot.com/">程式語言教學誌</a>
</article>
</section> 利用 Firefox 開啟如下
點擊連結就會以新分頁開啟
| 中英文術語對照 | |
|---|---|
| 元素 | element |
| 屬性 | attribute |
| 文件物件模型 | DOM |
您可以繼續參考
JavaScript 範例
文字階層元素
相關目錄
HTML 5 快速導覽
HTML, CSS 教材
首頁
參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element
http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element
沒有留言:
張貼留言