三.列表（块级元素）

1.有序列表（ol）

可以再更改他的类型，就是草莓，苹果，葡萄前面的序列

<ol type="A">
    <li>草莓</li>
    <li>苹果</li>
    <li>葡萄</li>
</ol>

2.无序列表（ul）

也可更改类型，只要在开头标签里修改type书写就可去掉小黑点（type=“none”）

<ul>
    <li>旺仔</li>
    <li>三鹿</li>
    <li>蒙牛</li>
</ul>

3.定义列表（dl）

<dl>
    <dt>特色菜</dt>
    <dd>刀削面</dd>
    <dd>辣子鸡</dd>
    <dd>宫保鸡丁</dd>
</dl>

4.盒子（div）

<div style="width:300px;height:330px;border:1px solid red">
    <dl>
        <dt>特色菜</dt>
        <dd>刀削面</dd>
        <dd>辣子鸡</dd>
        <dd>宫保鸡丁</dd>
    </dl>
</div>

四.内联元素

1.路径

（1）相对路径

同层级路径 文件名 . /
上一级路径 . . /
下一层路径 /

<img src="ceshi./2.png" alt="这是一张图片" title="图片">

（2）超链接

<a href="https://www.baidu.com/">百度一下</a>

如果想要打开一个新的链接，就加上 target="_blank"

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

（3）锚点

通过 # 加上底部或顶部，就可以实现顶部与底部的转换

<a href="#buttom" name="top">去到底部</a>
<div style="width:300px;height:330px;border:1px solid red"></div>
<div style="width:300px;height:330px;border:1px solid red"></div>
<div style="width:300px;height:330px;border:1px solid red"></div>
<div style="width:300px;height:330px;border:1px solid red"></div>
<div style="width:300px;height:330px;border:1px solid red"></div>
<a href="#top" name="buttom">回到顶部</a>

（4）文本标签

b 标签是加粗
i 标签是斜体

<b>我是加粗</b>
<i>我是斜体</i>

五.表格（table）

th 表示表头
tr 表示行
td 表示列
行包含列

1.colspan 表示合并列

<table border="1">
<!--    th 表示表头-->
    <tr>
        <th colspan="3">数字集合</th>
    </tr>
	<tr>
	    <td>999</td>
	    <td>999</td>
	    <td>999</td>
    </tr>
    <tr>
        <td>999</td>
        <td>999</td>
        <td>999</td>
    </tr>
    <tr>
        <td>999</td>
        <td>999</td>
        <td>999</td>
    </tr>
</table>

2.rowspan 表示合并行

<table border="1">
<!--    th 表示表头-->
    <tr>
        <th colspan="3">数字集合</th>
    </tr>

    <tr >
    <td rowspan="3">888</td>
    <td>999</td>
    <td>999</td>
    </tr>
    <tr>
<!--        <td>888</td>-->
        <td>999</td>
        <td>999</td>
    </tr>
    <tr>
<!--        <td>888</td>-->
        <td>999</td>
        <td>999</td>
    </tr>
</table>