Quảng cáo
Home > HTML & CSS > Học HTML > Bài 02: HTML Elements và Attributes
Bài 02: HTML Elements và Attributes
Ở bàiHTML là gì mình có nói HTML bản chất giống XML nên nó được tạo thànhtừ hai thành phần chính đó là tên thẻ[tagname] và cácthuộc tính[attribute]. Đốivới XML thì tên thẻ ta có thể tự định nghĩanhưng với HTML thì bạn phải sử dụng tên thẻcó trong danh sách HTML Elements, nếu không trình duyệt sẽ không hiểu thẻ mà bạn đang sử dụng là gì.
1. HTML Elements [thẻ HTML]
Danh sách các thẻ HTML rất là nhiều nên rất khó mà liệt kê và hướng dẫn sử dụng được, vì vậy mình chỉ liệt kê một số thẻ thôi và trong các bài tiếp theo mình sẽ tìm hiểu.
Quảng cáo
Tên thẻ:
Tên thẻ HTML phải nằm trong danh sách của riêng nó, ví dụ:
- html
- body
- head
- title
- meta
- h2
- h2
- h3
- h4
- h5
- h6
- p
- div
- table
- tr
- td
- ...
Mình không thể liệt kê hết được mà sẽ trình bày dần trong các bài tiếp theo.
Thẻ mở và thẻ đóng
Mỗi thẻ sẽ có thẻ mở [opentag] và thẻ đóng [closetag]. Ví dụ với thẻ div thì mình sẽ viết như sau:Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
Quảng cáo
Khuyết thẻ đóng [quick closetag]
Cũng có một só thẻ sẽ khuyết thẻ đóng, loại này ta gọi là quick closetag, nghĩa là nó chỉ tồn tại thẻ mở thì ta sẽ viết như sau:
Ví dụ: Các thẻ input, meta, link
Thẻ lồng trong thẻ
Các thẻ HTML sẽ được lồng với nhau để tạo thành một bổ cục vững chắc, lúc này thẻ con sẽ nằm trọn trong thẻ cha.
Ví dụ:
Quảng cáo
Vậy trong quá trình viết mã HTML bạnkhông được bỏ quên thẻ đóng nhé vì như vậy giao diện sẽ dễ bị vỡ. Trường hợp thẻ khuyết thẻ đóng thì ta sẽ dùng cú pháp quick closetag.
2. HTML Attributes [thuộc tính củathẻ html]
Mỗi thẻ HTML ta có thể ví như một đối tượng, lúc này đối tượng HTML sẽ có các thuộc tính mô tả cho nó. Ví dụ thẻ inputthì nó có các thuộc tính như sau:
XEM DEMO
Chạy lên bạn sẽ thấy xuất hiện một ô nhập dữ liệu.
Quảng cáo
Dấu nháy đơn và nháy kép
Vấn đề này những bạn mới học dễ gặp lỗi này nhất. Mỗi thuộc tính trong HTML sẽ có cấu tạo name="value" hoặc name='value'. Nếu sử dụng dấu nháy đơn ' thì giá trị không được xuất hiện dấu nháy đơn và ngược lại, nếu sử dụng dấu nháy kép "thì giá trị không được xuất hiện dấu nháy kép.
Ví dụ: XEM DEMO
Thuộc tính mở rộng
Mỗi thẻ HTML chỉ chấp nhận một số thuộc tính nhất định của riêng nó, nhưng nếu bạn muốn định nghĩa thêm một thuộc tính khác thì hoàn toàn được. Tuy nhiên trình duyệt sẽ không hiểucác thuộc tính đó nên sẽ không có tác dụng gì, vì vậythông thường ta kết hợp thuộc tính tự định nghĩavới Javascript đẻ xử lý cho từng bài toán [ sẽ học sau].
Ví dụ: Trong thẻ input không có thuộc tính classname nhưng ta cũng có thể thêm vào được, tuy nhiên lúc chạy lên sẽ không có tác dụng gì.
Quảng cáo
XEM DEMO
3. Lời kết
Như vậy trong bài này mình đã giới thiệu với bạn cách đặt tên thẻ HTML và các thuộc tính riêng của nó. Bài này vẫn chưa đi sâu vào các thẻ thông dụng nên vẫn còn hơi chán chút xíu nhưng bạn phải hiểu các quy tắc trên thì ở các bài tiếp theo bạn mới dễ học.
Bài tiếp theo chúng ta sẽ tìm hiểu các thẻ HTML thông dụng thường hay được sử dụng khi chuyển từ file PSD sang HTML.
Quảng cáo
Bài trước Bài tiếp
Bài viết cùng chuyên mục:
- Thẻ title trong HTML
- Thẻ style trong HTML
- Thẻ base trong HTML
- Thẻ link trong HTML
- Thẻ meta trong HTML
- Thẻ script trong HTML
- Thẻ noscript trong HTML
- Thẻ select trong HTML
- Thẻ input trong HTML
- Thẻ textarea trong HTML
- Thẻ button trong HTML
- Thẻ option trong HTML
- Thẻ optgroup trong HTML
- Thẻ fieldset trong HTML
- Thẻ label trong HTML
- Thẻ form trong HTML
- Thẻ ul trong HTML
- Thẻ ol trong HTML
- Thẻ li trong HTML
- Thẻ dl trong HTML
Quảng cáo