Tìm url trong văn bản tạo liên kết javascript

Thuộc tính quan trọng nhất của phần tử

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5 là thuộc tính
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6, cho biết đích của liên kết

Văn bản liên kết là phần sẽ hiển thị cho người đọc

Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định

Ví dụ

Ví dụ này cho thấy cách tạo liên kết đến W3Schools. com

Truy cập W3Schools. com

Tự mình thử »

Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt

  • Một liên kết chưa được truy cập được gạch chân và có màu xanh lam
  • Một liên kết đã truy cập được gạch chân và có màu tím
  • Một liên kết hoạt động được gạch chân và màu đỏ

Mẹo. Tất nhiên, các liên kết có thể được tạo kiểu bằng CSS, để có giao diện khác


Liên kết HTML - Thuộc tính đích

Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết

Thuộc tính

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 chỉ định nơi mở tài liệu được liên kết

Thuộc tính

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 có thể có một trong các giá trị sau

  • <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    9 - Mặc định. Mở tài liệu trong cùng một cửa sổ/tab khi nó được nhấp vào
  • <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    0 - ​​Mở tài liệu trong cửa sổ hoặc tab mới
  • <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    1 - Mở tài liệu trong khung chính
  • <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 - Mở tài liệu trong toàn bộ cửa sổ

Ví dụ

Sử dụng target="_blank" để mở tài liệu được liên kết trong cửa sổ hoặc tab trình duyệt mới

Truy cập W3Schools

Tự mình thử »


URL tuyệt đối so với. URL tương đối

Cả hai ví dụ trên đều sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong thuộc tính

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6

Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có "https. // phần www")

Ví dụ

URL tuyệt đối

W3C

Google

URL tương đối

Hình ảnh HTML

Hướng dẫn CSS

Tự mình thử »



Liên kết HTML - Sử dụng hình ảnh làm liên kết

Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
50 bên trong thẻ
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5

Ví dụ


Tìm url trong văn bản tạo liên kết javascript

Tự mình thử »


Liên kết đến một địa chỉ email

Sử dụng

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
52 bên trong thuộc tính
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới)


Nút dưới dạng Liên kết

Để sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript

JavaScript cho phép bạn chỉ định điều gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút

Ví dụ

Hướng dẫn HTML

Tự mình thử »


Tiêu đề liên kết

Thuộc tính

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
54 chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử

Nhận toàn quyền truy cập vào Sách dạy nấu ăn biểu thức chính quy, Ấn bản thứ 2 và hơn 60 nghìn đầu sách khác, với bản dùng thử miễn phí 10 ngày của O'Reilly

Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v.

Các siêu liên kết thực sự quan trọng — chúng là thứ làm cho Web trở thành một trang web. Bài viết này trình bày cú pháp cần thiết để tạo liên kết và thảo luận về các phương pháp hay nhất về liên kết

điều kiện tiên quyết. Làm quen với HTML cơ bản, như được trình bày trong Bắt đầu với HTML. Định dạng văn bản HTML, như được trình bày trong Nguyên tắc cơ bản về văn bản HTML. Khách quan. Để tìm hiểu cách triển khai siêu kết nối một cách hiệu quả và liên kết nhiều tệp với nhau

Siêu liên kết là một trong những đổi mới thú vị nhất mà Web cung cấp. Chúng đã là một tính năng của Web ngay từ đầu và là thứ làm cho Web trở thành một trang web. Siêu liên kết cho phép chúng tôi liên kết tài liệu với các tài liệu hoặc tài nguyên khác, liên kết đến các phần cụ thể của tài liệu hoặc cung cấp ứng dụng tại một địa chỉ web. Hầu hết mọi nội dung web đều có thể được chuyển đổi thành một liên kết để khi được nhấp hoặc kích hoạt, trình duyệt web sẽ chuyển đến một địa chỉ web (URL) khác

