Thẻ nội dung (vùng chứa)

hoặc

Thẻ ngữ nghĩa HTML5

HTML5 đã giới thiệu một số thẻ mới được gọi là thẻ ngữ nghĩa. Các thẻ này được thiết kế để truyền đạt chức năng của các khối nội dung phổ biến trên nhiều trang web. Trước HTML5, các nhà phát triển chỉ sử dụng

Các phần tử là các khối xây dựng của HTML mô tả cấu trúc và nội dung của trang web. Chúng là phần “Đánh dấu” của Ngôn ngữ đánh dấu siêu văn bản (HTML)

HTML syntax uses the angle brackets (”<” and ”>”) to hold the name of an HTML element. Elements usually have an opening tag and a closing tag, and give information about the content they contain. The difference between the two is that the closing tag has a forward slash.

Hãy xem xét một số ví dụ cụ thể về thẻ HTML

phần tử p

Thẻ

  freeCodeCamp

Việc sử dụng

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

Ví dụ

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

Bạn cũng có thể lồng một phần tử neo

  freeCodeCamp

Ví dụ

Here's a link to freeCodeCamp.

Yếu tố tiêu đề

Có sáu thành phần tiêu đề — ________ 09, ________ 80, ________ 81, _______ 82,

  

  Go to top

  

  Go to top

Các phần tử tiêu đề được sử dụng để biểu thị tầm quan trọng của nội dung bên dưới chúng. Số lượng tiêu đề càng thấp thì mức độ quan trọng càng cao

Ví dụ: phần tử

  freeCodeCamp

  

  Go to top

  freeCodeCamp

Ví dụ

  freeCodeCamp

một phần tử

