Mỗi trang web phải bắt đầu bằng một khai báo DOCTYPE. Nó phải là mục đầu tiên trên dòng đầu tiên của mã HTML hoặc XHTML của bạn. Điều này cho trình duyệt biết trang web được mã hóa bằng phiên bản HTML nào, giúp họ biết cách xử lý mã. Trước HTML5, khai báo DOCTYPE dài và phức tạp. Ví dụ: đây là khai báo DOCTYPE cho XHTML 1. 1

Trong HTML5, việc khai báo DOCTYPE đơn giản hơn rất nhiều

Hiểu các bảng sau

Các thẻ HTML phổ biến được trình bày bên dưới, được sắp xếp thành bốn bảng dựa trên mục đích của chúng. Bảng đầu tiên bao gồm các thẻ kiểm soát cấu trúc tổng thể của trang web. Bảng thứ hai và thứ ba bao gồm các thẻ đánh dấu phần lớn nội dung trang web. Các thẻ chứa [những thẻ chứa nội dung] được trình bày trong bảng thứ hai và các thẻ không chứa [những thẻ đứng một mình] được trình bày trong bảng thứ ba. Bảng cuối cùng chứa các thẻ được sử dụng để đánh dấu các bảng HTML, được trình bày trong Mô-đun 5 của đơn vị này

Cấu trúc tài liệu

Opening TagClosing TagDescriptionOpens and closes an HTML documentThe first of two main sections of an HTML document. The section is used to provide information about the document for use primarily by search engines and browsers. The title of document. This element is nested inside the section. In HTML5, this is the only required tag other than the DOCTYPE declaration.The second of two main sections of an HTML document. The section contains all the content of the web page.

Thẻ nội dung [vùng chứa]

Thẻ mở Thẻ đóng Mô tảtotoTiêu đề. H1 là tiêu đề chính, H2 là tiêu đề phụ, v.v. Đoạn Một vùng chứa cho một khối nội dung Một vùng chứa cho nội dung trong dòng, chẳng hạn như nội dung bên trong một đoạn văn. Nhấn mạnh văn bản chứa trong đó [thường là chữ in nghiêng]. Làm cho văn bản được in đậm. Liên kết Danh sách có thứ tự [được đánh số] Danh sách không có thứ tự [gạch đầu dòng] Mục danh sách, phải được lồng bên trong một thành phần danh sách, chẳng hạn như một

hoặc

Bình luận. Bất cứ điều gì giữa các thẻ này không được hiển thị trên màn hình. Điều này hữu ích để ghi chú cho chính bạn hoặc cho những người khác có thể xem mã nguồn của trang web

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 [””] 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ẻ

  link to freeCodeCamp.

Yếu tố tiêu đề

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

  

  link to freeCodeCamp.

0

phần tử img

Một phần tử HTML

  link to freeCodeCamp.

1

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

  link to freeCodeCamp.

2

