- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
Tìm hiểu cấu trúc một phần tử HTML và sử dụng các thuộc tính trong phần tử
Bài viết này sẽ đi sâu hơn về cấu trúc của HTML, chúng ta sẽ tìm hiểu cấu trúc phần tử và các thuộc tính trong phần tử của một đoạn HTML.
Cấu trúc của một đoạn HTML được tạo từ các phần tử HTML. Một phần tử HTML nói chung được viết bởi các thẻ, bắt đầu bởi thẻ mở và kết thúc bởi thẻ đóng và ở giữa là nội dung phần tử.
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 body chứa trong nó thẻ p, đến lượt thẻ p chứa nội dung "Đây là một đoạn văn" và một thẻ br
Lưu ý: Có một số thẻ HTML như <br>, <img> ... không có phần thẻ đóng. Các thẻ kiểu như br thật sự rất nhỏ, bạn không có thẻ đóng cho nó, không đưa nội dung vào trong nó, nó đơn giản chỉ là phần tử phân chia.
Thuộc tính HTML
Các thuộc tính nhằm thiết lập thêm thông tin hiển thị cho các thẻ, có thể thay đổi cách hiển thị về nội dung. Hầu hết thuộc tính đưa ra bằng tên thuộc tính và giá trị đi cùng với nó.
Trong ví dụ sau, đưa vào thẻ p thuộc tính align với giá trị "center" nhằm định dạng đoạn văn căn giữa trang:
Các thuộc tính của phần tử HTML luôn đưa ra tại vị trí thẻ mở và theo cặp tên thuộc tính = "giá trị thuộc tính".
Thuộc tính kích thước
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ị px như trên, bạn có thể xác định theo tỷ lệ phần trăm. Ví dụ chiều ngang rộng 50% của block.
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ử nó có thể nhận các giá trị:
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
Chỉ ra một phím tắt kích hoạt phần tử.
class
Chỉ ra một hoặc nhiều tên lớp áp dụng cho phần tử (class liên quan CSS)
contenteditable
Cho biết nội dung trong phần tử có thể soạn thảo biên tập lại hay không. Nếu true thì sẽ xuất hiện box soạn thảo cho phần tử
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
draggable
Chỉ ra phần tử có thể kéo thả (true,false, auto)
hidden
Khi có thuộc tính này phần tử sẽ ẩn
id
Thiết lập một định danh duy nhất cho phần tử HTML. Định danh này để tìm kiếm trong DOM
spellcheck
Cho trình duyệt biết có kiểm tra ngữ pháp phần tử này hay không
style
Định nghĩa CSS cho phần tử.
title
Thông tin thêm về phần tử
Chúc các bạn thành công.
Bài viết này sẽ đi sâu hơn về cấu trúc của HTML, chúng ta sẽ tìm hiểu cấu trúc phần tử và các thuộc tính trong phần tử của một đoạn HTML.
Cấu trúc của một đoạn HTML được tạo từ các phần tử HTML. Một phần tử HTML nói chung được viết bởi các thẻ, bắt đầu bởi thẻ mở và kết thúc bởi thẻ đóng và ở giữa là nội dung phần tử.
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 body chứa trong nó thẻ p, đến lượt thẻ p chứa nội dung "Đây là một đoạn văn" và một thẻ br
Mã:
<html>
<head>
<title>Phần tử HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>Đây là một đoạn văn <br /></p>
</body>
</html>Lưu ý: Có một số thẻ HTML như <br>, <img> ... không có phần thẻ đóng. Các thẻ kiểu như br thật sự rất nhỏ, bạn không có thẻ đóng cho nó, không đưa nội dung vào trong nó, nó đơn giản chỉ là phần tử phân chia.
Thuộc tính HTML
Các thuộc tính nhằm thiết lập thêm thông tin hiển thị cho các thẻ, có thể thay đổi cách hiển thị về nội dung. Hầu hết thuộc tính đưa ra bằng tên thuộc tính và giá trị đi cùng với nó.
Trong ví dụ sau, đưa vào thẻ p thuộc tính align với giá trị "center" nhằm định dạng đoạn văn căn giữa trang:
Mã:
<html>
<head>
<title>Thuộc tính</title>
<meta charset="UTF-8">
</head>
<body>
<p align="center">
Đoạn văn được căn giữa trang.
</p>
</body>
</html>
Thuộc tính kích thước
Ví dụ sau, tạo đường ngang với kích thước ấn định có độ rộng là 50 pixel
Mã:
<hr width="50px" />Ngoài đơn vị px như trên, bạn có thể xác định theo tỷ lệ phần trăm. Ví dụ chiều ngang rộng 50% của block.
Mã:
<hr width="50%" />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ử 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
Mã:
<html>
<head>
<title>Attributes</title>
</head>
<body>
<p align="center">This is a text <br />
<hr width="10%" align="right" /> This is also a text.
</p>
</body>
</html>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
Chỉ ra một phím tắt kích hoạt phần tử.
Mã:
<a href="https://vnxf.vn" accesskey="x">HTML</a>class
Chỉ ra một hoặc nhiều tên lớp áp dụng cho phần tử (class liên quan CSS)
Mã:
<a href="https://vnxf.vn" class="link1 link2">HTML</a>contenteditable
Cho biết nội dung trong phần tử có thể soạn thảo biên tập lại hay không. Nếu true thì sẽ xuất hiện box soạn thảo cho phần tử
Mã:
<p contenteditable="true">Nội dung này soạn thảo được</p>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
Mã:
<p data-dulieu="Đây là dữ liệu riêng">Ví dụ</p>draggable
Chỉ ra phần tử có thể kéo thả (true,false, auto)
Mã:
<p draggable="true">Ví dụ</p>hidden
Khi có thuộc tính này phần tử sẽ ẩn
Mã:
<p hidden>Ví dụ</p>id
Thiết lập một định danh duy nhất cho phần tử HTML. Định danh này để tìm kiếm trong DOM
Mã:
<p id="idphantup">Ví dụ</p>spellcheck
Cho trình duyệt biết có kiểm tra ngữ pháp phần tử này hay không
Mã:
<p spellcheck="true">Có kiểm tra ngữ pháp</p>style
Định nghĩa CSS cho phần tử.
Mã:
<p style="font-size: 18px">Inline style sheet</p>title
Thông tin thêm về phần tử
Mã:
<p title="Thông tin thêm">Đây là đoạn văn</p>Chúc các bạn thành công.
Nguồn: Internet
Bài viết liên quan
Bài viết mới
