Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Thuộc tính HTML


Thuộc tính HTML cung cấp thông tin bổ sung về các phần tử HTML.


Thuộc tính HTML

  • Tất cả các phần tử HTML có thể có các thuộc tính
  • Các thuộc tính cung cấp thông tin bổ sung về các phần tử
  • Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
  • Các thuộc tính thường có trong các cặp tên / giá trị như: name = "value"

Thuộc tính href

Thẻ <a>xác định một siêu liên kết. Thuộc hreftính chỉ định URL của trang mà liên kết chuyển đến:

Thí dụ

<a href="https://www.w3schools.com">Visit W3Schools</a>

Bạn sẽ tìm hiểu thêm về các liên kết trong chương Liên kết HTML của chúng tôi .


Thuộc tính src

Thẻ <img>được sử dụng để nhúng hình ảnh vào trang HTML. Thuộc srctính chỉ định đường dẫn đến hình ảnh sẽ được hiển thị:

Thí dụ

<img src="img_girl.jpg">

Có hai cách để chỉ định URL trong src thuộc tính:

1. URL tuyệt đối - Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src = "https://www.w3schools.com/images/img_girl.jpg" .

Ghi chú: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.

2. URL tương đối - Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src = "img_girl.jpg". Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến miền. Ví dụ: src = "/ images / img_girl.jpg".

Mẹo: Hầu như luôn luôn tốt nhất là sử dụng các URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi miền.


Thuộc tính chiều rộng và chiều cao

Thẻ <img>cũng phải chứa các thuộc tính width height, chỉ định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):

Thí dụ

<img src="img_girl.jpg" width="500" height="600">

Thuộc tính alt

Thuộc tính bắt buộc altcho <img> thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị. Điều này có thể do kết nối chậm hoặc lỗi trong srcthuộc tính hoặc nếu người dùng sử dụng trình đọc màn hình.

Thí dụ

<img src="img_girl.jpg" alt="Girl with a jacket">

Thí dụ

Xem điều gì sẽ xảy ra nếu chúng tôi cố gắng hiển thị một hình ảnh không tồn tại:

<img src="img_typo.jpg" alt="Girl with a jacket">

Bạn sẽ tìm hiểu thêm về hình ảnh trong chương Hình ảnh HTML của chúng tôi .



Thuộc tính kiểu

Thuộc styletính được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.

Thí dụ

<p style="color:red;">This is a red paragraph.</p>

Bạn sẽ tìm hiểu thêm về các kiểu trong chương Kiểu HTML của chúng tôi .


Thuộc tính lang

Bạn phải luôn bao gồm langthuộc tính bên trong <html>thẻ, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.

Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong lang thuộc tính. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia.

Ví dụ sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Bạn có thể xem tất cả các mã ngôn ngữ trong Tham chiếu mã ngôn ngữ HTML của chúng tôi .


Thuộc tính tiêu đề

Thuộc titletính xác định một số thông tin bổ sung về một phần tử.

Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua phần tử:

Thí dụ

<p title="I'm a tooltip">This is a paragraph.</p>

Chúng tôi đề xuất: Luôn sử dụng thuộc tính chữ thường

Tiêu chuẩn HTML không yêu cầu tên thuộc tính chữ thường.

Thuộc tính title (và tất cả các thuộc tính khác) có thể được viết bằng chữ hoa hoặc chữ thường như title hoặc TITLE .

Tuy nhiên, W3C đề xuất các thuộc tính chữ thường trong HTML và yêu cầu các thuộc tính chữ thường cho các loại tài liệu nghiêm ngặt hơn như XHTML.

Tại W3Schools, chúng tôi luôn sử dụng tên thuộc tính chữ thường.


Chúng tôi đề xuất: Luôn trích dẫn các giá trị thuộc tính

Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính.

Tuy nhiên, W3C khuyến nghị trích dẫn trong HTML và yêu cầu trích dẫn cho các loại tài liệu nghiêm ngặt hơn như XHTML.

Tốt:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Tồi tệ:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Đôi khi bạn phải sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị chính xác thuộc tính title, vì nó chứa khoảng trắng:

Thí dụ

<p title=About W3Schools>

 Tại W3Schools, chúng tôi luôn sử dụng dấu ngoặc kép xung quanh các giá trị thuộc tính.


Báo giá đơn hay báo giá kép?

Dấu ngoặc kép xung quanh các giá trị thuộc tính là cách phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc kép.

Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần phải sử dụng dấu ngoặc kép:

<p title='John "ShotGun" Nelson'>

Hoặc ngược lại:

<p title="John 'ShotGun' Nelson">

Tóm tắt chương

  • Tất cả các phần tử HTML có thể có các thuộc tính
  • Thuộc hreftính <a>chỉ định URL của trang mà liên kết chuyển đến
  • Thuộc srctính <img>chỉ định đường dẫn đến hình ảnh được hiển thị
  • Các thuộc tính widthcung cấp thông tin kích thước cho hình ảnhheight<img>
  • Thuộc alttính của <img>cung cấp văn bản thay thế cho hình ảnh
  • Thuộc styletính được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
  • Thuộc langtính của <html>thẻ khai báo ngôn ngữ của trang Web
  • Thuộc titletính xác định một số thông tin bổ sung về một phần tử

Bài tập HTML

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm "chú giải công cụ" vào đoạn bên dưới với nội dung "Giới thiệu về W3Schools".

<p= "Giới thiệu về W3Schools"> W3Schools là trang web của nhà phát triển web. </p>


Tham chiếu thuộc tính HTML

Danh sách đầy đủ tất cả các thuộc tính cho mỗi phần tử HTML, được liệt kê trong: Tham chiếu thuộc tính HTML của chúng tôi .