Cú Pháp
Thuộc tính được đặt trong thẻ mở HTML và bao gồm tên thuộc tính và giá trị thuộc tính theo cú pháp attribute_name="attribute_value".
Nội dung chính
- 1. Element html là gì?
- Tên thẻ:
- Thẻ mở và thẻ đóng
- Khuyết thẻ đóng [quick closetag]
- Thẻ lồng trong thẻ
- Bài7: Thuộc tính [Attributes]
- Bài 2: Các khái niệm thường gặp trong HTML
- I. HTML document
- II. HTML tag
- III. HTML attribute
- IV. HTML element
- V. Kết luận
- Thuộc tính là gì ?
- Thuộc tính id trong HTML
- Thuộc tính title trong HTML
- Thuộc tính Class trong HTML
- Thuộc tính Style trong HTML
- Một số thuộc tính khác sử dụng với nhiều thẻ HTML
- Thuộc tính cốt lõi – Core Attributes
- 1. Thuộc tính Id
- 2. Thuộc tính tiêu đề Title
- 3. Thuộc tính class
- 4. Thuộc tính Style
- Cơ bản về DOM attribute và property
- Video liên quan
1. Element html là gì?
Element html chính là danh sách những thẻ html mà trình duyệt hỗ trợ, và nó cũng nằm trong danh sách các thẻ html mà WWW đã quy định.
Danh sách các thẻ HTML rất là nhiều nên rất khó để liệt kê và hướng dẫn sử dụng. 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ẽ giới thiệu tiếp.
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:
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ụ:
Vậy, trong quá trình viết mã HTML bạn khô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.
Bài7: Thuộc tính [Attributes]
Bạn có thể thêm thuộc tính vào một số phần tử.
Thuộc tính là gì?
Nếu bạn còn nhớ, những phần tử tạo nên cấu trúc trang HTML và khai báo với trình duyệt bạn muốn websitesẽ được trình bày như thế nào [ví dụ
là thẻ khai báo cho trình duyệt khi muốn xuống dòng trong một đoạn chữ]. Ở một vài phần tử bạn có
thể thêm thông tin vào. Loại thông tin được thêm vào này được gọi là thuộc tính [attribute]
Ví dụ1:
Tôi đang học HTML
Thuộc tính luôn được đặt trong thẻ mở và theo sau là dấu = cùng chi tiết nằm giữa cặp ngoặc kép, dấu chấm phẩy sẽ dùng để tách các nội dung thuộc tính, chúng ta sẽ nói về điều này sau.
Tìm hiểu rõ hơn về thuộc tính
Có rất nhiều thuộc tính. Cái đầu tiên bạn sẽ học sẽ là style [kiểu dáng, định dạng], bằng cách sử dụng style bạn có thể tạo kiểu cho website của mình. Ví dụ như background colour: [màu nền ]
Ví dụ2:
Đây là tiêu đề trangTiêu đề chính
Tiêu đề phụ
Nội dung bài viết
Kết quả:
Đoạn
code trên sẽ thêm màu đỏ vào nền trang Web của bạn, hiển thị trên trình duyệt – bạn hãy thử và sẽ thấy. Chúng tôi sẽ giải thích chi tiết hệ thống màu hoạt động như thế nào chí trong chốc lát nữa.
Chú ý rằng một số thẻ sử dụng tiếng Anh của Hoa Kỳ, do đó color sẽ được dùng thay vì colour. Điều này bạn nên cẩn thận, vì nếu viết sai trình duyệt sẽ không hiểu code bạn viết. Một lưu ý khác cũng rất quan trọng, bạn phải luôn dùng dấu ngoặc kép để đóng lại thuộc tính.
Làm thể nào tạo màu đỏ cho nền trang web?
Như ví dụ bạn vừa xem, để tạo màu đỏ chúng tôi dùng đoạn code “#ff0000”. Đây là mã code của màu đỏ được tính theo hệ thập lục phân – hexadecimal numbers [HEX]. Mỗi màu sẽ có một mã riêng theo hệ thập lục phân, đây là một số mã màu thường được dùng:
White: #ffffff – Trắng
Black: #000000 [zeros] – Đen
Red: #ff0000 – Đỏ
Blue: #0000ff – Xanh da trời
Green: #00ff00 – Xanh lá cây
Yellow: #ffff00 – Vàng
Một màu thập lục phân [viết tắt là HEX] bao gồm dấu # và sáu chữ hoặc số theo sau. Có hơn 1000 mã màu HEX và rất khó hình dung mã số nào sẽ là màu gì. Để dễ dàng hơn,bạn có thể tham khảo bảng 216 màu thường được sử dụng của bảng Web Safe Color.
Bạn cũng có thể dùng tên màu chuẩntheo tiếng Anh như[white, black, red, blue, green and yellow].
Ví dụ3:
Đây là tiêu đề trangTiêu đề chính màu trắng
Nội dung bài viết màu vàng
Kết quả:
Bạn đã có khái niệm vừa đủ về màu. Bây giờ chúng ta sẽ quay lại với thuộc tính.
Những phần tử nào có thể sử dụng thuộc tính?
Có rất nhiều thuộc tính khác nhau có thể áp dụng lên đa số các phần tử.
Bạn sẽ thường xuyên sử dụng thuộc tính đối với một số thẻ như và chẳng khi nào
áp dụng thuộc tính lên thẻ như
, bởi vì thẻ ngắt dòng hầu như không cần có thêm bất cứ tham số nào để điều chỉnh.
Cũng như các phần tử, có rất nhiều thuộc tính khác nhau. Một số thuộc tính được tạo ra để đáp ứng riêng cho chính các phần tử đó, một số khác có thể sử dụng đại trà đối với nhiều phần tử khác nhau. Ngược lại một số phần tử chỉ có thể chứa một loại thuộc tính và số khác phần tử có thể chứa nhiều thuộc tính khác nhau.
Bạn sẽ có một chút khó hiểu ở đây, nhưng một khi đã làm quen với những thuộc tính khác nhau, bạn sẽ thấy nó thật sự rất logic và bạn cũng sẽ nhận ra sử dụng chúng rất dễ dàng cùng vớicác khả năng hữu dụng của chúng như thế nào.
Ví dụ dưới đây sẽ cho bạn thấy những thuộc tính quan trọng nhất
Chính xác là có bao nhiêu thành phần trong một phần tử?
Nói tổng quát, một phần tử bao gồm:một thẻ mở có chứa hoặc không chứa một hay nhiều thuộc tính, một số nội dung và thẻ đóng. Hãy xem hình minh họa dưới.
Phân tích một phần tử
Phân tích chi tiết 2 loại phần tử 1- Phần tử thông thường luôn có 1 cặp thẻ mở và đóng 2 – Phần tử đơn chỉ có 1 thẻ duy nhất.
Xem bài kế tiếp
Facebook Comments
Bài 2: Các khái niệm thường gặp trong HTML
Ở bài trước, chúng ta đã tìm hiểu được HTML là gì và nó có vai trò như thế nào trong lập trình web. Ở bài này, chúng ta sẽ cùng nhau đi tìm hiểu một số khái niệm hay gặp trong HTML, để trong các bài viết sau này của mình bạn sẽ dễ hiểu hơn.
Mục lục
- I. HTML document
- II. HTML tag
- III. HTML attribute
- IV. HTML element
- V. Kết luận
I. HTML document
HTML document tức là tài liệu HTML [đôi khi mình gọi là tệp tin HTML] là một tập tin có phần mở rộng là .html, hoặc .htm với nội dung được xây dựng từ các thành phần của HTML.
Mỗi một tài liệu HTML hoàn chỉnh thường đại diện cho một trang web. Bạn có thể xem ví dụ về một tài liệu HTML hoàn chỉnh ở ví dụ dưới đây:
Page Title
Hello, world!
Đây là một tài liệu HTML hoàn chỉnh
Một tài liệu HTML cần tuân theo một cấu trúc nhất định, cụ thể như thế nào thì mình sẽ gửi tới bạn ở bài viết tiếp theo.
II. HTML tag
Nhìn lại ví dụ về tài liệu HTML ở trên, bạn sẽ thấy có một cấu trúc chung được sử dụng khá nhiều đó là:
Có cái gì đó ở giữa
Ví dụ như Page Title
Hello, world!
chẳng hạn, nó đều tuân theo cấu trúc mà mình chỉ ra ở trên. Thì mỗi một cái hoặc như vậy thì được gọi là một thẻ HTML [hay HTML tag].Thẻ trong HTML chia ra làm 2 loại thẻ:
- Thẻ mở: là thẻ bắt đầu cho việc đánh dấu một phần tử nào đó, là thẻ mà không có ký tự /.
- Thẻ đóng: là thẻ đánh dấu kết thúc cho một phần tử nào đó, là thẻ xuất hiện ký tự /.
Có một số thẻ HTML không có thẻ đóng, nó chỉ sử dụng để đánh dấu cho một phần tử nhất định, ví dụ thẻ
để đánh dấu một phần tử
xuống dòng, thẻ dùng để đánh dấu một đường kẻ ngang màn hình.
Mỗi một thẻ HTML thì có nhiệm vụ đánh dấu cho một loại phần tử trên trang web. Ví dụ:
- Thẻ đánh dấu cho một phần tử ảnh, sử dụng thẻ nếu bạn muốn chèn hình ảnh lên trang web.
- Thẻ
đánh dấu cho một đoạn văn bản, sử dụng thẻ
nếu bạn muốn chèn một đoạn văn bản lên trang web.
- Thẻ đánh dấu cho một đường link, sử dụng thẻ nếu bạn muốn chèn link lên trang web.
Thẻ trong HTML khá đa dạng, có tất cả tới mấy trăm thẻ lận, với mỗi thẻ lại đánh dấu cho một loại phần tử khác nhau. Tuy nhiên chỉ có đâu đó khoảng 20 chục thẻ là thường xuyên sử dụng, số còn lại chỉ để tham khảo thêm.
Đối với các thẻ HTML phổ biến, mình cũng sẽ có bài viết trình bày cụ thể với bạn sau.
III. HTML attribute
HTML attribute [thuộc tính HTML] là những tùy chỉnh đối với các thẻ trong HTML.
Ví dụ mình có thẻ được sử dụng khi bạn muốn định dạng lại font chữ trên trang web, và nó có một thuộc tính là color được sử dụng để định dạng màu sắc cho văn bản của bạn.
Dòng chữ này sẽ có màu đỏ
Nhưng cái tương tự như color nằm trong thẻ font trên thì được gọi là thuộc tính HTML [HTML attribute].
Phát biểu một cách tổng quát, thì thuộc tính HTML sẽ luôn nằm trong các thẻ HTML mở, và có dạng như:
....
Lưu ý: Thẻ HTML và thuộc tính HTML có mối quan hệ mật thiết với nhau. Một số thuộc tính có thể sử dụng cho rất nhiều thẻ, nhưng cũng có những thuộc tính chỉ dành cho một số thẻ nhất định. Có những thuộc tính là bắt buộc phải có đối với một số thẻ, nhưng cũng có thể là tùy chọn [có hoặc không] đối với một số thẻ.
Ví dụ
- Thuộc tính title, thuộc tính này có thể sử dụng trong tất cả các thẻ HTML, được sử dụng khi bạn muốn giải thích thêm về phần một phần tử HTML nào đó.
- Thuộc tính href là thuộc tính để chưa đường link cho các thẻ HTML về liên kết, thuộc tính này chỉ áp dụng được với các thẻ HTML về liên kết như thẻ .
- Thuộc tính src là thuộc tính chứa nguồn của tài nguyên [như hình ảnh, video, âm thanh] mà bạn muốn chèn lên trang web. Chỉ có các thẻ như , , mới sử dụng được thuộc tính này và đồng thời cũng bắt buộc phải có thuộc tính này.
IV. HTML element
HTML element [phần tử HTML] là bao gồm tất cả những gì tử thẻ HTML mở cho tới thẻ HTML đóng. Ví dụ dưới đây là một phần tử HTML:
Đây là một phần tử HTML, bao gồm cả thẻ mở và thẻ đóng nhé
Đối với các thẻ HTML không có thẻ đóng, như thẻ
, thì chúng được coi là những phần tử rỗng.
V. Kết luận
Tóm lại thì, một tài liệu HTML được tạo nên từ nhiều phần tử HTML, mỗi phần tử HTML thì bao gồm thẻ đóng, thẻ mở, và nội dung nằm giữa chúng. Trong các thẻ mở HTML, thì có thể có các thuộc tính.
Mối quan hệ giữa các khái niệm trên bạn có thể hình dung như vậy.
HTML chỉ có một số khái niệm cơ bản như vậy thôi, cũng dễ hiểu đúng không nào. Tuy nhiên bạn vẫn cần phải nắm thật chắc những khái niệm trên nhé, bởi trong những bài viết tiếp theo mình nhắc tới rất rất nhiều.
Chúc các bạn học tập hiệu quả.
- Bài 1: Ngôn ngữ HTML là gì?
- Bài 2: Các khái niệm thường gặp trong HTML
- Bài 3: Cấu trúc trang HTML
- Bài 4: Các thẻ định dạng văn thường gặp trong HTML
- Bài 5: Chèn liên kết vào trang web với thẻ a trong HTML
- Bài 6: Chèn hình ảnh vào trang web với thẻ img trong HTML
- Bài 7: Chèn một trang web khác vào trang web của mình với thẻ iframe trong HTML
- Bài 8: Tạo bảng với HTML
- Bài 9: Tạo một danh sách với HTML
- Bài 10: Các thẻ input, thẻ tạo form nhập liệu trong HTML
- Bài 11: Kết thúc serie học HTML cơ bản
//phambinh.net
Là một lập trình viên; Thích tìm hiểu và chia sẻ kiến thức công nghệ; Thích chiêm nghiệm cuộc sống
Thuộc tính là gì ?
Thuộc tính trong HTML được sử dụng để xác định các đặc điểm của phần tử. Nó đượ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 –tên [name] vàgiá trị [ value]
- CácNamelà tài sản bạn muốn thiết lập.Ví dụ:Phần tửđoạn văntrong ví dụ này mang một thuộc tính có tên làalign. Bạn có thể sử dụngthuộc tính nàyđể chỉ ra sự căn chỉnh của đoạn văn trên trang.
- CácValuelà những gì bạn muốn giá trị thiết lập và luôn đặt trong trích dẫn.Ví dụ dưới đây cho thấy ba giá trị có thể có của thuộc tính align:left, centervà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] đề xuất đặt hết chữ thường.
Ví dụ về thuộc tính trong HTML
Align Attribute ExampleTrái
Giữa
Phải
Kết quả hiển thị sẽ như sau:
Trái Giữa PhảiCó 4 thuộc tính cốt lõi được sử dụng trong HTML. Bao gồm
- id
- title
- class
- style
Thuộc tính id trong HTML
Thuộc tính id trong HTML được sử dụng để nhận diện bất kỳ yếu tố nào trong một trang HTML. Có 2 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ừ mạng thuộc tính id như nhận dạng duy nhất, thì có thể chỉ xác định phần tử đó và nội dung của nó
- Nếu bạn có 2 phần tử cùng tên trong 1 trang web. Bạn có thể sử dụng thuộc tính id để phân biệt giữa các phần tử cùng tên.
Có thể bạn cần → Hướng dẫn chi tiết cách Hard Reset Samsung Galaxy S9
Ví dụ:
Giải thích HTMl là gì ?
Giải thích rằng CSS là gì ?
Thuộc tính title trong HTML
Thẻ này được xác định đơn giản đó chính là tiêu đề của một trang web hoặc 1 đoạn văn. Ví dụ:
Trợ Giúp Nhanh | Kiến thức đời sống, sức khỏe và công nghệThuộc tính Class trong HTML
Class trong HTML được sử dụng để kết hợp một phần tử với một Style Sheet và xác định lớp của nguyên tố.
class="className1 className2 className3"Thuộc tính Style trong HTML
Thuộc tính này cho phép b ạn chỉ định các quy tắc Cascading Style Sheet [ CSS] trong phần tử.
Học HTML tại TGNTôi học HTML
Kết quả.
Tôi học HTML
Một số thuộc tính khác sử dụng với nhiều thẻ HTML
align | right, left, center | Căn chỉnh theo chiều ngang các thẻ |
valign | top, middle, bottom | Căn chỉnh theo chiều dọc các thẻ trong phần tử HTML. |
bgcolor | numeric, hexidecimal, RGB values | Đặt màu nền phía sau phần tử |
background | URL | Đặt hình nền phía sau phần tử |
id | User Defined | Đặt tên cho một phần tử để sử dụng với CSS |
class | User Defined | Phân loại một phần tử để sử dụng với CSS |
width | Numeric Value | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng |
height | Numeric Value | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng |
title | User Defined | Tiêu đề nổi bật của các phần tử |
Tags
Công nghệ thông tin Học HTML HTML Phần tử Thẻ HTML Thuộc tính Tin học cơ bảnThuộc tính cốt lõi – Core Attributes
Bốn thuộc tính cốt lõi có thể được sử dụng trên phần lớn các phần tử HTML [mặc dù không phải tất cả] là:
- Id
- Title
- Class
- Style
1. Thuộc tính Id
Các 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ử mang thuộc tính id như một số nhận dạng duy nhất. Thì có thể chỉ xác định phần tử đó và nội dung của nó.
Nếu bạn có hai phần tử cùng tên trong một trang Web [hoặc trang định kiểu]. Bạn có thể sử dụng thuộc tính id để phân biệt giữa các phần tử có cùng tên.
Xem thêm: Wordpress Là Gì? Hướng Dẫn Tự Học Wordpress Dễ Hiểu Nhất
Chúng ta sẽ thảo luận về style sheet trong phần hướng dẫn riêng.Bây giờ, chúng ta hãy sử dụng thuộc tính id để phân biệt giữa hai phần tử đoạn văn như hình dưới đây.
Thí dụ
Đoạn này giải thích HTML là gì
Đoạn này giải thích tiêu đề là gì
2. Thuộc tính tiêu đề Title
Các thuộc tính tiêu đề title cho một tiêu đề gợi ý cho phần tử. Cú pháp của chúng cho thuộc tính titletương tự như được giải thích chothuộc tínhid.
Hành vi của thuộc tính này sẽ phụ thuộc vào phần tử mang nó. Mặc dù nó thường được hiển thị dưới dạng chú giải công cụ khi con trỏ đi qua phần tử hoặc khi phần tử đang tải.
Thí dụ
See the Pen HTML – Attribute 2 by Do Phuong Nguyen [@xiluom78] on CodePen.
Bây giờ hãy thử đưa con trỏ của bạn qua “Ví dụ về thẻ tiêu đề”. Và bạn sẽ thấy rằng bất kỳ tiêu đề nào bạn đã sử dụng trong mã của mình đều xuất hiện dưới dạng chú giải công cụ của con trỏ.
3. Thuộc tính class
Các 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à xác định lớp của nguyên tố. Bạn sẽ tìm hiểu thêm về cách 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ể tránh nó.
Giá trị của thuộc tính cũng có thể là một danh sách tên lớp được phân tách bằng dấu cách.
Ví dụ:
class = "className1 className2 className3"4. Thuộc tính Style
Thuộc tính style cho phép bạn chỉ định các quy tắc Cascading Style Sheet [CSS] trong phần tử HTML.
See the Pen HTML – Attribute 3 by Do Phuong Nguyen [@xiluom78] on CodePen.
Ở đây, bạn cần hiểu các thuộc tính HTML là gì và cách chúng có thể được sử dụng trong khi định dạng nội dung. Và tham khảo chuỗi bài viết tự học CSS của chúng tôi TẠI ĐÂY.
Xem thêm: Phần Tử HTML Element
Cơ bản về DOM attribute và property
This post hasn't been updated for 5 years
- Trong bài cơ bản này mình sẽ trình bày lại các khái niệm cơ bản về HTML và DOM. Bài viết này chủ yếu giải thích về các khái niệm xung quanh HTML và DOM.