网络应用之html资源路径

资源路径

学习目标

• 能够知道相对路径和绝对路径的区别

---

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<imgsrc="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 --><imgsrc="./images/logo.png"><!-- 相对路径方式2 --><imgsrc="images/logo.png">

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 --><imgsrc="/Users/apple/Desktop/demo/hello/images/logo.png"><imgsrc="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

• 相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。

• 相对路径是从当前操作的 html 文档所在目录算起的路径

• 绝对 路径是从根目录算起的路径

列表标签

学习目标

• 能够知道列表标签的种类

---

1. 列表标签的种类

• 无序列表标签(ul标签)

• 有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

4. 小结

• 列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)

• 列表项目对顺序有要求的时候使用ol标签

• 列表项目对顺序无要求的时候使用ul标签