HTML图片标签

<body>

        <!--
        使用img标签来向网页中引入外部的图片,
        img标签也是一个自结束标签
        属性:
        src:设置一个外部图片的路径
        alt:可以用来设置图片不能显示时,就会显示图片的描述
        搜索引擎可以通过alt属性来识别不同的图片
        如果不写alt属性,则搜索引擎不会对img中的图片进行收录
        width:可以用来修改图片的宽度
        height:可以用来修改图片的高度
        宽度和高度两个属性如果只设置一个,另一个也会同时等比例调整大小
        如果两个值同时指定则按照你指定的值来设置
        一般开发中除了自适应的页面,不建议设置width和height
        路径问题
        相对路径指的是相对于当前资源的所在的目录。

        (相对于当前的资源的为基准)可以使用../来返回上一级目录,使用几级就写几个../
        一般都是相对路径就可以了,都是附近的文件夹。
        -->
        <!--
        图片的格式
        --JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
        --一般使用JPEG来保存照片等颜色丰富的图片
        gif
        --GIF支持颜色少,只支持简单的透明,支持动态图
        -图片颜色单一或者动态图时可以使用GIF
        png
        -png支持的颜色多,并且支持复杂的透明
        --可以用来显示颜色复杂的透明的图片

        图片的使用原则
        效果不一致,使用效果好的
        效果一致,使用占用内存小的

        -->

        <img src="3.jpg" alt="这是纸尿裤" width="150px"/>
    </body>

原文地址:https://www.cnblogs.com/caicaihong/p/9167393.html

时间: 2024-10-29 13:11:42

HTML图片标签的相关文章

html5仿小红书的图片标签功能

最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼. 上传页示例如下图: 可以看到最上面的①是展示区域,也是编辑标签的操作区域:中间②是可滑动的缩略图,在此选择要编辑的图片:最下面③是"添加图片"和"添加标签"两个按钮. 废话不多说,下面介绍具体实现思路. 首先就是要有"选择图片"的按钮. 1 <input type="file" name="fileToUpload"

UIWebView之获取所点位置的图片标签和src

UIWebView有自己的UIResgure,如果我们手动加入自己的GestureRecognize将不能识别,如UILongPressGestureRecongnizer. 在浏览网页的时候,如果看到喜欢的图片,想把它保存下来如何办呢? 我们可以自己写一个程序来实现,用uiwebview开发一个自己的浏览器. 上面说到uiwebview不能识别long press gesture,幸好有一个可以识别,那就是double click.因此我们注册它,代码如下 UITapGestureRecogn

cocos2d-x之 利用富文本控件解析xhml标签(文字标签,图片标签,换行标签,标签属性)

执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (node!=nullptr) { if (node->ToText()) { CCLOG("文本信息:%s",node->ToText()->Value()); auto n=node->ToText(); std::u16string text; StringUti

html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftmargin   左边距 rightmargin 右边距 bottommargin  下边距 body属性用法示例: 格式控制标签: <font color="" face="" size=""></font> 分别控制字体的颜

【JavaScript】加载失败的红叉图片处理与&lt;img&gt;图片标签的onerror事件

大家上网的时候肯定见到过加载失败的红叉图片,具体如下图.当然现在Google Chrome与Firefox对其处理会好看一些. 其实可以利用<img>图片标签的onerror事件对其处理的,要求其加载失败之后,马上加载一张默认图片,而不是显示为红叉叉. 其代码如下: <img src="s.png" onerror="javascript:this.src='xx.png';this.width=80;this.height=80;" />

HTML学习笔记——块级标签、行级标签、图片标签

1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

表格标签,图片标签,框架标签,表单标签

一)表格标签 <table>标签 表格里面需要设置单元格的行,在行内设置单元格代表该行的列. 通过改变table的属性还有单元格的属性可以设置单元格的跨度,字体,对齐方式等. 示例: <table align="center" border="1px" width="400pt" height="300pt"> <tr> <th colspan="3">学习成

图片标签img中alt与title的区别

大家可以来做测试:把以下代码保存的文本中,命名为*.html结尾的文件,然后分别用不同浏览器打开. 代码: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head><title>图片标签img中al

3.1.1图片标签和列表标签

一,插入图片标签<img src=图片的地">img常用的标签 属性 说明 src 图像的源文件 alt 提示文字 width,height 高度,宽度 border 边框 vspac 垂直间距 hspace 水平间距 二,建立有序列表 原文地址:https://blog.51cto.com/14224115/2370095

图片标签

图片标签 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>图片标签</title> </head> <body> <!-- 使用img标签来想网页中引入一个外部图片, img标签也是一个自结束标签. 属性: src:设置一个外部图片的路径 alt:可以用来设置在图片不能显示时,对图片的描述 搜索引擎可以通过al