div & span

• <div>允许你为块级内容创建逻辑划分
• <span>元素则采用类似的方式建立内联内容的逻辑分区

---

 1.计划

将一个页面划分为逻辑区。

逻辑区就是页面上彼此相关的一组元素。

 

---

 

2.使用div

在属于一个逻辑区的元素周围放置<div>标记。

 

使用id属性为<div>提供一个唯一的标签

 

 注：

• 实际上，通常把<div>描述为“容器”，可以相当于逻辑容器，用来将一堆相关的元素放在一起
• 在对<div>指定样式和定位时，还相当于图形容器。

 

---

 

3.使用span

一个无序列表

1  <ul>
2       <li>Buddha Bar, Claude Challe</li>
3       <li>When It Falls, Zero 7</li>
4       <li>Earth 7, L.T.J. Bukem</li>
5       <li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
6       <li>Music for Airports, Brian Eno</li>
7  </ul>

 

增加span

1 <ul>
2       <li><span class="cd"> Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
3       <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
4       <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
5       <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
6       <li><span class="cd">Music for Airports</span>,<span class="artist"> Brian Eno</span></li>
7 </ul>

 

指定样式

1 .cd{
2   font-style: italic;
3 }
4 
5 .artist{
6   font-weight: bold;
7 }

 

注：

• 如果要强调某些文字，可以使用<em>
• 如果想强调某些重点，可以使用<strong>
• 如果只是想要改变某些文字的样式，就应该使用<span>，并把<span>元素放在合适的类中并分组指定样式

转载于:https://www.cnblogs.com/JJ-kelion/p/4939172.html