web前端实训day01——html知识回顾03

web前端实训day01——html知识回顾03

特殊字符：大于(>)、小于(<)、空格( )

<!--
    特殊字符：>(&gt;)、<(&lt;)、空格(&nbsp;)
-->

 <p>111111</p>
  &lt;p&gt;111111&lt;p&gt;
  <p>xxxxxx         xxxxxxx</p>
  <p>xxxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxx</p>

表格：table

表格:table(表格)、tr(行)、td(列)
    caption:表名
    align:对齐方式
    border:边框
    内边距：cellpadding
    表格间隙：cellspacing
    th:用于描述表头，使用th描述的表头字体会加粗
    thead:语义化标签，用于描述表格头部
    tbody:语义化标签，用于描述表格主题部分
表格合并：
      行合并：rowspan, 合并多少单元格就写多少单元格，删除的时候，删除的是不同行指令列，删除的单元格数目是合并单元格数减一
      列合并：colspan, 合并多少单元格就写多少单元格，删除的时候，删除的是同一行指令列，删除的单元格数目是合并单元格数减一

<table align="center" border="1" cellspacing="0" cellpadding="20">
        <caption>表名</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>12</td>
            </tr>
        </tbody>
</table>
<!-- 表格合并-->
<table border="1" cellpadding="40px">
        <tr>
            <td rowspan="4">过道</td>
            <td colspan="3">讲台</td>
            
            <td rowspan="4">过道</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

列表

有序列表(order)：<ol></ol>、<li></li>
    无序列表：<ul></ul>、<li></li>
    li里面可以存放像a标签等内容的
    自定义列表：dl,dt,dd

<h2>有序列表</h2>
    <ol>
        <li>小芳</li>
        <li>小明</li>
        <li>小红</li>
        <li>小张</li>
    </ol>
    <h2>无序列表</h2>
    <ul>
        <li>小芳</li>
        <li>小明</li>
        <li>小红</li>
        <li>小张</li>
    </ul>
    <h2>自定义列表</h2>
    <dl>
        <dt>天猫保障</dt>
        <dd>发票保障</dd>
        <dd>售后规则</dd>
        <dd>缺货赔付</dd>
    </dl>

案例三

 <h2>2020-06编程语言排行榜</h2>
    <table border="1" cellspacing='0'>
        <caption>2020-06编程语言排行榜</caption>
        <thead>
            <tr>
                <th>2020-06</th>
                <th>2019-06</th>
                <th>改变</th>
                <th>编程语言</th>
                <th>使用率</th>
                <th>改变率</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td><img src="images/up.png" alt="上升"></td>
                <td>C</td>
                <td>17.19%</td>
                <td>+3.89%</td>
            </tr>
            <tr>
                <td>2</td>
                <td>1</td>
                <td><img src="images/down.png" alt="下降"></td>
                <td>Java</td>
                <td>16.10%</td>
                <td>+1.10%</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td></td>
                <td>Python</td>
                <td>8.36%</td>
                <td>-0.16%</td>
            </tr>
        </tbody>
    </table>