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格式就能够了。

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


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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • openssl生成证书linux,Linux下使用openssl生成证书「建议收藏」

    openssl生成证书linux,Linux下使用openssl生成证书「建议收藏」利用OpenSSL生成库和命令程序,在生成的命令程序中包括对加/解密算法的测试,openssl程序,ca程序.利用openssl,ca可生成用于C/S模式的证书文件以及CA文件.证书文件的生成步骤:一、服务器端1.生成服务器端的私钥(key文件);opensslgenrsa-des3-outserver.key1024运行时会提示输入密码,此密码用于加密key文件(参数des3是加密算法…

    2022年9月19日
    3
  • 子网划分和计算方法(附习题详解)

    子网划分和计算方法(附习题详解)一.子网划分作用1.计算网络号,通过网络号选择正确的网络设备连接终端设备1)清楚IP地址四点段点分十进制数和子网掩码,对应的网络号是什么2)交换机是用来连接相同网络的设备,路由器是用来连接不同网段的设备网络号一样的,即在相同网段,网络号不一样的,即不同网段3)计算方法把十进制数的IP地址换算成二进制数,把子网掩码也由十进制数换算成二进制数,两对二进制数对齐做“与”运算,即可得出网络号。2.根据网络的规模,可以对局域网(内网)进行网络地址规划二.IP地址格…

    2022年6月27日
    33
  • 关于ModifyStyleEx无效的问题

    关于ModifyStyleEx无效的问题在做MFC时,有时候我们需要显示选择一个项目,比如需要标记所选择的图片控件。我们可以用这个函数:BOOLModifyStyleEx(  DWORD dwRemove,  DWORD dwAdd,  UINT   nFlags)或者BOOLModif

    2022年7月19日
    14
  • SSM-Mybatis(1)[通俗易懂]

    SSM-Mybatis(1)[通俗易懂]Mybatis什么是MybatisMyBatis 是一款优秀的持久层框架,它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO(Plain Old Java Objects,普通老式 Java 对象)为数据库中的记录。第一个Mybatis程序搭建环境数据库CREATE DATABASE mybatis;uesr mybatis

    2022年8月8日
    7
  • Oracle—number数据类型[通俗易懂]

    Oracle—number数据类型[通俗易懂]https://www.cnblogs.com/oumyye/p/4448656.htmlNUMBER ( precision, scale)实际值数据类型存储值

    2022年7月3日
    39
  • 使用nodejs进行微信公众号网页开发(一)验证服务器「建议收藏」

    使用nodejs进行微信公众号网页开发(一)验证服务器「建议收藏」微信公众号网页开发(一)验证服务器前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言微信公众号网页开发第一步是验证服务器这一步是必不可少的。我是用的是liunx系统搭配宝塔面板,基于node.js+nginx进行开发的。一、pandas是什么?示例:pandas是基于NumPy的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):importnumpyasnpimportpandasaspdimportmatpl

    2022年6月3日
    32

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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