Html学习笔记3

最新推荐文章于 2024-03-17 22:35:40 发布

宁i

最新推荐文章于 2024-03-17 22:35:40 发布

阅读量572

点赞数

分类专栏： Html 文章标签： Html table 相对路径和绝对路径

本文链接：https://blog.csdn.net/cwj1103/article/details/46988951

版权

Html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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格式就可以了。可以说，这就是简单的逐帧动画。目前这种格式的动画在互联网上广为流行。