HTML标签（二）

sup,sub

sup 上标 superscripted
sub 下标 subscripted

    前段<sup><a href="https://www.baidu.com">[1]</a></sup>
    <br>
    2<sup>10</sup>
    <br>
    Na<sup>+</sup><br>
    H <sub>2</sub>SO <sub>4</sub>

span

文本的容器
内联元素 inline element
span的作用：给一句话中的部分文本加样式

    <p>
        我是来自<span style="font-size: 20px;font-weight:600; color:green;">哥伦比亚大学</span>计算机系的硕士研究生
    </p> 

ol ul li

ol 有序列表
    type:排序类型
        A：A,B,C
        a:a,b,c
        I:I,II,III
        i:i,ii,iii
        1:1,2,3
    start:开始标记
    reversed：标记顺序是否反转
ul 无序列表
    type:
        circle:空心圆
        disc:实心圆
        square:实心正方形
ul、ol、li都是块级元素 block element

        <ol type="1">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ol>
         <ol type="A">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ol>
         <ol type="a">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ol>
         <ol type="I">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ol>
         <ol type="i">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ol>

         <ul type="circle">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ul>
         <ul type="disc">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ul>
         <ul type="square">
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ul>

dl、dt、dd

dl : definition list 定义列表 
dt : definition term 定义项
dd : definition description 定义描述
dl、dt、dd 都是块级元素

      <div>
        <dl>定义列表
            <dt>定义项</dt>
            <dd>定义描述</dd>
            <dt>定义项</dt>
            <dd>定义描述</dd>
            <dt>定义项</dt>
            <dd>定义描述</dd>
        </dl>
      </div>

table

表格 table
table：表格标签
caption：标题标签
tr：表格行标签（table row）
th：表头标签(table head cell)
td：单元格标签(table data cell)

table属性：
    表格边框 border=‘1’（标签内部属性 单位是像素的都需要省略单位）
    单元格内边距 cellpadding=‘10’
    单元格间距 cellspacing=‘5’
    表哥对齐：align=‘left(默认)｜center|right’
td属性：
    单元格列合并：colspan=‘2’ 向左合并
    单元格行合并：rowspan='2' 向右合并
    单元格对齐：align=‘left(默认)｜center|right’

thead:表格页眉标签(table head)
tfoot:表格页尾标签(table foot)
tbody:表格主体标签（table body）
thead,tbody,tfoot这三个标签必须同时出现
这个三个标签的作用：当数据很多时，页面可以先加载页眉和页尾，最后等数据请求回来再填充表格主题
所以加了这三个标签后，页面元素的加载顺序是 页眉-〉页尾-〉表格主体
如果不加这三个标签时，页面元素会从上到下依次加载，页尾需要等待数据回来之后才能加载

     <table border="1" width="1000" cellpadding="10" cellspacing="5" align="center">
        <caption>标题标签</caption>
        <thead>
            <tr>
                <th align="right">姓名</th>
                <th>电话☎️</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>111</td>
                <td>1</td>
            </tr>
            <tr>
                <td>bbb</td>
                <td>222</td>
                <td rowspan="2">2</td>
            </tr>        
            <tr>
                <td>ccc</td>
                <td>333</td>
                <!-- <td>3</td> -->
            </tr>
            <tr>
                <td>合计</td>
                <td colspan="2"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">*XXXXXX</td>
            </tr>
        </tfoot>
     </table>