HTML超文本标记语言（五）——块元素和类
一、块元素及其作用
HTML元素可分为块元素（block level element）和内联元素（inline element）。
块元素：块元素在浏览器显示时，通常以新行开始和结束。如<h1>、<p>、<ul>、<table>等；
内联元素：通常在显示时，不会以新行开始。如<b>、<td>、<img>、<a>等。
二、<div>元素
<div>是块级元素，没有特定含义，可用于组合其他HTML元素的容器。
1、定义：<div>标签可以把文档分割为独立的、不同的部分。使用<div>来组合块级元素，这样就可以使用样式（CSS）对它们进行格式化。
2、用法：可以对<div>元素应用class或id属性，一般只用其中的一种。class用于元素组（某一类相似的元素），id用于标识单独的唯一的元素。
1 <html> 2 <body> 3 <h3>This is a header!</h3> 4 <p>This is a paragraph!!</p> 5 <div style="color:#00FF00"> 6 <h3>This is a header!</h3> 7 <p>This is a paragraph!</p> 8 </div> 9 </body> 10 </html>
1 <html> 2 <body> 3 <h2>NEWS WEBSITE</h2> 4 <p>some text. some text. some text...</p> 5 ... 6 <div class="news"> 7 <h3>News headline 1</h3> 8 <p>some text. some text. some text...</p> 9 ... 10 </div> 11 <div class="news"> 12 <h3>News headline 2</h3> 13 <p>some text. some text. some text...</p> 14 ... 15 </div> 16 ... 17 </body> 18 </html>
上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class="news" 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。
三、<span>元素
<span>是内联元素，也没有特定含义，可用作文本的容器。
1、用法：
<p><span>some text.</span>some other text.</p>
如果不对span应用样式，span元素中的文本与其他文本不会有任何视觉上的差异。
可以为span应用id或class属性。
2、应用样式举例
如果文档中多次出现“提示”字样，可以搭配span和CSS为其指定特定样式。
HTML：
<p class="tips"><span>提示：</span>其他文字……</p>
CSS：
p.tips span{
font-weight:bold;
color:#ff9955;
}
意即：class名为tips的p元素里的span元素的样式。
四、类
对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式。为相同的类设置相同的样式，或者为不同的类设置不同的类。
1、分类块级元素
设置<div>元素的类，使我们能为相同的<div>元素设置相同的类。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .cities { 6 background-color:black; 7 color:white; 8 margin:10px; 9 padding:10px; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="cities"> 15 <h2>London</h2> 16 <p>London is the capital city of England.</p> 17 </div> 18 <div class="cities"> 19 <h2>Paris</h2> 20 <p>Paris is the capital and most populous city of France.</p> 21 </div> 22 <div class="cities"> 23 <h2>Tokyo</h2> 24 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area</p> 25 </div> 26 </body> 27 </html>
2、分类行类元素
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 span.red { 6 color:red; 7 } 8 </style> 9 </head> 10 <body> 11 <h1>我的<span class="red">重要的</span>标题</h1> 12 </body> 13 </html>
