Các thẻ cơ bản, phần tử và thuộc tính trong HTML | Comdy

Các thẻ cơ bản, phần tử và thuộc tính trong HTML

  • Trung Nguyen
  • 01/04/2020

  • 14 min read

Các thẻ cơ bản của HTML

Thẻ tiêu đề

Bất kỳ tài liệu nào cũng sẽ mở màn với một tiêu đề. Bạn hoàn toàn có thể sử dụng các kích cỡ khác nhau cho các tiêu đề của bạn .

HTML có sáu cấp độ tiêu đề là các thẻ

,

,

,

,

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






   
      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

Đây là tác dụng :Thẻ tiêu đề trong HTML

Thẻ đoạn văn

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 khác nhau. Mỗi đoạn văn bản phải ở giữa một thẻ mở và thẻ đóng như trong ví dụ dưới đây:






   
      Paragraph Example
   
	
   
      Here is a first paragraph of text .
      Here is a second paragraph of text .
      Here is a third paragraph of text .
   
	

Đây là tác dụng :Thẻ 

<p> trong HTML” class=”kg-image” src=”https://comdy.vn/content/images/2020/04/the-p-trong-html.jpg”/></p>
<h3 id=Thẻ ngắt dòng

Bất cứ khi nào bạn sử dụng thẻ
, mọi thứ theo sau nó đều bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về một thẻ rỗng, nơi bạn không cần mở và đóng thẻ, vì không có gì ở giữa chúng.

Thẻ
có khoảng trắng giữa ký tự br và dấu gạch chéo về phía trước. 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 chuyển tiếp và chỉ sử dụng
thì nó không hợp lệ trong XHTML.






   
      Line Break  Example
   
	
   
      

Hello
You delivered your assignment ontime.
Thanks
Mahnaz

Đây là tác dụng :Thẻ <br /> trong HTML” class=”kg-image” src=”https://comdy.vn/content/images/2020/04/the-br-trong-html.jpg”/></p>
<h2 id=Thẻ canh giữa

Bạn có thể sử dụng thẻ

để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô bảng nào.






   
      Centring Content Example
   
	
   
      This text is not in the center .
      
      
This text is in the center .

Đây là hiệu quả :Thẻ <center> trong HTML” class=”kg-image” src=”https://comdy.vn/content/images/2020/04/the-center-trong-html.jpg”/></p>
<h3 id=Thẻ tạo đường ngang

Các đường ngang được sử dụng để phân chia trực quan các phần của tài liệu. 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 hoàn toàn có thể muốn đưa ra một dòng giữa hai đoạn như trong ví dụ đã cho bên dưới :






   
      Horizontal Line Example
   
	
   
      This is paragraph one and should be on top
      
This is paragraph two and should be at bottom

Đây là hiệu quả :Thẻ 

<hr />
<p> trong HTML” class=”kg-image” src=”https://comdy.vn/content/images/2020/04/the-hr-trong-html.jpg”/></p>
<p>Một lần nữa thẻ <strong></p>
<hr/>
<p></strong> là một ví dụ về thẻ <strong>rỗng</strong>, nơi bạn không cần mở và đóng thẻ, vì không có gì ở giữa chúng.</p>
<p>Phần tử <strong></p>
<hr/>
<p></strong> có khoảng trắng giữa các ký tự <strong>hr</strong> và dấu gạch chéo về phía trước. 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 kẻ ngang, trong khi nếu bạn bỏ lỡ ký tự gạch chéo chuyển tiếp và chỉ sử dụng <strong></p>
<hr/>
<p></strong> thì nó không hợp lệ trong XHTML</p>
<h3 id=Thẻ giữ nguyên định dạng

Đôi khi, bạn muốn văn bản của bạn tuân theo định dạng chính xác về 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


.

Bất kỳ văn bản nào giữa thẻ


mở và thẻ đóng

sẽ giữ nguyên định dạng của tài liệu nguồn.






   
      Preserve Formatting Example
   
	
   
      
         function testFunction( strText ){
            alert (strText)
         }
      

Đây là hiệu quả :Thẻ 

<pre> trong HTML” class=”kg-image” src=”https://comdy.vn/content/images/2020/04/the-pre-trong-html.jpg”/><p>Bạn hãy thử xóa cặp thẻ <strong><pre></pre>
<p></strong> rồi xem kết quả nhé.</p>
<h3 id=Ký tự khoảng trắng

Giả sử bạn muốn sử dụng cụm từ ” 12 Angry Men “. Tại đâ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, khi 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 ký tự khoảng trắng   thay vì một khoảng trắng bình thường.

