列表:

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    #ul1{
        list-style-type: disc;  /* 设置项目符号类型 */
    }
    #ul2{
        list-style-type: circle;
    }
    #ul3{
        list-style-type: square;
    }
    #ul4{
        list-style-type: decimal;
    }
    #ul5{
        list-style-type: none;
    }
    #ul6{
        list-style-image: url('img/img1.jpg');  /* 自定义项目符号为图片 */
    }
    #ul6 ul{
        list-style-image: url('img/img2.jpg');
        list-style-position: inside;        /* 设置项目符号的位置 */
    }
    #ul7{
        list-style: url('img/img2.jpg') inside circle;
    }
    #nav{
        list-style-type: none;
    }
    #nav a{
        text-decoration: none;
    }
    #nav a:hover{
        color: indianred;
    }
    #nav>li:hover{
        background-color: darkgray;
    }
</style>

body:

<h1>列表默认符号</h1>
<ul id="ul1">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>列表符号空心圆</h1>
<ul id="ul2">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>列表符号实心方块</h1>
<ul id="ul3">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>列表符号数字</h1>
<ul id="ul4">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>无项目符号</h1>
<ul id="ul5">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>自定义项目列表</h1>
<ul id="ul6">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
    <ul>
        <li>计算机应用基础</li>
        <li>JAVA程序语言基础</li>
        <li>Web前端开发基础</li>
    </ul>
</ul>

<h1>列表复合属性</h1>
<ul id="ul7">
    <li>计算机应用基础</li>
    <li>JAVA程序语言基础</li>
    <li>Web前端开发基础</li>
</ul>

<h1>全部商品分类</h1>
<ul id="nav">
    <li><a href="">家用电器</a></li>
    <li><a href="">家用电器</a>/<a href="">运营商</a>/<a href="">数码</a></li>
    <li><a href="">电脑</a>/<a href="">办公</a></li>
</ul>

表格：

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    table{
        border-collapse: separate;      /* 设置边框合并 */
        border-spacing: 20px;           /* 设置边框间距 */
        empty-cells: hide;              /* 设置空单元格是否显示 */
        caption-side: bottom;           /* 设置表格标题位置 */
    }
    table td{
        background-color: darkorange;
    }
</style>

body:

<table border="1">
    <caption>商品表</caption>
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>商品数量</td>
    </tr>
    <tr>
        <td>1</td>
        <td>iPhone13</td>
        <td>8000￥</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>HUAWEI Mate X</td>
        <td>10000￥</td>
        <td></td>
    </tr>
</table>