Learn HTML изображения и связанные с содержанием

IMG

<img>Изображение Изображение представляет собой технически, <img>метка не вставить изображение на веб - странице, но ссылка с изображения на странице. <img>Ярлык создан ссылается след изображения.

[Атрибут] сусло

1, ЦСИ: Адрес

2, альт: Изображение альтернативный текст для поисковых роботов разведки двигателя

[Дополнительные атрибуты]

1, высота: высота изображения

2, ширина: ширина изображения

3, ISMAP: изображение определяется как карта на стороне сервера изображений

4, longdesc: атрибут альт и тому подобное, чтобы обеспечить более 1024 символов текста описания

5, usemap: определить на стороне клиента usemap изображение карты изображения = «#元素的name或id属性”

<img src="test.jpg" alt="测试图片" width="100" height="100">

6, srcset: адрес и качество изображение, соответствующее указанному изображению. Атрибут Формат: Ширина изображения адрес ш разделены запятыми описано множество ресурсов. Для srcset, которые появились в единицах ш, можно понять, как качество изображения. Если визуальное качество области меньше этого значения, он может быть использован, конечно, браузер автоматически выберет возможный наименьшую изображение. Тем не менее, вы найдете, как ширина окна браузера становится большим, он также становится больше

Примечание: браузер будет автоматически соответствовать изображениям лучших шоу, если большая картинка с кэша на использовании большого изображения, а затем сузить это не станет небольшой картой

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">

7, размеры: размер, используемый для установки нулевой точки изображения промышленности, в основном имеем дело с гибкой планировкой. Формат атрибут: Ширина Описание медиа-запросы (поддержка пикселей), множество правил, разделенных запятыми

Примечание: Если свойство плюс размеры, вы найдете, как ширина браузера становится больше, она сохранила свой первоначальный размер. Таким образом, мы должны размеры и srcset два свойства с использованием

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">

8, crossorigin: использование грима ресурсов в холсте картине может прорвать ограничения междоменных

<img alt="plane" src="test.jpg" crossorigin="anonymous">

фигура

<figure>Элемент представляет собой отдельный кусок контента, и часто описывается (Надпись) <figcaption>используется в сочетании с, и в качестве отдельного опорного блока. рисунок обычно используется для вставки изображения, но он также может быть частью кода, изображений, музыки или видео

[] По умолчанию стиль

margin: 16px 40px;

figcaption

figcatption цифра используется для определения названия элемента, и должен быть первым или последним дочерним элементом элемента расположены фигуры. цифра может содержать только figcaption

<figure>
    <img src="abc.jpg" alt=""/>
    <figcaption>
        Website analytics for test...
    </figcaption>
</figure>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

карта

<map><area>属性一起使用来定义一个图像映射

注意:<img>中的usemap属性可引用<map>中的id或name属性(取决于浏览器),所以应同时向<map>添加id和name属性。

area

<area>用来定义图像热区,<area>总是嵌套在<map>标签中

【必须属性】

1、alt:替代文本

【可选属性】

1、coords:定义可点击区域的坐标

2、href:定义此区域的目标URL

3、nohref:排除某个区域(html5中已废弃)

4、shape:定义区域的形状

a、圆形(circ/circle) coords= “x,y,r” x,y是圆心坐标;r是半径

b、多边形(poly/polygon) coords = “x1,y1,x2,y2,x3,y3……” x,y是多边形每个顶点的坐标

c、矩形(rect/rectangle) coords = “x1,y1,x2,y2” x1,y1是左上角坐标;x2,y2是右下角坐标

d、全部区域default(默认)

注意:<area>标签采用"先来先得"的顺序,如果区域有重叠,以先出现的<area>为准

<img src="jihe.jpg" alt="几何图形" width="600" height="220" usemap="#map">
<map name="map" id="map">
  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四边形">
  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六边形">
  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12边形">
  <area shape="circle" coords="512,95,60" href="line0.html" alt="圆形">
</map>

发布了247 篇原创文章 · 获赞 9 · 访问量 7984

рекомендация

отblog.csdn.net/weixin_45761317/article/details/103931312