Cao Note

外观

HTML 列表与表格 ​

列表 ​

无序列表 ​

html
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ul>
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ul>

有序列表 ​

html
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

有序列表属性 ​

html
<!-- 从 5 开始计数 -->
<ol start="5">
    <li>第五步</li>
    <li>第六步</li>
</ol>
<!-- 倒序 -->
<ol reversed>
    <li>最后一步</li>
    <li>倒数第二步</li>
</ol>
<!-- 使用字母编号 -->
<ol type="A">
    <li>项目 A</li>
    <li>项目 B</li>
</ol>
<!-- 从 5 开始计数 -->
<ol start="5">
    <li>第五步</li>
    <li>第六步</li>
</ol>
<!-- 倒序 -->
<ol reversed>
    <li>最后一步</li>
    <li>倒数第二步</li>
</ol>
<!-- 使用字母编号 -->
<ol type="A">
    <li>项目 A</li>
    <li>项目 B</li>
</ol>

定义列表 ​

html
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

嵌套列表 ​

html
<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西兰花</li>
        </ul>
    </li>
</ul>
<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西兰花</li>
        </ul>
    </li>
</ul>

表格 ​

基本表格 ​

html
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

表格属性 ​

属性描述
border表格边框宽度
width表格宽度
cellpadding单元格内边距
cellspacing单元格间距

合并单元格 ​

html
<table border="1">
    <tr>
        <th colspan="2">个人信息</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>张三</td>
    </tr>
    <tr>
        <td rowspan="2">联系方式</td>
        <td>电话：123456789</td>
    </tr>
    <tr>
        <td>邮箱：zhangsan@example.com</td>
    </tr>
</table>
<table border="1">
    <tr>
        <th colspan="2">个人信息</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>张三</td>
    </tr>
    <tr>
        <td rowspan="2">联系方式</td>
        <td>电话：123456789</td>
    </tr>
    <tr>
        <td>邮箱：zhangsan@example.com</td>
    </tr>
</table>

表格结构 ​

html
<table border="1">
    <caption>学生信息表</caption>
    <thead>
        <tr><th>学号</th><th>姓名</th><th>成绩</th></tr>
    </thead>
    <tbody>
        <tr><td>001</td><td>张三</td><td>90</td></tr>
        <tr><td>002</td><td>李四</td><td>85</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">平均分</td><td>87.5</td></tr>
    </tfoot>
</table>
<table border="1">
    <caption>学生信息表</caption>
    <thead>
        <tr><th>学号</th><th>姓名</th><th>成绩</th></tr>
    </thead>
    <tbody>
        <tr><td>001</td><td>张三</td><td>90</td></tr>
        <tr><td>002</td><td>李四</td><td>85</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">平均分</td><td>87.5</td></tr>
    </tfoot>
</table>

Copyright © 2024-present xiaocao