一、今天完成的事情

图片的相对路径：

举例2：

<img src="images/1.jpg">

上面的代码是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

相对路径的面试题，现有如下文件层级图：

问题：如果想在index.html 文件中插入1.png，那么对应的语句是？

分析

现在document是最大的文件夹，里面有两个文件夹work和photo。work里又有一个文件夹叫做myweb。myweb文件夹里面有index.html，所以index.html在myweb里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。

答案：<img src="../../photo/1.png"/>

实例演示：

绝对路径：

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

<img src="C:\User\smyhvae\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://img.smyhvae.com/2016040102.jpg">

相对路径和绝对路径的总结：

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

相对路径使用有一个前提，就是网页文件和你的图片，必须在同一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案：用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓C盘、D盘。

下面方法是可行的，但是没有任何工程上的意义，这是因为服务器没有盘符，Linux系统没有盘符，只做了解：

<img src="file://C:\User\Danny\Pictures\明星\1.jpg" alt=""/>

总结：

（1）我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

（2）相对路径就是../image/这种路径，从自己出发，找到别人

（3）绝对路径，就是http://开头的路径，不用从自己出发，直接找到他

（4）绝对不允许使用file://开头的东西，这个是完全错误的！！

img标签的其他属性

width：宽度

height：高度

Align：指图片的水平对齐方式，属性值可以是：left，right，center

title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。

border：给图片加边框（描边），单位是像素，边框的颜色是黑色。

Hspace：指图片左右的边距

Vspace：指图片上下的边距

Alt：当图片显示不出来的时候，代替图片显示的内容。alt适用于alternate“替代”的意思。（有的浏览器不支持）

举例：

<img src="images/1.jpg" width="300" height="'188" title="风景">

Alt属性效果演示：

<img src="images/1.jpg" width="300" height="'188" title="风景" alt="风景">

图片的align属性：图片和周围文字的相对位置。属性值可以是：bottom（默认）、center、top、left、right

演示一下这几个属性值的区别：

1、align="" ，图片和文字低端对齐。即默认情况下的显示效果

以上就是align属性的五种属性值的表现形式

注意事项：（1）如果要想保证图片等比例缩放，请只设置width和height中的其中一个，由于上面的代码中，我把width写错了，只相当于设置了height，所以也无意中是等比例缩放了

（2）如果想要实现图文混排效果，请使用align属性，取值为left或right。

补充昨天超链接的一个知识点：

给图片添加超链接：

<a href="网页2.html"><img src="2.jpg"></a>

这种情况下，点击插入的这张图片的任意位置都可以跳转到这个超链接。

今天主要内容：

列表标签：<ul>  <OL>  <dl>

表格标签：<table>

框架标签及内嵌标签：<iframe>

表单标签：<form>

多媒体标签

滚动字幕标签：<marquee>

列表标签：

列表标签分为三类

1、无序标签<ul>，无序标签的每一项都是<li>

英文单词解释如下：

ul：unordered list，“无序列表”的意思

li：list item，“列表项”的意思。

例如：

<ul>

        <li>默认1</li>

        <li>默认2</li>

        <li>默认3</li>

</ul>

效果：

注意：（1）li 不能单独存在，必须包裹在<ul>里面；反过来说，ul 的“儿子”不能是别的东西，只能有li

（2）ul 的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的

属性：type="属性值"。属性值可以选：disc（实心圆点，默认），square（实心方点），circle（空心圆）。

效果如下：

不光是<ul>标签有type 属性，<ul>里面的<li>标签也有type属性（这种写法很少见），效果如下：

注意：项目符号可以是图片，但是通过css设置，标记的背景图片来实现。

当然，列表之间是可以嵌套的，实例演示如下：

ul标签实际应用场景：

场景1--导航条

场景2--li里面放置的内容可能很多

声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，甚至可以再放一个ul。

2、有序列表<OL>,里面的每一项是<li>

英文单词：Ordered List

例如：

<ol>

    <li>默认1</li>

    <li>默认2</li>

    <li>默认3</li>

<ol>

效果演示：

属性：

type=“属性值”。属性值可以是：1（阿拉伯数字，默认）、a、A、i、Ⅰ。结合start属性表示从几开始。

举例：

和无序列表一样，有序列表也是可以嵌套的。

ol 和 ul 就是语义不一样，怎么使用都是一样的。

ol 里面只能有li ，li 必须被ol 包裹。li 是容器级。

ol这个东西用的不多，如果想要表达顺序，一般也会用 ul 。

实例演示：

3、定义列表<dl>

定义列表的作用非常大。

<dl>英文单词：definition list，没有属性。dl的子元素只能是dt 和 dd。

<dt>:definition title 列表的标题，这个标签是必须的。

<dd>:definition description 列表的列表项，如果不需要它，可以不加

备注：dt、dd 只能在dl里面；dl 里面只能有dt、dd。

实例演示：

上面的演示可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个dd项目

（2）每一个词都有自己的描述项

备注：dd 是描述dt 的

定义列表用法非常灵活，可以一个dt 配很多dd

还可以拆开，让每一个dl 里面只有一个dt 和dd ，这样子更清晰一些。

真实案例：（京东最下方的页面）

上图中的结构：

京东举例：

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定的，而是语义（语义本质上是结构）。

二、明天要做的事情

继续学习html和css

三、遇到的困难

暂时没有

四、收获

学习了html几个新的知识点路径，列表标签等