- Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
- Đăng Nhập
Thuộc tính HTML id được dùng để xác định một id duy nhất cho một thành phần HTML (giá trị đó phải là duy nhất trong tài liệu HTML).
Thuộc tính id được sử dụng bởi CSS hoặc JavaScript để thực hiện một nghiệm vụ nhất định trên thành phần có giá trị id cụ thể.
Trong CSS, để chọn thành phần với id cụ thể, viết một dấu thăng (#), tiếp đến là id của thành phần đó:
Sử dụng CSS để tạo kiểu cho một thành phần với id "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1><!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Kết quả:
Tip: Thuộc tính id có thể được sử dụng trên bất kì thành phần HTML nào.
Ghi chú: Giá trị id là phân biệt hoa thường.
Ghi chú: Giá trị id phải chứa ít nhất một kí tự, và bắt buộc không được chứa khoảng trắng (khoảng không, tabs, etc.).
Một thành phần HTML chỉ có thể có một id duy nhất thuộc về duy nhất thành phần đó, trong khi tên class có thể được sử dụng bởi đa thành phần:
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p><!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Tip: Bạn có thể học thêm nhiều hơn về CSS trong hướng dẫn về CSS.
Các dấu trang trong HTML được sử dụng để cho phép người đọc nhảy đến các phần cụ thể của một trang web.
Các dấu trang có thể hữu ích nếu trang web của bạn rất dài.
Để làm một dấu trang, bạn phải đầu tiên tạo dấu dấu trang, và sau đó thêm một đường dẫn cho nó.
Khi đường dẫn được bấm vào, trang sẽ kéo xuống vị trí của dấu trang.
Đầu tiên, tạo một dấu trang với thuộc tính id :
<h2 id="C4">Chapter 4</h2>
Sau đó, thêm một đường dẫn đến dấu trang ("Jump to Chapter 4"), trong cùng một trang:
<a href="#C4">Jump to Chapter 4</a>Hoặc, thêm một đường dẫn đến dấu trang ("Jump to Chapter 4"), từ một trang khác:
<a href="html_demo.html#C4">Jump to Chapter 4</a><!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
JavaScript có thể truy cập một thành phần với một id cụ thể bằng cách sử dụng phương thức getElementById():
Sử dụng thuộc tính id để thao tác văn bản với JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script><!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Tip: Học JavaScript trong chương HTML JavaScỉpt, hoặc trong hướng dẫn về JavaScript.
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website