Tóm Tắt
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ẻ
,
,
,
,
,
,
và
. 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 đề đó.
Bạn đang đọc: Các thẻ cơ bản, phần tử và thuộc tính trong HTML | Comdy
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ẻ đ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ẻ 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ẻ canh giữa
Bạn có thể sử dụng thẻ
Centring Content Example
This text is not in the center .
This text is in the center .
Đây là hiệu quả :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ẻ 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.
Đây là hiệu quả :Ký tự khoảng trắng
Preserve Formatting Example function testFunction( strText ){ alert (strText) }
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 :
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. |
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ử ,
và
. 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ụ: là thẻ bắt đầu của một đoạn và
là thẻ đóng của cùng một đoạn nhưng Đây là đoạn là phầ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ả :
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ên và giá 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, center và right.
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 :
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 :Khi đư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ả :Tạ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 :
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 :
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.
Xem thêm: HTML Là Gì, Giới Thiệu Về 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 .
Source: https://final-blade.com
Category: Kiến thức Internet