HTML基础教程7——表格标签和语义化标签
HTML基础教程7——表格标签和语义化标签
表格基础
表格用<table>标签实现，内部主要有<tr>和<td>标签，其中表示行，表示列，属性border的值表示表格边框线的粗细，属性cellspacing的值表示内框和外框之间的距离，属性cellpadding的值表示内框的大小。
表格标题和表格单元格标签
表格标题用<caption>标签表示，<caption>应该写在<table>内部，单元格标题用<th>标签表示<th>标签应写在第一个<tr>中，并且<th>标签会默认元素为加粗。
表格结构标签(了解)
表格头部用<thead>标签表示，表格的中间用<tbody>标签表示，表格的底部用<tfoot>标签标识 ，这些标签并没有实质上的影响其效果类似与语义化标签目的是为了让编写人员可以快速明白该区域的功能或者含义。
合并单元格
合并单元格使用<td>标签中的rowspan属性和colspan属性，其中rowspan的值为合并纵向单元格的格数，colspan的值为合并横向单元格的格数，并且只有同一个结构内可以合并单元格不能跨结构合并。
可以看到在输入了属性colspan后单元格确实横向合并了但是也因此把原本的单元格挤了出去，我们想要解决这中问题只需要在合并的计算好单元格数量即可，例如图中我们要横向合并两格只要减少一个<td>标签即可，rolspan纵向合并同理只不过纵向合并删除的是不同<tr>标签中对应的<td>标签。
表格布局
表格在特定的情况下可以用来布局，例如导航栏，只需要创建一行按需求个单元格即可(样式位置可以通过css调整，后续讲解)。
实际上列表也可以用于导航布局(只需要通过css设置样式即可完成)，这一块内容有兴趣的可以自行上网学习。
语义化标签
无语义的布局标签
无语义的布局标签常见的有<div>标签和<span>标签，其中<div>标签属于块级元素(一行只能有一个块)，<span>标签属于行级元素(一行可以有多个行)，除了这两种级别还有行内块元素(一行可以有多个块)。
有语义标签(一般用于手机端)
<header>网页头部
<nav>网页导航
<footer>网页底部
<aside>网页侧边
<section>网页区块
<article>网页文章
