id和class

来源：互联网发布：淘宝买手机流量编辑：程序博客网时间：2024/05/18 01:39

ID是唯一的，在整个网页只能有一个ID来描述内容的一个部分，即只使用一个ID代表一个区域，如网页的标题；

class类确定的元素可在一个网页中多次使用，如网页底部的许多评论；

总之，如果某种元素只有一个，使用ID；如果多次使用这个元素，使用类；

注意：ID和类都可与JavaScript及CSS一起使用；

举例：

<div id="header"><img src="img/fishing.jpg" alt="Mr Green's Fish Emporium" width="100%"><h1>Welcome to my smelly fish shop</h1>                        <!...h标签范围仅限于h1到h6...><p>We sell the smelliest fish on the planet</p></div><hr><div id="navigation"><ul><li><a href="contact.html">Contact Us</a></li><li><a href="prices/freshwater-fish-prices.html">Price List</a></li><li><a href="http://www.163.com" target="_blank">Link to Netease Web</a></li><li><a href="downloads/all-prices.pdf">Download C++ book</a></li></ul></div><hr><div id="type-of-fish"><h2>Types of Fish We Sell</h2><h3>Freshwater Fish</h3><p>We are experts in catching many types of freshwater fish...</p><h3>Saltwater Fish</h3><p>We are experts in catching many types of Saltwater fish...</p></div><div id="about-us"><h2>About Us</h2><p>Mr Green's Smelly Fish Emporium prides itself on catching, preparing and deliveringthe smelliest fish right to your doorstep. <br> Whether you like to cook them, feed them toyour cat, or just hide them in your unruly neighbours porch, Mr Green has it covered!</p></div><div id="contact-us"><h2>Contact Us</h2><p>You can contact Mr Green in various ways...</p><div class="contact-method"><h3>By phone</h3><p>222-222-Fish</p></div><div class="contact-method"><h3>By Email</h3><p>twcyq@mrgreenfish.com</p></div><div class="contact-method"><h3>By carrier pidgeon</h3><p>To do this, order your pidgeon at www.mrgreenfish.com</p></div></div>

<div id="commnets"><!...该网页只有它包含所有评论...><div class="single-comments"><!...给每个评论的div标签一个共同的类...><h2>Author name</h2><p>Your fish are so smelly, I had to waft my socks around to make the air fresher!</p></div><div class="single-comments"><h2>Author name</h2><p>Your fish are so smelly, I had to waft my socks around to make the air fresher!</p></div><div class="single-comments"><h2>Author name</h2><p>Your fish are so smelly, I had to waft my socks around to make the air fresher!</p></div></div>

0 0