Ghi chú. Một URL có thể trỏ tới các tệp HTML, tệp văn bản, hình ảnh, tài liệu văn bản, tệp video và âm thanh hoặc bất kỳ thứ gì khác tồn tại trên Web. Nếu trình duyệt web không biết cách hiển thị hoặc xử lý tệp, nó sẽ hỏi bạn có muốn mở tệp không (trong trường hợp đó, nhiệm vụ mở hoặc xử lý tệp được chuyển cho một ứng dụng gốc phù hợp trên thiết bị)

Ví dụ: trang chủ của BBC chứa nhiều liên kết trỏ đến không chỉ nhiều câu chuyện tin tức mà còn cả các khu vực khác nhau của trang web (chức năng điều hướng), trang đăng nhập/đăng ký (công cụ người dùng), v.v.

Tìm url trong văn bản tạo liên kết javascript

Liên kết cơ bản được tạo bằng cách gói văn bản hoặc nội dung khác, xem , bên trong phần tử

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
5 và sử dụng thuộc tính, còn được gọi là Tham chiếu siêu văn bản hoặc đích, chứa địa chỉ web

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
p>

Điều này cho chúng ta kết quả sau

Tôi đang tạo một liên kết đến trang chủ Mozilla

Một thuộc tính khác mà bạn có thể muốn thêm vào các liên kết của mình là

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
7. Tiêu đề chứa thông tin bổ sung về liên kết, chẳng hạn như loại thông tin mà trang chứa hoặc những điều cần lưu ý trên trang web

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>

Điều này mang lại cho chúng tôi kết quả sau và di chuột qua liên kết sẽ hiển thị tiêu đề dưới dạng chú giải công cụ

Tôi đang tạo một liên kết đến trang chủ Mozilla

Ghi chú. Tiêu đề liên kết chỉ được hiển thị khi di chuột, điều đó có nghĩa là những người dựa vào điều khiển bàn phím hoặc màn hình cảm ứng để điều hướng các trang web sẽ gặp khó khăn khi truy cập thông tin tiêu đề. Nếu thông tin của tiêu đề thực sự quan trọng đối với khả năng sử dụng của trang thì bạn nên trình bày nó theo cách mà tất cả người dùng đều có thể truy cập được, chẳng hạn bằng cách đặt nó trong văn bản thông thường

Tạo tài liệu HTML bằng trình chỉnh sửa mã cục bộ của bạn và mẫu bắt đầu của chúng tôi

  • Bên trong nội dung HTML, hãy thêm một hoặc nhiều đoạn văn hoặc loại nội dung khác mà bạn đã biết
  • Thay đổi một số nội dung thành liên kết
  • Bao gồm các thuộc tính tiêu đề

Như đã đề cập trước đây, hầu hết mọi nội dung đều có thể được tạo thành một liên kết, thậm chí. Nếu bạn có một hình ảnh muốn tạo thành một liên kết, hãy sử dụng phần tử

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
5 và tham chiếu tệp hình ảnh với phần tử
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
9

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>

Ghi chú. Bạn sẽ tìm hiểu thêm về cách sử dụng hình ảnh trên Web trong một bài viết sau

Để hiểu đầy đủ các mục tiêu liên kết, bạn cần hiểu URL và đường dẫn tệp. Phần này cung cấp cho bạn thông tin bạn cần để đạt được điều này

URL hoặc Bộ định vị tài nguyên thống nhất là một chuỗi văn bản xác định vị trí của một thứ gì đó trên Web. Ví dụ: trang chủ tiếng Anh của Mozilla được đặt tại

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
0

URL sử dụng đường dẫn để tìm tệp. Đường dẫn chỉ định vị trí của tệp bạn quan tâm trong hệ thống tệp. Hãy xem một ví dụ về cấu trúc thư mục, xem thư mục tạo siêu liên kết

Tìm url trong văn bản tạo liên kết javascript

