【HTML5结构标记、表格合并、语义化标签】05

20. HTML5结构标记

1. header(双标签)：页眉，用于页面的头部的信息介绍或者板块头部
2. footer(双标签)：页脚，用于页面的底部或者版块底部
3. section(双标签)：版块，用于划分页面上的不同区域，或者划分文章里不同的节，属于article的一个部分
4. hgroup(双标签)：页面上的一个标题组合，一个标题和一个子标题，或者标语的组合
5. nav(双标签)：导航，包含链接的的一个列表
6. article(双标签)：用来在页面中表示一套结构完整且独立的内容部分，可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等，可以用header/footer/section等来做头部/脚部/部分
7. aside(双标签)：元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分，aside 的内容应该与 article 的内容相关
   • 被包含在article中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
   • 在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等

<header>头部</header>
<section>
    <aside>左</aside>
    <div class="mian">主体</div>
</section>
<footer>footer</footer>

21. 表格

1. 较早时候很多页面是用table布局出来的，随着css功能越来越强大，不再用它们来做布局了，不过它们依然用来做表格，表格标记：
   • <table> ——定义表格 <caption>——表格标题
   • <thead> ——表格表头 <tbody> ——表格正文 <tfoot> ——表格页脚
     -<tr> ——表格行 <th> ——表头单元格 <td> ——表格单元格
2. 表格属性：合并单元格只能在行和列中合并，不能跨表头、正文合并
   • cellspacing ——单元间间隙(table属性)，用样式设置为border{border-spacing}
   • cellpadding ——表格内边距(table属性)，用样式设置为td,th{padding}
   • colspan=“2” ——横向合并单元格(td属性)，无法用css实现(因为改变了结构)
   • rowspan=“2” ——纵向合并单元格(td属性)，无法用css实现(因为改变了结构)
3. 表格两个相邻单元格都有边框，因此显示的边框宽度为设置的2倍，如果希望只有1倍可以设置样式border-collapse：边框折叠，值为：separate单独(默认)，collapse折叠

<!-- 合并单元格只能合并同一个容器里的，不能跨容器合并 -->
<table cellspacing="0" cellpadding="0">
    <caption>表格标题</caption>

    <!-- thead 表头:只能一个 -->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
            <th>表头单元格4</th>
        </tr>
    </thead>
    
    <!-- tbody ：可以有多个 -->
    <tbody>
        <tr>
            <th>正文单元格标题</th>
            <td>正文单元格</td>
            <td>正文单元格</td>
            <td rowspan="3">正文单元格</td>
        </tr>
        <tr>
            <td colspan="2">单元格标题</td>
            <!-- <td>正文单元格</td> -->
            <td>正文单元格</td>
            <!-- <td>正文单元格</td> -->
        </tr>
        <tr>
            <th>正文单元格标题</th>
            <td>正文单元格</td>
            <td>正文单元格</td>
            <!-- <td>正文单元格</td> -->
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>页脚单元格</th>
            <td>页脚单元格</td>
            <td>页脚单元格</td>
            <td>页脚单元格</td>
        </tr>
    </tfoot>
</table>

table{
    border-collapse: collapse;
}
th,td{
    width: 200px;
    height: 80px;
    border: 1px solid black;
    text-align: center;
    box-sizing: border-box;
}