Hướng dẫn what are the 5 html tags? - 5 thẻ html là gì?

Chỉ bắt đầu với HTML? Dưới đây là 10 thẻ HTML cần thiết mà bạn sẽ cần biết khi xây dựng các trang web của mình. Nếu bạn tìm hiểu cách 10 thẻ này hoạt động thì bạn sẽ có đủ kiến ​​thức để kết hợp một trang cơ bản.

Show

Vào cuối hướng dẫn, bạn sẽ tìm mã cho một trang web ví dụ bao gồm tất cả 10 thẻ, để bạn có thể thấy cách sử dụng chúng.

Thẻ và các yếu tố

An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements, such as paragraphs or links.

Nhiều phần tử có thẻ mở và thẻ đóng - ví dụ: phần tử


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
1 (đoạn) có thẻ

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
2, tiếp theo là văn bản đoạn văn, theo sau là thẻ

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
3 đóng.

Một số yếu tố don lồng có thẻ đóng. Chúng được gọi là các yếu tố trống. Ví dụ: phần tử


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
4 để chèn phá vỡ dòng được viết đơn giản

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
5.

Nếu bạn làm việc với XHTML thì bạn viết các yếu tố trống bằng cách sử dụng các thẻ tự đóng-ví dụ:


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
6.

Bây giờ hãy để Lôi nhìn vào 10 thẻ đó!

Tất cả các trang web bắt đầu với phần tử


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
9. Nó cũng được gọi là phần tử gốc bởi vì nó ở gốc của cây các phần tử tạo nên một trang web.

Hướng dẫn what are the 5 html tags? - 5 thẻ html là gì?
Phần tử

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
9 nằm ở gốc của cây phần tử trong một trang web.

Để tạo phần tử


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
9, bạn viết thẻ

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
7 mở theo sau là thẻ

<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
8 đóng. Mọi thứ khác trong trang web của bạn sau đó đi giữa 2 thẻ sau:


<html>
  (all other page elements go here)
</html>

2. <title>The Adventures of My Cat Lucky</title> 4… <title>The Adventures of My Cat Lucky</title> 5 - đầu tài liệu

Phần tử


<title>The Adventures of My Cat Lucky</title>
6 chứa thông tin về trang web, trái ngược với chính nội dung trang web. Có nhiều yếu tố mà bạn có thể đặt bên trong phần tử

<title>The Adventures of My Cat Lucky</title>
6, chẳng hạn như:

  • 
    <title>The Adventures of My Cat Lucky</title>
    
    8 (được mô tả bên dưới)
  • 
    <title>The Adventures of My Cat Lucky</title>
    
    9, mà bạn có thể sử dụng để thêm các bảng kiểu và favicons vào trang của bạn
  • 
    <body>
      (all page content goes here)
    </body>
    
    0, để chỉ định những thứ như bộ ký tự, mô tả trang và từ khóa cho các công cụ tìm kiếm
  • 
    <body>
      (all page content goes here)
    </body>
    
    1, để thêm mã JavaScript vào trang

Ở đây, một yếu tố


<title>The Adventures of My Cat Lucky</title>
6 điển hình:


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>

3. <body> (all page content goes here) </body> 3 <body> (all page content goes here) </body> 4 - Tiêu đề trang

Phần tử


<title>The Adventures of My Cat Lucky</title>
8 chứa tiêu đề của trang. Tiêu đề được hiển thị trong thanh tiêu đề trình duyệt (thanh ở đầu cửa sổ trình duyệt), cũng như trong dấu trang, kết quả công cụ tìm kiếm và nhiều nơi khác.

Tiêu đề nên mô tả nội dung của trang một cách ngắn gọn và chính xác. Cố gắng cung cấp cho mỗi trang của trang web của bạn tiêu đề riêng của nó.

Đây là một ví dụ:


<title>The Adventures of My Cat Lucky</title>

4. <body> (all page content goes here) </body> 6 <body> (all page content goes here) </body> 7 - Nội dung của trang

Phần tử


<body>
  (all page content goes here)
</body>
8 xuất hiện sau phần tử

