Dấu ngoặc HTML được gọi là gì?

Question

HTML là một ngôn ngữ xuất bản mà tất cả các máy tính có thể hiểu và diễn giải ngay lập tức dưới dạng các hướng dẫn khởi tạo và định dạng đi vào quá trình tạo trang web. Mỗi từ khóa hoặc từ viết tắt trong HTML được gọi là 'phần tử' và mỗi phần tử HTML được đặt trong dấu ngoặc nhọn như thế này.

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

39 Tập hợp 'khung góc/phần tử HTML' này được gọi là 'thẻ' HTML và tất cả các phần tử HTML đều có ít nhất một thẻ bắt đầu và phần lớn trong số chúng cũng có một thẻ kết thúc

Nội dung chính Show

Thẻ bắt đầu của phần tử HTML luôn có định dạng này

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

40

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

41

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

42

Thẻ kết thúc khác một chút bằng cách kết hợp dấu gạch chéo ( '/' ) và luôn có định dạng này

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>
41>

Các dấu ngoặc nhọn

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

39 bao quanh các phần tử HTML giúp chúng ẩn sau hậu trường của một trang web. Các phần tử không tự xuất hiện trên trang web thực mà thay vào đó, chúng chỉ hoạt động như một phương tiện để hướng dẫn trình duyệt web của bạn cách hiển thị phần xuất hiện giữa thẻ bắt đầu và thẻ kết thúc

Mỗi phần tử HTML giống như một lệnh xác định phần nào trên trang web của bạn cần giải quyết và cùng với các lệnh phụ khác được gọi là 'thuộc tính', cho trình duyệt web của bạn biết cách hiển thị phần cụ thể đó. Khi trình duyệt web của bạn 'đọc' một trang web, nó sẽ gặp từng thẻ bắt đầu của phần tử HTML và sau đó, phần lớn, hoạt động theo nhận dạng và thuộc tính của phần tử đó trên tất cả nội dung (thường là văn bản) theo sau thẻ bắt đầu. Nó tiếp tục như vậy cho đến khi gặp thẻ kết thúc tiếp theo cho cùng phần tử đó hoặc thẻ bắt đầu của phần tử HTML khác

Những lần khác, thẻ bắt đầu phần tử HTML (và bất kỳ thuộc tính áp dụng nào) là đủ để tự nó tạo hiệu ứng trang web cụ thể. Đây là trường hợp với ngắt dòng, đồ họa, quy tắc ngang và một số phần trang trí trang web tiêu chuẩn khác

Hầu như tất cả các tên phần tử HTML đều bao gồm một từ khóa hoặc từ viết tắt cung cấp một số dấu hiệu cho biết phần tử đó được sử dụng để làm gì, do đó giúp bạn dễ dàng nhớ tất cả chúng hơn và nhớ cái gì làm gì.

Sau khi bạn làm quen với HTML thông qua việc sử dụng nhiều lần, bạn sẽ sớm viết các trang web một cách dễ dàng. Bạn cũng sẽ có thể 'bật mui xe' trên bất kỳ trang web nào bạn tìm thấy trên internet, duyệt qua mã nguồn và thực sự có thể hiểu mớ hỗn độn dường như không thể của các thẻ HTML đó là gì. Được trang bị khả năng này, bạn sẽ có thể nghiên cứu cách người khác tạo ra các hiệu ứng trang web mà bạn đặc biệt ngưỡng mộ và sau đó bạn sẽ có thể tái tạo các hiệu ứng đó trên các trang web của riêng mình

Có thể tìm thấy danh sách tất cả các phần tử HTML tại đây. Nhưng thay vì cày qua danh sách toàn diện này hoặc toàn bộ HTML 4. 01 (không dễ đọc), tốt nhất bạn nên tải xuống và giữ nó như một tệp tham khảo. Một ý tưởng tốt hơn là tiếp tục với hướng dẫn này, hướng dẫn này sẽ hướng dẫn bạn các hiệu ứng trang web được sử dụng phổ biến nhất và giải thích cách xây dựng các thẻ HTML để tạo chú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ẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

4 là viết tắt của đoạn văn, đây là thẻ phổ biến nhất được sử dụng để tạo các dòng văn bản bên trong tài liệu HTML