Thư mục gốc của cấu trúc thư mục này được gọi là

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
1. Khi làm việc cục bộ với một trang web, bạn sẽ có một thư mục chứa toàn bộ trang web. Bên trong thư mục gốc, chúng tôi có một tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 và một tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
3. Trong một trang web thực,
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 sẽ là trang chủ hoặc trang đích của chúng tôi (một trang web đóng vai trò là điểm vào cho một trang web hoặc một phần cụ thể của trang web. )

Ngoài ra còn có hai thư mục bên trong thư mục gốc của chúng tôi -

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5 và
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6. Mỗi cái này có một tệp duy nhất bên trong chúng — tệp PDF (
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7) và tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2, tương ứng. Lưu ý rằng bạn có thể có hai tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 trong một dự án, miễn là chúng ở các vị trí hệ thống tệp khác nhau.
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 thứ hai có lẽ sẽ là trang đích chính cho thông tin liên quan đến dự án

  • Cùng thư mục. Nếu bạn muốn bao gồm một siêu liên kết bên trong
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 (cấp cao nhất của
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2) trỏ đến
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    3, bạn phải chỉ định tên tệp mà bạn muốn liên kết tới, vì nó nằm trong cùng thư mục với tệp hiện tại. URL bạn sẽ sử dụng là
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    3

    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    2

  • Di chuyển xuống các thư mục con. Nếu bạn muốn bao gồm một siêu liên kết bên trong
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 (cấp cao nhất của
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2) trỏ đến
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    27, bạn cần phải đi xuống thư mục
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    6 trước khi chỉ ra tệp bạn muốn liên kết đến. Điều này được thực hiện bằng cách chỉ định tên của thư mục, sau đó là dấu gạch chéo lên, sau đó là tên của tệp. URL bạn sẽ sử dụng là
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    27

    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    8

  • Di chuyển sao lưu vào thư mục mẹ. Nếu bạn muốn bao gồm một siêu liên kết bên trong
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    27 trỏ đến
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    81, bạn phải đi lên một cấp độ thư mục, sau đó quay trở lại thư mục
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    5. Để đi lên một thư mục, hãy sử dụng hai dấu chấm —
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    83 — do đó, URL bạn sẽ sử dụng là
    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    84

    <p>
      I'm creating a link to
      <a
        href="https://www.mozilla.org/en-US/"
        title="The best place to find more information about Mozilla's
              mission and how to contribute">the Mozilla homepagea>.
    p>
    
    4

Ghi chú. Ví dụ: bạn có thể kết hợp nhiều phiên bản của các tính năng này thành các URL phức tạp.

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
85

Có thể liên kết đến một phần cụ thể của tài liệu HTML, được gọi là đoạn tài liệu, thay vì chỉ đến đầu tài liệu. Để làm điều này, trước tiên bạn phải gán một thuộc tính cho phần tử mà bạn muốn liên kết đến. Nó thường hợp lý để liên kết đến một tiêu đề cụ thể, vì vậy tiêu đề này sẽ trông giống như sau

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
6

Sau đó, để liên kết đến

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
86 cụ thể đó, bạn sẽ đưa nó vào cuối URL, trước ký hiệu thăng/pound (
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
88), chẳng hạn

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
9

Bạn thậm chí có thể tự mình sử dụng tham chiếu đoạn tài liệu để liên kết đến một phần khác của tài liệu hiện tại

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
0

Hai thuật ngữ bạn sẽ bắt gặp trên Web là URL tuyệt đối và URL tương đối

URL tuyệt đối. Trỏ tới một vị trí được xác định bởi vị trí tuyệt đối của nó trên web, bao gồm cả giao thức và tên miền. Ví dụ: nếu một trang

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 được tải lên một thư mục có tên là
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 nằm bên trong thư mục gốc của máy chủ web và miền của trang web là
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
41, thì trang đó sẽ có sẵn tại
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
42 (hoặc thậm chí chỉ là
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
43, vì hầu hết các máy chủ web chỉ xem . )