<title>The Adventures of My Cat Lucky</title>
6 trong trang. Nó nên chứa tất cả nội dung của trang web của bạn: văn bản, hình ảnh, v.v. Tất cả các trang web có 1 phần tử

<body>
  (all page content goes here)
</body>
8, ngoại trừ các trang Frameset, có chứa các phần tử

<h2>The Adventures of My Cat Lucky</h2>
1 thay thế.

Ở đây, định dạng chung của yếu tố


<body>
  (all page content goes here)
</body>
8:


<body>
  (all page content goes here)
</body>

5. <h2>The Adventures of My Cat Lucky</h2> 3… <h2>The Adventures of My Cat Lucky</h2> 4 - một phần tiêu đề

Các tiêu đề cho phép bạn chia nội dung trang của bạn thành các khối có thể đọc được. Họ làm việc giống như các tiêu đề và tiêu đề phụ trong một cuốn sách hoặc một báo cáo.

HTML thực sự hỗ trợ 6 yếu tố tiêu đề:


<h2>The Adventures of My Cat Lucky</h2>
5,

<h2>The Adventures of My Cat Lucky</h2>
5,

<h2>The Adventures of My Cat Lucky</h2>
7,

<h2>The Adventures of My Cat Lucky</h2>
8,

<h2>The Adventures of My Cat Lucky</h2>
9 và

<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!</p>
0.

<h2>The Adventures of My Cat Lucky</h2>
5 là dành cho các tiêu đề quan trọng nhất,

<h2>The Adventures of My Cat Lucky</h2>
5 dành cho các tiêu đề phụ ít quan trọng hơn, v.v. Thông thường, bạn đã thắng được cần sử dụng nhiều hơn

<h2>The Adventures of My Cat Lucky</h2>
5,

<h2>The Adventures of My Cat Lucky</h2>
5 và

<h2>The Adventures of My Cat Lucky</h2>
7, trừ khi trang của bạn rất dài và phức tạp.

Ở đây, một ví dụ về yếu tố tiêu đề


<h2>The Adventures of My Cat Lucky</h2>
5:


<h2>The Adventures of My Cat Lucky</h2>

Phần tử


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
1 cho phép bạn tạo các đoạn văn của văn bản. Hầu hết các trình duyệt hiển thị các đoạn văn với khoảng cách thẳng đứng giữa mỗi đoạn, phá vỡ văn bản.

Mặc dù bạn có thể tạo các đoạn văn bản văn bản chỉ bằng cách sử dụng các thẻ


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
5 để chèn các dòng trống giữa các khối văn bản, nhưng tốt hơn là sử dụng các phần tử ____11. Nó không chỉ gọn gàng hơn, mà nó còn cung cấp cho các trình duyệt, công cụ tìm kiếm và những người không phải là người khác một ý tưởng tốt hơn về cách trang của bạn được cấu trúc.

Ở đây, một ví dụ về một đoạn văn:


<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!</p>

Một quy tắc tốt khi viết văn bản cho web là đảm bảo rằng mỗi đoạn chứa một điểm, chủ đề hoặc suy nghĩ duy nhất. Nếu bạn muốn nói về 2 điều khác nhau, hãy sử dụng 2 đoạn văn.

7. <a href="http://www.example.com/">Visit this great website!</a> 2… <a href="http://www.example.com/">Visit this great website!</a> 3 - một liên kết

Một trong những yếu tố quan trọng nhất trong một trang web, phần tử


<a href="http://www.example.com/">Visit this great website!</a>
4 cho phép bạn tạo liên kết đến nội dung khác. Nội dung có thể có trên trang web của riêng bạn hoặc trên một trang web khác.

Để tạo một liên kết, bạn sẽ bọc các thẻ


<a href="http://www.example.com/">Visit this great website!</a>
2 và

<a href="http://www.example.com/">Visit this great website!</a>
3 xung quanh nội dung bạn muốn sử dụng cho liên kết và cung cấp URL để liên kết đến thuộc tính

<a href="http://www.example.com/">Visit this great website!</a>
2 TAG

