Avec du HTML invalide, je peux obtenir l'apparence que je souhaite, mais pas avec du HTML valide. Existe-t-il un CSS qui me permet de configurer <FIGURE> ou <FIGCAPTION> pour simuler l'effet de <SPAN> ?
Je veux que son apparence soit à gauche et le code HTML valide à droite.
HTML invalide :
body {
margin: auto;
padding: 0 5px 0 5px;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12pt;
background-color: black;
color: white;
}
<UL>
<SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN>
<LI>
<SPAN style="color: DarkCyan">注释</SPAN>
</LI>
<LI>
<SPAN style="color: Coral">处理器指令</SPAN>
</LI>
<LI>
<SPAN style="color: HotPink">#ifndef name</SPAN>
</LI>
<LI>
<SPAN style="color: PaleTurquoise">库包含</SPAN>
</LI>
<LI>
<SPAN style="color: DarkSalmon">用户定义的包含</SPAN>
</LI>
<LI>
<SPAN style="color: Gold">库函数</SPAN>
</LI>
<LI>
<SPAN style="color: DarkKhaki">初始化函数</SPAN>
</LI>
<LI>用户定义的函数</LI>
<LI>
<SPAN style="color: DodgerBlue">关键字</SPAN>
</LI>
<LI>
<SPAN style="color: Red">重要符号</SPAN>
</LI>
</UL>
HTML valide :
body {
margin: auto;
padding: 0 5px 0 5px;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12pt;
background-color: black;
color: white;
}
<FIGURE>
<FIGCAPTION>
<SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN>
</FIGCAPTION>
<UL>
<LI>
<SPAN style="color: DarkCyan">注释</SPAN>
</LI>
<LI>
<SPAN style="color: Coral">处理器指令</SPAN>
</LI>
<LI>
<SPAN style="color: HotPink">#ifndef name</SPAN>
</LI>
<LI>
<SPAN style="color: PaleTurquoise">库包含</SPAN>
</LI>
<LI>
<SPAN style="color: DarkSalmon">用户定义的包含</SPAN>
</LI>
<LI>
<SPAN style="color: Gold">库函数</SPAN>
</LI>
<LI>
<SPAN style="color: DarkKhaki">初始化函数</SPAN>
</LI>
<LI>用户定义的函数</LI>
<LI>
<SPAN style="color: DodgerBlue">关键字</SPAN>
</LI>
<LI>
<SPAN style="color: Red">重要符号</SPAN>
</LI>
</UL>
</FIGURE>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez vérifier la valeur de l'agent utilisateur à l'aide des outils de développement
Par exemple, le premier élément sous TD est ul ou figure. Les standards dans Chrome sont les suivants :
ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; } figure { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 40px; margin-inline-end: 40px; }Donc, si vous souhaitez conserver la mise en page figure par rapport à ul, ajoutez une figure dans votre style, remplacez les attributs qui brisent la mise en page et ajoutez les attributs requis.
Ajoutez simplement quelques styles pour réinitialiser les styles par défaut.
ul { padding: 0; margin: 0; list-style-position: inside; }<FIGURE> <FIGCAPTION> <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN> </FIGCAPTION> <UL> <LI> <SPAN style="color: DarkCyan">注释</SPAN> </LI> <LI> <SPAN style="color: Coral">处理器指令</SPAN> </LI> <LI> <SPAN style="color: HotPink">#ifndef 名称</SPAN> </LI> <LI> <SPAN style="color: PaleTurquoise">库包含</SPAN> </LI> <LI> <SPAN style="color: DarkSalmon">用户定义的包含</SPAN> </LI> <LI> <SPAN style="color: Gold">库函数</SPAN> </LI> <LI> <SPAN style="color: DarkKhaki">初始化函数</SPAN> </LI> <LI>用户定义的函数</LI> <LI> <SPAN style="color: DodgerBlue">关键字</SPAN> </LI> <LI> <SPAN style="color: Red">重要符号</SPAN> </LI> </UL> </FIGURE>