HTML标签分类及实践_<!doctype html><html lang="en"><head> <meta charse-优快云博客

本文链接：https://blog.youkuaiyun.com/iotzzh/article/details/136261567

通过上一节的了解，我们知道html标签是构建网页结构的关键，而且它的种类繁多。为了更好的了解和使用它们，本章节将在功能上对它们进行分类，了解这些标签的功能。如果有分类不太精准的地方，还望不吝指正。
当然这些标签并不是都需要记住，最初只需要记住常用的即可。随着不断的使用，慢慢就会熟悉大部分标签的。

文档基础标签

<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<head> 定义关于文档的信息。
<title> 定义文档的标题。
<body> 定义文档的主体。
 定义注释。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 注释内容 -->
</body>
</html>

格式标签

<h1> to <h6> 定义 HTML 标题。

<p> 定义段落。

<br> 定义简单的折行。

<hr> 定义水平线。

<acronym>: 定义只取首字母的缩写。

<abbr>: 定义缩写。

<address> 定义文档作者或拥有者的联系信息。

<b> 定义粗体文本。

<bdo> 定义文字方向。

<big> 定义大号文本。

<blockquote> 定义长的引用。

<center> 不赞成使用。定义居中文本。

<cite> 定义引用(citation)。

<code> 定义计算机代码文本。

<del> 定义被删除文本。

<dfn> 定义定义项目。

<em> 定义强调文本。

<font> 不赞成使用。定义文本的字体、尺寸和颜色

<i> 定义斜体文本。

<ins> 定义被插入文本。

<kbd> 定义键盘文本。

<s> 不赞成使用。定义加删除线的文本。

<samp> 定义计算机代码样本。

<small> 定义小号文本。

<strike> 不赞成使用。定义加删除线文本。

<strong> 定义语气更为强烈的强调文本。

<sup> 定义上标文本。

<sub> 定义下标文本。

<tt> 定义打字机文本。

<u> 不赞成使用。定义下划线文本。

<var> 定义文本的变量部分。

<q>定义短的引用。

<pre> 定义预格式文本。

<time>[HTML5] 定义日期/时间。目前所有主流浏览器都不支持 <time> 标签

<mark>[HTML5] 定义有记号的文本。

<meter>[HTML5] 定义预定义范围内的度量。

<progress>[HTML5] 定义任何类型的任务的进度。

<rp>[HTML5] 定义若浏览器不支持 ruby 元素显示的内容。

<rt>[HTML5] 定义 ruby 注释的解释。

<ruby>[HTML5] 定义 ruby 注释。

<bdi>[HTML5] 定义文本的文本方向，使其脱离其周围文本的方向设置。

<wbr>[HTML5] 定义可能的换行符。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- h1 to h6 定义标题 -->
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

    <!-- p定义段落 -->
    <p>p标签：这是一个段落内容</p>
    <!-- <br> 定义简单的折行。 -->
    <br>
    <p>p标签：这是另一个段落内容,上面使用了br折行，下面有一个水平线</p>
    <hr>
    <!-- <acronym>: 定义只取首字母的缩写， abbr： 定义缩写，鼠标移入，会显示title内容 -->
    <acronym title="World Wide Web">WWW</acronym>
    <abbr title="etcetera">etc.</abbr>

    <!-- <address> 定义文档作者或拥有者的联系信息。 -->
    <address>
        地址 <a href="https://www.bing.com">www.iotzzh.com</a>.<br>
    </address>

    <b>加粗字体</b>

    <big>大号字体</big>
    <blockquote>
        这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，
        这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，
        这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用，这是一个长的引用
    </blockquote>

    <cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。</cite>
    <br>
    <code>function(){//这里是code}</code>
    <br>
    <del>被删除的文本</del>
    <br>
    <dfn>定义项目</dfn><br>
    <em>强调文本</em><br>
    <i>斜体文字</i><br>
    <ins>被插入文本</ins><br>
    <kbd>键盘文本abcd</kbd><br>
    <samp>计算机代码样本code</samp><br>
    <small>小号文本</small><br>
    <sup>上标文本</sup>
    <strong>语气更为强烈的强调文本</strong>
    <sub>下标文本</sub><br>
    <tt>打字机文本 abcd</tt><br>
    <var>var：文本的变量部分</var>
    <q>定义短的引用</q>
    <pre>定义预格式文本</pre>
    <p>这是一个被<mark>mark</mark> 的标签</p>
    <progress value="60" max="100"></progress>
<br>
    <!-- <bdo> 定义文字方向:ltr,rtl -->
    <bdo dir="rtl">定义文字方向</bdo><br>
    <!-- <bdi> 定义文本方向:ltr,rtl，auto -->
    <bdo dir="rtl">定义 <bdi dir="ltr">文本它的文本</bdi>方向</bdo>

    <p>这是在测试wbr标签，可能的换行符，如果文字太长，你想指定文本换行的位置，例如Zhang<wbr>Zhonghua, 那么它就会在该换行的时候，在Zhang后面选择换行，而不是对整个名字都换行</wbr></p>
</body>

</html>