• HTML入门零基础教程（五）

     嗨，大家好，我是异星球的小怪同志

    一个想法有点乱七八糟的小怪

    如果觉得对你有帮助，请支持一波。

    希望未来可以一起学习交流。

    目录

    一、图像标签

    1.图像标签

    2.图标标签的其它属性 

    3.图像标签属性注意点：

     

    一、图像标签

    1.图像标签

    在 HTML 标签中， 标签用于定义 HTML 页面中的图像。

    <img src="图像URL" />

    单词 image 的缩写，意为图像。

    src 是标签的必须属性，它用于指定图像文件的路径和文件名。

    所谓属性：简单理解就是属于这个图像标签的特性。

    那么，首先我们想要在网页中加入图片，一定要确保图片和网页的代码是在同一个文件夹里。

     我们可以用代码来演示一下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.     这是一张图片
    11.     <img src="11.6/图片.jpg">
    12. body>
    13. html>

    这样看着可能不太美观，我们可以让文字放在图片的上面，可以用

    标签，标签或者标题标签都可以。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.     <h3>这是一张图片h3>
    11.     <img src="11.6/图片.jpg">
    12. body>
    13. html>

    2.图标标签的其它属性 

    属性属性值说明
    src图片路径必须属性
    alt文本替换文本，图像不能显示的文字
    title文本提示文本，鼠标放到图像上，显示的文字
    width像素设置图像的宽度
    height像素设置图像的高度
    border像素设置图像的边框粗细

     那么我们可以用代码来演示一下：（alt）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.     <h3>这是一张图片h3>
    11.     <img src="11.6/图片.jpg">
    12.     <h3>alt 替换文本 图像显示不出来的时候用文字替换：h3>
    13.     <img src="11.6/图片.jpg " alt="我是一只咸鱼">
    14. body>
    15. html>

     

      我们再用另一个图片，来对比演示一下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.     <h3>这是一张图片h3>
    11.     <img src="11.6/图片.jpg">
    12.     <h3>alt 替换文本 图像显示不出来的时候用文字替换：h3>
    13.     <img src="11.6/1图片.jpg " alt="我是一只咸鱼">
    14. body>
    15. html>

    我们用代码来演示一下：（title） 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.     <h3>这是一张图片h3>
    11.     <img src="11.6/图片.jpg">
    12.     <h3>alt 替换文本 图像显示不出来的时候用文字替换：h3>
    13.     <img src="11.6/1图片.jpg " alt="我是一只咸鱼">
    14.     <h3> title 提示文本 鼠标放到图像上，提示的文字：h3>
    15.     <img src="11.6/图片.jpg"alt="我是一只咸鱼" title="我只是一只咸鱼">
    16. body>
    17. html>

     区别：alt是图片显示不出来，文本替换图片，title是图片能显示出来，鼠标放在图片上，也能显示出提示的文字，增加了用户体验感。

    那么还剩下图像标签还剩下三个分别是width、height、border，我们来简单的学习下吧。

    我们先用代码演示一下：（width，height）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.      <h4> width 给图像设定宽度：h4>
    11.     <img src="图片.jpg" alt="我是一只咸鱼" title="我只是一只咸鱼" width="300">
    12.     <h4> height：给图像设定高度：h4>
    13.     <img src="图片.jpg" alt="我是一只咸鱼" title="我只是一只咸鱼" width="300" height="200">
    14.     <h4> height：给图像设定高度：h4>
    15.     <img src="图片.jpg" alt="我是一只咸鱼" title="我只是一只咸鱼"  height="200">
    16. body>
    17. html>

    总结一下：

    通过以上的代码我们可以看到设置宽度时，图像可以等比例的按照图像宽度缩放，设置宽度和高度时，若是随意设置的，图像就会变得比较失真不好看，按照高度图像也可以等比例的按照图像的高度缩放。

     

    那么最后我们来看一下border是怎么使用的。

    我们用代码演示一下：（border）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图像标签title>
    8. head>
    9. <body>
    10.      <h4> width 给图像设定宽度：h4>
    11.     <img src="图片.jpg" alt="我是一只咸鱼" title="我只是一只咸鱼" width="300" border="20">
    12. body>
    13. html>

     现在只是简单的设置了一下border，以后还会详细学习的。

    3.图像标签属性注意点：

    ① 图像标签可以拥有多个属性，必须写在标签名的后面。
    ② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    ③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
    好啦，今天就到这里，下次再更~
  • 相关阅读:
    29 drf-Vue个人向总结-2
    Web核心
    Java 网络编程 —— 创建非阻塞的 HTTP 服务器
    6条优势，anzo capital昂首资本相信MT5替代MT4的原因
    《C++代码简洁之道》学习笔记：类的设计原则
    npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND、npm run dev报错记录
    StarRocks从入门到精通系列二：手动部署StarRocks
    双非二本上岸滴滴暑期实习总结
    干货分享 | GBase 8c 分布式核心技术初揭秘—CDC数据同步
    《MySQL实战45讲》——学习笔记12 “InnoDB刷脏页的控制策略“
  • 原文地址：https://blog.csdn.net/weixin_65445097/article/details/127724413