Việc sử dụng

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

4 tương thích với các thẻ khác, cho phép thêm siêu liên kết (

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6) và văn bản in đậm (

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

7), trong số những thứ khác

Thí dụ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6 vào trong một đoạn văn

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

Yếu tố tiêu đề

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

  <h1 id="top"></h1>
  <a href= "#top">Go to top</a>

3,

  <h1 id="top"></h1>
  <a href= "#top">Go to top</a>

4

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ử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

9 đại diện cho tiêu đề chính của trang và chỉ nên có một phần tử trên mỗi trang. Điều này giúp các công cụ tìm kiếm hiểu được chủ đề chính của trang. Yếu tố

  <h1 id="top"></h1>
  <a href= "#top">Go to top</a>

0 có mức độ quan trọng thấp hơn và phải ở dưới yếu tố

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

9 cấp cao hơn

Thí dụ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6

một phần tử

Phần tử neo (

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6) tạo một siêu liên kết đến một trang hoặc tệp khác. Để liên kết đến một trang hoặc tệp khác, thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6 cũng phải chứa thuộc tính

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

90, cho biết đích của liên kết

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6 trở thành liên kết. Văn bản này phải là một mô tả có ý nghĩa về đích của liên kết và không phải là một cụm từ chung chung như "Nhấp vào đây". Điều này cho phép người dùng có trình đọc màn hình điều hướng tốt hơn giữa các liên kết khác nhau trên một trang và hiểu nội dung mà mỗi liên kết sẽ liên kết đến

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 dưới và màu đỏ

ví dụ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

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

________số 8

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ẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

92 trong thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

9

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

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

94) và không có thứ tự (

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

95). Tất cả các danh sách phải chứa một hoặc nhiều phần tử danh sách (

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

96)

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

1

đầ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ẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

94 và các mục trong danh sách bắt đầu bằng thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

96. Trong danh sách có thứ tự, tất cả các mục danh sách được đánh dấu bằng số

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

4

đầu ra

Mục đầu tiên
Mục thứ hai
Mục thứ ba

phần tử em

Phần tử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 được sử dụng để nhấn mạnh văn bản trong tài liệu HTML. Điều này có thể được thực hiện bằng cách bọc văn bản bạn muốn được nhấn mạnh trong thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 và thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

13 tương ứng. Hầu hết các trình duyệt sẽ hiển thị văn bản được bao bọc trong thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 dưới dạng in nghiêng

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 để in nghiêng văn bản theo phong cách. Thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 được sử dụng để nhấn mạnh sự nhấn mạnh trong văn bản. Thông thường, định dạng CSS được sử dụng để in nghiêng văn bản theo phong cách

Thí dụ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

1

tôi phần tử

Phần tử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

17 được sử dụng để biểu thị văn bản được tách biệt khỏi văn bản xung quanh theo một cách nào đó. Theo mặc định, văn bản được bao quanh bởi các thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

17 sẽ được hiển thị ở dạng in nghiêng

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

17 chỉ được sử dụng để biểu thị văn bản được in nghiêng. Tuy nhiên, trong HTML ngữ nghĩa hiện đại, các thẻ như

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

11 và

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

7 nên được sử dụng khi thích hợp

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

42 của phần tử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

17 để nêu lý do tại sao văn bản trong các thẻ khác với văn bản xung quanh. Bạn có thể muốn chỉ ra rằng văn bản hoặc cụm từ đến từ một ngôn ngữ khác

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

9

yếu tố mạnh mẽ

Phần tử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

7 được sử dụng để biểu thị văn bản có tầm quan trọng hoặc mức độ khẩn cấp cao. Hầu hết các trình duyệt sẽ hiển thị văn bản được bao bọc trong thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

7 dưới dạng in đậm

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

7 để in đậm văn bản. Sử dụng CSS để làm điều đó

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

0

phần tử img

Một phần tử HTML

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

92 đơn giản có thể được bao gồm trong một tài liệu HTML như thế này

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

1

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

92 tự đóng và không yêu cầu thẻ đóng

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

49 thẻ cung cấp văn bản thay thế cho một hình ảnh. Một cách sử dụng thẻ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