Ví dụ : khi viết code ” 12 Angry Men ” trong một đoạn văn, bạn nên sử dụng một cái gì đó tựa như như đoạn mã sau :






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

Đây là tác dụng :Ký tự khoảng trắng   trong HTML

Các phần tử trong HTML

Một phần tử HTML được xác định bởi một thẻ bắt đầu. Nếu phần tử chứa nội dung khác, nó kết thúc bằng thẻ đóng, trong đó tên phần tử được bắt đầu bằng dấu gạch chéo về phía trước như được hiển thị bên dưới với một vài thẻ

Thẻ bắt đầu Nội dung của thẻ Thẻ kết thúc
Đây là nội dung đoạn văn.

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

Vì vậy, ở đây …. là một phần tử HTML,

cũng là một phần tử HTML.

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ử ,



. Chúng được gọi là các phần tử rỗng .

Tài liệu HTML là một cây gồm có các thành phần này và chúng chỉ định cách thiết kế xây dựng tài liệu HTML và loại nội dung nào sẽ được đặt trong phần nào của tài liệu HTML .

So sánh thẻ với phần tử trong HTML

Một thành phần HTML được xác lập bởi một thẻ mở màn. Nếu thành phần chứa nội dung khác, nó kết thúc bằng thẻ đóng .

Ví dụ: thẻ bắt đầu của một đoạn và

thẻ đóng của cùng một đoạn nhưng Đây là đoạnphần tử.

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

Bạn sẽ thương xuyên phát hiện một thành phần HTML ở bên trong một thành phần HTML khác :






   
      Nested Elements Example
   
	
   
      

This is italic heading

This is underlined paragraph

Đây là hiệu quả :Phần tử lồng nhau trong HTML

Thuộc tính trong HTML

Chúng ta đã xem một số thẻ HTML và cách sử dụng của chúng như thẻ tiêu đề

,

,

thẻ đoạn văn bản và các thẻ khác.

Chúng ta đã sử dụng chúng ở dạng đơn thuần nhất, nhưng hầu hết các thẻ HTML có các thuộc tính, đó là các thông tin bổ trợ .

Một thuộc tính được sử dụng để xác định các đặc điểm của một phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần là têngiá trị.

  • Tên là thuộc tính bạn muốn thiết lập cho thẻ. Ví dụ: thẻ trong ví dụ dưới đây có thuộc tính là align được sử dụng để chỉ ra sự liên kết của đoạn trên trang.
  • Giá trị là những gì bạn muốn thiết lập cho thuộc tính và luôn đặt trong cặp dấu nháy kép. Ví dụ dưới đây cho thấy ba giá trị có thể của thuộc tính align: left, centerright.

Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa chữ thường. Tuy nhiên, World Wide Web Consortium ( W3C ) khuyến nghị sử dụng chữ thường cho các thuộc tính / giá trị thuộc tính trong yêu cầu HTML 4 của họ .



 

 
    
      Align Attribute  Example 
   
	
    
      This is left aligned 
      This is center aligned 
      This is right aligned 
   
	

Đây là tác dụng :Thuộc tính trong HTML

Các thuộc tính cốt lõi

Bốn thuộc tính cốt lõi hoàn toàn có thể được sử dụng trên hầu hết các thành phần HTML ( mặc dầu không phải tổng thể ) là :

  • id
  • title
  • class
  • style

Thuộc tính id

Thuộc tính id của một thẻ HTML có thể được sử dụng để nhận diện bất kỳ yếu tố trong một trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử:

  • Nếu một phần tử có thuộc tính id là một định danh duy nhất, bạn có thể định danh phần tử đó và nội dung của nó.
  • Nếu bạn có hai phần tử giống nhau trong một trang web và bạn muốn phân biệt chúng, bạn có thể sử dụng thuộc tính id.

Chúng ta sẽ tranh luận về phong thái trong một hướng dẫn khác. Hiện tại, hãy sử dụng thuộc tính id để phân biệt giữa hai thành phần đoạn văn như dưới đây .

This para explains what is HTML
This para explains what is Cascading Style Sheet

Thuộc tính title

Thuộc tính title là một tiêu đề gợi ý cho phần tử. Cú pháp của thuộc tính title tương tự như được giải thích cho thuộc tính id.

Hành vi của thuộc tính này sẽ nhờ vào vào thành phần mang nó, mặc dầu nó thường được hiển thị dưới dạng một tooltip khi con trỏ đi qua thành phần hoặc trong khi thành phần đang tải .






   
      The title Attribute Example
   
	
   
      

Titled Heading Tag Example

