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 delivering
the smelliest fish right to your doorstep. <br> Whether you like to cook them, feed them to
your 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>