L'img de
html5 n'est pas un élément de niveau bloc. img est un élément en ligne et est également un élément de remplacement. Il possède des attributs de largeur et de hauteur intégrés, de sorte que la balise img peut définir la largeur et la hauteur. img est un élément de remplacement en ligne. La hauteur, la largeur, le remplissage et la marge sont tous disponibles et l'effet est égal à celui des éléments de bloc.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
<img />
Utilisation de base des balises<img />
标签的基本使用浏览器支持
<img>
标签标签定义及使用说明
<img>
标签定义 HTML 页面中的图像<img>
标签有两个必需的属性:src 和 alt<img />
究竟是什么元素<img />
是行内元素还是块级元素?<img />
标签没有独占一行,所以是行内元素,这没啥问题既然是行内元素为什么能够设置宽高呢?
<img />
标签属于替换元素,具有内置的宽高属性,所以可以设置,具体解释看下面。从元素本身的特点来讲,可以分为不可替换元素和替换元素
元素相关的MDN解释
不可替换元素
(X)HTML
的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)<h1>我是标题</h1>
可替换元素
<img>
标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据 <input>
标签的type属性来决定是显示输入框,还是单选按钮等<img>、<input>、
都是替换元素。这些元素往往没有实际的内容,即是一个空元素<img src="tigger.jpg"/>
、<input type="submit" name="Submit" value="提交"/>
<img>
属于可替换元素<img>
同时具有行内元素,行内块,和块级元素的特性width
和 height
,可以设定<img>
的 width
和 height
时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度<img>、<input>
属于行内替换元素。height/width/padding/margin
Prise en charge du navigateur strong >
<img>
définition et utilisation de la balise DescriptionLa balise
<img>
définit une image dans une page HTMLLa balise <img>
Là sont deux attributs obligatoires : src et alt🎜<img />
De quoi s'agit-il exactement< Est-ce que img />
est un élément en ligne ou un élément de niveau bloc ? <img />
La balise n'occupe pas une ligne distincte, c'est donc un élément en ligne. Ce n'est pas un problème🎜🎜🎜<. span style="font- size: 16px;">Puisqu'il s'agit d'un élément en ligne, pourquoi la largeur et la hauteur peuvent-elles être définies ? 🎜<img />
est un élément de remplacement et a une largeur et une largeur intégrées. attributs de hauteur. Pour qu'il puisse être défini, voir ci-dessous pour une explication détaillée. 🎜🎜🎜Définition des éléments🎜🎜À partir des caractéristiques des éléments eux-mêmes, ils peuvent être divisés en éléments non remplaçables et éléments remplaçables🎜🎜🎜🎜Explication MDN liée aux éléments🎜🎜🎜Éléments non remplaçables🎜(X)HTML
sont des éléments non remplaçables, c'est-à-dire c'est-à-dire que leur contenu est directement exprimé Au client (comme un navigateur)🎜<h1>Je suis le titre</h1>
🎜🎜🎜Éléments remplaçables🎜< La valeur de l'attribut src de la balise img>
est utilisée pour lire les informations sur l'image et les afficher. si vous affichez le code (X)HTML, vous ne pouvez pas voir le contenu réel de l'image par exemple, selon <input> détermine s'il faut afficher une zone de saisie, un bouton radio, etc. 🎜-
<img>, <input>,
sont tous des éléments de remplacement . Ces éléments n'ont souvent aucun contenu réel, c'est-à-dire un élément vide🎜
- Par exemple :
<img src="tigger.jpg"/>
, <input type= "submit " name="Submit" value="Submit"/>
🎜
-
La nature des éléments remplaçables est la même que celle des éléments avec display:inline-block set 🎜🎜🎜Les éléments remplaçables spéciaux
-
<img>
sont des éléments remplaçables 🎜
-
<img>
ont à la fois des éléments en ligne et les blocs en ligne et les caractéristiques des éléments au niveau du bloc🎜
- Les éléments de remplacement ont généralement des dimensions intrinsèques, ils ont donc une
largeur
et une hauteur
, qui peuvent être définies - Par exemple, si vous ne le faites pas. Lorsque vous spécifiez la
largeur
et la hauteur
de <img>
, il sera affiché en fonction de son taille intrinsèque, c'est-à-dire la largeur et la hauteur de l'image lorsqu'elle est enregistrée 🎜🎜🎜
- Pour les éléments de formulaire, les navigateurs ont également des styles par défaut, notamment la largeur et la hauteur🎜
-
<img>, <input>
sont des éléments de remplacement en ligne. hauteur/largeur/padding/marge
sont tous disponibles. L'effet est égal à l'élément bloc🎜🎜🎜Tutoriel recommandé : "🎜Tutoriel vidéo HTML🎜"🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!