HTML5语义元素的使用

传统页面的构造方法

1. <div class="Header"> 
2. <h1>因为痛，所以叫青春</h1> 
3. <p class="Teaser">写给独自站在人生路口的你</p> 
4. <p class="Byline">[韩]金兰都</p> 
5. </div> 
6.  
7. <div class="Content"> 
8. <p><span class="LeadIn">青春</span>, 之所以艰难，是因为孤单。</p> 
9. ……完整内容见附件
   
10. </div> 
11.  
12. <div class="Footer"> 
13. <p class="Disclaimer">上述这些是译的观点</p> 
14. <p> 
15. <a href="AboutUs.html">关于我们</a> 
16. <a href="Disclaimer.html">申明</a> 
17. <a href="ContactUs.html">联系我们</a> 
18. </p> 
19. <p>Copyright © 2013</p> 
20. </div> 

因为使用了<div>元素，所以添加样式表很容易。下面，就是为页眉及其中的内容添加样式的规则。

• 1-1 为<div>添加样式，使页眉具有蓝色带边框
  1. .Header { 
  2.   background-color: #7695FE; 
  3.   border: thin #336699 solid; 
  4.   padding: 10px; 
  5.   margin: 10px; 
  6.   text-align: center; 
  7. } 
• 1-2 为页眉中的<h1>（这里是文章标题）添加样式
  1. .Header h1 { 
  2.   margin: 0px; 
  3.   color: white; 
  4.   font-size: xx-large; 
  5. } 
• 1-3 为页眉中的子标题添加样式
  1. .Header .Teaser { 
  2.   margin: 0px; 
  3.   font-weight: bold; 
  4. } 
• 1-4 为页眉中的属名添加样式
  1. .Header .Byline { 
  2.   font-style: italic; 
  3.   font-size: small; 
  4.   margin: 0px; 
  5. } 

其余的样式参见附件。上述代码实现的页面的整体样式如下：

上述页面编写规范，通过使用<div>，<span>元素把大部分的工作交给了样式表。而通过<span>元素可以为处在其它元素中的少量文本添加样式，通过<div>不仅可以为整个内容区块添加样式，还可以构建整个页面的结构。

使用HTML5改造页面

<div>是当今Web设计的必备元素，它是一个直观、多用途的容器，可以通过它为页面中的任何区块应用样式。但是<div>的问题在于：它本身不反映与页面相关的任何信息。你在页面中看到<div>元素时，你知道这是一个独立的区块，但是不知道这个区块的意图。

HTML5可以改进这种情况，可以把<div>换成具有描述性的语义元素，如<header>、<footer>。

• 1-5 使用HTML5具有描述性的语义元素
  1. <header class="Header"> 
  2. <h1>因为痛，所以叫青春</h1> 
  3. <p class="Teaser">写给独自站在人生路口的你</p> 
  4. <p class="Byline">[韩]金兰都</p> 
  5. </header> 
  6.  
  7. <div class="Content"> 
  8. <p><span class="LeadIn">青春</span>, 之所以艰难，是因为孤单。</p> 
  9. ……//完整代码见附件 
  10. </div> 
  11.  
  12. <footer class="Footer"> 
  13. <p class="Disclaimer">上述这些是译的观点</p> 
  14. <p> 
  15. <a href="#">关于我们</a> 
  16. <a href="#">申明</a> 
  17. <a href="#">联系我们</a> 
  18. </p> 
  19. <p>Copyright © 2013</p> 
  20. </footer> 

上面的代码中<header>和<footer>元素仍然使用了类名，这样做的目的是不用立即修改样式表。可不管怎么说，类名有点多余，所以最终就是把他们都删掉。

• 1-6 使用HTML5的语义元素
  1. <header> 
  2. <h1>因为痛，所以叫青春</h1> 
  3. <p class="Teaser">写给独自站在人生路口的你</p> 
  4. <p class="Byline">[韩]金兰都</p> 
  5. </header> 

修改之后，为语义元素应用的样式表也应该做如下调整：

• 1-7 为<header>添加样式，使页眉具有蓝色带边框
  1. header {  
  2.    … //与代码1-1 的内容一样
  3. }  
• 1-8 为<header>中的<h1>添加样式
  1. header h1 {  
  2.      … //与代码 1-2 内容一样
  3. }  
• 1-9 为<header>中的子标题添加样式
  1. header .Teaser {  
  2.     …//与代码1-3内容一样 
  3. }  
• 1-10 为<header>中的属名添加样式
  1. header .Byline {  
  2.     …//与代码1-4内容一样 
  3. }  

这两种样式都会得到相同的结果。

转载于:https://blog.51cto.com/020618/1195068