Một URL tuyệt đối sẽ luôn trỏ đến cùng một vị trí, bất kể nó được sử dụng ở đâu

URL tương đối. Trỏ tới một vị trí có liên quan đến tệp mà bạn đang liên kết từ đó, giống như những gì chúng ta đã xem xét trong phần trước. Ví dụ: nếu chúng tôi muốn liên kết từ tệp ví dụ của chúng tôi tại

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
42 đến tệp PDF trong cùng thư mục, thì URL sẽ chỉ là tên tệp —
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 — không cần thêm thông tin. Nếu PDF có sẵn trong thư mục con bên trong
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 được gọi là
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5, thì liên kết tương đối sẽ là
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
81 (URL tuyệt đối tương đương sẽ là
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
60. )

Một URL tương đối sẽ trỏ đến các vị trí khác nhau tùy thuộc vào vị trí thực tế của tệp mà bạn tham chiếu từ đó — ví dụ: nếu chúng tôi đã chuyển tệp

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 của mình ra khỏi thư mục
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 và vào thư mục gốc của trang web (cấp cao nhất, không có trong bất kỳ thư mục nào)

Tất nhiên, vị trí của tệp

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 và thư mục
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5 sẽ không thay đổi đột ngột vì bạn đã di chuyển tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 — điều này sẽ khiến liên kết của bạn trỏ đến sai vị trí, vì vậy nó sẽ không hoạt động nếu bạn nhấp vào. bạn cần cẩn thận

Có một số thực hành tốt nhất để làm theo khi viết liên kết. Bây giờ chúng ta hãy nhìn vào những điều này

Thật dễ dàng để ném các liên kết lên trang của bạn. Như thế là không đủ. Chúng tôi cần làm cho tất cả người đọc có thể truy cập các liên kết của mình, bất kể bối cảnh hiện tại của họ là gì và họ thích công cụ nào hơn. Ví dụ

  • Người dùng trình đọc màn hình thích nhảy từ liên kết này sang liên kết khác trên trang và đọc các liên kết ngoài ngữ cảnh
  • Các công cụ tìm kiếm sử dụng văn bản liên kết để lập chỉ mục các tệp mục tiêu, do đó, nên bao gồm các từ khóa trong văn bản liên kết của bạn để mô tả hiệu quả nội dung được liên kết đến
  • Người đọc trực quan lướt qua trang thay vì đọc từng từ và mắt họ sẽ bị thu hút bởi các tính năng nổi bật của trang, chẳng hạn như liên kết. Họ sẽ thấy văn bản liên kết mô tả hữu ích

Hãy xem xét một ví dụ cụ thể

Văn bản liên kết tốt. Tải xuống Firefox

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
1

Văn bản liên kết xấu. Nhấn vào đây để tải Firefox

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
0

mẹo khác

  • Không lặp lại URL như một phần của văn bản liên kết — URL trông xấu xí và âm thanh thậm chí còn xấu hơn khi trình đọc màn hình đọc từng chữ cái của chúng
  • Đừng nói "liên kết" hoặc "liên kết đến" trong văn bản liên kết - đó chỉ là tiếng ồn. Trình đọc màn hình cho mọi người biết có một liên kết. Người dùng trực quan cũng sẽ biết có một liên kết, bởi vì các liên kết thường được tạo kiểu bằng một màu khác và được gạch chân (quy ước này thường không nên bị phá vỡ, vì người dùng đã quen với nó)
  • Giữ văn bản liên kết của bạn càng ngắn càng tốt — điều này rất hữu ích vì trình đọc màn hình cần diễn giải toàn bộ văn bản liên kết
  • Giảm thiểu các trường hợp nhiều bản sao của cùng một văn bản được liên kết đến những nơi khác nhau. Điều này có thể gây ra sự cố cho người dùng trình đọc màn hình, nếu có một danh sách các liên kết nằm ngoài ngữ cảnh được gắn nhãn "nhấp vào đây", "nhấp vào đây", "nhấp vào đây"