Đây là tác dụng :Thuộc tính title trong HTMLKhi đưa con trỏ chuột của bạn qua ” Titled Heading Tag Example ” và bạn sẽ thấy tooltip ” Hello HTML ! ” hiện ra .

Thuộc tính class

Thuộc tính class được sử dụng để kết hợp một phần tử với một style sheet, và được sử dụng để xác định lớp của phần thử. Bạn sẽ tìm hiểu thêm về việc sử dụng thuộc tính class khi bạn học Cascading Style Sheet (CSS). Vì vậy, bây giờ bạn có thể bỏ qua nó.

Giá trị của thuộc tính cũng hoàn toàn có thể là một list các tên lớp được phân làn bằng khoảng chừng trắng. Ví dụ :

class="class-name1 class-name2 class-name3"

Thuộc tính style

Thuộc tính style được cho phép bạn chỉ định quy tắc Cascading Style Sheet ( CSS ) trong thành phần .






   
      The style Attribute
   
	
   
      Some text ...
   
	

Đây là hiệu quả :Thuộc tính style trong HTMLTại thời gian này, tất cả chúng ta không học CSS, thế cho nên hãy liên tục mà không cần bận tâm nhiều về CSS. Ở bài viết này, bạn chỉ cần hiểu các thuộc tính HTML là gì và làm thế nào chúng hoàn toàn có thể được sử dụng trong khi định dạng nội dung .

Thuộc tính quốc tế hóa

Có ba thuộc tính quốc tế hóa, có sẵn cho hầu hết ( mặc dầu không phải tổng thể ) các thành phần XHTML .

  • dir
  • lang
  • xml:lang

Thuộc tính dir

Thuộc tính dir chỉ cho các trình duyệt về hướng trong đó văn bản. Thuộc tính dir có thể lấy một trong hai giá trị, như bạn có thể thấy trong bảng sau:

Giá trị Ý nghĩa
ltr Trái sang phải (giá trị mặc định)
rtl Phải sang trái (đối với các ngôn ngữ như tiếng Do Thái hoặc tiếng Ả Rập được đọc từ phải sang trái)





   
      Display Directions
   
	
   
      This is how IE 5 renders right-to-left directed text.
   
	

Đây là tác dụng :Thuộc tính dir trong html

Khi thuộc tính dir được sử dụng trong thẻ , nó xác định cách văn bản sẽ được trình bày trong toàn bộ tài liệu. Khi được sử dụng trong một thẻ khác, nó sẽ điều khiển hướng của văn bản chỉ cho nội dung của thẻ đó.

Thuộc tính lang

Thuộc tính lang cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong một tài liệu, nhưng thuộc tính này đã được giữ trong HTML chỉ để tương thích ngược với các phiên bản trước của HTML. Thuộc tính này đã được thay thế bằng thuộc tính xml: lang trong các tài liệu XHTML mới.

Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự chuẩn ISO-639. Kiểm tra mã ngôn ngữ HTML: ISO 639 để biết danh sách đầy đủ các mã ngôn ngữ.






   
      English Language Page
   

   
      This page is using English Language
   

Đây là tác dụng :Thuộc tính lang trong HTML

Các thuộc tính xml:lang

Các thuộc tính xml : lang là sự thay thế sửa chữa cho thuộc tính lang trong XHTML. Giá trị của thuộc tính xml : lang phải là mã vương quốc ISO-639 như đã đề cập trong phần trước .

Thuộc tính chung

Đây là bảng một số thuộc tính khác có thể sử dụng được với nhiều thẻ HTML.

Thuộc tính Tùy chọn Chức năng
align right, left, center Sắp xếp các thẻ theo chiều ngang
valign top, middle, bottom Sắp xếp theo chiều dọc các thẻ trong một phần tử HTML.
bgcolor giá trị số, thập lục phân, RGB Đặt màu nền cho một phần tử
background URL Đặt một hình ảnh nền cho một phần tử
id Người dùng định nghĩa Đặt tên cho một phần tử để sử dụng với Cascading Style Sheets.
class Người dùng định nghĩa Phân loại một phần tử để sử dụng với Cascading Style Sheets.
width Giá trị số Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng.
height Giá trị số Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng.
title Người dùng định nghĩa Tiêu đề “Pop-up” của các phần tử.

Chúng ta sẽ xem các ví dụ tương quan đến chúng ở ở những bài viết về các thẻ HTML khác .

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gian

Bạn hoàn toàn có thể vui vẻ tắt trình chặn quảng cáo ❤ ️ để tương hỗ chúng tôi duy trì hoạt động giải trí của website .