Mặc dù các trang web hiện đại thường được xây dựng với giao diện thân thiện với người dùng, nhưng thật hữu ích khi biết một số HTML cơ bản. Nếu bạn biết 17 thẻ ví dụ HTML sau (và một vài tính năng bổ sung), bạn sẽ có thể tạo một trang web cơ bản từ đầu hoặc chỉnh sửa mã được tạo bởi một ứng dụng như WordPress.
Chúng tôi đã cung cấp các ví dụ mã HTML với đầu ra cho hầu hết các thẻ. Nếu bạn muốn thấy chúng hoạt động, hãy tải xuống tệp HTML mẫu ở cuối bài viết. Bạn có thể chơi với nó trong trình soạn thảo văn bản và tải nó lên trong trình duyệt để xem những thay đổi của bạn làm gì.
1. <! DOCTYPE html>
Bạn sẽ cần thẻ này ở đầu mỗi tài liệu HTML bạn tạo. Nó đảm bảo rằng một trình duyệt biết rằng nó đang đọc HTML và HTML5, phiên bản mới nhất.
Mặc dù đây không thực sự là một thẻ HTML, nhưng nó vẫn là một điều tốt để biết.
2. <html>
Đây là một thẻ khác cho trình duyệt biết rằng nó đang đọc HTML. Thẻ <html> đi thẳng sau thẻ DOCTYPE và bạn đóng nó bằng thẻ </ html> ngay ở cuối tệp của bạn. Mọi thứ khác trong tài liệu của bạn nằm giữa các thẻ này.
3. <head>
Thẻ <head> bắt đầu phần tiêu đề của tệp của bạn. Những thứ đi vào đây không xuất hiện trên trang web của bạn. Thay vào đó, nó chứa siêu dữ liệu cho các công cụ tìm kiếm và thông tin cho trình duyệt của bạn.
Đối với các trang cơ bản, thẻ <head> sẽ chứa tiêu đề của bạn và đó là về nó. Nhưng có một vài điều khác mà bạn có thể bao gồm, chúng ta sẽ đi qua trong giây lát.
4. <tiêu đề>
Thẻ này đặt tiêu đề của trang của bạn. Tất cả những gì bạn cần làm là đặt tiêu đề của bạn vào thẻ và đóng nó, như thế này (tôi cũng đã bao gồm các thẻ tiêu đề):
<head>
<title>My Website</title>
</head>Đó là tên sẽ được hiển thị dưới dạng tiêu đề tab khi được mở trong trình duyệt.
5. <meta>
Giống như thẻ tiêu đề, siêu dữ liệu được đặt trong khu vực tiêu đề của trang của bạn. Siêu dữ liệu chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin về những gì trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một số trường được sử dụng phổ biến nhất:
- mô tả cơ bản mô tả cơ bản của trang của bạn.
- từ khóa Lựa chọn từ khóa áp dụng cho trang của bạn.
- tác giả là tác giả của trang của bạn.
- thẻ viewport cheA để đảm bảo rằng trang của bạn trông đẹp trên tất cả các thiết bị.
Đây là một ví dụ có thể áp dụng cho trang này:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="dongthoigian.net">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Thẻ xem viewport của Wap luôn phải có chiều rộng của chiều cao = chiều rộng thiết bị, tỷ lệ ban đầu = 1.0, như nội dung để đảm bảo trang của bạn hiển thị tốt trên thiết bị di động và máy tính để bàn.
6. <body>
Sau khi bạn đóng phần tiêu đề, bạn có được cơ thể. Bạn mở thẻ này bằng thẻ <body> và đóng thẻ bằng thẻ </ body>. Điều đó nằm ngay ở cuối tệp của bạn, ngay trước thẻ </ html>.
Tất cả nội dung của trang web của bạn nằm ở giữa các thẻ này. Nó đơn giản như âm thanh của nó:
<body>
Everything you want displayed on your page.
</body>7. <h1>
Thẻ <h1> xác định tiêu đề cấp một trên trang của bạn. Đây thường sẽ là tiêu đề, và lý tưởng sẽ chỉ có một trên mỗi trang.
<h2> xác định các tiêu đề cấp hai, chẳng hạn như tiêu đề phần, <h3> tiêu đề phụ cấp ba, v.v., xuống <h6>. Ví dụ, tên của các thẻ trong bài viết này là tiêu đề cấp hai.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>Kết quả:
Như bạn có thể thấy, chúng trở nên nhỏ hơn ở mỗi cấp độ.
8. <p>
Thẻ đoạn bắt đầu một đoạn mới. Điều này thường chèn hai ngắt dòng.
Nhìn, ví dụ, tại điểm dừng giữa dòng trước và dòng này. Đó là những gì một thẻ <p> .
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>Kết quả:
Đoạn đầu tiên của bạn.
Đoạn thứ hai của bạn.
Bạn cũng có thể sử dụng các kiểu CSS trong thẻ đoạn văn của mình, như kiểu này sẽ thay đổi kích thước văn bản:
<p style="font-size: 120%;">20% larger text</p>Kết quả:
Văn bản lớn hơn 20%
9. <br>
Thẻ ngắt dòng chèn một ngắt dòng đơn:
<p>The first line.<br>
The second line (close to the first one).</p>Kết quả:
Dòng đầu tiên.
Dòng thứ hai (gần với dòng đầu tiên).
Làm việc theo cách tương tự là thẻ <hr>. Điều này vẽ một đường ngang trên trang của bạn và tốt cho việc tách các phần của văn bản.
10. <strong>
Thẻ này xác định văn bản quan trọng. Nói chung, điều đó có nghĩa là nó sẽ được in đậm. Tuy nhiên, có thể sử dụng CSS để làm cho <strong> hiển thị văn bản khác đi.
Tuy nhiên, bạn có thể sử dụng <strong> một cách an toàn để in đậm văn bản.
<strong>Very important things you want to say.</strong>Kết quả:
Những điều rất quan trọng bạn muốn nói.
Nếu bạn quen thuộc với thẻ <b> cho văn bản tô đậm, bạn vẫn có thể sử dụng nó. Không có gì đảm bảo nó sẽ tiếp tục hoạt động trong các phiên bản HTML trong tương lai, nhưng hiện tại, nó hoạt động.
11. <em>
Giống như <b> và <strong>, <em> và <i> có liên quan. Thẻ <em> xác định văn bản được nhấn mạnh, điều này thường có nghĩa là nó sẽ được in nghiêng. Một lần nữa, có khả năng CSS sẽ làm cho văn bản được nhấn mạnh khác đi.
<em>An emphasized line.</em>Kết quả:
Một dòng nhấn mạnh.
Thẻ <i> vẫn hoạt động, nhưng một lần nữa, có thể nó sẽ bị lỗi trong các phiên bản HTML trong tương lai.
12. <a>
Thẻ <a> cho phép bạn tạo liên kết. Một liên kết đơn giản trông như thế này:
<a href="//dongthoigian.net/>Go to dongthoigian</a>Kết quả:
Thuộc tính của Wim href xác định đích của liên kết. Trong nhiều trường hợp, đây sẽ là một trang web khác. Nó cũng có thể là một tập tin, như hình ảnh hoặc PDF.
Các thuộc tính hữu ích khác bao gồm tiêu đề mục tiêu và tiêu đề. Thuộc tính đích hầu như chỉ được sử dụng để mở một liên kết trong tab hoặc cửa sổ mới, như thế này:
<a href="//dongthoigian.net/" target="_blank">Go to dongthoigian in a new tab</a>Kết quả:
Các thuộc tính tiêu đề . Di chuột qua liên kết dưới đây để xem cách nó hoạt động:
<a href="//dongthoigian.net/" title="This is a tool tip">Hover over this to see the tool tip</a>Kết quả:
13. <img>
Nếu bạn muốn nhúng một hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ hình ảnh. Thông thường bạn sẽ sử dụng nó cùng với thuộc tính của src Cảnh. Điều này chỉ định nguồn của hình ảnh, như thế này:
<img src="wp-content/uploads/2019/04/hinh-sunlit-birds.jpg">Kết quả:
Các thuộc tính khác cũng có sẵn, chẳng hạn như chiều cao của chiều cao, chiều rộng của Điên, độ cao và độ cao. Đây là cách nó có thể trông:
<img src="wp-content/uploads/2019/04/hinh-sunlit-birds.jpg" alt="the name of your image">Như bạn có thể mong đợi, các thuộc tính chiều cao và chiều cao của chiều cao và chiều cao của hình ảnh đặt chiều cao và chiều rộng của hình ảnh. Nói chung, chỉ nên đặt một trong số chúng để hình ảnh được chia tỷ lệ chính xác. Nếu bạn sử dụng cả hai, bạn có thể kết thúc bằng một hình ảnh kéo dài hoặc bị cắt xén.
Thẻ alt alt của Nhật báo cho trình duyệt biết văn bản nào sẽ hiển thị nếu hình ảnh không thể được hiển thị và là một ý tưởng tốt để đưa vào với bất kỳ hình ảnh nào. Nếu ai đó có kết nối đặc biệt chậm hoặc trình duyệt cũ, họ vẫn có thể biết được những gì sẽ có trên trang của bạn.
14. <ol>
Thẻ danh sách theo thứ tự cho phép bạn tạo một danh sách theo thứ tự. Nói chung, điều đó có nghĩa là bạn sẽ nhận được một danh sách được đánh số. Mỗi mục trong danh sách cần có thẻ mục danh sách (<li>), vì vậy danh sách của bạn sẽ trông như thế này:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>Kết quả:
- Điều đầu tiên
- Điều thứ hai
- Điều thứ ba
Trong HTML5, bạn có thể sử dụng <ol đảo ngược> để đảo ngược thứ tự của các số. Và bạn có thể đặt giá trị bắt đầu với thuộc tính start.
<ol type="A">15. <ul>
Danh sách không có thứ tự đơn giản hơn nhiều so với đối tác được đặt hàng của nó. Nó chỉ đơn giản là một danh sách gạch đầu dòng.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Kết quả:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
Các danh sách không có thứ tự cũng có các thuộc tính loại Kiểu và, và bạn có thể đặt nó vào đĩa, vòng tròn, góc hoặc hình vuông.
16. <bản>
Trong khi việc sử dụng các bảng để định dạng được tán thành, có nhiều lúc bạn sẽ muốn sử dụng các hàng và cột để phân đoạn thông tin trên trang của mình. Một số thẻ là cần thiết để có được một bảng để làm việc. Đây là mã HTML mẫu:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>Các thẻ <bảng> và </ bảng> chỉ định bắt đầu và kết thúc của bảng. Thẻ <tbody> chứa tất cả nội dung bảng.
Mỗi hàng của bảng được đặt trong thẻ <tr>. Mỗi ô trong mỗi hàng được bọc trong các thẻ <th> cho tiêu đề cột hoặc thẻ <td> cho dữ liệu cột. Bạn cần một trong những thứ này cho mỗi cột trên mỗi hàng.
Kết quả:
| Cột 1 | Cột thứ 2 |
|---|---|
| Hàng 1, cột 1 | Hàng 1, cột 2 |
| Hàng 2, cột 1 | Hàng 2, cột 2 |
17. <blockquote>
Khi bạn trích dẫn một trang web hoặc người khác và bạn muốn đặt trích dẫn tách biệt với phần còn lại của tài liệu của bạn, hãy sử dụng thẻ blockquote. Tất cả những gì bạn cần làm là kèm theo trích dẫn trong việc mở và đóng các thẻ blockquote:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>Kết quả:
Định dạng chính xác được sử dụng có thể phụ thuộc vào trình duyệt bạn đang sử dụng hoặc CSS của trang web của bạn. Nhưng thẻ vẫn giữ nguyên.