[Đ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.

3

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

  link to freeCodeCamp.

4

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ử

  
    Paragraph example
  
  
    

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

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

19 dành cho khối liên kết điều hướng chính. KHÔNG PHẢI tất cả các liên kết của tài liệu phải nằm trong phần tử

  
    Paragraph example
  
  
    

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

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

19

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.

5

phần tử tiêu đề

Thẻ

  
    Paragraph example
  
  
    

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

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

91 là một vùng chứa được sử dụng cho các liên kết điều hướng hoặc nội dung giới thiệu. Nó thường có thể bao gồm các phần tử tiêu đề, chẳng hạn như

  link to freeCodeCamp.

6

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.

7

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

  
    Paragraph example
  
  
    

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

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

96 và

  
    Paragraph example
  
  
    

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

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

  


  

97 xác định chiều cao và chiều rộng của vùng văn bản Thuộc tính

  
    Paragraph example
  
  
    

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

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

98 chỉ định văn bản hiển thị cho người dùng, nó giúp người dùng hiểu dữ liệu nào sẽ được nhập vào Thuộc tính

  
    Paragraph example
  
  
    

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

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

99 xác định độ dài tối đa của văn bản có thể được nhập vào

phần tử nhãn

Thẻ

Here's a link to freeCodeCamp.

01 xác định nhãn cho phần tử

Here's a link to freeCodeCamp.

02

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.

8

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

link to freeCodeCamp.

01 hỗ trợ Thuộc tính toàn cầu trong HTML

Thuộc tính sự kiện

Thẻ

Here's a link to freeCodeCamp.

01 hỗ trợ Thuộc tính sự kiện trong HTML

Phần tử

Here's a link to freeCodeCamp.

01 không hiển thị dưới dạng bất kỳ thứ gì đặc biệt đối với người dùng. Tuy nhiên, nó cung cấp một cải tiến về khả năng sử dụng cho người dùng chuột, bởi vì nếu người dùng nhấp vào văn bản trong phần tử, nó sẽ chuyển đổi điều khiển

Thẻ meta

Thẻ

Here's a link to freeCodeCamp.

06 cung cấp siêu dữ liệu về tài liệu HTML

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.

9

phần tử div

Thẻ

Here's a link to freeCodeCamp.

07 là một vùng chứa chung xác định một phần trong tài liệu HTML của bạn. Phần tử

Here's a link to freeCodeCamp.

07 được sử dụng để nhóm các phần của phần tử HTML lại với nhau và định dạng chúng bằng CSS

Một

Here's a link to freeCodeCamp.

07 là một phần tử cấp khối. Điều này có nghĩa là nó chiếm một dòng riêng trên màn hình. Các phần tử ngay sau

Here's a link to freeCodeCamp.

07 sẽ được đẩy xuống dòng bên dưới. Đối với cách nhóm và kiểu dáng tương tự không ở cấp độ khối mà ở nội tuyến, bạn sẽ sử dụng thẻ

Here's a link to freeCodeCamp.

11 để thay thế. Thẻ được sử dụng để nhóm các phần tử nội tuyến trong tài liệu

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

  link to freeCodeCamp.

12 xác định một phần không có phần tử HTML ngữ nghĩa cụ thể hơn để biểu thị phần đó. Thông thường, phần tử

Here's a link to freeCodeCamp.

12 sẽ bao gồm phần tử tiêu đề [

  link to freeCodeCamp.

  

12 thay cho phần tử

Here's a link to freeCodeCamp.

07 nếu cần một vùng chứa chung. Nó nên được sử dụng để xác định các phần trong trang HTML

  link to freeCodeCamp.

18 biểu thị chân trang của tài liệu HTML hoặc phần. Thông thường, chân trang chứa thông tin về tác giả, thông tin bản quyền, thông tin liên hệ và sơ đồ trang web. Mọi thông tin liên hệ bên trong thẻ

Here's a link to freeCodeCamp.

18 phải nằm bên trong thẻ

Here's a link to freeCodeCamp.

20

Ví dụ

  link to freeCodeCamp.

21 xác định một thành phần âm thanh, có thể được sử dụng để thêm tài nguyên phương tiện âm thanh vào tài liệu HTML sẽ được phát bởi hỗ trợ gốc để phát lại âm thanh được tích hợp trong trình duyệt thay vì plugin trình duyệt

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

  link to freeCodeCamp.

22 đại diện cho một khung nội tuyến, cho phép bạn đưa một tài liệu HTML độc lập vào tài liệu HTML hiện tại.

Here's a link to freeCodeCamp.

22 thường được sử dụng để nhúng phương tiện của bên thứ ba, phương tiện của riêng bạn, tiện ích con, đoạn mã hoặc nhúng ứng dụng phụ của bên thứ ba, chẳng hạn như biểu mẫu thanh toán

Thuộc tính

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

Here's a link to freeCodeCamp.

22

link to freeCodeCamp.

22

  link to freeCodeCamp.

22

  link to freeCodeCamp.

22 mở và đóng được sử dụng làm văn bản thay thế, sẽ được hiển thị nếu trình duyệt của người xem không hỗ trợ iframe

  link to freeCodeCamp.

22. Thay vì chuyển hướng cửa sổ trình duyệt đến trang web được liên kết, nó sẽ chuyển hướng

Here's a link to freeCodeCamp.

22. Để điều này hoạt động, thuộc tính

Here's a link to freeCodeCamp.

30 của phần tử

  link to freeCodeCamp.

32 của phần tử

Here's a link to freeCodeCamp.

22

  link to freeCodeCamp.

22 trống, nhưng khi bạn nhấp vào liên kết ở trên, nó sẽ chuyển hướng

Here's a link to freeCodeCamp.

22 để hiển thị video YouTube

JavaScript và iframe

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

Here's a link to freeCodeCamp.

22 có thể chạy JavaScript trong ngữ cảnh riêng của chúng [không ảnh hưởng đến trang web gốc] như bình thường

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.

22 được nhúng đều phải tuân theo chính sách cùng nguồn gốc. Điều này có nghĩa là nếu bạn tải nội dung của

Here's a link to freeCodeCamp.

  

22 từ một miền khác, trình duyệt sẽ chặn mọi nỗ lực truy cập nội dung đó bằng JavaScript

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