首页 > 其他分享 >HTML08.图片元素

HTML08.图片元素

时间:2022-09-30 17:15:29浏览次数:63  
标签:文字 HTML08 map 标签 元素 图片 属性

图片元素

img元素

单词缩写:image缩写,空元素

  • src属性:source表示资源,用于指定图像文件的路径和文件名,他是img标签的必须属性。

  1. 站外属性:就直接右键保存图片地址然后复制到

  2. 站内属性:直接./然后通过提示输入图片地址

  • alt属性:当图片资源失效时,将使用该属性的文字替代图片<img src="" alt="这是一张太阳系的图片">

 

属性属性值描述
src URL 图像的路径
alt 文本 图片不能正常显示,就显示文字
title 文本 鼠标放到图片上,显示文字
width 像素 写了这个就不用写height,会等比例放大或缩小
height 像素 写了这个就不用写width,会等比例放大或缩小
border(了解) 数字 设置图像边框的宽度

<img src=" " alt=" " title="" width/height="数字" border="数字" />

 

注:

  1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

  3. 采取 键值对 的格式 key="value" 的格式

 

和a元素联用

<a target="_blank" href="某地址">
      <img src="./+某" alt="这是一张太阳系的图片">
</a>

和map元素

map:地图(图片里的某些地方可以点开进入另一个页面)  <img usemap="#solarMap" src="" alt="">

<map name="solarMap">

</map>

map的子元素:area 与a元素联用  <img usemap="#solarMap" src="" alt="">

<map name="solarMap">
  <area shape="circle" coords="x,y,r" href="网页地址" target="_blank">
</map>

shape属性:形状 circle圆,rect长方形,poly多边形

coords属性: 圆:长(x值)、宽(y值)、半径 长方形:左上角的值,右下角的值 多边形:依次描述每个点的坐标

衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:

ps、pxcook、cutpro

和figure元素

指代、定义,通常用于把图片、图片标题、描述包裹起来(表示文字说的是图片的信息)

figure的子元素:figcaption(指图片的文字信息里的标题元素)

标签:文字,HTML08,map,标签,元素,图片,属性
From: https://www.cnblogs.com/zjy1020/p/16745506.html

相关文章

  • HTML09.多媒体元素
    多媒体元素video视频audio音频videocontrols:控制控件的显示,取值只能为controls--->controls="controls"某些属性,只有两种属性:不写属性取值为属性名这种属性......
  • HTML11.元素
    容器元素容器元素:该元素代表一个块区域,内部用于放置其他元素div元素没有语义语义化容器元素header:通常用于表示页头,也可以用于表示文章的头部footer:通常用于表示页......
  • HTML10.列表元素
    列表元素有序列表ol:orderedlistli:listitemtype属性(一般不是非必要就不使用,因为显示应该交给CSS来做)tupe="1":表示按123数字来排序tupe="i":表示按罗马数字来排序t......
  • 图片降噪软件:Topaz DeNoise AI (图像处理)
    TopazDeNoiseAI是一款好用且专业的图片降噪软件。如果你有噪点的相片,可以通过AI智能的方式来处理掉噪点,让照片的噪点降到最低。有了TopazDeNoiseAI处理图片更方便,更简......
  • 获取图片并预览
    环境介绍:代码工具:VisualStudio2022开发框架:.netformwork4.7.2开发须知当前我所了解的有.netcore以及.netformwork两种框架.netformwork:这个是微软专用......
  • 分享一个Vue实现图片水平瀑布流的插件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久......
  • js 根据 base64 和图片 宽高 ,截取参数 裁减图片 并且返回 处理后的 base64 图片
    参考来源https://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blankhttps://www.geeksforgeeks.org/how-to-crop-images-in-reactjs/https:/......
  • Ant Design Vue 在表格中插入图片
    这两天一直在用Antdv做一些小demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的部......
  • js改变元素样式
    一、jQuery设置元素样式jQuery可以使用css()方法来修改简单元素样式;也可以操作类,修改多个样式。1、参数只写属性名,则返回属性值$("div").css("color");2、参数是属......
  • 直播平台源代码,uni-app上传图片方法封装
    直播平台源代码,uni-app上传图片方法封装 functionchooseImg(count,success){console.log(count)uni.chooseImage({count:count,success:res=>{//console.log(re......