Thẻ a trong HTML

460 lượt xem

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

599.000
Buy now
unica.vn

Description

Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

     1. Thẻ <a> trong HTML

Thẻ <a> trong html được sử dụng để tạo siêu liên kết đến một tài liệu khác hoặc một nơi nào đó trong tài liệu hiện tại. (Khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)

Ví dụ:


<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ a trong HTML</title>
   </head>

   <body>
      <p>Đây là link của Webaffiliatevn <a href = "https://webaffiliatevn.com/">Affiliatevn.com</a></p>
   </body>
	
</html>

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”NWNWQYJ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/NWNWQYJ’>NWNWQYJ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

     2. Các thuộc tính của thẻ <a>

Thẻ <a> HTML cũng hỗ trợ các thuộc tính bổ sung sau:

Thuộc tính Giá trị Sự miêu tả
charset

(bảng chữ cái)

character_encoding

(mã hóa ký tự)

Xác định mã hóa ký tự của tài liệu được liên kết.
coords if shape = “rect” then coords = “left, top, right, bottom”

if shape = “circ” then coords = “centerx,centery,radius”

if shape = “poly” then coords = “x1, y1, x2, y2,..,xn,yn”

Chỉ định các tọa độ thích hợp với thuộc tính shape để xác định một vùng của hình ảnh cho bản đồ hình ảnh.
download

(tải xuống)

filename

(tên tệp)

Điều này tải xuống mục tiêu khi người dùng nhấp vào siêu liên kết.
href URL Chỉ định URL của một trang mà liên kết muốn đi đến.
hreflang language_code

(ngôn ngữ của url)

Mã ngôn ngữ của URL đích.
media

(phương tiện truyền thông)

media_query

(phương tiện truyền thông)

Nó chỉ định phương tiện nào tài liệu được liên kết được tối ưu hóa cho
name tên phần Đánh dấu một khu vực của trang mà một liên kết nhảy tới.
rel alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Mô tả mối quan hệ giữa tài liệu hiện tại và URL đích.
rev alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Chỉ định mối quan hệ giữa URL mục tiêu và tài liệu hiện tại.
shape

(hình dạng)

rect
rectangle
circ
circle
poly
polygon
Chỉ định hình dạng của bản đồ hình ảnh
target _blank
_parent
_elf
_top
Nơi mở URL mục tiêu.

_blank – URL mục tiêu sẽ mở trong một cửa sổ mới.

_self – URL mục tiêu sẽ mở trong cùng một khung khi nó được nhấp vào.

_parent – URL mục tiêu sẽ mở trong bộ khung chính.

_top – URL mục tiêu sẽ mở trong toàn bộ cửa sổ.

type mime_type Chỉ định loại MIME (Tiện ích mở rộng thư Internet đa năng) của URL mục tiêu

Nhưng trong đó có 3 thuộc tính cơ bản được sử dụng nhiều nhất.

Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó: href, download, target

          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)

Ví dụ:


<!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="https://webaffiliatevn.com/css/css.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/javascript.html">Tài liệu học JavaScript</a>
</body>
</html>

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxNKJo” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxNKJo’>oNxNKJo</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

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ử)

Ví dụ:


<!DOCTYPE html>
<html>
<head>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20h1%7Bfont-size%3A25px%3B%7D%0A%20%20%20%20%20%20%20%20p%7Bfont-size%3A15px%3B%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
    <a href="#javascript">Di chuyển đến phần tử có thuộc tính id với giá trị là "javascript"</a>
    <h1 id="html">1. Tài liệu học HTML</h1>
    ...
    <h1 id="css">2. Tài liệu học CSS</h1>
    ...
    <h1 id="javascript">3. Tài liệu học JavaScript</h1>
    ...
</body>
</html>

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxNKVp” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxNKVp’>oNxNKVp</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

          2.3 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ề.

Ví dụ:


<!DOCTYPE html>
<html>
<body>
    <a href="https://webaffiliatevn.com/wp-content/uploads/2020/07/Microsite-la-gi-2.png" download>Nhấn vào đây !!!</a>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”jOqOgoO” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/jOqOgoO’>jOqOgoO</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

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
_self Mở tài liệu trong khung hiện tại
_parent Mở tài liệu trong khung cha của khung hiện tại
_top Mở tài liệu trong tab hiện tại

 

     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);
}

Đánh giá post

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

You cannot copy content of this page

Bạn muốn đọc tin riêng tư, hay hơn?
Đăng ký danh sách email của chúng tôi, chúng tôi sẽ gởi thêm tin theo xu hướng mới!
Cập nhật kiến thức và thông tin mới nhất về Affiliate & Tip kiếm tiền online hiệu quả .

PS: Cam kết bảo mật thông tin, không spam

Đăng ký bản tin

Không, cảm ơn, tôi không muốn đọc thêm tin
Contact Me on Zalo