Làm cách nào để tạo liên kết văn bản trong javascript?

Ví dụ;

Vì vậy, trong hướng dẫn này, chúng tôi sẽ giải quyết vấn đề này. Bạn cũng có thể muốn tạo url ngắn bằng PHP

Tham gia với hơn 27.000 thành viên trong nhóm Google của bạn và nhận các hướng dẫn mới nhất

Nhận các hướng dẫn mới nhất của chúng tôi, Hướng dẫn cách thực hiện về phát triển web mỗi ngày ngay trong hộp thư đến của bạn

Làm cách nào để tạo liên kết văn bản trong javascript?

HÃY XEM THỬ HƯỚNG DẪN TRỰC TIẾP NÀY →

Tạo tệp HTML và xác định đánh dấu và tập lệnh Để chuyển đổi URL thành Liên kết HTML

Chúng ta phải tạo một tệp HTML và đặt tên là url. html


  



  
  Convert URL Text Into Clickable HTML Link Using JavaScript
  
  
  



Trong bước này, chúng tôi tạo một vùng văn bản nơi người dùng sẽ viết một số văn bản có liên kết và sau đó khi người dùng nhấp vào nút chuyển đổi, chúng tôi gọi convert();

Trong chức năng này, chúng tôi viết hai biểu thức chính quy để phát hiện liên kết trong văn bản. Bạn cũng có thể thích trích xuất dữ liệu url như facebook bằng PHP và ajax

Biểu thức chính quy đầu tiên phát hiện xem liên kết có bắt đầu từ http,https,ftp,file hay không và nếu có thì nó chuyển đổi văn bản thành liên kết HTML có thể nhấp

Biểu thức chính quy thứ hai được sử dụng để phát hiện xem liên kết có bắt đầu từ www hay không và nếu có thì nó chuyển đổi văn bản thành liên kết HTML có thể nhấp và chèn văn bản vào đoạn văn

Bạn cũng có thể muốn tạo các url ngắn bằng PHP và google api

Đó là tất cả, đây là cách chuyển đổi văn bản URL thành liên kết HTML có thể nhấp bằng JavaScript. Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này

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.

Làm cách nào để tạo liên kết văn bản trong 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 mà bạn 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

Làm cách nào để tạo liên kết văn bản trong javascript?

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/">the Mozilla homepagea>.
    p>
    
    3

  • 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/">the Mozilla homepagea>.
    p>
    
    37, 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/">the Mozilla homepagea>.
    p>
    
    37

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

  • 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/">the Mozilla homepagea>.
    p>
    
    37 trỏ đến
    <p>
      I'm creating a link to
      <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
    p>
    
    91, 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/">the Mozilla homepagea>.
    p>
    
    93 — do đó, URL bạn sẽ sử dụng là
    <p>
      I'm creating a link to
      <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
    p>
    
    94

    <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

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/">the Mozilla homepagea>.
p>
95

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

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

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
p>
96 cụ thể đó, bạn nên đưa nó vào cuối URL, trước ký hiệu dấu thăng/pound (
<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
p>
98), 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>
0

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>
1

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>
51, 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>
52 (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>
53, 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>
52 đế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/">the Mozilla homepagea>.
p>
91 (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>
70. )

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ả những gì đang đượ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

<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

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>
79 để 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 mà một trang web được tạo ra — 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, vì vậy 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 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

Làm cách nào để tạo liên kết văn bản trong 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>
01

Ở 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>
01 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>
04 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 (_______405) để 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>
01. Đâ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>
04 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