Maison > interface Web > tutoriel HTML > le corps du texte

Explication détaillée d'un exemple de code pour insérer des images et ajouter un index de carte dans des pages Web HTML

高洛峰
Libérer: 2017-03-04 15:07:37
original
2932 Les gens l'ont consulté

1. Formats d'image pris en charge sur le WEB :

GIF : peut enregistrer 256 couleurs, prend en charge les couleurs transparentes, prend en charge les effets d'animation
JPEG : ne prend pas en charge les couleurs et les animations transparentes, les couleurs peuvent être Jusqu'à 1670 types
PNG : prend en charge les couleurs transparentes, ne prend pas en charge l'animation et a jusqu'à 1670 types de couleurs

2. Insérez l'image dans la page Web à l'aide du bouton tag :

src : Définit l'image, la valeur est égale à la force du chemin d'un fichier image
hauteur : Définit la hauteur de l'image, la valeur est exprimée en pixels ou en pourcentage (sera automatiquement mis à l'échelle proportionnellement)
width : Définir la largeur de l'image, la valeur est en Représenté par des pixels ou des pourcentages
border : Ajouter une bordure à l'image
alt : Texte de description de l'image, la valeur de cet attribut sera affiché lorsque l'image n'est pas affichée
titre : Cet attribut indique que lorsque la souris est placée sur l'image La valeur de cet attribut sera affichée lorsqu'elle est en haut
aligner : Valeur de l'attribut = gauche L'image est sur le à gauche, le texte est à droite
à droite L'image est à droite, le texte est à gauche
le texte du haut est verticalement en haut
le texte du milieu est vertical Centré
Le texte du bas est verticalement centré (par défaut)
vspace : La valeur de l'attribut est en pixels, définissant l'espace vide en haut et en bas de l'image
hspace : La valeur de l'attribut est en pixels, définissant l'espace vide sur les côtés gauche et droit de l'image. image


Le code est le suivant :

<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>
Copier après la connexion

3. Index de la carte HTML :

Index de la carte, c'est-à-dire en utilisant une certaine partie de la même image comme lien hypertexte, vous pouvez créer de nombreux hyperliens (vous pouvez le faire en utilisant la vue conception)

Le code est le suivant :

<!--
格式:<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>
Copier après la connexion

Ajouter une icône vers la page Web : est placé dans la balise d'en-tête plus de pages Web HTML pour insérer des images et ajouter des exemples de codes d'index de carte pour des explications détaillées, veuillez faire attention à PHP pour les articles connexes !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal