Html学习笔记3

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>


Html学习笔记3

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”假设要引用海贼王图片的相对路径怎么写呢?

Html学习笔记3

相对路径

答案应该是:<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格式就能够了。

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


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm 2022.01 激活(注册激活)2022.01.27「建议收藏」

    (pycharm 2022.01 激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1TCF2R91JZ-eyJsaWNlbnNlSWQi…

  • SSRS:使用SQL2008教程学习Reporting Services之数据库AdventureWorks2008问题_学习笔记1

    SSRS:使用SQL2008教程学习Reporting Services之数据库AdventureWorks2008问题_学习笔记1首先声明我是菜鸟,刚开始学习ReportingServices。在学习教程中的一点笔记。从SQL2005开始,微软就提供了强大的ReportingServices功能,的确好用,对于经常需要出复杂报表的朋友可谓是一大欢喜。SQL2008中的SQLServer教程是一本很好的学习资料,我的是SQL2008非R2版,ReportingServices章节中需要用到微软示例…

  • Matlab中axis函数用法总结

    Matlab中axis函数用法总结axis主要是用来对坐标轴进行一定的缩放操作,其操作命令主要如下:1、axis([xminxmaxyminymax])设置当前坐标轴x轴和y轴的限制范围2、axis([xminxmaxyminymaxzminzmaxcmincmax])设置x,y,z轴的限制范围和色差范围。3、v=axis返回一个行向量,记录了坐标范围4、axis…

  • 蓝鲸自动化运维平台

    蓝鲸自动化运维平台蓝鲸自动化运维平台1.蓝鲸简介官网:https://bk.tencent.com/docs/腾讯蓝鲸智云,简称蓝鲸,是腾讯互动娱乐事业群(InteractiveEntertainmentGroup,简称IEG)自研自用的一套用于构建企业研发运营一体化体系的PaaS开发框架,提供了aPaaS(DevOps流水线、运行环境托管、前后台框架)和iPaaS(持续集成、CMDB、作业平台、容器管理、数据平台、AI等原子平台)等模块,帮助企业技术人员快速构建基础运营PaaS。2.蓝鲸部署2

  • vbs整人代码,表白+提醒 两段代码就OK

    vbs整人代码,表白+提醒 两段代码就OK在沉闷的工作环境下,有时玩玩整人代码也不错,整人代码一般使用VBS脚本来实现,简单的两行代码就可以实现表白+提醒了,不过大家也要警惕VBS脚本的危险性,下面小编分享的只是整人简单脚本,大家可以随便玩!并不损坏电脑文件。 先来第一段弹窗代码:MSGBOX“内容A”+CHR(13)+“内容B”+CHR(13)+“内容C”,1,“标题”将它们复制到文本中,将后缀改成“.VBS”就可以双…

  • mysql的mediumtext类型字段在java如何获取

    mysql的mediumtext类型字段在java如何获取数据库:PO:重点是autoResultMap=true和@TableField(typeHandler=FastjsonTypeHandler.class)@Data@EqualsAndHashCode(callSuper=false)@TableName(value=”xxx”,autoResultMap=true)@ApiModel(“一分钱充值用户配置表”)publicclassxxximplementsSerializable{@Tabl

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号