- Trang chủ
- Tham khảo
- Tag html
- html5
- <a>
Định nghĩa và sử dụngTag <a> xác định
một siêu liên kết (hyperlink).
Được dùng để: - Link từ trang này tới trang khác.
- Link anchor (link neo) từ vị trí này tới vị trí khác.
- Link để mở (hay download) một file nào đó (file word, excel, pdf, image, ...), mở một cửa sổ window hay một object nào đó,...
Xem ví dụ. Sự khác nhau giữa HTML4.01 và HTML5
| HTML4.01 | HTML5 |
|---|
| ● Sử dụng như siêu liên kết (link) hay một neo (anchor)
| ● Luôn luôn là siêu liên kết (link).
● Nếu không có thuộc tính href thì nó chỉ là một trình giữ chỗ cho một liên kết.
● Trong HTML5 có một số thuộc tính mới, và một số thuộc tính không được hỗ trợ.
|
Cấu trúc<a href="#">Đây là link</a> Ví dụ: Liên kết tới trang khácHtml viết:<p><a href="index.php">Liên kết tới trang khác</a></p> Hiển thị trình duyệt:Ví dụ: Liên kết mailHtml viết:Hiển thị trình duyệt:Khi click vào sẽ xuất hiện một hộp thư gửi mail. Ví dụ: Link từ vị trí này tới vị trí khácHtml
viết:<p><a href="#content">Liên kết tới id content</a></p> Hiển thị trình duyệt:Ví dụ: Link để mở file word (tương tự cho những định dạng khác)Html viết:<p><a href="doc/ex.doc">Mở file ex.doc trong thư mục "doc"</a></p> Hiển thị trình duyệt:Ví dụ: Liên kết mở ra cửa sổ khácHtml viết:<p><a href="index.php" target="_blank">Liên kết mở ra cửa sổ
khác</a></p> Hiển thị trình duyệt:Trình duyệt hỗ trợTag <a> được hỗ trợ trong đa số các trình duyệt. Thuộc tínhCách sử dụng: <a thuoctinh="giatri"></a> Thuộc tính tùy chọn
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|
| Thuộc tính mới (Mới)
| | media
| truy vấn media
| media="screen"
| Xác định mục tiêu URL cho media/device.
Giá trị mặc định là: all.
| | type
| Kiểu MIME
| type="image/gif"
| Xác định kiểu MIME cho mục tiêu URL.
| | Thuộc tính như HTML4.01
| | href
| URL
| href="index.html"
| Đường dẫn cụ thể đến một liên kết.
| | target
| _blank
_parent
_self
_top
framename
| target"_blank"
| Xác định nơi để mở tài liệu.
| | Thuộc tính không hỗ trợ trong HTML5
| | charset
| Bộ mã ký tự
| charset="UTF-8"
| Không hỗ trợ trong HTML5.
| | coords
| Tọa độ
| coords="0,111,122"
| Không hỗ trợ trong HTML5.
| | name
| Tên
| name="products"
| Không hỗ trợ trong HTML5.
| | rev
| Text
| rev="ourWeb"
| Không hỗ trợ trong HTML5.
| | shape
| default
rect
circle
poly
| shape"circle"
| Không hỗ trợ trong HTML5.
| | Thuộc tính không được hỗ trợ trong phần lớn các trình duyệt
| | hreflang
| Mã ngôn ngữ
| hreflang="vi"
| Xác định rõ ngôn ngữ của văn bản được liên kết.
Không hỗ trợ trong phần lớn trình duyệt
| | rel
| Text
| rel="ourWeb"
| Xác định mối quan hệ giữa các văn bản hiện tại và văn bản được liên kết.
Không hỗ trợ trong phần lớn trình duyệt
|
Thuộc tính Tổng quát và thuộc tính sự kiệnTất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5 1) Thẻ <a> trong HTML- Thẻ <a> dùng để tạo một liên kết đến một tài liệu nào đó. (khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó) - Đoạn mã bên dưới có hai liên kết: - Một liên kết đến trang chủ
- Một liên kết đến trang học CSS
<!DOCTYPE html>
<html>
<body>
<a href="http://webcoban.vn">Chuyển đến trang chủ</a>
<hr>
<a href="http://webcoban.vn/css/default.html">Chuyển đến trang học CSS</a>
</body>
</html>
Xem ví dụ 2) Các thuộc tính của thẻ <a>
- Thẻ <a> có ba thuộc tính cơ bản. - Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó:
| href
| Xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới
| | download
| Xác định việc:
"khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về"
| | target
| Xác định nơi mà tài liệu sẽ được mở
|
2.1) Thuộc tính href- Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới. (Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)
<!DOCTYPE html>
<html>
<body>
<p>- Liên kết bên dưới được xác định bởi đường dẫn tuyệt đối</p>
<a href="http://webcoban.vn/css/default.html">Tài liệu học CSS</a>
<p>- Liên kết bên dưới được xác định bởi đường dẫn tương đối</p>
<a href="../javascript/default.html">Tài liệu học JavaScript</a>
</body>
</html>
Xem ví dụ - Ngoài ra, thuộc tính href cũng có thể dùng để xác định một vị trí bên trong trang web mà bạn muốn di chuyển tới (vị trí của phần tử được xác định dựa giá trị thuộc
tính id của phần tử)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{font-size:30px;}
p{font-size:20px;}
</style>
</head>
<body>
<a href="#css">Di chuyển đến phần tử có thuộc tính id với giá trị là "css"</a>
<h2 id="html">1) Tài liệu học HTML</h2>
...
<h2 id="css">2) Tài liệu học CSS</h2>
...
<h2 id="javascript">3) Tài liệu học JavaScript</h2>
...
</body>
</html>
Xem ví dụ 2.2) Thuộc tính download- Thuộc tính download xác định việc khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.
<!DOCTYPE html>
<html>
<body>
<a href="../image/flower.gif" download>Click here</a>
</body>
</html>
Xem ví dụ - Ta có thể thêm giá trị cho thuộc tính download để xác định tên của tập tin khi được lưu về
máy tính.
<!DOCTYPE html>
<html>
<body>
<a href="../image/flower.gif" download="laptrinhweb">Click here</a>
</body>
</html>
Xem ví dụ - Lưu ý: Ta không cần phải xác định phần đuôi của tập tin vì hệ thống sẽ tự động làm việc đó. 2.3) Thuộc tính target- Thuộc tính target dùng để xác định nơi mà tài liệu sẽ được mở. - Thuộc tính target có bốn giá trị cơ bản:
| _blank
| Mở tài liệu trong một tab mới
| Xem ví dụ
| | _self
| Mở tài liệu trong khung hiện tại
| Xem ví dụ
| | _parent
| Mở tài liệu trong khung cha của khung hiện tại
| Xem ví dụ
| | _top
| Mở tài liệu trong tab hiện tại
| Xem ví dụ
|
3) Định dạng CSS mặc định- Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như sau: a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
| 
