Hướng dẫn attribute html là gì

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:

Nội dung bên trong

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 đề trang

Tiê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 đề trang

Tiê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 dungthẻ đóng. Hãy xem hình minh họa dưới.

Hướng dẫn attribute html là gì

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ẻ 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ụ

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

https://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, centerright.

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 Example

Trái

Giữa

Phải

Kết quả hiển thị sẽ như sau:

Trái Giữa Phải

Có 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 TGN

Tô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

Thuộc tínhTùy chọnChức năng
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ản

Thuộ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.