1.Thuộc tính id trong HTML

Thuộc tính id được sử dụng để chỉ định một id duy nhất cho một phần tử HTML

Bạn không thể có nhiều hơn một phần tử có cùng một id trong tài liệu HTML

2.Sử dụng thuộc tính id

2.1 Sử dụng id trong CSS

Cú pháp cho id khi CSS là: viết một ký tự thăng(#), theo sau là id. Sau đó, xác định các thuộc tính CSS trrong dấu ngoặc nhọn {}

Ví dụ:

Ở đây, tôi đã CSS phần tử có id là “test”

2.2 Sử dụng thuộc tính id trong JavaScript

Thuộc tính id cũng có thể được sử dụng để thực hiện một số nhiệm vụ có yếu tố cụ thể

Ví dụ:

Ở đây, tôi tạo một nút để thay đổi nội dung bên trong của văn bản có thuộc tính id khi bấm

2.3 Đánh dấu trang HTML có id và liên kết

Đánh dấu trang HTML được sử dụng cho phép người đọc chuyển đến các phần cụ thể của trang web

Dấu trang có thể hữu ích nếu trang của bạn rất dài

Để sử dụng dấu trang, trước tiên banh cần phải tạo dấu trang, sau đó thêm liên kết vào đó

VÍ dụ:

Ở đây, tôi dùng thuộc tính id để tạo đấu sau đó tôi tạo một liên kết đến bài đã đánh dấu (Chapter4 và Chapter 10)

3.Thuộc tính lớp (class) trong HTML

Trong HTML, thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML

Tên lớp có thể dùng trong CSS hoặc JavsScript để thực hiện một số tác vụ nhất định cho phần tử có tên trong lớp đó

Thuộc tính class có thể được sử dụng trên bất kì phần tử HTML nào

Ví dụ 1:

Ở đây, tôi dùng thuộc tính CSS để định dạng những phần tử có class=”city”

Lưu ý: Tên lớp phân biệt chữ hoa và chữ thường

4.Cách sử dụng thuộc tính lớp (class)

4.1 Sử dụng thuộc tính lớp trong CSS

Để tạo kiểu cho một lớp ta viết dấu chấm (.) sau đó là tên lớp và xác định thuộc tính CSS trong dấu ngoặc nhọn {}

Xét ví dụ 1 ta có:

.city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; }

Ở đây, những phần tử có lớp là “city” sẽ được CSS

4.2 Sử dụng nhiều lớp học khác nhau

Các phần tử HTML có thể thuộc về nhiều lớp khác nhau

Ví dụ:

Ở đây, những thẻ thuộc 2 lớp “city” và “main” đều nhận được thuộc tính CSS của chúng

4.3 Sử dụng lớp cho nhiều phần tử khác nhau

Các phần tử HTML khác nhau có thể có cùng chung lớp với nhau

Ví dụ:

Ở đây, các phần tử khác nhau nhưng có chung lớp là “city” thì đều được CSS chung một kiểu

4.4 Sử dụng thuộc tính lớp trong JavaScript

Thuộc tính lớp có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho các phần tử cụ thể

Ví dụ:

Ở đây, tôi đã tạo một nút để ẩn đi các phần tử có lớp là  “city”