“结构容器”标签是飞哥自己给的一个定义，意思就是这些标签：主要用做：

• 定义文档结构
• 作为其他标签的容器

^_^，大家将就理解一下吧！

列表（List）

有序列表

<ol>    <!--ordered list-->
    <li>有序列表</li>    <!--list item-->
    <li>无序列表</li>
</ol>

无序列表

<ul>    <!--unordered list-->
    <li>有序列表</li>    <!--list item-->
    <li>无序列表</li>
</ul>

列表一样可以：

嵌套

<ol>
    <li>有序列表
        <ul>
            <li>我是嵌套项-1</li>
            <li>我是嵌套项-1</li>
        </ul>
    </li>
    <li>无序列表</li>
</ol>

提示：不仅仅是“竖着”的可以是列表，“横着”的也行。

表格（table）

看一下这个表格，3行2列

<table border="1">
    <thead>
        <tr>    <!-- row -->
            <th>h1</th>   <!--table head-->
            <th>h2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1, cell 1</td>  <!--table data cell-->
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>

表格的难点在于它的：

合并单元格

合并，是借用的MS Office中的表述，严格来讲，应该是“跨越”“延伸”（span），可以在单元格（th/td）中使用属性：

• colspan：横向（column列）合并
• rowspan：纵向（row行）合并

<table border="1">
    <thead>
        <tr>
            <th colspan="2">h1h2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>

纵向合并理解起来稍稍有点绕，（演示）

表格在早期被广泛用于页面布局，但在CSS兴起之后逐渐被div所取代。

溢出

大部分的html标签都是可以自由组合的，但是某些特定的标签，嵌套有严格的规定，比如：

• li只能在ol和li中
• tr只能在table中
• ……

我们不用刻意去记：一是有IDE的提示，二是这些都是标签语义天然的要求。但是要知道，如果我们真的这样组合了，比如：

    <table>
        <tr>
            <td>1</td>
            <td>HTML和CSS</td>
        </tr>
        <p>hello，源栈</p>
    </table>

浏览器会将不合要求的元素给“挤”出去，而且是挤到上面——这对我们后面的学习/debug有用。

div和span

div可以理解为一个“块”，页面中的一大块。比如我们一个网页，可以被分为这么几大块：

• 页头：包含了图片logo和导航条
• 正文：放入标题、段落、列表、表格等内容
• 页脚：友情链接等

我们就可以用三个div予以表示：

<div>页头</div>
<div>正文</div>
<div>页脚</div>

然后每个div中再各自放入相应的元素。

@想一想@：为什么要这样做？

div的一个重要特点是：一个div（默认）就会占一行，不管这个div里面的元素/内容有宽。

经常和它相对比的就是span，比如：

<span>我又干啥伤天害理的事了？</span>
<span>一脸懵逼</span>
<span>。原来他又看到了我以前的一篇文章《为什么我不做培训》（找不到了，难道被我无耻的删了？^_^），然后我马上就想起来了，那篇文章里我写了我的理由，大概就是“怕误人子弟，怕同学们缴了钱学不会……”他们现在在调侃他们也学不会，我知道他们在和我开玩笑，但啪啪打脸的赶脚，啧啧！ </span>

其特点是：一个span的长度由其中的内容决定，有多长就是多长；多个span连接，不足一行的宽度就在一行中拼接，超出一行的宽度就自动换行。

（对比演示）

具有div这种特征的元素就被称之为块级元素，相对的，具有span这种特征的元素就被称之为流元素。

这在以后学习CSS中非常有用。

Html5语义标签

大量使用div，导致的一个问题就是：整页都是div，眼睛都看花了……o(╯□╰)o

所以，Html5推出了一批（有特定含义的）语义标签，常用的有：

• header：页头
• nav：导航栏
• main：页面主要部分
  
• footer：页脚
• article：文章
• section：区域
  
• aside：侧边栏
• details：细节
• mark：标注
• ……
  

更多可参考：MDN：HTML5 sections_and_outlines

语义化

从浏览器的结果来看，上述html5语义标签和div或span相比，并没有什么区别。

但HTML5提倡使用有语义的标签，而不是div这种（没有任何含义的）无语义的标签，为什么呢？

• 提高代码的可读性。再次强调：代码是写给人看的！开发人员读这些html代码的时候会更舒服一些，这很重要。
• 语义化标签还可以给浏览器以外的：
  1. 搜索引擎爬虫用，有助于SEO
  2. 其他设备使用，比如盲人阅读器，这时候告诉这一段内容是导航、是文章、是侧边栏……就非常有用

标签语义化只是HTML5语义化的一部分，后面我们还要学习更多的语义化属性，如alt/title等。

源栈学历

在当前系列 HTML和CSS 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：