Khi liên kết đến một tài nguyên sẽ được tải xuống (chẳng hạn như tài liệu PDF hoặc Word), được phát trực tuyến (như video hoặc âm thanh) hoặc có tác dụng không mong muốn khác (mở cửa sổ bật lên), bạn nên thêm từ ngữ rõ ràng để giảm bớt sự nhầm lẫn

Ví dụ

  • Nếu bạn đang sử dụng kết nối băng thông thấp, hãy nhấp vào liên kết và sau đó quá trình tải xuống nhiều megabyte bắt đầu bất ngờ

Hãy xem xét một số ví dụ, để xem loại văn bản nào có thể được sử dụng ở đây

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
1

Khi bạn đang liên kết tới một tài nguyên sẽ được tải xuống thay vì mở trong trình duyệt, bạn có thể sử dụng thuộc tính

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
69 để cung cấp tên tệp lưu mặc định. Đây là một ví dụ với liên kết tải xuống phiên bản Windows mới nhất của Firefox

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
2

Đối với bài tập này, chúng tôi muốn bạn liên kết một số trang với một menu điều hướng để tạo một trang web nhiều trang. Đây là một cách phổ biến để tạo một trang web — cùng một cấu trúc trang được sử dụng trên mọi trang, bao gồm cùng một menu điều hướng, do đó, khi các liên kết được nhấp vào, nó sẽ tạo ấn tượng rằng bạn đang ở cùng một nơi và nội dung khác là

Bạn sẽ cần tạo các bản sao cục bộ của bốn trang sau, tất cả trong cùng một thư mục. Để có danh sách tệp đầy đủ, hãy xem thư mục menu-menu-bắt đầu

  • mục lục. html
  • dự án. html
  • những bức ảnh. html
  • xã hội. html

Bạn nên

  1. Thêm một danh sách không có thứ tự vào vị trí được chỉ định trên một trang bao gồm tên của các trang để liên kết đến. Một menu điều hướng thường chỉ là một danh sách các liên kết, vì vậy về mặt ngữ nghĩa thì điều này là ổn
  2. Thay đổi từng tên trang thành một liên kết đến trang đó
  3. Sao chép menu điều hướng trên mỗi trang
  4. Trên mỗi trang, chỉ xóa liên kết đến cùng một trang đó — thật khó hiểu và không cần thiết khi một trang bao gồm liên kết đến chính nó. Và, việc thiếu liên kết đóng vai trò nhắc nhở trực quan về trang bạn hiện đang truy cập

Ví dụ hoàn thành sẽ trông giống như trang sau

Tìm url trong văn bản tạo liên kết javascript

Ghi chú. Nếu bạn gặp khó khăn hoặc không chắc mình đã hiểu đúng hay chưa, bạn có thể kiểm tra thư mục navigation-menu-marked-up để xem câu trả lời chính xác

Có thể tạo các liên kết hoặc nút mà khi được nhấp vào sẽ mở một email gửi đi mới thay vì liên kết đến một tài nguyên hoặc trang. Điều này được thực hiện bằng cách sử dụng phần tử

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
5 và lược đồ URL
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
91

Ở dạng cơ bản nhất và thường được sử dụng, liên kết

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
91 cho biết địa chỉ email của người nhận dự định. Ví dụ

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
3

Điều này dẫn đến một liên kết trông như thế này. Gửi email đến hư không

Trên thực tế, địa chỉ email là tùy chọn. Nếu bạn bỏ qua nó và của bạn là "mailto. ", một cửa sổ email gửi đi mới sẽ được mở bởi ứng dụng email của người dùng mà không có địa chỉ đích. Điều này thường hữu ích vì liên kết "Chia sẻ" mà người dùng có thể nhấp để gửi email đến địa chỉ họ chọn