<a href="http://www.example.com/">Visit this great website!</a>
8.

Tại đây, cách tạo một số văn bản liên kết đến


<a href="http://www.example.com/">Visit this great website!</a>
9:


<a href="http://www.example.com/">Visit this great website!</a>

8. <img src="myphoto.jpg" alt="My Photo"> 0 - Một hình ảnh

Phần tử


<img src="myphoto.jpg" alt="My Photo">
1 cho phép bạn chèn hình ảnh vào các trang web của mình. Để chèn hình ảnh, trước tiên bạn tải hình ảnh lên máy chủ web của mình, sau đó sử dụng thẻ

<img src="myphoto.jpg" alt="My Photo">
0 để tham khảo tên tệp hình ảnh đã tải lên. Đây là một ví dụ:


<img src="myphoto.jpg" alt="My Photo">

Thuộc tính


<img src="myphoto.jpg" alt="My Photo">
3 là bắt buộc cho tất cả các thẻ

<img src="myphoto.jpg" alt="My Photo">
1. Nó được sử dụng bởi các trình duyệt không hiển thị hình ảnh để cung cấp văn bản thay thế cho khách truy cập.

Tìm hiểu thêm về việc sử dụng hình ảnh trong các trang web.

9. <img src="myphoto.jpg" alt="My Photo"> 5… <img src="myphoto.jpg" alt="My Photo"> 6-một thùng chứa cấp khối

Phần tử


<img src="myphoto.jpg" alt="My Photo">
7 là một thùng chứa chung mà bạn có thể sử dụng để thêm cấu trúc hơn vào nội dung trang của mình. Ví dụ: bạn có thể nhóm một số đoạn hoặc tiêu đề phục vụ mục đích tương tự với nhau bên trong phần tử

<img src="myphoto.jpg" alt="My Photo">
7. Thông thường, các yếu tố

<img src="myphoto.jpg" alt="My Photo">
7 được sử dụng cho những thứ như:

  • Tiêu đề trang và chân trang
  • Cột nội dung và thanh bên
  • Hộp được tô sáng trong luồng văn bản
  • Các khu vực của trang với một mục đích cụ thể, chẳng hạn như các điểm quảng cáo
  • Phòng trưng bày hình ảnh

Bằng cách thêm các thuộc tính


<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
0 và/hoặc

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
1 vào các phần tử

<img src="myphoto.jpg" alt="My Photo">
7 của bạn, sau đó bạn có thể sử dụng CSS để tạo kiểu và định vị

<img src="myphoto.jpg" alt="My Photo">
7. Đây là cơ sở để tạo bố cục trang dựa trên CSS.

Ở đây, một ví dụ sử dụng


<img src="myphoto.jpg" alt="My Photo">
7 để chứa nội dung cho thanh bên trong trang:


<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>

10.

Phần tử


<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
7 tương tự như

<img src="myphoto.jpg" alt="My Photo">
7 ở chỗ nó được sử dụng để thêm cấu trúc vào nội dung của bạn. Sự khác biệt là

