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.
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ó.
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>
6.
<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…
<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 - một đoạn văn
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.
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
<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.
<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
<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.
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ố
<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ì?
Một vài trong số các thẻ cơ bản có thể được nhìn thấy trong hầu hết các tài liệu HTML là ,,,,,,,,,,,,,,,,,,, Doctype html>, , , ,