1. Bold
<b> and <strong> : both have bold effects, <b> has no semantics, and <strong> has an emphasis effect (stronger than <em>). The usual tag <strong> is used instead of the bold tag <b> .
<b>定义粗体文本</b>
<strong>定义加重语气</strong>2.Italic
<i> and <em> : both have italic effects, <i> has no semantic meaning, and <em> has an emphasis effect. Usually <em> is used instead of <i> tag.
<i>定义斜体字</i>
<em>定义着重文字</em>3. Superscript and subscript
<sup> : Define superscript words; <sub> : Define subscript words.
<sup>定义上标字</sup>
<sub>定义下标字</sub>4. Delete text
<del> : Add a strikethrough to deleted text.
<del>被删除的文本</del>5. Small font
<small> : Change the font-size of the font to smaller.
<small>定义小号字</small>6. Insert text
<ins> : Define insertion words, underlined.
<ins>定义插入文本</ins>7.HTML "Computer Output" Tag
<code> : Defines computer code to format the text in the document.
<p>你好呀<code>Hello World</code></p><pre> : Defines preformatted text. The text enclosed in the pre element usually retains spaces and line breaks, and the text is rendered in a fixed-width font. Common applications: Used to represent computer source code.
<pre>
使用pre标签
对空行和 空格
展示与控制
</pre>
<pre>
pre标签很适合显示程序代码:
let arr = [1, 2, 3]
for (let index = 0; index < arr.length; index++) {
const item = arr[index];
console.log(item);
}
</pre><kbd> : Define keyboard code and format text in the document.
<p>键入<kbd>refresh</kbd>刷新页面。</p><samp> : Phrase tag used to define sample text for a computer program.
<p>定义<samp>计算机样本</samp></p><var> : Define variables to format text in the document.
<p>定义<var>变量</var></p>8.HTML citations, quotes, and tag definitions
<abbr> : Define an abbreviation. You can see the full name after placing the mouse on it. It can also be used for comments.
<p>我在学习<abbr title="Hyper Text Markup Language">HTML</abbr></p><address> : defines the address, tag defines the contact information of the document author/owner. The text of an element is usually rendered in italics, with automatic line wrapping before and after the element.
<div>
欢迎联系我
<address>我的邮箱是：<br />[email protected]</address>
谢谢！
</div><bdo> : Define the text direction, overriding the default text direction. dir attribute to control the direction: ltr (left to right): default, from left to right; rtl (right to left): right to left.
<p><bdo dir="ltr">该段落文字从左到右显示。</bdo></p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><blockquote> : Defines a block quote (paragraph quote) taken from another source. Differences from <q>: block-level elements, with left and right 40px outer spacing by default, without "", and the font style changes.
<div>
<span>注意：</span>
<blockquote cite="http://www.abc.org/index.html">
我是另一个源块文字。
</blockquote>
</div><q> : Defines a reference to a short text. Difference from <blockquote>: Inline elements will have "" at the beginning and end of the content, and the font will be italic.
<p>注意：<q cite="http://www.abc.org/index.html">我是一段引用文字。</q></p><cite> : Define citation, citation, and indicate the source of the citation.
<div>
<blockquote>
<pre>
红豆生南国，春来发几枝。
愿君多采撷，此物最相思。
</pre>
</blockquote>
<p>摘自：<cite>唐·王维《相思》</cite></p>
</div><dfn> : Definition item, which is a phrase tag.
<p>定义<dfn>项目</dfn></p>Note: Each tag has its meaning. All tags are used to better highlight the semantic effect of HTML. If you only use this tag to achieve a certain visual effect, it is recommended that you use CSS.