Ví dụ về chỉ mục html

HTML [Ngôn ngữ đánh dấu siêu văn bản] là ngôn ngữ đánh dấu cho trình duyệt web biết cách cấu trúc các trang web bạn truy cập. Nó có thể phức tạp hoặc đơn giản như nhà phát triển web muốn. HTML bao gồm một loạt các thành phần mà bạn sử dụng để bao bọc, bọc hoặc đánh dấu các phần khác nhau của nội dung để làm cho nội dung xuất hiện hoặc hoạt động theo một cách nhất định. Các thẻ kèm theo có thể biến nội dung thành một siêu liên kết để kết nối với một trang khác, in nghiêng các từ, v.v. Ví dụ, xem xét dòng văn bản sau

My cat is very grumpy

Nếu chúng ta muốn văn bản đứng một mình, chúng ta có thể xác định rằng đó là một đoạn văn bằng cách đặt nó trong một phần tử đoạn văn [

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

Ghi chú. Các thẻ trong HTML không phân biệt chữ hoa chữ thường. Điều này có nghĩa là chúng có thể được viết bằng chữ hoa hoặc chữ thường. Ví dụ: thẻ

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Hãy khám phá thêm yếu tố đoạn văn của chúng tôi từ phần trước

Giải phẫu của yếu tố của chúng tôi là

• thẻ mở đầu. Điều này bao gồm tên của phần tử [trong ví dụ này, p cho đoạn văn], được đặt trong dấu ngoặc nhọn mở và đóng. Thẻ mở này đánh dấu nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực. Trong ví dụ này, nó đứng trước phần đầu của văn bản đoạn văn
• Nội dung. Đây là nội dung của phần tử. Trong ví dụ này, nó là đoạn văn bản
• Thẻ đóng. Điều này giống như thẻ mở, ngoại trừ việc nó bao gồm dấu gạch chéo lên trước tên phần tử. Điều này đánh dấu nơi phần tử kết thúc. Không bao gồm thẻ đóng là một lỗi phổ biến dành cho người mới bắt đầu có thể tạo ra các kết quả đặc biệt

Phần tử là thẻ mở, tiếp theo là nội dung, tiếp theo là thẻ đóng

Chỉnh sửa dòng bên dưới trong khu vực "Mã có thể chỉnh sửa" bằng cách gói nó bằng các thẻ

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Nếu bạn mắc lỗi, bạn có thể xóa công việc của mình bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Các phần tử có thể được đặt trong các phần tử khác. Điều này được gọi là làm tổ. Nếu chúng ta muốn nói rằng con mèo của chúng ta rất gắt gỏng, chúng ta có thể bọc từ very trong phần tử

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Có một cách đúng và sai để làm tổ. Trong ví dụ trên, chúng tôi đã mở phần tử

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Sau đây là một ví dụ về cách làm lồng sai

My cat is very grumpy

Các thẻ phải mở và đóng theo cách chúng ở bên trong hoặc bên ngoài nhau. Với kiểu trùng lặp ở ví dụ trên, trình duyệt phải đoán ý định của bạn. Kiểu đoán này có thể dẫn đến kết quả không mong muốn

Có hai loại phần tử quan trọng cần biết trong HTML. phần tử cấp khối và phần tử nội tuyến

• Các phần tử cấp khối tạo thành một khối hiển thị trên trang. Phần tử cấp khối xuất hiện trên một dòng mới sau nội dung đứng trước nó. Bất kỳ nội dung nào theo sau phần tử cấp khối cũng xuất hiện trên một dòng mới. Các phần tử cấp khối thường là các phần tử cấu trúc trên trang. Ví dụ: phần tử cấp khối có thể đại diện cho tiêu đề, đoạn văn, danh sách, menu điều hướng hoặc chân trang. Một phần tử cấp khối sẽ không được lồng bên trong một phần tử nội tuyến, nhưng nó có thể được lồng bên trong một phần tử cấp khối khác
• Các phần tử nội tuyến được chứa trong các phần tử cấp khối và chỉ bao quanh các phần nhỏ của nội dung tài liệu [không phải toàn bộ đoạn văn hoặc nhóm nội dung]. Phần tử nội tuyến sẽ không làm xuất hiện dòng mới trong tài liệu. Nó thường được sử dụng với văn bản, ví dụ: phần tử

  Live output
  
  
  Editable code
  
    Press Esc to move focus away from the code area [Tab inserts a tab character].
  
  
  
    This is my text.
  
  
  
    
    
  
  

  44 tạo siêu liên kết và các phần tử như

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  5 hoặc

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  9 tạo điểm nhấn

Xem xét ví dụ sau

My cat is very grumpy

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Ghi chú. HTML5 đã định nghĩa lại các danh mục phần tử. xem. Mặc dù các định nghĩa này chính xác hơn và ít mơ hồ hơn so với các định nghĩa trước đó, nhưng các định nghĩa mới phức tạp hơn rất nhiều để hiểu hơn so với khối và nội tuyến. Bài viết này sẽ ở lại với hai thuật ngữ này

Ghi chú. Các thuật ngữ khối và nội tuyến, như được sử dụng trong bài viết này, không nên nhầm lẫn với các thuật ngữ có cùng tên. Mặc dù các tên tương quan theo mặc định, nhưng việc thay đổi kiểu hiển thị CSS không làm thay đổi danh mục của phần tử và không ảnh hưởng đến phần tử nào có thể chứa và phần tử nào có thể chứa phần tử đó. Một lý do khiến HTML5 loại bỏ các thuật ngữ này là để tránh sự nhầm lẫn khá phổ biến này.

Ghi chú. Tìm các trang tham khảo hữu ích bao gồm danh sách các phần tử khối và nội tuyến. Xem Phần tử cấp khối và Phần tử nội tuyến

Không phải tất cả các phần tử đều tuân theo mẫu thẻ mở, nội dung và thẻ đóng. Một số phần tử bao gồm một thẻ duy nhất, thẻ này thường được sử dụng để chèn/nhúng nội dung nào đó vào tài liệu. Các phần tử như vậy được gọi là các phần tử void. Ví dụ: phần tử

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

Điều này sẽ xuất ra như sau

Ghi chú. Ví dụ: trong HTML, không bắt buộc phải thêm ____160 vào cuối thẻ của phần tử void.

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Các phần tử cũng có thể có các thuộc tính. Các thuộc tính trông như thế này

Các thuộc tính chứa thông tin bổ sung về phần tử sẽ không xuất hiện trong nội dung. Trong ví dụ này, thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Một thuộc tính nên có

• Khoảng cách giữa nó và tên phần tử. [Đối với một phần tử có nhiều thuộc tính, các thuộc tính cũng phải được phân tách bằng dấu cách. ]
• Tên thuộc tính, theo sau là dấu bằng
• Một giá trị thuộc tính, được bao bọc bởi dấu ngoặc kép mở và đóng

Một ví dụ khác về phần tử là

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Giá trị của thuộc tính này chỉ định địa chỉ web cho liên kết. Ví dụ.

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

Chỉnh sửa dòng bên dưới trong khu vực Đầu vào để biến nó thành liên kết đến trang web yêu thích của bạn

1. Thêm phần tử

   Live output
   
   
   Editable code
   
     Press Esc to move focus away from the code area [Tab inserts a tab character].
   
   
   
     This is my text.
   
   
   
     
     
   
   

   44
2. Thêm thuộc tính

   Live output
   
   
   Editable code
   
     Press Esc to move focus away from the code area [Tab inserts a tab character].
   
   
   
     This is my text.
   
   
   
     
     
   
   

   64 và thuộc tính

   Live output
   
   
   Editable code
   
     Press Esc to move focus away from the code area [Tab inserts a tab character].
   
   
   
     This is my text.
   
   
   
     
     
   
   

   66
3. Chỉ định thuộc tính

   Live output
   
   
   Editable code
   
     Press Esc to move focus away from the code area [Tab inserts a tab character].
   
   
   
     This is my text.
   
   
   
     
     
   
   

   69 để mở liên kết trong tab mới

Bạn sẽ có thể xem cập nhật thay đổi của mình trực tiếp trong khu vực Đầu ra. Bạn sẽ thấy một liên kết—khi được di chuột qua—hiển thị giá trị của thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

My cat is very grumpy

My cat is very grumpy

Đôi khi bạn sẽ thấy các thuộc tính được viết mà không có giá trị. Điều này là hoàn toàn chấp nhận được. Chúng được gọi là thuộc tính Boolean. Thuộc tính Boolean chỉ có thể có một giá trị, thường giống với tên thuộc tính. Ví dụ: hãy xem xét thuộc tính mà bạn có thể gán để tạo thành các phần tử đầu vào. [Bạn sử dụng điều này để vô hiệu hóa các thành phần đầu vào của biểu mẫu để người dùng không thể thực hiện các mục nhập. Các phần tử bị vô hiệu hóa thường có giao diện màu xám. ] Ví dụ

My cat is very grumpy

Như tốc ký, nó được chấp nhận để viết này như sau

My cat is very grumpy

Để tham khảo, ví dụ trên cũng bao gồm một yếu tố đầu vào biểu mẫu không bị vô hiệu hóa. HTML từ ví dụ trên tạo ra kết quả này

Nếu bạn xem mã của nhiều trang web khác, bạn có thể bắt gặp một số kiểu đánh dấu lạ, bao gồm các giá trị thuộc tính không có dấu ngoặc kép. Điều này được cho phép trong một số trường hợp nhất định, nhưng nó cũng có thể phá vỡ đánh dấu của bạn trong các trường hợp khác. Ví dụ: nếu chúng ta xem lại ví dụ liên kết trước đó, chúng ta có thể viết một phiên bản cơ bản chỉ với thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

Tuy nhiên, ngay sau khi chúng tôi thêm thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

Như đã viết ở trên, trình duyệt hiểu sai đánh dấu, nhầm thuộc tính

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

Luôn bao gồm các trích dẫn thuộc tính. Nó tránh được những vấn đề như vậy và dẫn đến mã dễ đọc hơn

Trong bài viết này, bạn cũng sẽ nhận thấy rằng các thuộc tính được đặt trong dấu ngoặc kép. Tuy nhiên, bạn có thể thấy dấu nháy đơn trong một số mã HTML. Đây là một vấn đề của phong cách. Bạn có thể thoải mái lựa chọn cái nào bạn thích. Cả hai dòng này là tương đương

My cat is very grumpy

Hãy chắc chắn rằng bạn không trộn dấu ngoặc đơn và dấu ngoặc kép. Ví dụ này [bên dưới] cho thấy một loại trích dẫn trộn sẽ sai

My cat is very grumpy

Tuy nhiên, nếu bạn sử dụng một loại trích dẫn, bạn có thể bao gồm loại trích dẫn khác bên trong các giá trị thuộc tính của mình

My cat is very grumpy

Để sử dụng dấu ngoặc kép bên trong các dấu ngoặc kép khác cùng loại [dấu nháy đơn hoặc nháy kép], hãy sử dụng. Ví dụ, điều này sẽ phá vỡ

My cat is very grumpy

Thay vào đó, bạn cần phải làm điều này

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Các phần tử HTML riêng lẻ không hữu ích lắm. Tiếp theo, hãy xem cách các phần tử riêng lẻ kết hợp để tạo thành toàn bộ trang HTML

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Ở đây chúng tôi có

1. My cat is very grumpy
   

   55. loại tài liệu. Khi HTML còn non trẻ [1991-1992], các loại tài liệu được dùng như các liên kết đến một bộ quy tắc mà trang HTML phải tuân theo để được coi là HTML tốt. Các loại tài liệu được sử dụng để trông giống như thế này

   Live output
   
   
   Editable code
   
     Press Esc to move focus away from the code area [Tab inserts a tab character].
   
   
   
     This is my text.
   
   
   
     
     
   
   

   2
   Gần đây hơn, loại tài liệu là một tạo tác lịch sử cần được đưa vào để mọi thứ khác hoạt động bình thường.

   My cat is very grumpy
   

   55 là chuỗi ký tự ngắn nhất được tính là một loại tài liệu hợp lệ. Đó là tất cả những gì bạn cần biết

2. My cat is very grumpy
   

   57. Phần tử

   My cat is very grumpy
   

   58. Phần tử này bao bọc tất cả nội dung trên trang. Nó đôi khi được gọi là phần tử gốc

3. My cat is very grumpy
   

   59. Phần tử

   My cat is very grumpy
   

   90. Phần tử này đóng vai trò là nơi chứa mọi thứ bạn muốn đưa vào trang HTML, đó không phải là nội dung mà trang sẽ hiển thị cho người xem. Điều này bao gồm các từ khóa và mô tả trang sẽ xuất hiện trong kết quả tìm kiếm, CSS để định kiểu nội dung, khai báo bộ ký tự, v.v. Bạn sẽ tìm hiểu thêm về điều này trong bài viết tiếp theo của loạt bài

4. My cat is very grumpy
   

   91. Phần tử

   My cat is very grumpy
   

   92. Phần tử này đại diện cho siêu dữ liệu không thể được đại diện bởi các phần tử liên quan đến meta HTML khác, chẳng hạn như

   My cat is very grumpy
   

   93,

   My cat is very grumpy
   

   94,

   My cat is very grumpy
   

   95,

   My cat is very grumpy
   

   96 hoặc

   html {
     font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   0. Các thuộc tính đặt bộ ký tự cho tài liệu của bạn thành UTF-8, bao gồm hầu hết các ký tự từ phần lớn ngôn ngữ viết của con người. Với cài đặt này, trang hiện có thể xử lý mọi nội dung văn bản mà nó có thể chứa. Không có lý do gì để không thiết lập điều này và nó có thể giúp tránh một số vấn đề sau này

5. My cat is very grumpy
   

   99. Phần tử

   html {
     font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   0. Cái này đặt tiêu đề của trang, là tiêu đề xuất hiện trong tab trình duyệt mà trang được tải vào. Tiêu đề trang cũng được sử dụng để mô tả trang khi nó được đánh dấu trang

6. html {
     font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   81. Phần tử

   html {
     font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   82. Phần này chứa tất cả nội dung hiển thị trên trang, bao gồm văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hoặc bất kỳ nội dung nào khác

Nếu bạn muốn thử viết một số HTML trên máy tính cục bộ của mình, bạn có thể

1. Sao chép ví dụ trang HTML được liệt kê ở trên
2. Tạo một tệp mới trong trình soạn thảo văn bản của bạn
3. Dán mã vào tệp văn bản mới
4. Lưu tệp dưới dạng

   html {
     font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   83

Ghi chú. Bạn cũng có thể tìm thấy mẫu HTML cơ bản này trên repo MDN Learning Area GitHub

Giờ đây, bạn có thể mở tệp này trong trình duyệt web để xem mã hiển thị trông như thế nào. Sửa code và refresh lại trình duyệt xem kết quả thế nào. Ban đầu trang trông như thế này

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

• Ngay bên dưới thẻ mở của phần tử

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  82, hãy thêm tiêu đề chính cho tài liệu. Điều này nên được bọc bên trong thẻ mở

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  86 và thẻ đóng

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  87
• Chỉnh sửa nội dung đoạn văn để bao gồm văn bản về một chủ đề mà bạn thấy thú vị
• Làm nổi bật những từ quan trọng bằng cách in đậm bằng cách đặt chúng bên trong thẻ mở

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  9 và thẻ đóng

  html {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
  }
  
  body {
    margin: 10px;
    background: #f5f9fa;
  }
  

  89
• Thêm một liên kết đến đoạn văn của bạn, như
• Thêm hình ảnh vào tài liệu của bạn. Đặt nó bên dưới đoạn văn, như. Kiếm điểm thưởng nếu bạn quản lý để liên kết đến một hình ảnh khác [cục bộ trên máy tính của bạn hoặc ở một nơi khác trên web]

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Trong các ví dụ trên, bạn có thể nhận thấy rằng có rất nhiều khoảng trắng trong mã. Đây là tùy chọn. Hai đoạn mã này là tương đương

Live output


Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].



  This is my text.



  
  

Bất kể bạn sử dụng bao nhiêu khoảng trắng bên trong nội dung phần tử HTML [có thể bao gồm một hoặc nhiều ký tự khoảng trắng, nhưng cũng có ngắt dòng], trình phân tích cú pháp HTML sẽ giảm từng chuỗi khoảng trắng thành một khoảng trắng khi hiển thị mã. Vậy tại sao lại sử dụng quá nhiều khoảng trắng?

Có thể dễ hiểu hơn những gì đang diễn ra trong mã của bạn nếu bạn có định dạng độc đáo. Trong HTML của chúng ta, mỗi phần tử lồng nhau được thụt vào bởi hai khoảng trắng nhiều hơn khoảng trắng mà nó nằm bên trong. Tùy thuộc vào bạn để chọn kiểu định dạng [ví dụ: bao nhiêu khoảng cách cho mỗi mức thụt đầu dòng], nhưng bạn nên cân nhắc việc định dạng nó

Trong HTML, các ký tự

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

Bạn làm điều này với tham chiếu ký tự. Đây là những mã đặc biệt đại diện cho các ký tự, được sử dụng trong những trường hợp chính xác này. Mỗi tham chiếu ký tự bắt đầu bằng dấu và [&] và kết thúc bằng dấu chấm phẩy [;]

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

My cat is very grumpy

Có thể dễ dàng ghi nhớ tham chiếu ký tự tương đương vì văn bản mà nó sử dụng có thể được coi là nhỏ hơn đối với '