id和class

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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值