结构化、表现化、语义、列表、表格标签，合并单元格

最新推荐文章于 2024-09-14 22:18:26 发布

扶子茶

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量192

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/m0_61745856/article/details/139635233

版权

#HTML
##6.6
##结构化、表现化标签

粗体 b strong 
斜体 i em
下划线 u ins
删除线 s del
空格符 &nbsp;
人民币 &yen;
版权 &copy;
注册商标 &reg;

##语义标签

<header>头部标签</header>
<nav>导航栏标签</nav>
<aside>侧导航栏标签</aside>
<article>文章标签</article>
<section>区间标签</section>
<footer>底部标签</footer>

##列表标签

列表标签：
   无序列表 ul li
   有序列表 ol li
   自定义列表 dl dt dd
   <ul>
     <li><a href="#">家用电器</a></li>
     <li><a href="#">手机</a></li>
   </ul>
   去除有序列表前面的黑点：list-style:none;
   <ol>
     <li><a href="#">家用电器</a></li>
     <li><a href="#">手机</a> / <a href="#">运营商</a></li>
   </ol>
   <dl>
     <dt>河北省</dt>
     <dd>石家庄</dd>
     <dd>沧州</dd>
     <dt>山东省</dt>
     <dd>青岛</dd>
     <dd>济南</dd>
   </dl>

##表格标签

表格标签  table
 行标签 tr
 单元格标签 td
 <!--
 表格的特点：
   没有边框线
   默认单元格与单元格之间有一定的距离
   table不能添加其他标签 只有 tr td th caption thead tbody tfoot
   td标签可以添加其他标签
 -->
 <!--
 属性：
   border:边框线
   cellspacing:设置单元格和单元格之间的距离
   cellpadding:设置内容和单元格之间的距离
   align:设置表格的对齐方式 center  left(默认)  right
   还可以给单元格添加  width  height
 -->
标题标签caption
<!--
表格结构：
  表头：thead  tr  th
  表体：tbody  tr  td
  表尾：tfoot  tr  td
-->
<thead>
  <tr>
    <th></th>
  </tr>
</thead>

<tbody>
  <tr>
    <td></td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td></td>
  </tr>
</tfoot>

##合并单元格

<!--
 合并的步骤：
   1、先确定跨行还是跨列合并
   2、跨行合并 rowspan
      跨列     colspan
-->
<table border="1" cellspacing="0" cellpadding="10" align="center" width="400" height="400">
  <caption>
    <h1>点名册</h1>
  </caption>
  <thead>
    <tr>
      <th align="center">姓名</th>
      <th>姓名</th>
      <th>班级</th>
    </tr>
  </thead>

   <tbody>
    <tr>
      <td>姓名</td>
      <td>姓名</td>
      <td>班级</td>
    </tr>
  </tbody>
</table>