Nút html với liên kết và hình ảnh

Các nút hình ảnh trong tài liệu HTML có thể được tạo bằng cách sử dụng thuộc tính type của một phần tử. Các nút hình ảnh cũng thực hiện chức năng tương tự như các nút gửi, nhưng điểm khác biệt duy nhất giữa chúng là bạn có thể giữ hình ảnh bạn chọn làm nút

cú pháp

ví dụ

ví dụ 1. Ví dụ này được sử dụng để chỉ định nút hình ảnh mà không cần sử dụng CSS

Kiểm tra nó ngay bây giờ

đầu ra

freeCodeCamp 0 của bạn trong thẻ

  freeCodeCamp  

1

freeCodeCamp  

1 và sau đó tạo kiểu cho nó qua CSS

freeCodeCamp  

3 bên trong thẻ

  freeCodeCamp  

4. Chỉ định URL mục tiêu mong muốn trong thuộc tính hành động biểu mẫu

Tôi hy vọng bạn đã tìm thấy hướng dẫn hữu ích. Mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Trong bài viết này, chúng ta sẽ khám phá ba cách khác nhau để bạn có thể làm cho một nút HTML hoạt động giống như một liên kết.

Đây là những phương pháp chúng ta sẽ đi qua

1. Tạo kiểu cho một liên kết trông giống như một nút
2. Sử dụng các thuộc tính action và formaction trong một biểu mẫu
3. Sử dụng sự kiện title JavaScript

Nhưng trước tiên, hãy xem xét cách tiếp cận sai

Tại sao cách tiếp cận này với phần tử

  freeCodeCamp  

6 không hoạt động?

Đoạn mã bên dưới dẫn đến trang web freeCodeCamp khi được nhấp vào

  
    freeCodeCamp
   

Tuy nhiên, đây không phải là HTML hợp lệ

Phần tử

  freeCodeCamp  

7 có thể được bọc quanh toàn bộ đoạn văn, danh sách, bảng, v.v., thậm chí toàn bộ phần, miễn là không có nội dung tương tác bên trong [e. g. , nút hoặc các liên kết khác]. - [Nguồn. ]

Đây được coi là phương pháp không tốt vì nó làm cho ý định của người dùng không rõ ràng

Các liên kết được cho là điều hướng người dùng đến một phần khác của trang web hoặc một trang web bên ngoài. Và các nút được cho là để thực hiện một hành động cụ thể như gửi biểu mẫu.  

Khi bạn lồng cái này vào cái kia, nó sẽ khiến bạn bối rối không biết bạn muốn thực hiện hành động nào. Đó là lý do tại sao tốt nhất là không lồng nút bên trong thẻ neo

Cách tạo kiểu cho một liên kết trông giống như một nút bằng CSS

Cách tiếp cận đầu tiên này hoàn toàn không sử dụng nút. Chúng ta có thể tạo kiểu cho thẻ neo trông giống như một nút bằng CSS

Đây là kiểu HTML mặc định cho thẻ neo

freeCodeCamp

Nếu bạn muốn liên kết mở ra một trang mới, bạn có thể thêm thuộc tính

  freeCodeCamp  

8 như thế này

________số 8

Sau đó, chúng ta có thể thêm màu nền và thay đổi màu chữ như thế này

.fcc-btn {
  background-color: #199319;
  color: white;
}

freeCodeCamp 9 và

  freeCodeCamp  

0 để tạo nút trong biểu mẫu

Cách sử dụng thuộc tính

  freeCodeCamp  

9

Một cách khác là lồng nút bên trong một biểu mẫu và sử dụng thuộc tính hành động

Ví dụ đầu vào

freeCodeCamp  

0freeCodeCamp 0

Tương tự như cách tiếp cận trước, chúng ta có thể tạo một biểu mẫu và sử dụng thuộc tính formaction

Ví dụ đầu vào

  freeCodeCamp  

1

Ví dụ về nút

  freeCodeCamp  

2

Bạn chỉ có thể sử dụng thuộc tính formaction với đầu vào và nút có

  freeCodeCamp  

3 hoặc

  freeCodeCamp  

4.  

Điều này có đúng về mặt ngữ nghĩa không?

Mặc dù đây có vẻ là một giải pháp hiệu quả, vẫn có một câu hỏi liệu điều này có đúng về mặt ngữ nghĩa không

Chúng tôi đang sử dụng thẻ biểu mẫu nhưng thẻ này không hoạt động như biểu mẫu thực. Mục đích của biểu mẫu là thu thập và gửi dữ liệu người dùng

Nhưng chúng tôi đang sử dụng nút gửi để điều hướng người dùng đến một trang khác

Khi nói đến ngữ nghĩa, đây không phải là cách tốt để sử dụng thẻ biểu mẫu

Tác dụng phụ khi sử dụng các thuộc tính hành động và hình thành

Khi bạn nhấp vào nút, điều thú vị sẽ xảy ra với URL. URL hiện có dấu chấm hỏi ở cuối URL

freeCodeCamp 3

Mặc dù cách tiếp cận này là HTML hợp lệ, nhưng nó đi kèm với tác dụng phụ ngoài ý muốn này

Cách sử dụng sự kiện title JavaScript để tạo nút

Trong các cách tiếp cận trước, chúng tôi đã xem xét các giải pháp HTML và CSS. Nhưng chúng ta cũng có thể sử dụng JavaScript để đạt được kết quả tương tự

Ví dụ đầu vào

  freeCodeCamp  

4

Ví dụ về nút

  freeCodeCamp  

5

  freeCodeCamp  

5 đại diện cho vị trí của một URL cụ thể. Trong trường hợp này,

  freeCodeCamp  

6 sẽ trả về https. //www. freecodecamp. tổ chức/

Hạn chế của phương pháp này

Trong khi giải pháp này hoạt động, có một số vấn đề tiềm ẩn cần xem xét

Nếu người dùng đã quyết định tắt JavaScript trong trình duyệt của họ thì rõ ràng giải pháp này sẽ không hiệu quả. Thật không may, điều đó có thể dẫn đến trải nghiệm người dùng kém

Phần kết luận

Mục tiêu của bài viết này là chỉ cho bạn ba cách khác nhau mà bạn có thể làm cho các nút hoạt động giống như các liên kết

Cách tiếp cận đầu tiên là thiết kế một liên kết trông giống như một nút. Chúng tôi cũng đã xem xét cuộc tranh luận liệu có nên thay đổi giao diện của các liên kết để trông giống một yếu tố khác hay không

Cách tiếp cận thứ hai sử dụng các thuộc tính form và formaction. Nhưng chúng tôi cũng biết được rằng phương pháp này có một số tác dụng phụ với URL và không đúng về mặt ngữ nghĩa

Cách tiếp cận thứ ba đã sử dụng sự kiện title JavaScript và Cửa sổ. địa điểm. href. Nhưng chúng tôi cũng biết được rằng phương pháp này có thể không hoạt động nếu người dùng quyết định tắt JavaScript trong trình duyệt của họ

Là một nhà phát triển, điều thực sự quan trọng là phải xem xét ưu và nhược điểm của một phương pháp cụ thể trước khi kết hợp nó vào dự án của bạn.  

Tôi hy vọng bạn thích bài viết này và học được một vài điều trên đường đi

Mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Jessica Wilkins

Tôi là một nhạc sĩ và một lập trình viên

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để tạo một nút có hình ảnh trong HTML?

Bạn có thể đặt một liên kết trong một nút HTML không?