Sự khác biệt giữa id và lớp trong HTML là gì?
|
Chúng tôi cần các cách để mô tả nội dung trong tài liệu HTML/XHTML. Các phần tử cơ bản như Show
Các ID và Lớp này là các “móc nối” mà chúng ta cần xây dựng thành phần đánh dấu để có được chúng. Rõ ràng là CSS cần những thứ này để chúng ta có thể xây dựng bộ chọn và tạo kiểu, nhưng các ngôn ngữ web khác như JavaScript cũng phụ thuộc vào chúng. Nhưng sự khác biệt giữa chúng là gì? ID là duy nhất
Khi tôi lần đầu tiên học những thứ này, tôi đã nghe đi nghe lại rằng bạn chỉ nên sử dụng ID một lần, nhưng bạn có thể sử dụng các lớp nhiều lần. Về cơ bản, nó lọt vào tai này và chui ra tai kia bởi vì đối với tôi, nó giống như một “quy tắc ngón tay cái” tốt hơn là một điều gì đó cực kỳ quan trọng. Nếu bạn hoàn toàn là một người HTML/CSS, thái độ này có thể tồn tại bởi vì đối với bạn, họ thực sự dường như không làm điều gì khác biệt Đây là một. mã của bạn sẽ không vượt qua xác thực nếu bạn sử dụng cùng một ID trên nhiều phần tử. Xác thực phải quan trọng đối với tất cả chúng ta, vì vậy chỉ riêng điều đó đã là một điều lớn. Chúng ta sẽ xem xét thêm các lý do cho sự độc đáo khi chúng ta tiếp tục Các lớp không phải là duy nhất
Mọi thông tin kiểu dáng cần được áp dụng cho nhiều đối tượng trên một trang phải được thực hiện với một lớp. Lấy ví dụ một trang có nhiều “widget” Giờ đây, bạn có thể sử dụng tên lớp “tiện ích con” làm móc nối của mình để áp dụng cùng một bộ kiểu dáng cho từng cái trong số này. Nhưng nếu bạn cần một trong số chúng lớn hơn cái còn lại, nhưng vẫn chia sẻ tất cả các thuộc tính khác thì sao? Không cần tạo một tên lớp hoàn toàn mới ở đây, chỉ cần áp dụng một lớp mới ngay trong thuộc tính lớp. Các lớp này được phân định bằng dấu cách và hầu hết các trình duyệt đều hỗ trợ bất kỳ số lượng nào trong số chúng (thực tế, nó giống như hàng nghìn, nhưng nhiều hơn mức bạn cần) Không có giá trị mặc định của trình duyệt cho bất kỳ ID hoặc Lớp nàoTheo mặc định, việc thêm tên lớp hoặc ID vào một phần tử sẽ không ảnh hưởng gì đến phần tử đó Đây là điều khiến tôi khó chịu khi mới bắt đầu. Bạn đang làm việc trên một trang web và phát hiện ra rằng việc áp dụng một tên lớp cụ thể sẽ khắc phục sự cố mà bạn đang gặp phải. Sau đó, bạn chuyển sang một trang web khác có vấn đề tương tự và cố gắng sửa nó với cùng tên lớp đó vì nghĩ rằng bản thân tên lớp có một số thuộc tính kỳ diệu chỉ để phát hiện ra rằng nó không hoạt động Các lớp và ID không có bất kỳ thông tin kiểu dáng nào đối với chúng. Chúng yêu cầu CSS để nhắm mục tiêu chúng và áp dụng kiểu dáng Mã vạch và số sê-riCó lẽ một sự tương tự tốt ở đây là mã vạch và số sê-ri. Lấy một chiếc iPod trong một cửa hàng. Trên bao bì sẽ có mã vạch. Điều này cho cửa hàng biết sản phẩm là gì, vì vậy khi được quét, hệ thống sẽ biết chính xác sản phẩm là gì và giá của nó là bao nhiêu. Nó thậm chí có thể biết nó có màu gì hoặc nó được giữ ở đâu trong cửa hàng. Tất cả iPod cùng loại này đều có cùng một mã vạch trên chúng iPod cũng sẽ có một số sê-ri trên đó, số này hoàn toàn độc nhất đối với bất kỳ iPod nào khác (hoặc bất kỳ thiết bị nào khác) trên thế giới. Số sê-ri không biết giá. Có thể, nhưng đối với cửa hàng thì đây không phải là cách hiệu quả để lưu trữ và sử dụng dữ liệu đó. Sử dụng mã vạch dễ dàng hơn nhiều, vì vậy, ví dụ: nếu giá thay đổi, bạn chỉ có thể thay đổi giá cho mã vạch đó chứ không phải từng số sê-ri riêng lẻ trong hệ thống của mình Điều này giống như ID và Lớp học. Thông tin có thể sử dụng lại nên được lưu giữ trong một lớp và thông tin hoàn toàn duy nhất nên được lưu giữ trong một ID ID có chức năng trình duyệt đặc biệtCác lớp không có khả năng đặc biệt trong trình duyệt, nhưng ID có một mẹo rất quan trọng trong tay áo của chúng. Đây là "giá trị băm" trong URL. Nếu bạn có một URL như http. //tên miền của bạn. com#comments, trình duyệt sẽ cố gắng định vị phần tử có ID là “bình luận” và sẽ tự động cuộn trang để hiển thị phần tử đó. Điều quan trọng cần lưu ý ở đây là trình duyệt sẽ cuộn bất kỳ phần tử nào nó cần để hiển thị phần tử đó, vì vậy nếu bạn đã làm điều gì đó đặc biệt như vùng DIV có thể cuộn trong phần thân thông thường của bạn, thì div đó cũng sẽ được cuộn. Đây là một lý do quan trọng ngay tại đây tại sao ID phải hoàn toàn độc nhất lại quan trọng. Vì vậy, trình duyệt của bạn biết nơi để cuộn Các phần tử có thể có CẢ HAIKhông có gì ngăn cản bạn có cả ID và Class trên một phần tử. Trên thực tế, nó thường là một ý tưởng rất hay. Lấy ví dụ đánh dấu mặc định cho mục danh sách nhận xét WordPress Nó có một lớp được áp dụng cho nó mà bạn có thể muốn tạo kiểu cho tất cả các nhận xét trên trang, nhưng nó cũng có một giá trị ID duy nhất (được tạo động bởi WordPress, khá độc đáo). Giá trị ID này hữu ích cho liên kết trực tiếp. Bây giờ tôi có thể liên kết trực tiếp đến một nhận xét cụ thể trên một trang cụ thể một cách dễ dàng CSS không quan tâmVề CSS, không có gì bạn có thể làm với ID mà bạn không thể làm với Class và ngược lại. Tôi nhớ khi lần đầu tiên tôi học CSS và tôi đã gặp một vấn đề, đôi khi tôi sẽ thử và khắc phục sự cố bằng cách chuyển đổi xung quanh các giá trị này. Không. CSS không quan tâm JavaScript quan tâmNgười JavaScript có lẽ đã đồng điệu hơn với sự khác biệt giữa các lớp và ID. JavaScript phụ thuộc vào việc chỉ có một phần tử trang với bất kỳ Nếu bạn không cần chúng, đừng sử dụng chúngNhư bạn có thể thấy, các lớp và ID rất quan trọng và chúng tôi dựa vào chúng hàng ngày để thực hiện thao tác tạo kiểu và trang mà chúng tôi cần thực hiện. Tuy nhiên, bạn nên sử dụng chúng một cách thận trọng và đúng ngữ nghĩa Điều này có nghĩa là tránh những thứ như thế này Chúng ta đã biết phần tử này là một liên kết, nó là một phần tử neo. Ở đây không có nhu cầu cụ thể để áp dụng một lớp, vì chúng ta đã có thể áp dụng kiểu dáng thông qua thẻ của nó Cũng nên tránh điều này ________số 8ID được sử dụng phù hợp ở đây vì trang có thể sẽ chỉ có một cột bên phải, nhưng tên không phù hợp. Hãy thử và mô tả ngữ cảnh của phần tử, không phải vị trí của phần tử đó hoặc phần tử đó trông như thế nào. ID ở đây là “thanh bên” sẽ phù hợp hơn Microformats chỉ là tên lớp cụ thểNghĩ rằng vi định dạng là trên đầu của bạn? . Chúng chỉ là phần đánh dấu thông thường sử dụng tên lớp được tiêu chuẩn hóa cho thông tin mà chúng chứa. Kiểm tra một vCard tiêu chuẩn Có sự khác biệt giữa lớp và id trong HTML không?Ghi nhớ sự khác biệt giữa Lớp và ID. Tên lớp có thể được sử dụng bởi nhiều phần tử HTML, trong khi tên ID chỉ được sử dụng bởi một phần tử HTML trong trang .
Sự khác biệt giữa lớp div và id là gì?Sự khác biệt đơn giản giữa hai loại này là trong khi một lớp có thể được sử dụng nhiều lần trên một trang, ID chỉ được sử dụng một lần trên mỗi trang. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section.
Tên lớp và ID có thể giống nhau không?Có, bạn có thể sử dụng cùng tên cho cả id và lớp vì cả hai tham số đều có ý nghĩa riêng.
Bạn có thể sử dụng cả id và lớp trong HTML không?Có, bất kỳ thành phần HTML nào (như div, input, nav, body, v.v.) đều có thể có cả “id” và “class” cùng lúc và đồng thời . Sự khác biệt duy nhất ở đây là “id” chỉ có thể có một giá trị duy nhất và “class” có thể có nhiều hơn một giá trị. |
