Thẻ HTML – Mã ví dụ về thẻ neo – thẻ liên kết là gì

HTML (Ngôn ngữ đánh dấu siêu văn bản) là một trong những ngôn ngữ chúng tôi sử dụng để tạo các ứng dụng web. Nó bổ sung cấu trúc cho các trang web của bạn. HTML có nhiều thẻ khác nhau mà chúng tôi sử dụng để tạo các phần tử. Và nhiều yếu tố kết hợp với nhau để tạo ra các trang web và ứng dụng có ý nghĩa. Thẻ liên kết là một trong các

Bạn đang xem: thẻ liên kết là gì

HTML ( H > yper T ext M arkup L anguage) là một trong những ngôn ngữ chúng tôi sử dụng để tạo ứng dụng web. Nó bổ sung cấu trúc cho các trang web của bạn.

HTML có nhiều thẻ khác nhau mà chúng tôi sử dụng để tạo các phần tử. Và nhiều phần tử kết hợp với nhau để tạo ra các trang web và ứng dụng có ý nghĩa.

Thẻ anchor là một trong những thẻ được sử dụng nhiều nhất và nổi tiếng trong HTML. Trong bài viết này, chúng ta sẽ tìm hiểu về thẻ liên kết (& lt; a & gt;) và cách sử dụng chính của nó với nhiều ví dụ.

Nhưng tại sao lại nói về thẻ liên kết nếu nó đã nổi tiếng? Có một vài chi tiết cần thiết của thẻ này mà nhiều nhà phát triển không biết – nhưng họ nên làm như vậy. Vì vậy, hãy tìm hiểu chúng.

Tôi đã tạo một ứng dụng để thể hiện các hành vi khác nhau của thẻ liên kết. Bạn có thể xem và sử dụng nó khi đọc bài viết này.

Neo

Anchors là một ứng dụng demo để hiển thị việc sử dụng các thẻ anchor HTML bằng giao diện và tài liệu đơn giản.

