HTML笔记4-文本格式化标签、列表标签、表格标签

文本格式化标签

常用文本格式化标签	作用
<strong>	加重语气，表强调
<b>	加粗效果
<i>	斜体效果
<em>	斜体，表强调
<small>	更小的文本
<code>	用于存放代码
<q>	双引号标签
<del>	删除文本
<ins>	插入文本
<sub>	下标文本
<sup>	上标文本

列表标签

无序列表

无序列表是一个项目的列表，使用<ul>标签；

列表项用粗体圆点进行标记，使用<li>标签。

 <h1>无序列表</h1>
    四大发明的名称：
    <ul>
        <li>指南针</li>
        <li>造纸术</li>
        <li>印刷术</li>
        <li>火药</li>
    </ul>

有序列表

有序列表也是一列项目，使用<ol>标签；

列表项用数字标记，使用<li>标签

 <h1>有序列表</h1>
    《三国演义》中的武力值排名
    <ol>
        <li>吕布</li>
        <li>赵云</li>
        <li>典韦</li>
        <li>关羽</li>
        <li>马超</li>
    </ol>

自定义列表

自定义列表不仅是一列项目，还是项目及其注释的组合；

自定义列表以<dl>标签开始；

每个自定义列表项以<dt>开始；

每个自定义列表项的定义以<dd>开始。

<h1>自定义列表</h1>
    <dl>
        <dt>北京</dt>
        <dd>中国的首都</dd>
        <dt>长春</dt>
        <dd>是吉林的省会城市</dd>
        <dt>海南省</dt>
        <dd>位于中国的最南端</dd>
    </dl>

表格标签

1.表格一般用于标记结构化的数据，每个表格均有若干行，每行被分割为若干单元格， 表格可以包含标题行，用于定义每一列的标题；

2.数据单元格可以包含文本、图片、列表、表单、表格等；

3.HTML表格支持单元格合并，跨行、跨列的操作，以及应用CSS样式

表格的标签

<table>标签表示表格整体，划分为四个部分：<caption>、<thead>、<tbody>、<tfoot>

<caption> 定义表格的主题

<thead> 表格的头部，也成为表格页眉

        ● <tr> 定义行

        ● <th> 在<tr>中使用，有加粗效果，是用来定义每一列的标题的

<tbody> 表格的主体

         ● <tr>定义行

         ● <td>在<tr>中使用，用来定义单元格数据

<tfoot> 用于在表格的底部定义摘要、统计信息等内容

 <table width="50%" >      < !--width表示表格的宽度 -->
        <caption>借阅人信息</caption>
        <thead>
            <tr >
                <th>学号</th>
                <th>姓名</th>
                <th>借阅日期</th>            
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>01213532</td>
                <td>张三</td>
                <td>2023-12-25</td>               
            </tr>
            <tr>
                <td>01212436</td>
                <td>李四</td>
                <td>2019-05-14</td>               
            </tr>
            <tr>
                <td>01215712</td>
                <td>王五</td>
                <td>2024-10-24</td>
            </tr>

        </tbody>
    

    </table>

合并单元格属性

rowspan:  跨行属性，跨几行就写数字几
colspan:   跨列属性，跨几列就写数字几

<table border="1px" cellspacing="0" width="800px" align="center">
        <caption>课程表</caption>
        <tr>
            <td colspan="2">时间/日期</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr>           
            <td rowspan="2">上午</td>
            <td>9:30~10:15</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>生物</td>
        </tr>
        <tr>           
            <td>10:25~11:10</td>
            <td>英语</td>
            <td>语文</td>
            <td>物理</td>
            <td>政治</td>
            <td>生物</td>
        </tr>
        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>13:30~14:15</td>
            <td>语文</td>
            <td>历史</td>
            <td>语文</td>
            <td>政治</td>
            <td>物理</td>
        </tr>
        <tr>           
            <td>14:25~15:15</td>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>体育</td>
            <td>语文</td>
        </tr>
    </table>