Siêu liên kết là yếu tố được sử dụng phổ biến nhất trên trang web, mỗi trang đều được kết nối với nhau thông qua các liên kết, tạo thành một website hoàn chỉnh. Siêu liên kết có thể áp dụng cho bất kỳ phần tử nào trên trang, chỉ khi một đối tượng được định nghĩa bằng siêu liên kết thì mới có thể chuyển trang sau khi nhấp chuột.
-
Dùng thẻ
<a></a>bao quanh đối tượng cần liên kết.
1> Cú pháp cơ bản:<a href="mục tiêu liên kết" target="cách mở cửa sổ đích">Văn bản hoặc hình ảnh</a>
i. href: Dùng để chỉ định URL (địa chỉ website) của mục tiêu liên kết. Khi thẻ <a> có thuộc tính href, nó sẽ có chức năng siêu liên kết.
ii. target: Dùng để chỉ định cách mở liên kết. _self là mở trong cửa sổ hiện tại, _blank là mở trong cửa sổ mới.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Siêu liên kết</title>
</head>
<body>
<a href=”http://www.zcool.com.cn/” target=”_self”>Zcool</a> target=”_self” mở trong cửa sổ hiện tại<br/>
<a href=”http://www.baidu.com/” target=”_blank”>Baidu</a> target=”_blank” mở trong cửa sổ mới<br/>
</body>
</html>
Ghi chú:
-
Thẻ siêu liên kết có kiểu hiển thị mặc định.
-
Nếu tạm thời chưa có mục tiêu liên kết, thuộc tính
hrefcó thể đặt là “#”, nghĩa là liên kết rỗng.
2> Cách loại bỏ viền khi dùng liên kết hình ảnh:
Khi tạo liên kết cho hình ảnh, một số trình duyệt sẽ tự động thêm viền, làm ảnh hưởng đến thẩm mỹ trang. Cách đơn giản nhất để loại bỏ viền là đặt border=0. Ví dụ:
<a href=”#”><img src=”đường dẫn hình ảnh” border=”0″/></a>
Liên kết neo
Thông qua liên kết neo, người dùng có thể nhảy đến nội dung cụ thể một cách nhanh chóng, cải thiện hiệu quả tra cứu thông tin.
-
Cú pháp cơ bản:
<a href="#tên_id">Nội dung</a> - href=”#id name”, chỉ cần bạn nhấp vào đối tượng có siêu liên kết đã tạo, nó sẽ nhảy đến vị trí đã chỉ định.
tương ứng.<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Liên kết neo</title>
</head>
<body>
<ul>
<li><a href=”#one”>Tên 1</a></li>
<li><a href=”#two”>Tên 2</a></li>
<li><a href=”#three”>Tên 3</a></li>
<li><a href=”#four”>Tên 4</a></li>
<li><a href=”#five”>Tên 5</a></li>
</ul>
<h3 id=”one”>Tên 1</h3>
<p>Tên 1 sinh ra tại TP. Hồ Chí Minh, là người đặt nền móng cho công việc địa chất.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id=”two”>Tên 2</h3>
<p>Tên 2 sinh ra tại Hà Nội, là một nhà khoa học.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id=”three”>Tên 3</h3>
<p>Tên 3 sinh ra tại TP. Hồ Chí Minh, là nhà khoa học đạt giải Nobel Y học.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id=”four”>Tên 4</h3>
<p>Tên 4 sinh ra tại Việt Nam, là một chuyên gia hàng đầu về khoa học máy tính.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id=”five”>Tên 5</h3>
<p>Tên 5 sinh ra tại TP. Hồ Chí Minh, là một doanh nhân.</p>
</body>
</html>Bốn trạng thái khác nhau của siêu liên kết:
Ghi chú: Thứ tự của 4 pseudo-class phải theo đúng bảng trên, nếu không kiểu CSS có thể không hoạt động như mong muốn.Pseudo-class của thẻ <a>Mô tả a:link{}Kiểu mặc định của liên kết a:visited{}Kiểu sau khi liên kết đã được truy cập a:hover{}Kiểu khi di chuột qua liên kết a:active{}Kiểu khi nhấn chuột và giữ vào liên kết
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Chọn giả lập liên kết</title>
<style type=”text/css”>
a{margin-right: :20px;}/*Đặt khoảng cách phải là 20px*/
a:link,a:visited{
color:#000; /*Đặt màu mặc định và màu sau khi truy cập là màu đen*/
text-decoration:none; /*Bỏ gạch dưới mặc định của thẻ <a>*/
}
a:hover{
color:#093; /*Đổi màu sang xanh lá khi di chuột qua*/
text-decoration: underline; /*Hiển thị gạch dưới khi rê chuột*/
}
a:active{color:#FC0;} /*Đổi màu sang vàng khi nhấn chuột giữ*/
</style>
</head>
<body>
<a href=”#”>Trang chủ</a>
<a href=”#”>Giới thiệu</a>
<a href=”#”>Sản phẩm</a>
<a href=”#”>Liên hệ</a>
</body>
</html>
Bài viết về cách tạo siêu liên kết HTML5 đến đây là kết thúc. Để biết thêm thông tin liên quan, vui lòng tìm kiếm các bài viết trước của Jiapaben hoặc tiếp tục duyệt các bài viết bên dưới. Cảm ơn các bạn đã ủng hộ!
Tài nguyên này được người dùng tải lên và nội dung được lấy từ Internet. Trang web này chỉ giới thiệu miễn phí để học tập và chia sẻ. Nếu có bất kỳ vấn đề bản quyền hoặc vấn đề nào khác, vui lòng liên hệ với biên tập viên của trang web này để xử lý!
Lưu ý quan trọng: : Nếu phần mềm liên quan đến thanh toán, thành viên, nạp tiền, v.v., thì đây là những hành động của nhà phát triển phần mềm hoặc công ty sở hữu phần mềm đó và không liên quan gì đến trang web này. Cư dân mạng cần phải tự đưa ra phán đoán của mình.