Phần tử neo (

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

Văn bản giữa thẻ mở và thẻ đóng

  freeCodeCamp

Theo mặc định, một trang được liên kết được hiển thị trong cửa sổ trình duyệt hiện tại trừ khi một mục tiêu khác được chỉ định. Các kiểu liên kết mặc định như sau

• 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 đỏ

ví dụ

  freeCodeCamp

Bạn cũng có thể tạo một liên kết đến một phần khác trên cùng một trang

Một hình ảnh cũng có thể được biến thành một liên kết bằng cách đặt thẻ

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

liệt kê các yếu tố

Có hai loại danh sách chính trong HTML. có thứ tự (

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

danh sách không có thứ tự

Danh sách không có thứ tự bắt đầu bằng thẻ ________ 195 và danh sách các mục bắt đầu bằng thẻ ________ 196. Trong danh sách không có thứ tự, tất cả các mục danh sách được đánh dấu bằng dấu đầu dòng theo mặc định

  freeCodeCamp

đầu ra

• Mục
• Mục
• Mục

Danh sách được yêu cầu

Danh sách có thứ tự bắt đầu bằng thẻ

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

đầu ra

1. Mục đầu tiên
2. Mục thứ hai
3. Mục thứ ba

phần tử em

Phần tử

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

Ghi chú. Không nên sử dụng thẻ

  freeCodeCamp

  freeCodeCamp

Ví dụ

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

tôi phần tử

Phần tử

  freeCodeCamp

  freeCodeCamp

Trong các đặc tả HTML trước đây, thẻ

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

Bạn có thể sử dụng thuộc tính

  freeCodeCamp

  freeCodeCamp

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

yếu tố mạnh mẽ

Phần tử

  freeCodeCamp

  freeCodeCamp

Ghi chú. Không nên sử dụng thẻ

  freeCodeCamp

Ví dụ

Here's a link to freeCodeCamp.

phần tử img

Một phần tử HTML

  freeCodeCamp

Here's a link to freeCodeCamp.

Lưu ý rằng các phần tử

  freeCodeCamp

  freeCodeCamp

  freeCodeCamp

Thuộc tính

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

Lưu ý rằng đường dẫn đến tệp hình ảnh có thể là tương đối hoặc tuyệt đối. Ngoài ra, hãy nhớ rằng phần tử

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

ví dụ

Here's a link to freeCodeCamp.

(Điều này giả định rằng tệp HTML ở https. //ví dụ. com/chỉ mục. html, vì vậy nó nằm trong cùng thư mục với tệp hình ảnh)

giống như

Here's a link to freeCodeCamp.

Đôi khi, một phần tử

  freeCodeCamp

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

Here's a link to freeCodeCamp.

Các giá trị được chỉ định bằng pixel, nhưng kích thước thường được chỉ định bằng CSS thay vì HTML

yếu tố điều hướng

Phần tử

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

Các trình duyệt, chẳng hạn như trình đọc màn hình dành cho người dùng bị vô hiệu hóa, có thể sử dụng phần tử này để xác định xem có bỏ qua phần hiển thị ban đầu của nội dung này hay không

Ví dụ

Here's a link to freeCodeCamp.

phần tử tiêu đề

Thẻ

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  freeCodeCamp

  

  Go to top

Mặc dù không bắt buộc, nhưng thẻ

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

Ví dụ

Here's a link to freeCodeCamp.

phần tử vùng văn bản

Thẻ textarea HTML cho phép bạn nhập một hộp chứa văn bản cho phản hồi hoặc tương tác của người dùng. Trong hầu hết các trường hợp, người ta thường thấy vùng văn bản được sử dụng như một phần của biểu mẫu

Các lập trình viên sử dụng thẻ textarea để tạo trường nhiều dòng cho đầu vào của người dùng (đặc biệt hữu ích trong trường hợp khi người dùng có thể đặt văn bản dài hơn vào biểu mẫu). Các lập trình viên có thể chỉ định các thuộc tính khác nhau cho các thẻ textarea

Ví dụ

Here's a link to freeCodeCamp.

Các thuộc tính phổ biến nhất. Thuộc tính

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

  
    
  
  
    

      This is a paragraph. It is the first of many.
    
    

      This is another paragraph. It will appear on a separate line.
    
  

phần tử nhãn

Thẻ

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Nhãn có thể được liên kết với một phần tử bằng cách sử dụng thuộc tính “for” hoặc bằng cách đặt phần tử bên trong phần tử

Ví dụ

Here's a link to freeCodeCamp.

Như bạn có thể thấy, thuộc tính for của thẻ phải bằng thuộc tính id của phần tử liên quan để liên kết chúng lại với nhau

Hỗ trợ nền tảng

Thuộc tính

Thuộc tính toàn cầu

Thẻ

Here's a link to freeCodeCamp.

Thuộc tính sự kiện

Thẻ

Here's a link to freeCodeCamp.

Phần tử

Here's a link to freeCodeCamp.

Thẻ meta

Thẻ

Here's a link to freeCodeCamp.

Siêu dữ liệu này được sử dụng để chỉ định bộ ký tự, mô tả, từ khóa, tác giả và chế độ xem của trang

Siêu dữ liệu này sẽ không tự xuất hiện trên trang web, nhưng nó sẽ được trình duyệt và công cụ tìm kiếm sử dụng để xác định cách trang sẽ hiển thị nội dung và đánh giá tối ưu hóa công cụ tìm kiếm (SEO)

Ví dụ

Here's a link to freeCodeCamp.

phần tử div

Thẻ

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Một

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Ví dụ

Dưới đây là một ví dụ về cách hiển thị một phần có cùng màu

  freeCodeCamp

phần tử

Phần tử

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

  freeCodeCamp

  

  Go to top

Ví dụ: một trang web có thể được chia thành nhiều phần khác nhau như phần chào mừng, nội dung và liên hệ

Không nên sử dụng phần tử

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

  freeCodeCamp

Phần tử chân trang

Thẻ

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Ví dụ

  freeCodeCamp

yếu tố âm thanh

Thẻ

Here's a link to freeCodeCamp.

Thẻ âm thanh hiện hỗ trợ ba định dạng tệp OGG, MP3 và WAV có thể được thêm vào html của bạn như sau

Thêm một OGG

  freeCodeCamp

Thêm MP3

  freeCodeCamp

Thêm một WAV

  freeCodeCamp

Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu diễn bằng thuộc tính src hoặc phần tử nguồn

Thêm nhiều tệp âm thanh

  freeCodeCamp

Hỗ trợ trình duyệt cho các loại tệp khác nhau như sau

Thuộc tính được hỗ trợ

Phần tử khung nội tuyến

Phần tử HTML

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Thuộc tính

Dưới đây là một số thuộc tính của

Here's a link to freeCodeCamp.

Thẻ khung nội tuyến được sử dụng để thêm một trang web hoặc ứng dụng hiện có vào trang web của bạn trong một không gian đã đặt

Khi sử dụng thẻ iframe, thuộc tính src nên được sử dụng để chỉ ra vị trí của trang web hoặc ứng dụng sẽ sử dụng trong khung

  freeCodeCamp

Bạn có thể đặt thuộc tính chiều rộng và chiều cao để giới hạn kích thước của khung

  freeCodeCamp

Theo mặc định, các khung nội tuyến có đường viền, nếu bạn muốn xóa đường viền này, bạn có thể làm như vậy bằng cách sử dụng thuộc tính kiểu và đặt thuộc tính đường viền CSS thành không

  freeCodeCamp

ví dụ

Nhúng video YouTube bằng

Here's a link to freeCodeCamp.

  freeCodeCamp

Nhúng Google Maps với một

Here's a link to freeCodeCamp.

  freeCodeCamp

Văn bản thay thế

Nội dung giữa thẻ

Here's a link to freeCodeCamp.

  freeCodeCamp

Nhắm mục tiêu iframe trong Liên kết

Bất kỳ phần tử neo nào cũng có thể nhắm mục tiêu nội dung của phần tử

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

  freeCodeCamp

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

  freeCodeCamp

Ví dụ này ban đầu sẽ hiển thị một

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

JavaScript và iframe

Các tài liệu được nhúng trong một

Here's a link to freeCodeCamp.

Mọi tương tác tập lệnh giữa trang mẹ và nội dung của

Here's a link to freeCodeCamp.

Here's a link to freeCodeCamp.

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

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

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