og Anchors – Một ứng dụng để chứng minh các thẻ liên kết (https : //anchors.vercel.app/)

Nếu bạn cũng muốn học từ nội dung video, bài viết này cũng có sẵn dưới dạng video hướng dẫn tại đây: 🙂

Thẻ neo trong HTML là gì?

Mục đích chính của thẻ anchor là liên kết một trang với một trang khác hoặc với một của cùng một trang. Thẻ liên kết còn được gọi là HyperLink . Giống như bất kỳ thẻ HTML nào khác, bạn sử dụng cấu trúc sau để tạo thẻ liên kết:

  & lt; a & gt; Trang web của tôi & lt; / a & gt;   

Thẻ liên kết ở trên là một thẻ HTML hợp lệ, nhưng nó không có tác dụng gì khác ngoài hoạt động như một trình giữ chỗ. Hãy sử dụng thẻ liên kết này để liên kết đến một trang web. Bạn cần sử dụng thuộc tính href để liên kết đến một trang khác.

  & lt; a href = "https://tapasadhikary.com "& gt; Trang web của tôi & lt; / a & gt;  

Giá trị của thuộc tính href thường là URL trỏ đến một trang web (như ở trên). Bạn cũng có thể liên kết một phần tử HTML khác hoặc một giao thức (ví dụ: gửi email) và bạn có thể thực thi JavaScript bằng cách sử dụng thuộc tính href. Chúng ta sẽ xem các ví dụ về cách thực hiện tất cả những điều này bên dưới.

Sử dụng thẻ neo với các ví dụ

Cùng với href , có các thuộc tính quan trọng khác làm cho thẻ liên kết hữu ích. Hãy cùng tìm hiểu về chúng với các ví dụ.

Chúng ta đã thấy cách liên kết đến một trang web bên ngoài (trang web). Nhưng bạn cũng có thể liên kết đến một phần của cùng một trang bằng cách liên kết đến một phần tử bằng cách sử dụng id của nó. Giả sử trang của chúng tôi có phần div với id news .

  & lt; div id = "news "& gt;
& lt; h2 & gt; Tin tức & lt; / h2 & gt;
& lt; p & gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed non risus. Suspendisse lectus tra tấn, dignissim ngồi amet,
chất béo bị hoại tử, ultricies sed, dolor. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit.
& lt; / p & gt;
& lt; / div & gt;  

Giờ đây, bạn có thể liên kết đến phần này (div) bằng cách sử dụng thẻ liên kết. Để làm điều đó, chỉ cần sử dụng id của phần có # làm tiền tố cho giá trị href .

  & lt; a href = "# news" & gt; Truy cập & lt; / a & gt;  

Vì vậy, khi bạn nhấp vào liên kết Đi tới , bạn sẽ cuộn đến phần tin tức của trang.

link-page Trình diễn liên kết trong trang. Bạn có thể thử nó bằng ứng dụng Anchors.

Bạn có thể cần mở cài đặt mặc định ứng dụng email với địa chỉ email khi người dùng nhấp vào liên kết. Bạn có thể thực hiện việc này bằng cách sử dụng giao thức mailto làm giá trị của thuộc tính href . Cú pháp của giá trị phải ở dạng mailto: & lt; email address & gt; .

  & lt; a href = "mailto : me@example.com "& gt; Gửi email & lt; / a & gt; 

Bây giờ, nhấp vào liên kết Gửi email sẽ mở ứng dụng email khách mặc định trên hệ điều hành của bạn với địa chỉ email ( me@example.com < / span>) được chỉ định trong trường TO .

Tương tự, bạn có thể sử dụng cấu trúc tel: & lt; Phone Number & gt; để mở cài đặt mặc định ứng dụng điện thoại có số điện thoại khi ai đó nhấp vào liên kết.

  & lt; a href = "tel: +914123456765" & gt; Gọi + 914123456765 & lt; / a & gt;  

Bạn có thể liên kết đến mã JavaScript và thực thi nó khi ai đó nhấp vào liên kết. Bạn không nên làm điều này thường xuyên, vì nó luôn là một phương pháp hay hơn là dựa vào các trình xử lý sự kiện để thực hiện các hành động hơn là liên kết chúng. Nhưng chúng ta cũng hãy học phương pháp này.

  & lt; a href = "javascript: alert ('Hello World!')" & Gt; Nhấp vào tôi & lt; / a & gt; < / code> 

Bây giờ, nếu bạn nhấp vào liên kết Nhấp vào tôi , bạn sẽ thấy một cảnh báo của trình duyệt với dòng chữ Hello World! trong đó.

Cách tải xuống tệp

Thẻ liên kết có thuộc tính download biến liên kết thành một liên kết tải xuống. Bạn có thể tải xuống tệp bằng cách nhấp vào liên kết. Nó sẽ mở cửa sổ bật lên tải xuống để lưu tệp trên thiết bị.

  & lt; a href = "./ images / rajni.jpg" download = "Thalaiva" & gt; Tải xuống & lt; / a & gt;
 

Bạn có thể tùy ý chỉ định tên tệp tùy chỉnh bằng cách gán tên cho thuộc tính download . Không cần chỉ định phần mở rộng tệp trong khi chỉ định tên tùy chỉnh. Nó sẽ được thêm tự động tùy thuộc vào phần mở rộng tệp mà bạn đang cố tải xuống.

Lưu ý rằng chức năng này chỉ hoạt động nếu tệp có cùng nguồn gốc . Tệp bạn đang tải xuống phải nằm trong cùng một trang web nơi liên kết được thêm vào.

Tải xuống Trình diễn liên kết tải xuống. Vui lòng dùng thử bằng ứng dụng Anchors.

Hãy xem tweet này,

Thích nó? Tôi chia sẻ kiến ​​thức của mình trên Twitter hàng ngày. Vui lòng cung cấp SAU 😀.

Cách mở trang trong cửa sổ / tab mới

Bạn có thể không muốn người dùng của mình bị phân tâm quá nhiều vào những gì họ đang làm khi nhấp vào một liên kết. Bạn có thể muốn mở trang trong cửa sổ / tab trình duyệt mới khi người dùng nhấp vào liên kết trên trang hiện tại. Chúng tôi có thể sử dụng thuộc tính target cho mục đích này.

  & lt; a href = "https://example.com" target = "_blank" & gt; Nhấp vào Tôi & lt; / a & gt;  

Thuộc tính target có thể có các giá trị sau,

  • _blank : đây là tùy chọn được sử dụng nhiều nhất. Bạn có thể mở trang được liên kết trên cửa sổ / tab mới bằng cách đặt giá trị thuộc tính mục tiêu là _blank.
  • _self : đây là giá trị mặc định. Nó giúp mở trang được liên kết trong cùng một khung cửa sổ.
  • _top : thao tác này sẽ mở trang được liên kết trong cửa sổ trên cùng.
  • _parent < / code>: thao tác này sẽ mở trang được liên kết trong khung chính.

Chúng ta sẽ xem cách sử dụng hai giá trị cuối cùng khi chúng ta thảo luận về liên kết với các khung sau một thời gian.

Tabnabbing là một kiểu tấn công An ninh mạng trong đó kẻ tấn công lợi dụng việc người dùng di chuyển khỏi trang hiện tại và giới thiệu một cuộc tấn công Lừa đảo .

Giả sử bạn đang duyệt một trang web và nhấp vào liên kết để mở trang trong một tab / cửa sổ mới (hãy nhớ mục tiêu = _blank ?). Bây giờ kẻ tấn công nắm được đối tượng window của trình duyệt và điều khiển (chuyển hướng) trang nguồn đến một trang web trông giống nhau với một vài thay đổi để bẫy bạn.

Một vài thay đổi đó có thể là biểu mẫu đăng nhập mà bạn vô tình cung cấp thông tin đăng nhập của mình và kẻ tấn công sẽ thắng. Đây được gọi là Tabnabbing .

Để bảo vệ người dùng khỏi cuộc tấn công như Tabnabbing , bạn cần chuyển một vài giá trị vào của thẻ neo Thuộc tính rel :

  • noopener : làm cho ngữ cảnh trình duyệt đang mở không xác định bằng cách đặt đối tượng window.opener null . Điều này có nghĩa là kẻ tấn công không có bất kỳ cách nào để chuyển hướng trang nguồn.
  • noreferrer: điều này đảm bảo rằng tiêu đề liên kết giới thiệu sẽ không được bao gồm khi liên kết được nhấp vào. Bạn phải đặt giá trị này cho các trình duyệt cũ hơn.

Vì vậy, cách an toàn hơn để sử dụng giá trị target = _blank là với rel thuộc tính như sau:

  & lt; a href = "https://example.com" target = "_ blank" rel = "noopener noreferrer" & gt;  

Bạn có thể bao gồm một HTML khác tài liệu trên trang hiện tại bằng thẻ & lt; iframe & gt; .

  & lt; iframe src = "./ child-frame.html "frameborder =" 0 "& gt; & lt; / iframe & gt;  

Sau đó, chlid-frame.html có thể có một iframe khác để bao gồm một tài liệu HTML khác.

  & lt; div class = "child-frame" & gt;
  Tôi là khung Con.
  & lt; iframe src = "./ grand-child-frame.html" frameborder = "0" & ​​gt; & lt; / iframe & gt;
& lt; / div & gt;  

Nội dung của tệp child-frame.html

Bây giờ bạn làm cách nào để liên kết đến khung chính từ trang grand-child.html? Ngoài ra, làm cách nào để bạn liên kết đến khung cửa sổ trên cùng?

  & lt; li & gt;
    & lt; a href = "https://example.com" target = "_ parent" & gt; Mở trong khung chính (target: _parent) & lt; / a & gt;
    & lt; a href = "https://example.com" target = "_ top" & gt; Mở ở toàn bộ phần nội dung của cửa sổ (target: _top) & lt; / a & gt;
& lt; / li & gt;
             

Nội dung của tệp grand-child.html

Như đoạn mã trên hiển thị, chúng tôi sử dụng đích là _parent để liên kết đến khung chính. Giá trị đích _top liên kết đến khung cửa sổ.

context Kiểm tra sự khác biệt giữa cả hai lần nhấp vào liên kết. Hãy thử nó bằng ứng dụng Anchors.

​​Cách ping trong nền

Bạn có thể muốn theo dõi có bao nhiêu nhấp chuột vào một liên kết cụ thể trên trang web của bạn. Để làm điều đó, bạn có thể sử dụng thuộc tính ping của thẻ liên kết.

Thuộc tính ping chấp nhận một hoặc nhiều URL làm giá trị. Khi ai đó nhấp vào liên kết, nó sẽ đưa ra một yêu cầu ĐĂNG nhỏ trên các URL đó. Nếu có nhiều URL, chúng phải được phân tách bằng dấu phẩy.

  & lt; a href = "https://example.com" ping = "https: / /example.com/tracking">Với Ping & lt; / a & gt;
 

Cách tạo kiểu cho thẻ neo

Thẻ liên kết có các trạng thái. Trạng thái mặc định được gọi là link . Ba trạng thái khác là:

  • hover : Một anchor có trạng thái này khi người dùng di chuột qua nó.
  • hoạt động : Một liên kết có trạng thái này khi người dùng nhấp vào liên kết.
  • đã truy cập : Trạng thái đã truy cập có nghĩa là người dùng đã nhấp vào liên kết cố định.
  • < / ul>

    Đôi khi bạn có thể nhầm lẫn với sự khác biệt giữa trạng thái hoạt động đã truy cập . Trạng thái hoạt động ngắn gọn. Nó chỉ kích hoạt khi người dùng nhấp vào một liên kết và sau đó trạng thái chuyển sang trạng thái đã truy cập .

    CSS có các lớp giả để áp dụng các kiểu cho một trạng thái cụ thể. Các lớp giả được đặt trước biểu tượng dấu hai chấm (:) và được thêm vào sau một bộ chọn. Vì vậy, đối với thẻ liên kết (), chúng ta có thể tạo kiểu cho tất cả các trạng thái mà chúng ta đã thấy ở trên.

    • a: link : giống như việc áp dụng kiểu cho a thẻ trực tiếp.
    • a: hover : áp dụng các kiểu khi người dùng di chuột qua anchor.
    • a : active < /code>.

      Dưới đây là một ví dụ về việc áp dụng các màu khác nhau cho mọi trạng thái của thẻ ký tự liên kết:

        a: liên kết {
          màu: # ff3e00;
      }
      
      a: di chuột {
          màu: # ffee00;
      }
      
      a: hoạt động {
          màu: # d900ff;
      }
      
      a: đã thăm {
          màu: # 51ff00;
      }
      
       

      Bạn có thể áp dụng bất kỳ kiểu nào bạn chọn dựa trên những thay đổi trạng thái này.

      Đừng nhầm lẫn giữa Thẻ neo với Thẻ liên kết

      Đôi khi, bạn có thể nhầm lẫn thẻ anchor với liên kết (& lt; liên kết & gt;). Chúng tôi sử dụng thẻ link để liên kết với các tài nguyên bên ngoài như bảng định kiểu, biểu tượng yêu thích, phông chữ, v.v..

        & lt; link rel = "preconnect" href = "https://fonts.googleapis.com" & gt;
      & lt; link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin & gt;
      & lt; link href = "https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel = "stylesheet" & gt;
      
      & lt; link rel = "stylesheet" href = "main.css" & gt;
      
      & lt; link rel = "icon" href = "./ images / fav.ico" & gt;  

      Một vài ví dụ về việc sử dụng thẻ liên kết

      Chúng tôi đã biết rằng mục đích chính của thẻ liên kết (& lt; a & gt;) là để liên kết một trang HTML với một trang khác. Hơn nữa, đây là một siêu liên kết mà bạn có thể nhấp vào để truy cập tài liệu đích.

      Before We Go

      Đó là tất cả cho bây giờ. Tôi hy vọng bạn tìm thấy bài viết sâu sắc và thông tin. DM của tôi được mở trên Twitter nếu bạn muốn thảo luận thêm.

      Hãy kết nối. Tôi cũng chia sẻ kiến ​​thức của mình về JavaScript, Phát triển Web và Viết blog trên các nền tảng này:

      Trước khi chúng ta kết thúc, đây là liên kết dự án GitHub của ứng dụng Anchors mà chúng tôi đã sử dụng bài viết này. Vui lòng sử dụng / fork / cải thiện.

      GitHub - atapas / anchor: Một ứng dụng để trình diễn HTML các thẻ liên kết và thuộc tính của chúng.

      Một ứng dụng để chứng minh các thẻ liên kết HTML và các thuộc tính của chúng. - GitHub - atapas / anchor: Một ứng dụng để chứng minh các thẻ anchor HTML và thuộc tính của chúng.

      atapas

      GitHub

      Kho lưu trữ GitHub của ứng dụng Anchors. Hãy cho nó một ⭐. Nó thúc đẩy tôi.

      Hẹn gặp lại bạn trong bài viết tiếp theo của tôi. Cho đến lúc đó, hãy chăm sóc bản thân và luôn hạnh phúc.


Xem thêm những thông tin liên quan đến chủ đề thẻ liên kết là gì

Xklđ Singapore, Thẻ Spass là như thế nào những loại thẻ định cư tại Singapore cho lao động

alt

  • Tác giả: Phạm Danny vlogs _ Lao động tại Singapore
  • Ngày đăng: 2020-10-17
  • Đánh giá: 4 ⭐ ( 5505 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xklđ Singapore, hãy cùng mình tìm hiểu thêm về thẻ Spass ở Singapore là gì và những loại thẻ định cư tại Singapore nhé
    Xin cảm ơn mọi người đã theo dõi video của mình hãy like và đăng ký kênh để đón xem video mới về Singapore
    Đăng ký kênh YouTube👇👇
    https://www.youtube.com/channel/UC0UPMLoxCoaET48oajaJHPQ
    vieclamtaisingapore huongdantimviecosingapore timvieclam2020
    cuocsongosingapore
    huongdancachphongvandisingapore
    vieclamluongcaotaisingapore
    xkldsingapore
    thespasslagi

Thẻ sinh viên liên kết Vietcombank và những quyền lợi mới nhất 2022

  • Tác giả: thongtintaichinh.vn
  • Đánh giá: 3 ⭐ ( 3453 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ liên kết sinh viên Vietcombank và những quyền lợi liên quan sinh viên nào cũng cần nắm và hưởng đầy đủ quyền lợi

a href là gì | Tạo liên kết bằng thẻ a href trong html

  • Tác giả: alantien.com
  • Đánh giá: 4 ⭐ ( 4617 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: A href là gì, cách sử dụng thẻ a href để tạo liên kết trong html. Thành tạo các thuộc tính target cũng như xử lý các tính huống hay gặp khi sử dụng tag a

Hyperlink là gì? Cách tạo liên kết trang trong Word, Excel, PowerPoint

  • Tác giả: www.dienmayxanh.com
  • Đánh giá: 5 ⭐ ( 8045 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hyperlink có lẽ vẫn còn xa lạ đối với một số người vừa mới tiếp xúc với công nghệ máy tính. Bài viết này sẽ giải thích khái niệm về Hyperlink và cách tạo liên kết.

Cách đăng ký tài khoản và liên kết thẻ ATM với Sacombank Pay

  • Tác giả: hieumobile.com
  • Đánh giá: 3 ⭐ ( 2835 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tiếp thị liên kết là gì? Các bước để trở thành một nhà tiếp thị liên kết

  • Tác giả: adflex.vn
  • Đánh giá: 5 ⭐ ( 6301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 5: Chèn liên kết vào trang web với thẻ a trong HTML

  • Tác giả: phambinh.net
  • Đánh giá: 3 ⭐ ( 2721 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để sử dụng PDO để chèn dữ liệu vào cơ sở dữ liệu? - pdo chèn vào cơ sở dữ liệu