前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html学习笔记3

Html学习笔记3

作者头像
全栈程序员站长
发布2022-07-11 09:21:47
2650
发布2022-07-11 09:21:47
举报

大家好,又见面了,我是全栈君。

1表格的标题和表头:

代码语言:javascript
复制
<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合并行:

代码语言:javascript
复制
<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 鼠标移到图片上的提示文字

代码语言:javascript
复制
<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格式就能够了。

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/115241.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年2月7,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1表格的标题和表头:
  • 2合并行:
  • 3<img>标签
    • 4 图片的相对和绝对路径
      • 2、绝对路径
        • 1、相对路径
          • 2、绝对路径
            • 5位图3种格式:“.jpg”、“.png”、“.gif”。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档