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>  <!-- 换行-->