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)


相关推荐

  • Hybrid App 和 React Native 开发那点事

    Hybrid App 和 React Native 开发那点事简介:HybridApp(混合模式移动应用)开发是指介于Web-app、Native-App这两者之间的一种开发模式,兼具「NativeApp良好用户交互体验的优势」和「WebApp跨平台开发的优势」。很多人都知道,ReactNative是Facebook开源的框架,可以直接用Javascript开发原生的APP,本文则会围绕开发中的具体实践问题进行讨论。

    2022年10月30日
  • 学Python必看!今年最火的五大Python框架

    学Python必看!今年最火的五大Python框架由于简单的学习曲线、越来越快的应用程序以及机器学习辅助功能等附加优势,Python已经成了IT行业的流行词…由于简单的学习曲线、越来越快的应用程序以及机器学习辅助功能等附加优势,Python已经成了IT行业的流行词。到目前为止,几乎每个IT工程师和开发人员都必须了解Python的强度和功能。Python本身是一种编程语言,也许你已经掌握了这种令人惊叹的编程语言的一些基本编程技能,并且正在寻找…

  • stn专线和otn有什么区别_stn云专线是什么意思?

    stn专线和otn有什么区别_stn云专线是什么意思?云专线产品是指依托于STN(智能传送网),为客户提供灵活业务接入、灵活带宽、高可靠性及端到端质量保障的专线产品。STN云专线产品描述:依托于STN(智能传送网),为客户提供灵活业务接入、灵活带宽、高可靠性及端到端质量保障的二层以太专线产品。STN(SmartTransportNetwork)智能传送网,采用JIPRAN及PTN技术相结合发展起来的—种增强型分组组网技术,该技术可叠加在移动业…

    2022年10月19日
  • java 正则表达式 替换 html,java 正则表达式 替换 html「建议收藏」

    java 正则表达式 替换 html,java 正则表达式 替换 html「建议收藏」java正则表达式替换html[2021-01-2922:37:07]简介:java正则表达式用法:1、使用Pattern类进行字符串的拆分,使用的方法是【String[]split(CharSequenceinput)】;2、使用Matcher类进行字符串的验证和替换。相关免费学习推荐:javaphp正则表达式替换图片地址的方法:首先PHP正则提取图片img标记中的任意属性;然后…

  • 最详细AMD Ryzen CPU,VMware 15安装macOS 10.15.x Catalina 记录(第一篇)[通俗易懂]

    最详细AMD Ryzen CPU,VMware 15安装macOS 10.15.x Catalina 记录(第一篇)[通俗易懂]如何在非macOS电脑上体验macOS,目前我所知道的有两种方式:真机安装(难度大,本文介绍,感兴趣的童鞋可以自行搜索);虚拟机安装。不管是真机安装还是虚拟机安装,Intel的cpu在安装过程中遇到的坑相比AMD的cpu要少很多。所以本文不介绍如何在Intelcpu的pc上安装macOS,网上教程很多,读者可自行搜索。很多AMDcpu的朋友,在用虚拟机安装macOS的过程中,肯定遇到过一些问题,并且有些问题很棘手,会被困扰几天,那么本文将介绍如何在AMDcpu的电脑上安装mac

  • vue-router 详解

    vue-router 详解文章目录1、认识vue-router2、安装和使用vue-router1、认识vue-router目前前端流行的三大框架,都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/vue-router是基于路由和组件的路由用户设定访问

发表回复

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

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