Ngoài địa chỉ email, bạn có thể cung cấp các thông tin khác. Trên thực tế, bất kỳ trường tiêu đề thư tiêu chuẩn nào cũng có thể được thêm vào URL

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
94 mà bạn cung cấp. Những từ được sử dụng phổ biến nhất trong số này là "subject", "cc" và "body" (không phải là trường tiêu đề thực, nhưng cho phép bạn chỉ định một thông báo nội dung ngắn cho email mới). Mỗi trường và giá trị của nó được chỉ định làm cụm từ truy vấn

Đây là một ví dụ bao gồm cc, bcc, chủ đề và nội dung

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
4

Ghi chú. Các giá trị của từng trường phải được mã hóa URL bằng các ký tự không in được (các ký tự vô hình như tab, dấu xuống dòng và dấu ngắt trang) và phần trăm thoát dấu cách. Ngoài ra, hãy lưu ý việc sử dụng dấu chấm hỏi (

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
95) để phân tách URL chính khỏi các giá trị trường và dấu và (&) để phân tách từng trường trong URL
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
91. Đây là ký hiệu truy vấn URL tiêu chuẩn. Đọc để hiểu ký hiệu truy vấn URL nào được sử dụng phổ biến hơn cho

Dưới đây là một số URL

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
94 mẫu khác

  • gửi thư
  • gửi thư. hư không@mozilla. tổ chức
  • gửi thư. hư không@mozilla. org,nobody@mozilla. tổ chức
  • gửi thư. hư không@mozilla. org?cc=nobody@mozilla. tổ chức
  • gửi thư. hư không@mozilla. org?cc=nobody@mozilla. org&subject=This%20is%20the%20subject

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . liên kết

Đó là cho các liên kết, bây giờ dù sao đi nữa. Bạn sẽ quay lại các liên kết sau này trong khóa học khi bạn bắt đầu xem xét cách tạo kiểu cho chúng. Tiếp theo đối với HTML, chúng ta sẽ quay lại ngữ nghĩa văn bản và xem xét một số tính năng nâng cao/bất thường hơn mà bạn sẽ thấy hữu ích — Định dạng văn bản nâng cao là điểm dừng tiếp theo của bạn

Làm cách nào để tìm và thay thế URL văn bản bằng JavaScript liên kết?

RegExp – Tìm URL trong văn bản được cung cấp và cũng tìm tên miền của URL. Sau khi nhận được URL ở dạng văn bản, nó sẽ thay thế nó bằng phần tử . Nó cũng thay thế văn bản liên kết theo tên miền.

Làm cách nào để phát hiện và nhận URL trên chuỗi JavaScript?

Trả lời. Sử dụng cửa sổ. vị trí. href Thuộc tính vị trí. href để lấy toàn bộ URL của trang hiện tại bao gồm tên máy chủ, chuỗi truy vấn, mã định danh phân đoạn, v.v.

Làm cách nào để chuyển đổi văn bản URL thành siêu liên kết có thể nhấp trong JavaScript?

Hàm JavaScript . Đầu tiên, nó sẽ tìm các liên kết bắt đầu bằng http/https/ftp/file và thay thế chúng bằng các văn bản siêu liên kết. Tiếp theo, nó tìm kiếm các url bắt đầu bằng www và thay thế các url đó bằng các liên kết có thể nhấp được. The function toHyperlink() will do a two-step pattern match. First it will find the links starting with http / https / ftp / file and replace those with hyperlinked texts. Next it looks for urls that start with www and replace those with clickable links.

Làm cách nào để lấy văn bản liên kết trong JavaScript?

Sử dụng thuộc tính textContent để lấy văn bản của phần tử liên kết , e. g. const văn bản = liên kết. văn bảnnội dung. Thuộc tính textContent sẽ trả về nội dung văn bản của phần tử