Phần tử HTML và các thuộc tính

Posted on by adminChuyên mục:Kiến thức Internet
Tìm hiếu cấu trúc một thành phần HTML và sử dụng những thuộc tính trong thành phần HTML, những thuộc tính toàn cục trên thành phần HTML như style, class, id …

Các phần tử HTML

Một văn bản HTML được tạo ra từ các phần tử HTML.
Một phần tử HTML nói chung nó được viết bởi các thẻ,
bắt đầu bởi mở thẻ
kết thúc bởi đóng thẻ

và
ở giữa là nội dung phần tử, ví dụ:


Xin chào các bạn (nội dung text và html)

Các phần tử HTML có thể lồng vào nhau,
nghĩa là phần tử này chứa phần tử khác.
Như ví dụ dưới đây
chứa trong nó phần tử ,
đến lượt thẻ
chứa nội dung "Đây là một đoạn văn"
và một thẻ 


    
        Phần tử HTML
        
    
    
        
Đây là một đoạn văn

Có một số thẻ HTML như

…
không có phần đóng thẻ, mà chỉ có phần mở thẻ và có thể thiết
lập thuộc tính nếu có.

Thuộc tính HTML

Các thuộc tính nhằm mục đích thiết lập thêm thông tin cho những thẻ ( thành phần HTML ). Hầu hết thuộc tính thành phần HTML thiết lập bằng tên thuộc tính và giá trị đi cùng với nó .

Các thuộc tính của phần tử HTML viết tại tại vị trí mở thẻ, giữa ký hiệu
và
ký hiệu >.
Thuộc tính viết theo cặp : tên-thuộc-tính=”giá trị”

Ví dụ: Thuộc tính align gán cho nó giá trị bằng center thì viết là align="center",
đặt thuộc tính này cho thẻ, thì nội dung text sẽ căn giữa


    
        Thuộc tính
        
    
    
        Đoạn văn được căn giữa trang .

thuoc tinh

Thuộc tính kích thước width

Thuộc tính này thiết lập độ rộng phần tử, nó có tác động trên các phần tử như:

, ,, .
Ví dụ sau, tạo đường ngang với kích thước ấn định có độ rộng là 50 pixel

Ngoài đơn vị chức năng px như trên, bạn hoàn toàn có thể xác lập theo tỷ suất Phần Trăm. Ví dụ đường ngang rộng 50 % của khối .

Thuộc tính canh lề align

align là thuộc tính xác định cách căn lề của phần tử
(

,

,

,

,


theo chiều ngang nó có thể nhận các giá trị:

  • align = "left" canh trái
  • align = "right" canh phải
  • align = "center" canh giữa
  • align = "justify" canh đều

   
      Attributes
   
   
      
This is a text 

         
 This is also a text.

Thuộc tính toàn cục

Các phần tử HTML khác nhau có thể có các thuộc tính khác nhau
(thuộc tính này dùng được cho phần tử này nhưng chưa chắc đã dùng được cho phần tử khác).
Do vậy, mỗi phần tử cần xem xét các thuộc tính riêng của nó.
Tuy nhiên có một số thuộc tính mà mọi phần tử HTML đều có thể có gọi là các thuộc tính toàn cục.
Một số hay dùng đó là:

  • accesskey : thiết lập phím tắt kích hoạt
  • class: thiết lập lớp (CSS) cho phần tử
  • contenteditable: thiết lập lớp (CSS) cho phần tử
  • data-*: thiết lập dữ liệu riêng cho phần tử, quy định thống nhất đặt tên với tiền tố data-
  • draggable: cho phép kéo/thả
  • hidden: ẩn phần tử
  • id: gán id (tên duy nhất) cho phần tử, để chọn phần tử, để thiết lập CSS
  • spellcheck: thiết lập kiểm tra ngữ pháp
  • style: Định nghĩa CSS trực tiếp trong phần tử
  • title: tiêu đề phần tử (hiện thị khi chuột dừng trên phần tử)

accesskey

Chỉ ra một phím tắt kích hoạt phần tử.

HTML

class

Chỉ ra một hoặc nhiều tên lớp vận dụng cho thành phần ( lớp tương quan CSS )

HTML

contenteditable

Cho biết nội dung trong thành phần hoàn toàn có thể soạn thảo chỉnh sửa và biên tập lại hay không. Nếu true thì sẽ Open box soạn thảo cho thành phần

Nội dung này soạn thảo được

data-*

Thuộc tính thiết lập dữ liệu riêng cho phần tử, ký hiệu * là một tên tự đặt. data-* là chuẩn đặt tên thuộc tính dữ liệu dùng cho HTML5

Ví dụ

draggable

Chỉ ra thành phần hoàn toàn có thể kéo thả ( true, false, auto )

Ví dụ

hidden

Khi có thuộc tính này thành phần sẽ ẩn

Ví dụ

id

Thiết lập một định danh duy nhất cho thành phần HTML. Định danh này để tìm kiếm trong DOM

Ví dụ

spellcheck

Cho trình duyệt biết có kiểm tra ngữ pháp thành phần này hay không

Có kiểm tra ngữ pháp

style

Định nghĩa CSS cho thành phần .

Inline style sheet

title

tin tức thêm về phần tử

Đây là đoạn văn

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới

admin