Basic Tags – Một số thẻ cơ bản

Tháng mười 17, 2022
 |  Không có bình luận

1. Heading Tags – Thẻ Heading

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 đề đó.

Ví dụ

Heading Example

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

2. Paragraph Tag – Thẻ Paragraph

Thẻ <p> 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 mở đầu và thẻ kết thúc như được hiển thị bên dưới ví 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>
Kết quả:
Paragraph Example

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

3. Line Break Tag – Thẻ ngắt dòng

Bất cứ khi nào bạn sử dụng phần tử <br /> , bất kỳ thứ gì theo sau nó đều bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về một phần tử trống , 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ự br và 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ỏ 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.

Ví 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>

Kết quả

Line Break Example

Hello
You delivered your assignment ontime.
Thanks
Mahnaz

4. Centering Content – canh giữa nội dung

Bạn có thể sử dụng thẻ <center> để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô bảng nào.

Ví 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>
Kết quả:
Centring Content Example

This text is not in the center.

This text is in the center.

5. Horizontal Lines – Đườ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. Thẻ <hr> tạo một dòng từ vị trí hiện tại trong tài liệu.

Ví dụ: bạn có thể muốn đưa ra một dòng giữa hai đoạn văn như trong ví dụ đã cho bên dưới 

<!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>
Kết quả:
Horizontal Line Example

This is paragraph one and should be on top

This is paragraph two and should be at bottom

6. Preserve Formatting – Giữ nguyên đị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 của 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 thẻ mở <pre> và thẻ đóng </pre> sẽ giữ nguyên định dạng của tài liệu nguồn.

ví dụ

 

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>
Kết quả:
Preserve Formatting Example 
         function testFunction( strText ){
            alert (strText)
         }

7.  Nonbreaking Spaces

Nonbreaking Spaces : Đây là ký tự khoảng trắng trong HTML. Khi viết HTML thì dấu cách được tính là 1 khoảng trắng. Khi ta muốn nhiều hơn một thì phải dùng đến &nbsp, mỗi &nbsp tương ứng với một dấu cách.

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 & nbsp; 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 tương tự như đoạn mã sau:

Thí dụ

Kết quả

Nonbreaking Spaces Example

An example of this technique appears in the movie "12 Angry Men."

8. HTML Elements – phần tử trong HTML 

Một phần tử HTML được xác định bởi một thẻ bắt đầu (Start Tag). Nếu phần tử chứa nội dung khác, nó sẽ kết thúc bằng một thẻ đóng (End Tag), trong đó tên phần tử được đặt trước dấu gạch chéo lên như được hiển thị bên dưới :

Start Tag

Content

End Tag

<p>

Đây là nội dung đoạn văn.

</p>

<h1>

Đây là tiêu đề nội dung.

</h1>

<div>

Đây là nội dung phân chia.

</div>

<br />

 



Vì vậy, ở đây <p>…. </p> là một phần tử HTML, <h1>… </h1> là một phần tử HTML khác. Có một số phần tử HTML không cần phải đóng, chẳng hạn như các phần tử <img…/>, <hr /> và <br />. Chúng được gọi là các phần tử trống.

Các phần tử HTML lồng nhau

Ví dụ

Kết quả

Nested Elements Example

This is italic heading

This is underlined paragraph

8.1. Thẻ <div>

Thẻ div được gọi là thẻ Division, mỗi thẻ trong HTML đều có mục đích khác nhau. Ví dụ như thẻ <p> được dùng để chỉ định một đoạn văn bản nhất định. Thẻ div được sử dụng trong HTML để phân chia nội dung trong trang web như (văn bản, hình ảnh, đầu trang, chân trang, thanh điều hướng, v.v.). Thẻ Div có cả thẻ mở (<div>) và đóng (</div>) và bắt buộc phải đóng thẻ. Div là thẻ có thể sử dụng nhiều nhất trong phát triển web vì nó giúp chúng ta tách dữ liệu trong trang web và chúng ta có thể tạo một phần cụ thể cho dữ liệu hoặc chức năng cụ thể trong các trang web.

Ví dụ: