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

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ỳ ebook nào cũng sẽ khởi đầu với 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 các bạn.

HTML có sáu cấp độ tiêu đề là các thẻ <h1vàgt;, <h2vàgt;, <h3vàgt;, <h4vàgt;, <h5vàgt;<h6vàgt; . Trong lúc 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 đề đó.

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Heading Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <h1vàgt;This is heading 1vàlt;/h1vàgt;
      <h2vàgt;This is heading 2vàlt;/h2vàgt;
      <h3vàgt;This is heading 3vàlt;/h3vàgt;
      <h4vàgt;This is heading 4vàlt;/h4vàgt;
      <h5vàgt;This is heading 5vàlt;/h5vàgt;
      <h6vàgt;This is heading 6vàlt;/h6vàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ đoạn văn

Thẻ <pvàgt; phân phối một phương pháp để cấu tạo văn bản của các 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ẻ <pvàgt; mở và thẻ đóng </ pvàgt; như trong chẳng hạn dưới đây:

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Paragraph Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <pvàgt;Here is a first paragraph of text.</pvàgt;
      <pvàgt;Here is a second paragraph of text.</pvàgt;
      <pvàgt;Here is a third paragraph of text.</pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ <p> trong HTML

Thẻ ngắt dòng

Bất kì lúc nào bạn sử dụng thẻ <br /> , mọi thứ theo sau nó đều bắt nguồn từ dòng kế đến. Thẻ đó là một chẳng hạn 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ẻ <br /> 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ốn khó 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 <brvàgt; thì nó không hợp lệ trong XHTML.

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Line Break  Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <pvàgt;Hellovàlt;br />
         You delivered your assignment ontime.<br />
         Thanksvàlt;br />
         Mahnazvàlt;/pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ <br /> trong HTML

Thẻ canh giữa

Bạn có thể sử dụng thẻ <centervàgt; để đặt bất kỳ bài viết nào vào giữa trang hoặc bất kỳ ô bảng nào.

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Centring Content Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <pvàgt;This text is not in the center.</pvàgt;
      
      <centervàgt;
         <pvàgt;This text is in the center.</pvàgt;
      </centervàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ <center> trong HTML

Thẻ tạo đường ngang

Các đường ngang được sử dụng để phân tách trực quan các phần của ebook. Thẻ <hrvàgt; tạo một dòng từ địa điểm lúc này trong ebook sang lề phải và ngắt dòng tương ứng.

Chẳng hạn: bạn có thể mong muốn đặt ra một dòng giữa hai đoạn như trong chẳng hạn đã cho bên dưới:

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Horizontal Line Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <pvàgt;This is paragraph one and should be on topvàlt;/pvàgt;
      <hr />
      <pvàgt;This is paragraph two and should be at bottomvàlt;/pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ <hr /> trong HTML

Một lần nữa thẻ <hr /> là một chẳng hạn về thẻ rỗng , nơi bạn không cần mở và đóng thẻ, vì không có gì ở giữa chúng.

Phần tử <hr /> có khoảng trắng giữa các ký tự hr 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ốn khó 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 <hrvàgt; thì nó không hợp lệ trong XHTML

Xem Thêm  given a key

Thẻ giữ nguyên định dạng

Thỉnh thoảng, bạn mong muốn văn bản của các bạn tuân theo định dạng đúng đắn về cách nó được viết trong ebook HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ định dạng <prevàgt; .

Bất kỳ văn bản nào giữa thẻ <prevàgt; mở và thẻ đóng </ prevàgt; sẽ giữ nguyên định dạng của ebook nguồn.

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Preserve Formatting Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <prevàgt;
         function testFunction( strText ){
            alert (strText)
         }
      </prevàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thẻ <pre> trong HTML

Bạn hãy thử xóa cặp thẻ <prevàgt;</ prevàgt; rồi xem kết quả nhé.

Ký tự khoảng trắng

Giả sử bạn mong muốn sử dụng cụm từ “12 Angry Men”. Tại đây, bạn sẽ không mong 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 mong muốn trình duyệt máy khách ngắt văn bản, chúng ta nên sử dụng ký tự khoảng trắng &nbsp; thay vì một khoảng trắng bình bình.

Chẳng hạn: khi viết code “12 Angry Men” trong một đoạn văn, chúng ta nên sử dụng một cái gì đó cũng giống như đoạn mã sau:

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Nonbreaking Spaces Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <pvàgt;An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Ký tự khoảng trắng &nbsp; trong HTML

Các phần tử trong HTML

Một phần tử HTML được xác nhận bởi một thẻ khởi đầu. Nếu phần tử chứa bài viết khác, nó chấm dứt bằng thẻ đóng, trong đó tên phần tử được khởi đầ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ẻ khởi đầu
Bài viết của thẻ
Thẻ chấm dứt

<pvàgt;
Đây là bài viết đoạn văn.
</ pvàgt;

<h1vàgt;
Đây là tiêu đề bài viết.
</ h1vàgt;

<divvàgt;
Đây là bài viết phân tách.
</ divvàgt;

<br />

Chính vì thế, bước này <pvàgt; …. </ pvàgt; là một phần tử HTML, <h1vàgt; … </ h1vàgt; cũng là một phần tử HTML.

Có một số phần tử HTML không cần phải đóng, ví dụ như các phần tử <img … /> , <hr /><br /> . Chúng được gọi là các phần tử rỗng .

Ebook HTML là một cây bao gồm các thành phần này và chúng chỉ định cách xây dựng ebook HTML và loại bài viết nào sẽ được đặt trong phần nào của ebook HTML.

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

Một phần tử HTML được xác nhận bởi một thẻ khởi đầu . Nếu phần tử chứa bài viết khác, nó chấm dứt bằng thẻ đóng .

Chẳng hạn: <pvàgt;thẻ khởi đầu của một đoạn và </ pvàgt;thẻ đóng của cùng một đoạn nhưng <pvàgt; Đây là đoạn </ pvàgt;phần tử.

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

Bạn sẽ thương xuyên bắt gặp một phần tử HTML ở bên trong một phần tử HTML khác:

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;Nested Elements Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <h1vàgt;This is <ivàgt;italicvàlt;/ivàgt; headingvàlt;/h1vàgt;
      <pvàgt;This is <uvàgt;underlinedvàlt;/uvàgt; paragraphvàlt;/pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Phần tử lồng nhau trong HTML

Thuộc tính trong HTML

Tất cả chúng ta đã xem một số thẻ HTML và cách dùng của chúng như thẻ tiêu đề <h1vàgt;, <h2vàgt;, thẻ đoạn văn bản <pvàgt; và các thẻ khác.

Tất cả chúng ta đã sử dụng chúng ở dạng dễ dàng nhất, nhưng đa phần các thẻ HTML có các thuộc tính, này là các thông tin bổ sung.

Xem Thêm  Visualizza le tesi disponibili per thesis type - Tesi di laurea magistrale - microservice la gi

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

  • Tên là thuộc tính bạn mong muốn seting cho thẻ. Chẳng hạn: thẻ <pvàgt; trong chẳng hạn dưới đây có thuộc tính là align được sử dụng để nêu ra sự link của đoạn trên trang.
  • Giá trị là những gì bạn mong muốn seting cho thuộc tính và luôn đặt trong cặp dấu nháy kép. Chẳng hạn 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. Bên cạnh đó, World Wide Website 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 đề nghị HTML 4 của họ.

<!DOCTYPE htmlvàgt; 
<htmlvàgt;
 
   <headvàgt; 
      <titlevàgt;Align Attribute  Examplevàlt;/titlevàgt; 
   </headvàgt;
	
   <bodyvàgt; 
      <p align="left">This is left alignedvàlt;/pvàgt; 
      <p align="center">This is center alignedvàlt;/pvàgt; 
      <p align="right">This is right alignedvàlt;/pvàgt; 
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thuộc tính trong HTML

Các thuộc tính chủ chốt

