30、HTML进阶——表格元素以及其他元素

表格元素以及其他元素

1. 表格元素

1.1 表格元素的背景

在css技术出现之前，网页通常使用表格布局。在现在的网页开发中已经很少使用表格元素了，表格元素当前的使用场景大部分是后台管理系统。

网页分前台页面和后台页面，前台页面面向用户，而后台页面主要用于管理员管理系统。

前台：面向用户
后台：面向管理员。对界面要求不高，对功能性要求高。

表格元素在前台页面的用处很少，基本只会在后台页面中使用。

为什么表格不再适用于网页布局？
因为表格的嵌套层次过深，结构过于复杂；浏览器必须将表格的所有内容读完才能对表格进行渲染。多方面导致表格的渲染速度过慢。

1.2 表格元素相关术语

• 表格：table
• 表格包括：
  • 表格标题(caption)
  • 表头(thead)，注意表头不一定只有一行，可以是多行
  • 表格主体(tbody)
  • 表尾(tfoot)，可以是多行

上述表格的四个部分都是可选的，一个表格可以没有标题/表头/表体/表尾。

表格的行，称作表格行，tr（table row）。

表格行中又有若干单元格，单元格分为：

• 标题单元格：th，又称表头单元格；
• 单元格：td。

th不一定只出现在表头，表体和表尾中也可以设有th标题单元格。
th中的文本默认居中，td中的文本默认靠左。可以通过text-align调整文字对齐方式。

<table>
<caption>这是一个表格标题</caption>
<thead>
    <tr>
        <th>line1</th>
        <th>line2</th>
        <th>line3</th>
        <th>line4</th>
        <th>line5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
    </tr>
</tbody>
<tfoot></tfoot>

table{
    width: 500px;
}
caption{
    font-weight: bold;
    font-size: 1.5em;
}
td,th{
    border: solid 1px #ccc;
}

1.3 表格布局

表格布局不同于常规流（文档流）、浮动或定位，它有自己的一套体系，其display值有

1. table
2. table-caption
3. table-row
4. table-cell

等等

这里不做详细介绍，简单了解即可。

1.4 表格相关样式设置

1.4.1 border-collapse（边框折叠）

可以注意到table的示例程序中，各个单元格的边框之间是有缝隙的，边框之间是否有空隙可以通过border-collapse样式控制。

border-collapse表示边框折叠样式

• separate，默认值，效果是每个单元格的边框之间是分离的，有间隙的；
• collapse，表示折叠，消除间隙。

注意，这个CSS属性要写给table，而不是th/td。写在th和td中会没有效果。

table{
    width: 500px;
    border-collapse: collapse;
}
caption{
    font-weight: bold;
    font-size: 1.5em;
}
td,th{
    border: solid 1px #ccc;
}

1.4.2 colspan/rowspan（单元格合并）

在th/td元素中添加属性colspan="XX";，表示这个单元格跨越XX列，实现一行中的XX个单元格的合并；

例如，在上例的footer元素中加入一行，此行跨越5列。

<tfoot>
    <tr>
        <td colspan="5">合计：XXX</td>
    </tr>
</tfoot>

若在一列中合并XX单元格，则可以在合适的单元格中添加属性rowspan="XX";，表示这个单元格跨越XX行。

2. 其他元素

2.1 abbr

缩写词，通常将段落中的缩写词包起来。一般将全称写到abbr的title属性里。

<p>
    <abbr title="cascading style sheet">CSS</abbr> 是用于为页面添加样式
</p>

2.2 time

提供给浏览器或搜索引擎阅读的时间。将时间信息用time元素包起来，然后在datetime属性中写入具体的时间日期，以便浏览器阅读此时间信息。

<p>
    <time datetime="2019-5-1">今年5月</time>我搬家了。
</p>

time元素没有什么默认样式。

2.3 b（bold）

以前是一个无语义元素，主要用于加粗字体。如果只是用于字体加粗，出于语义化，完全可以使用CSS做到同等效果，这样的元素一般会被弃用。但是在HTML5中，b元素有了其他的语义，用于强调内容。

2.4 q

一小段引用文本。

<p>
    最近热播的美剧《权力的游戏》中有一句经典台词：<q>在权力的斗争中，非胜即死，没有中间状态</q>
</p>

默认会将q元素包住的文本两边添加双引号。（系统自动添加伪元素选择器q::bofore和q::after）

2.5 blockquote

大段引用的文本。引用的网址可以写在blockquote元素的cite属性中，便于浏览器理解。

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
        The HTML &lt;blockquote&gt; Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the &lt;cite&gt; element.
</blockquote>

默认样式就是在这段文本四周加了margin。

2.6 br

无语义，主要用于在文本中换行。

<p>
    收货地址：
    中国四川省
    成都市 成华区
    XXXX街XXX号
</p>

由于空白折叠，显式效果如下

利用br元素就可以实现换行。

<p>
    收货地址：<br>
    中国四川省<br>
    成都市 成华区<br>
    XXXX街XXX号
</p>

不建议使用，因为要在换行的文本后加入别的样式的话，会比较麻烦。

2.7 hr

无语义，主要用于分割。

<p>
    Lorem ipsum dolor sit amet consectetur 
    <hr>
    adipisicing elit. Velit suscipit dolorum eius voluptates reprehenderit dolores ut tempora accusantium facilis voluptatem! Nobis ratione commodi harum corporis, impedit asperiores voluptate excepturi repudiandae.
</p>

不建议使用，实现分割线的效果可以使用CSS来实现，从语义化的角度来看，应该依赖CSS来设置样式。

2.8 meta

文档级元数据元素。

还可以用于搜索引擎优化（SEO）。

<meta name="keywords" content="在线商城">
<meta name="author" content="man,xxxxx@163.com">
<meta name="descrition" content="简介">

2.9 link

链接外部资源（CSS、图标）。

• rel属性：relation，链接的资源和当前网页的关系；
• type属性：链接的资源的MIME类型，可省略，自动匹配。

比如，引入css文件。

<link rel="stylesheet" href="test.css">

链接图标

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">