HTML - Thẻ cơ bản
Thẻ tiêu đề
Bất kỳ tài liệu nào cũng bắt đầu bằng một tiêu đề. Bạn có thể sử dụng các kích thước khác nhau cho các tiêu đề của mình. HTML cũng có sáu cấp độ tiêu đề, sử dụng các phần tử<h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Trong khi hiển thị bất kỳ tiêu đề nào, trình duyệt sẽ thêm một dòng trước và một dòng sau tiêu đề đó.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ đoạn văn
Các <p>thẻ cung cấp một cách để cấu trúc văn bản của bạn thành các đoạn văn khác nhau. Mỗi đoạn văn bản phải nằm giữa thẻ <p> mở và thẻ đóng </p> như minh họa bên dưới trong ví dụ -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ ngắt dòng
Bất cứ khi nào bạn sử dụng <br />, bất kỳ thứ gì theo sau nó bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về mộtempty phần tử, nơi bạn không cần thẻ mở và thẻ đóng, vì không có gì để xen vào giữa chúng.
Thẻ <br /> có khoảng cách giữa các ký tự brvà dấu gạch chéo. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị ngắt dòng, trong khi nếu bạn bỏ lỡ ký tự gạch chéo về phía trước và chỉ sử dụng <br> thì ký tự này không hợp lệ trong XHTML.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Căn giữa nội dung
Bạn có thể dùng <center> để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô nào trong bảng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đường ngang
Các đường ngang được sử dụng để chia nhỏ các phần của tài liệu một cách trực quan. Các<hr> thẻ tạo một dòng từ vị trí hiện tại trong tài liệu sang lề phải và ngắt dòng tương ứng.
Ví dụ: bạn có thể muốn đặt một dòng giữa hai đoạn văn như trong ví dụ dưới đây:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Lần nữa <hr /> thẻ là một ví dụ về empty phần tử, nơi bạn không cần thẻ mở và thẻ đóng, vì không có gì để xen vào giữa chúng.
Các <hr /> phần tử có khoảng cách giữa các ký tự hrvà dấu gạch chéo. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị đường ngang, trong khi nếu bạn bỏ lỡ ký tự gạch chéo về phía trước và chỉ sử dụng<hr> nó không hợp lệ trong XHTML
Duy trì định dạng
Đôi khi, bạn muốn văn bản của mình tuân theo định dạng chính xác như cách nó được viết trong tài liệu HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ định dạng sẵn<pre>.
Bất kỳ văn bản nào giữa phần mở đầu <pre> thẻ và đóng </pre> thẻ sẽ giữ nguyên định dạng của tài liệu nguồn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Hãy thử sử dụng cùng một mã mà không giữ nó bên trong <pre>...</pre> thẻ
Không gian không đột phá
Giả sử bạn muốn sử dụng cụm từ "12 Angry Men." Ở đây, bạn sẽ không muốn trình duyệt chia "12, Angry" và "Men" thành hai dòng -
An example of this technique appears in the movie "12 Angry Men."Trong trường hợp bạn không muốn trình duyệt máy khách ngắt văn bản, bạn nên sử dụng thực thể dấu cách không ngắt thay vì một không gian bình thường. Ví dụ: khi viết mã "12 Angry Men" trong một đoạn văn, bạn nên sử dụng một cái gì đó tương tự như đoạn mã sau:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau: