Heim > Web-Frontend > HTML-Tutorial > Detaillierte Erläuterung des Beispielcodes zum Einfügen von Bildern und Hinzufügen eines Kartenindex in HTML-Webseiten

Detaillierte Erläuterung des Beispielcodes zum Einfügen von Bildern und Hinzufügen eines Kartenindex in HTML-Webseiten

高洛峰
Freigeben: 2017-03-04 15:07:37
Original
2952 Leute haben es durchsucht

1. Im WEB unterstützte Bildformate:

GIF: kann 256 Farben speichern, unterstützt transparente Farben, unterstützt Animationseffekte
JPEG: unterstützt keine transparenten Farben und Animationen, Farben können be Bis zu 1670 Arten
PNG: unterstützt transparente Farben, unterstützt keine Animationen und hat bis zu 1670 Arten von Farben

2. Fügen Sie das Bild mit der Funktion in die Webseite ein. Tag:

src: Legen Sie das Bild fest, der Wert entspricht der Pfadstärke einer Bilddatei.
height: Legen Sie die Höhe des Bildes fest. Der Wert wird in Pixeln oder Prozent ausgedrückt (wird automatisch skaliert). proportional)
width: Legen Sie die Breite des Bildes fest, der Wert wird in Pixeln oder Prozentsätzen dargestellt
border: Fügen Sie dem Bild einen Rahmen hinzu
alt: Bildbeschreibungstext, der Wert dieses Attributs wird sein wird angezeigt, wenn das Bild nicht angezeigt wird
Titel: Dieses Attribut gibt an, dass der Wert dieses Attributs angezeigt wird, wenn die Maus auf dem Bild platziert wird, wenn es oben ist
align: Attributwert = links Das Bild befindet sich auf dem links, der Text ist rechts
rechts Das Bild ist rechts, der Text ist links
oberer Text ist vertikal oben
mittlerer Text ist vertikal zentriert
Unterer Text ist vertikal zentriert (Standard)
vspace: Der Attributwert ist Pixel und definiert den Leerraum oben und unten im Bild
hspace: Der Attributwert ist Pixel und definiert den Leerraum auf der linken und rechten Seite des Bildes Bild


Der Code lautet wie folgt:

<imgsrc="../../../素材库/001.jpg"height="300"width="200"border="10"alt="安踏正版"title="安踏正版"hspace="20"vspace="20"/>
<p>
<!--图文混排-->
<imgsrc="../../../素材库/001.jpg"height="300"width="200"align="left"/>
11、考试考得好,全靠同桌好。</p>
<p>12、在学校是那钱混日子,现在是拿日子混钱!</p>
<p>13、一些人,总要出卖他所有的,去换取他所没有的。</p>
<p>14、自爱,必先自私,唯有自私,才能大爱。</p>
<p>15、吉尼斯纪录:全世界最大的茶几面积为960万平方千米,可放置13亿杯具。</p>
<p>16、分手多没意思,有本事咱俩玩离婚!</p>
<p>17、走人民币的路,让人民无路可走!</p>
<p>18、三鹿奶粉,后妈的选择。</p>
<p>19、有一天小三哭了,因为出现了小四!</p>
<p>20、和你分手,因为,你连牵手都不配!</p>
<p>21、别在我面前摆POSE,我真怕忍不住想摔相机。</p>
<p>22、我们只是路人甲乙丙丁,在这花花世界集体游戏。无论你输我赢,到最后咱们都会一起GameOver!</p>
<p>23、我这一生一共做错两件事,其一是生出来,另一是活下去。</p>
<p>24、如果我死了,我的第一句话是:老子终于不用怕鬼了。</p>
<p>25、哥是文明人,所有脏话均已使用唾液消毒。</p>
<p>26、名人名言,你得先是名人了那才是名言,别人的屁都是名屁!你能比吗?</p><!--使用图像作为超链接用图像做超链图像会自动加上浅蓝色的边框点击了超链接后会变成紫色边框可以使用img标签中的border属性就边框去掉-->
<ahref="#"><imgsrc="../../../素材库/yingyue.png"border="0"alt="京津冀"/></a>
Nach dem Login kopieren

3. HTML-Kartenindex:

Kartenindex, also mit B. einen bestimmten Teil desselben Bildes als Hyperlink, können Sie viele Hyperlinks erstellen (Sie können dies über die Entwurfsansicht tun)

Der Code lautet wie folgt:

<!--
格式:<mapname="图象名称"id="图象名称">
<areashape="选取区块的形状"coords="坐标"href="URL"alt="文字说明">
</map>
<imgsrc="URL"USEMAP="#图象名称">
<map>声明整张图使用地图链接方式进行连接.
name,id指此图的名称.
<area>表示我们所要链接其中一点的区快
shape表示我们所选择的形状,如:rect矩形circle圆poly多边形
coords表示地图的坐标位置!!
-->
<imgsrc="../../../素材库/42a98226cffc1e173ec6f5894b90f603738de909.jpg"alt="MM"width="200"height="300"hspace="20"border="0"align="left"usemap="#Map"title="MM"/>
<mapname="Map"id="Map">
<areashape="rect"coords="39,99,76,137"href="#"alt="打你哦"/>
<areashape="circle"coords="94,200,17"href="#"alt="好大"/>
<areashape="poly"coords="87,50,119,50,121,70,91,67"href="#"alt="myeyes"/>
</map>
Nach dem Login kopieren

Fügen Sie ein Symbol hinzu zur Webseite: wird im platziert Weitere HTML-Webseiten zum Einfügen von Bildern und zum Hinzufügen von Kartenindex-Beispielcodes für detaillierte Erklärungen. Bitte achten Sie auf PHP für verwandte chinesische Websites!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage