Html学习笔记3

1表格的标题和表头：

<table>

<caption>成绩单</caption>

      <tr>

            <th>姓名</th>

            <th>语文</th>

            <th>英语</th>

            <th>数学</th>

        </tr>

        <tr>

           <td>100 </td>

          <td>100 </td>

          <td> 100</td>

      </tr>

</table>

2合并行：

<table>

        <!--第1行-->

        <tr>

            <td>姓名:</td>

            <td>小明</td>

        </tr>

        <!--第2行-->

        <tr>

            <td rowspan="2">喜欢水果:</td>

            <td>苹果</td>

        </tr>

        <!--第3行-->

        <tr>

            <td>香蕉</td>

        </tr>

    </table>

3<img>标签

src 图像的文件地址

alt 图片显示不出来时的提示文字

title 鼠标移到图片上的提示文字

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>图像标签img</title>

</head>

<body>

    <img src="../App_images/lesson/hj/7-1-1.jpg" alt="海贼王路飞" title="海贼王路飞"/>

</body>

</html>

4 图片的相对和绝对路径

一、“网页1”引用海贼王图片

假设在“网页1”引用“海贼王”这张图片。则图片路径有两种写法：

写法一：<img src="images/海贼王.jpg" alt="海贼王" />

写法二：<img src="c:/BookTest/images/海贼王.jpg" alt="海贼王"/>

以上两种方法都能达到效果。为什么呢？这就是相对路径和绝对路径的问题。

1、相对路径

写法一採用了“相对路径”方法，所谓的相对路径，就是在同一个站点下，不同文件之间的的位置定位。我们分析一下，“网页1”和images目录位于站点BookTest根目录下，而海贼王图片位于images目录下。那么src应该是“images/海贼王.jpg”。

那有同学就会问，那下图2中。“网页1”假设要引用海贼王图片的相对路径怎么写呢？

相对路径

答案应该是：<img src="海贼王.jpg" alt="海贼王"/>。这个时候网页1与海贼王图片位于同一文件夹下。

2、绝对路径

对于写法二。採用的是“绝对路径”方法，所谓的绝对路径就是完整的路径。

（ 2）、“网页2”引用海贼王图片

我们再回到图1中的文件夹内容，假设在“网页2”引用“海贼王”这张图片，图片路径也有两种写法：

写法一：<img src="../images/海贼王.jpg" alt="海贼王"/>
写法二：<img src="c:/BookTest/images/海贼王.jpg" alt="海贼王"/>

1、相对路径

相同。写法一是相对路径写法。而写法二是绝对路径写法。

我们分析一下。“网页2”位于test目录下，而海贼王图片位于images目录下。因此，相对于“网页2”，海贼王图片位于“网页2”上一级目录下的images目录下。因此。src的写法为“../images/海贼王.jpg” alt=”海贼王”。

当中“../”表示上一级目录。大家要懂得这样的写法。

如今就能够对相对路径写法进行总结了。相对路径的写法首先就是要分析当前网页的位置和图像的位置之间的关系，然后用一种方式把他们之间的相对关系表达出来。

2、绝对路径

写法二是“绝对路径”写法，跟“网页1”引用海贼王图片的写法一样。绝对路径，仅仅要你的图片没有移动到别的地方，全部网页引用该图片的路径写法都是一样的。

大家略微想一下就懂了。

引用：http://www.lvyestudy.com/les_hj/hj_7.2.aspx

5位图3种格式：“.jpg”、“.png”、“.gif”。

（1）JPG格式

JPG能够非常优点理大面积色调的图像，如相片、网页一般的图片。

（2）PNG格式

PNG支持透明信息。所谓透明，即图像能够浮如今其它页面文件或页面图像之上，如图1。

能够说，PNG是专门为web创造的图像，通常大部分页面设计者在页面中增加lLogo或者是一些点缀的小图像时，都会选择使用PNG格式。

因为JPG格式容量较大。在保证图片清晰、逼真的前提下，网页中不可能大范围使用文件较大的jpg格式图片。

PNG格式图片体积小。并且无损压缩，能保证网页的打开速度。所以PNG格式图片是非常好的选择。

因为PNG优秀的特点。PNG格式图片能够称为“网页设计专用格式”。

（3）GIF格式

GIF仅仅支持256色以内的图像。

所以，GIF格式的图片效果是非常差的。

可是。GIF有一个最大的特点。就是能够制作动画，图像作者利用图像处理软件。将静态的GIF图像设置为单帧画面。然后把这些单帧画面连在一起。设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就能够了。

能够说。这就是简单的逐帧动画。眼下这样的格式的动画在互联网上广为流行。