【前端学习之HTML&CSS进阶篇】-- HTML第二篇 – 表格元素与其他常用元素

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。
进入HTML的进阶第二篇，我们来学习一下表格元素和一些相对不那么常用的HTML元素，包括abbr、time、b、q、br、hr、meta、link等，让我们一一分析。

一、表格元素

1. 知识补充

• 历史沿袭
  传统：在CSS技术出现之前，网页通常使用表格布局；
  现在：后台管理系统中可能会出现表格；

• 补充知识：
  前台：面向用户
  后台：面向管理员，对界面要求不高，对功能性要求高；

表格不再适用于网页布局的原因：表格的渲染速度过慢；

2. 表格术语

1. 表格/table、表格标题caption、表头thead、表格主题tbody、表尾tfoot：

2. 表格行tr：

3. 标题单元格th（不一定出现在表头）、单元格td

3. 实例展示

   table{
       width: 100%;
       /* 边框分离separate、合并collapse */
       border-collapse: collapse;
   }
   table caption{
       font-size: 2em;
       font-weight: bold;
       margin: 1em 0;
   }
   th, td{
       border: 1px solid #999;
       text-align: center;
       padding: 20px 0;
   }
   thead tr{
       background-color: #008c8c;
       color: aliceblue;
   }
   /* 隔行变色 */
   tbody tr:nth-child(odd){
       background-color: #eee;
   }
   /* 荧光棒 */
   tbody tr:hover{
       background-color: #ccc;
   }
   /* 选中第一列 */
   tbody tr td:first-child{
       color: chocolate;
   }
   tfoot td{
       text-align: right;
       padding-right: 20px;
   }

	<table>
        <caption>这是表格标题</caption>
        <thead>
            <!-- 一行一个tr -->
            <tr>
                th*5>{列$}
            </tr>
        </thead>
        <tbody>
            <!-- 十行五列 -->
            <!-- tr*10>td*5>{数据$} -->
            <tr>
                <td rowspan="2">数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <!-- <td>数据1</td> -->
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <!-- 余下八行代码略 -->
        </tbody>
        <tfoot>
            <tr>
                <!-- 合并单元格 -->
                <!-- <td></td>
                <td></td>
                <td></td>
                <td></td> -->
                <td colspan="5">合计: xxxx</td>
                <!-- 合并的单元格跨越5列 -->
            </tr>
        </tfoot>
    </table>

• 效果如图：
  

二、其他元素总结

元素周期表可见网址：元素周期表

• abbr: abbreviation，缩写词；
  

• time: 用于机器阅读，提供给浏览器或搜索引擎使用；
  

• b: 在文本中区分一些同等重要的文本(加粗)；
  【以前：无语义元素，主要用于加粗字体】
  

• q: 一小段引用文本(双引号)；
  

• blockquote: 大段引用文本；
  

• br: 无语义，在文本中换行；(完全可以通过span元素等方法实现)
  

• hr: 无语义，主要用于分割；(就是一个分割线)
  

• meta: 给网页添加源数据/搜索引擎的优化(SEO)，给浏览器等看的数据；
  

• type属性: 链接资源的MIME类型
  

• link: 链接外部资源(CSS、图标)
  rel属性: relation，链接的资源和当期网页的关系，
  如CSS-stylesheet、图标-icon；

    <link rel="stylesheet" href="../3.3. 表单练习/css/reset.css">
    <link rel="icon" type="image/x-icon" href="123.ico">
    <!-- rel也可以写成shortcut icon -->

【图标的另一种链接写法：直接把图标文件改成favicon.ico + 放在网页目录下即可，Ctrl + shift + R 强制刷新网页就可显现】

总结

本文主要介绍了表格元素，和一些相对不那么常用的基本元素，在此节之后，我们就只剩下一个难啃的元素了，表单元素，我们将在下一篇博客中详细介绍。