Using invalid HTML I can get the look I want, but not using valid HTML. Is there CSS that allows me to configure <FIGURE> or <FIGCAPTION> to simulate the effect of <SPAN>?
I want the look of it to be on the left and the valid HTML on the right.
Invalid HTML:
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>
Valid HTML:
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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You should check the user agent value using development tools
For example, the first element under TD is ul or figure. The standards in Chrome are as follows:
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; }So if you want to keep figure with ul layout, add figure in your style, override the attributes that break the layout, and add the required attributes.
Just add some styles to reset the default styles.
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>