<img src="myphoto.jpg" alt="My Photo">
7 là một phần tử cấp khối, trong khi

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
7 là một yếu tố nội tuyến:

  • Các phần tử cấp khối, chẳng hạn như
    
    <img src="myphoto.jpg" alt="My Photo">
    
    7,
    
    <h2>The Adventures of My Cat Lucky</h2>
    
    5 và
    
    <head>
      <title>The Adventures of My Cat Lucky</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
      <meta name="keywords" content="cat,Lucky,pet,animal">
      <link rel="stylesheet" type="text/css" href="/style.css">
      <link rel="shortcut icon" href="/favicon.ico">
    </head>
    
    1, là các yếu tố được thiết kế để chứa các khối nội dung tương đối lớn hoặc độc lập, chẳng hạn như các đoạn văn của văn bản. Một phần tử cấp khối luôn bắt đầu trên một dòng mới.
    , such as
    
    <img src="myphoto.jpg" alt="My Photo">
    
    7,
    
    <h2>The Adventures of My Cat Lucky</h2>
    
    5, and
    
    <head>
      <title>The Adventures of My Cat Lucky</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
      <meta name="keywords" content="cat,Lucky,pet,animal">
      <link rel="stylesheet" type="text/css" href="/style.css">
      <link rel="shortcut icon" href="/favicon.ico">
    </head>
    
    1, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
  • Các yếu tố nội tuyến, chẳng hạn như
    
    <div id="sidebar">
      <h2>Sidebar Heading</h2>
      <p>Sidebar text</p>
      <p>More sidebar text</p>
    </div>
    
    7,
    
    <a href="http://www.example.com/">Visit this great website!</a>
    
    4 và
    
    <img src="myphoto.jpg" alt="My Photo">
    
    1, được thiết kế để chứa các phần nội dung nhỏ hơn - chẳng hạn như một vài từ hoặc một câu - trong một khối nội dung lớn hơn. Thêm một phần tử nội tuyến không gây ra một dòng mới được tạo. Các phần tử cấp khối có thể chứa các phần tử nội tuyến, nhưng các phần tử nội tuyến có thể chứa các phần tử cấp khối.
    , such as
    
    <div id="sidebar">
      <h2>Sidebar Heading</h2>
      <p>Sidebar text</p>
      <p>More sidebar text</p>
    </div>
    
    7,
    
    <a href="http://www.example.com/">Visit this great website!</a>
    
    4, and
    
    <img src="myphoto.jpg" alt="My Photo">
    
    1, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.

Như với


<img src="myphoto.jpg" alt="My Photo">
7, bạn thường thêm thuộc tính

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
0 và/hoặc

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
1 vào

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
7 để bạn có thể tạo kiểu cho nó bằng CSS.

Ví dụ sau sử dụng các yếu tố


<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
7 để chỉ ra tên sản phẩm trong một đoạn. Những tên sản phẩm này sau đó có thể được tô sáng bằng CSS. Một công cụ tìm kiếm tùy chỉnh cũng có khả năng sử dụng thông tin được cung cấp bởi các yếu tố

<div id="sidebar">
  <h2>Sidebar Heading</h2>
  <p>Sidebar text</p>
  <p>More sidebar text</p>
</div>
7 để xác định các sản phẩm trong trang.


<p>Some of our products include <span class="product">SuperWidgets</span>, <span class="product">MegaWidgets</span>, and <span class="product">WonderWidgets</span>.</p>

Kết hợp tất cả lại với nhau

Bây giờ, bạn đã học được 10 thẻ HTML thiết yếu, hãy để chúng đặt tất cả chúng lại với nhau trong một trang web duy nhất:


<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
0

Như bạn có thể thấy, bạn có thể xây dựng toàn bộ trang web bằng cách sử dụng 10 thẻ HTML này. Bây giờ bạn đã sẵn sàng để tìm hiểu thêm một số thẻ bằng cách duyệt các hướng dẫn HTML khác của chúng tôi. Chúc vui vẻ!

Có bao nhiêu thẻ trong HTML 5?

HTML là một ngôn ngữ đánh dấu rất đơn giản. Mặc dù có gần 100 thẻ trong HTML5, nhưng bạn thường chỉ sử dụng một số ít 99% thời gian. Tôi sẽ dạy cho bạn 10 thẻ HTML bạn cần đánh dấu hầu hết tất cả nội dung và bất cứ điều gì khác bạn có thể nghĩ đến khi tạo một trang web.close to 100 tags in HTML5, you usually only end up using a handful 99% of the time. I am going to teach you 10 HTML tags you need to markup almost all content and anything else you can think of when creating a web page.

Các thẻ HTML chính là gì?

Thẻ chỉ định nội dung chính của tài liệu.Nội dung bên trong phần tử phải là duy nhất cho tài liệu.Nó không nên chứa bất kỳ nội dung nào được lặp lại trên các tài liệu như thanh toán, liên kết điều hướng, thông tin bản quyền, logo trang web và biểu mẫu tìm kiếm.
tag specifies the main content of a document. The content inside the
element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

12 thẻ HTML cơ bản là gì?