HTML-块标签、语义化标签、表格标签

HTML-块标签

div和span:
  div:每一个div占满一整行。块级标签
  span:文本信息在一行展示,行内标签 内联标签

        <span>传智</span><!-- span文本信息在一行展示-->
        <span>播客</span><!-- span行内标签,内联标签-->
<hr><!-- 横线-->
        <div>传智</div><!-- 每一个div都沾满一整行-->
        <div>播客</div><!-- div块级标签-->

HTML-语义化标签

语义化标签:html5中为了提高程序的可读性,提供了一些标签

<header>

<footer>

还有很多,就不一一列举了

HTML-表格标签

table:定义表格

  width:宽度

  border:边框

  cellpadding:定义内容和单元格的距离

  cellspacing:定义单元格之间的距离,如果指定为0,则单元个的线会何为一条

  bgcolor:背景色

  align:对齐方式

tr:定义行

td:定义单元格

th:定义表头单元格

复制代码
<!-- 背景色:绿色,边框为0,宽度:0.内容和单元格的距离:0,单元格与单元格之间的距离:0 居中-->
    <table bgcolor="#556b2f" border="1" width="50%" cellpadding="0" cellspacing="0" align="center">
        <tr>  <!-- 定义行-->
            <th>编号</th> <!-- 表头单元格-->
            <th>姓名</th> <!-- 表头单元格-->
            <th>成绩</th> <!-- 表头单元格-->
        </tr> <!-- 结束行-->

        <tr> <!-- 定义行-->
            <td>1</td> <!-- 表头单元格-->
            <td>李四</td> <!-- 表头单元格-->
            <td>99</td> <!-- 表头单元格-->
        </tr> <!-- 结束行-->

        <tr> <!-- 定义行-->
            <td>2</td> <!-- 表头单元格-->
            <td>王五</td> <!-- 表头单元格-->
            <td>99</td> <!-- 表头单元格-->
        </tr> <!-- 结束行-->
    </table>
复制代码

 

复制代码
<!-- 边框为0,宽度:50,内容和单元格的距离:0,单元格与单元格之间的距离:0,背景色:绿色,居中-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#556b2f" align="center">

<thead> <!-- 表格中的表头内容-->
    <caption>学生信息表</caption> <!-- 表格标题-->
    <tr> <!-- 定义行-->
        <th>编号</th> <!-- 表头单元格-->
        <th>姓名</th> <!-- 表头单元格-->
        <th>成绩</th> <!-- 表头单元格-->
    </tr>
</thead>

<tbody> <!-- 定义表格中的主体内容-->
    <tr bgcolor="#556b2f" align="center"> <!-- 定义行,背景色:绿色,居中-->
        <td>1</td> <!-- 表头单元格-->
        <td>小龙女</td> <!-- 表头单元格-->
        <td>100</td> <!-- 表头单元格-->
    </tr>

    <tr> <!-- 定义行-->
        <td>2</td> <!-- 表头单元格-->
        <td>杨过</td> <!-- 表头单元格-->
        <td>50</td> <!-- 表头单元格-->
    </tr>
</tbody>

<tfoot> <!-- 定义表格中的标注内容(脚注)-->
    <tr> <!-- 定义行-->
        <td>3</td> <!-- 表头单元格-->
        <td>尹志平</td> <!-- 表头单元格-->
        <td>10</td> <!-- 表头单元格-->
    </tr>
</tfoot>
</table>

<hr> <!-- 换行-->
<!-- 边框为1,宽度:50,内容和单元格的距离:0,单元格与单元格之间的距离:0 ,背景色:绿色,居中-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#556b2f" align="center">
    <tr> <!-- 定义行-->
        <th rowspan="2">编号</th> <!-- 表头单元格 合并行-->
        <th>姓名</th> <!-- 表头单元格-->
        <th>成绩</th> <!-- 表头单元格-->
    </tr>

    <tr> <!-- 定义行-->
        <td>小龙女</td> <!-- 表头单元格-->
        <td>100</td> <!-- 表头单元格-->
    </tr>

    <tr> <!-- 定义行-->
        <td>2</td> <!-- 表头单元格-->
        <td colspan="2">杨过</td> <!-- 表头单元格 合并列-->
    </tr>
</table>
<hr>  <!-- 换行-->
复制代码

 

posted @   漁夫  阅读(40)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示