Bốn thuộc tính chủ chốt có thể được sử dụng trên phần lớn các phần tử HTML (dù rằng không phải toàn bộ) 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 nguyên nhân chính mà bạn có thể mong 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à bài viết của nó.
  • Nếu bạn có hai phần tử giống nhau trong một website và bạn mong muốn phân biệt chúng, bạn có thể sử dụng thuộc tính id.

Tất cả chúng ta sẽ bàn bạc về phong thái trong 1 phía dẫn khác. Giờ đây, 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.

<p id="html">This para explains what is HTML</pvàgt;
<p id="css">This para explains what is Cascading Style Sheetvàlt;/pvàgt;

Thuộc tính title

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

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

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;The title Attribute Examplevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <h3 title="Hello HTML!">Titled Heading Tag Examplevàlt;/h3vàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thuộc tính title trong HTML

Khi mang con trỏ chuột của các bạn qua “Titled Heading Tag Example” và bạn sẽ thấy tooltip “Hello HTML!” xuất hiện.

Thuộc tính class

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

Giá trị của thuộc tính cũng có thể là một danh mục các tên lớp được phân cách bằng khoảng trắng. Chẳng hạn:

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

Thuộc tính style

Thuộc tính style cho phép bạn chỉ định nguyên tắc Cascading Style Sheet (CSS) trong phần tử.

<!DOCTYPE htmlvàgt;
<htmlvàgt;

   <headvàgt;
      <titlevàgt;The style Attributevàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      <p style = "font-family:arial; color:#FF0000;">Some text...</pvàgt;
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Xem Thêm  Top 16 kết quả tìm kiếm avatar đẹp cho nữ mới nhất 2022

Thuộc tính style trong HTML

Tại thời điểm này, tất cả chúng ta không học CSS, chính vì như thế hãy tiếp tục mà không cần nhọc lòng nhiều về CSS. Ở nội dung 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 có thể được sử dụng trong khi định dạng bài viết.

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

Có ba thuộc tính quốc tế hóa, có sẵn cho đa phần (dù rằng không phải toàn bộ) các phần tử 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 (so với các ngôn từ như tiếng Do Thái hoặc tiếng Ả Rập được đọc từ phải sang trái)

<!DOCTYPE htmlvàgt;
<html dir = "rtl">

   <headvàgt;
      <titlevàgt;Display Directionsvàlt;/titlevàgt;
   </headvàgt;
	
   <bodyvàgt;
      This is how IE 5 renders right-to-left directed text.
   </bodyvàgt;
	
</htmlvàgt;

Đây là kết quả:

Thuộc tính dir trong html

Khi thuộc tính dir được sử dụng trong thẻ <htmlvàgt;, nó xác nhận cách văn bản sẽ được trình bày trong toàn thể ebook. 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 bài viết của thẻ đó.

Thuộc tính lang

Thuộc tính lang cho phép bạn nêu ra ngôn từ chính được sử dụng trong một ebook, 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 ebook XHTML mới.

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

<!DOCTYPE htmlvàgt;
<html lang="en">

   <headvàgt;
      <titlevàgt;English Language Pagevàlt;/titlevàgt;
   </headvàgt;

   <bodyvàgt;
      This page is using English Language
   </bodyvàgt;

</htmlvàgt;

Đây là kết quả:

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ế cho thuộc tính lang trong XHTML. Giá trị của thuộc tính xml:lang phải là mã đất nướ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
Tính năng

align
right, left, center
Sắp đặt các thẻ theo chiều ngang

valign
top, middle, bottom
Sắp đặt 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 hình nền cho một phần tử

id
Người dùng khái niệm
Đặt tên cho một phần tử để sử dụng với Cascading Style Sheets.

class
Người dùng khái niệm
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 khái niệm
Tiêu đề “Pop-up” của các phần tử.

Tất cả chúng ta sẽ xem các chẳng hạn liên quan đến chúng ở ở những nội dung về các thẻ HTML khác.

Viết một bình luận