49 là dành cho những người khiếm thị sử dụng trình đọc màn hình;

Thuộc tính

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

12 là tùy chọn và sẽ cung cấp thông tin bổ sung về hình ảnh. Hầu hết các trình duyệt hiển thị thông tin này trong chú giải công cụ khi người dùng di chuột qua nó

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ử

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

13 là tự đóng, nghĩa là nó không đóng bằng thẻ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

14 và thay vào đó đóng bằng một thẻ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

15 duy nhất

ví dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

2

(Điều này giả định rằng tệp HTML ở https. //thí 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ư

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

3

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

92 cũng sẽ sử dụng hai thuộc tính khác để chỉ định kích thước của nó,

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

17 và

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

18, như minh họa bên dưới

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ử

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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ử

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

5

phần tử tiêu đề

Thẻ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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ư

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

9,

  <h1 id="top"></h1>
  <a href= "#top">Go to top</a>

0, nhưng cũng có thể bao gồm các phần tử khác như biểu mẫu tìm kiếm, logo, thông tin tác giả, v.v.

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

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

91 nhằm mục đích chứa tiêu đề của các phần xung quanh. Nó cũng có thể được sử dụng nhiều lần trong tài liệu HTML. Điều quan trọng cần lưu ý là thẻ

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

91 không giới thiệu một phần mới mà chỉ đơn giản là phần đầu của một phần

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

7

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

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

96 và

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      This is a paragraph. It is the first of many.
    </p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

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ẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ử

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

Thuộc tính

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

Thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

Thuộc tính sự kiện

Thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

Phần tử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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)

Thí dụ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

9

phần tử div

Thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

Thí dụ

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

60

phần tử

Phần tử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

9 -

  <h1 id="top"></h1>
  <a href= "#top">Go to top</a>

4) làm phần tử con

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ử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

12 thay cho phần tử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

61

Phần tử chân trang

Thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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ẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

20

Thí dụ

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

62

yếu tố âm thanh

Thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

21 xác định một phần tử â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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

63

Thêm MP3

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

64

Thêm WAV

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

65

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

66

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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.

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

22

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

67

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

68

Các iframe có đường viền theo mặc định, nếu bạn muốn loại bỏ đườ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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

69

ví dụ

Nhúng video YouTube với

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

22

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

0

Nhúng Google Maps với một

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

22

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

1

Văn bản thay thế

Nội dung giữa thẻ

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

2

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ử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

30 của phần tử

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

6 phải khớp với thuộc tính

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

32 của phần tử

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

22

  <a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>

3

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

22 để hiển thị video YouTube

JavaScript và iframe

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>

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

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

Dấu ngoặc nào được sử dụng để đặt mã HTML?

Dấu ngoặc nhọn thường được sử dụng để đặt một loại mã nào đó. Ví dụ: thẻ HTML và thẻ PageMaker được đặt trong dấu ngoặc nhọn.

CSS sử dụng loại dấu ngoặc nào?

Cú pháp trong CSS khác với cú pháp trong HTML. HTML sử dụng các mũi tên, trong khi CSS sử dụng dấu ngoặc nhọn và dấu chấm phẩy được sử dụng ở cuối mỗi dòng.

programming html

Dấu ngoặc HTML được gọi là gì?

phần tử p

Thí dụ

Thí dụ

Yếu tố tiêu đề

Thí dụ

một phần tử

ví dụ

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

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

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

phần tử em

Thí dụ

tôi phần tử

yếu tố mạnh mẽ

Thí dụ

phần tử img

ví dụ

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

Thí dụ

phần tử tiêu đề

Thí dụ

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

Thí dụ

phần tử nhãn

Thí dụ

Hỗ trợ nền tảng

Thuộc tính

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

Thuộc tính sự kiện

Thẻ meta

Thí dụ

phần tử div

Thí dụ

phần tử

Phần tử chân trang

Thí dụ

yếu tố âm thanh

Thêm một OGG

Thêm MP3

Thêm WAV

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

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

Thuộc tính

ví dụ

Văn bản thay thế

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

JavaScript và iframe

Dấu ngoặc nào được sử dụng để đặt mã HTML?

CSS sử dụng loại dấu ngoặc nào?

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội