html 语法

原创

1. 显示图片

显示一张图片

<div align=center>
<img src=img.jpg width="60%"/>
<p>title</p>
</div>

并列显示两张图片

<table><tr>
<td><img src=img1.jpg border=0 width="100%"></td>
<td><img src=img2.jpg border=0 width="100%"></td>
</tr></table>

2. 输出一段空行

<p>这是第一段文本。</p>
<br>
<p>这是第二段文本，它与第一段文本之间空了一行。</p>

这是第一段文本。

这是第二段文本，它与第一段文本之间空了一行。

3. 句子的基本设置

<p style="color: red;">这是红色文本。</p>
<span style="color: red;">这是红色文本。</span>

上面是影响的整行的文本，如果想要影响部分文本，可以使用第二个，会展示 style 和 span 的区别

3.1 设置句子的颜色

<p style="color: red;">这是红色文本。</p>
<p style="color: blue;">这是蓝色文本。</p>
<p style="color: green;">这是绿色文本。</p>
<p style="color: #008000;">这是绿色文本。</p>
<p style="color: #0000FF;">这是蓝色文本。</p>
<p style="color: #FF0000;">这是红色文本。</p>
<p style="color: #008000;">这是绿色文本。</p>
<p style="color: #0000FF;">这是蓝色文本。</p>
<p style="color: #FF0000;">这是红色文本。</p>

这是红色文本。

这是蓝色文本。

这是绿色文本。

这是绿色文本。

这是蓝色文本。

这是红色文本。

这是绿色文本。

这是蓝色文本。

这是红色文本。

3.2 设置句子的字体

<p style="font-family: 'Times New Roman';">这是 Times New Roman 字体。</p>
<p style="font-family: 'Arial';">这是 Arial 字体。</p>
<p style="font-family: 'Courier New';">这是 Courier New 字体。</p>
<p style="font-family: 'Georgia';">这是 Georgia 字体。</p>
<p style="font-family: 'Helvetica';">这是 Helvetica 字体。</p>
<p style="font-family: 'Verdana';">这是 Verdana 字体。</p>
<p style="font-family: 'Tahoma';">这是 Tahoma 字体。</p>
<p style="font-family: 'Trebuchet MS';">这是 Trebuchet MS 字体。</p>
<p style="font-family: 'Palatino';">这是 Palatino 字体。</p>
<p style="font-family: 'Bookman';">这是 Bookman 字体。</p>
<p style="font-family: 'Comic Sans MS';">这是 Comic Sans MS 字体。</p>
<p style="font-family: 'Impact';">这是 Impact 字体。</p>
<p style="font-family: 'Lucida Sans Unicode';">这是 Lucida Sans Unicode 字体。</p>

这是 Times New Roman 字体。

这是 Arial 字体。

这是 Courier New 字体。

这是 Georgia 字体。

这是 Helvetica 字体。

这是 Verdana 字体。

这是 Tahoma 字体。

这是 Trebuchet MS 字体。

这是 Palatino 字体。

这是 Bookman 字体。

这是 Comic Sans MS 字体。

这是 Impact 字体。

这是 Lucida Sans Unicode 字体。

3.3 设置句子的字体大小

<p style="font-size: 16px;">这是 16px 字体。</p>
<p style="font-size: 18px;">这是 18px 字体。</p>
<p style="font-size: 20px;">这是 20px 字体。</p>
<p style="font-size: 22px;">这是 22px 字体。</p>
<p style="font-size: 24px;">这是 24px 字体。</p>
<p style="font-size: 26px;">这是 26px 字体。</p>
<p style="font-size: 28px;">这是 28px 字体。</p>
<p style="font-size: 30px;">这是 30px 字体。</p>

这是 16px 字体。

这是 18px 字体。

这是 20px 字体。

这是 22px 字体。

这是 24px 字体。

这是 26px 字体。

这是 28px 字体。

这是 30px 字体。

3.4 设置句子高亮等

<p style="font-weight: bold;">这是加粗文本。</p>
<p style="font-style: italic;">这是斜体文本。</p>
<p style="background-color: yellow;">这是高亮文本。</p>
<p style="text-decoration: underline;">这是下划线文本。</p>
<p style="text-decoration: line-through;">这是删除线文本。</p>
<p style="text-decoration: underline line-through;">这是下划线和删除线文本。</p>
<p style="font-weight: normal;">这是正常文本。</p>

这是加粗文本。

这是斜体文本。

这是高亮文本。整行影响

这是高亮文本。只影响内部字体

这是下划线文本。

这是删除线文本。

这是下划线和删除线文本。

这是正常文本。

本文由 Yonghui Wang 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jun 20, 2025 09:27 pm