如果你需要快速查阅，那么就不要看下面的内容了。
菜鸟教程提供的HTML速查列表
以下的内容是解释每个HTML标签的工作方式与效果的。

[初始]文档结构

一个HTML文档通常需要先使用 <!DOCTYPE html> 与 <html> 作为开头， </html> 作为结尾。

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <meta charset="utf-8" >
    <meta name="description" content="页面介绍">
    <meta name="keywords" content="关键词">
  </head>
  <body>
    <h1 align="center">标题</h1>
    <!--内容-->
  </body>
</html>

body标签内

body 元素里的内容就是我们在浏览器窗口看到的内容，包括整个网页的内容和结构。

在body中常见的元素:
p h div ul ol li table （块级元素，使用时需要新起一行）
img a iframe span button input （行内元素，使用时可以和其他行内元素在同一行）

标题元素(h)

标题有6个级别，由h1到h6。

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

效果

段落元素(p)

HTML 可以将文档分割为若干段落。
一般段落都用 <p> 表示，而且每隔一个行就是一个段落。
不过你可以用 <br> 来在一个段落中回车。

在本站，此标签一般情况下不需要被添加。

文本格式化

文本格式化标记通常使用<i>、<b>、<u>、<del>、<sup>、<sub> 。
如果需要链接，会使用<a>

常用文本标记

这是<i>斜体</i>
这是<b>粗体</b>
这是<u>下划线</u>
这是<del>删除线</del>
这是<sup>上标</sup>字
这是<sub>下标</sub>字

效果
这是斜体
这是粗体
这是下划线
这是删除线
这是上标字
这是下标字

拼音/注释

这是<ruby>一段文字<rt>文字顶部的注释</rt></ruby>
可以作为<ruby>拼音<rt>pīn yīn</rt></ruby>注释
也可以作为<ruby>英文翻译<rt>English translation</rt></ruby>注释

效果
这是一段文字文字顶部的注释
可以作为拼音pīn yīn注释
也可以作为英文翻译English translation注释

span标签

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

行内文本颜色

调节颜色，我们一般使用CSS元素中的color来进行调整。
其中最常见的就是使用十六进制与直接使用颜色名称的。

这条文字<span style="color:#de95ba;">使用 十六进制 调整</span>字体的颜色
这条文字<span style="color:lightblue;">使用 颜色名称 调整</span>字体的颜色

效果
这条文字使用 十六进制 调整字体的颜色
这条文字使用 颜色名称 调整字体的颜色

行内文本不透明度

调节透明度，我们一般使用CSS元素中的opacity来进行调整。
opacity:1为透明度最高（完全不透明）
opacity:0为透明度最低（完全透明）

这条<span style="opacity:1;">文字的不透明度</span>为 1 ，完全不透明。
这条<span style="opacity:0.9;">文字的不透明度</span>为 0.9
这条<span style="opacity:0.8;">文字的不透明度</span>为 0.8
这条<span style="opacity:0.7;">文字的不透明度</span>为 0.7
这条<span style="opacity:0.6;">文字的不透明度</span>为 0.6
这条<span style="opacity:0.5;">文字的不透明度</span>为 0.5
这条<span style="opacity:0.4;">文字的不透明度</span>为 0.4
这条<span style="opacity:0.3;">文字的不透明度</span>为 0.3
这条<span style="opacity:0.2;">文字的不透明度</span>为 0.2
这条<span style="opacity:0.1;">文字的不透明度</span>为 0.1
这条<span style="opacity:0;">文字的透明度</span>为 0 ，完全透明。

效果
这条文字的不透明度为 1 ，完全不透明。
这条文字的不透明度为 0.9
这条文字的不透明度为 0.8
这条文字的不透明度为 0.7
这条文字的不透明度为 0.6
这条文字的不透明度为 0.5
这条文字的不透明度为 0.4
这条文字的不透明度为 0.3
这条文字的不透明度为 0.2
这条文字的不透明度为 0.1
这条文字的不透明度为 0 ，完全透明。

行内文本大小

调节文本大小，我们一般使用CSS元素中的font-size来进行调整。
其中最常见的就以下三种。

这条文字<span style="font-size:150%;">使用 百分比 调整</span>字体的大小
这条文字<span style="font-size:15px;">使用 像素单位 调整</span>字体的大小
这条文字<span style="font-size:smaller;">使用 形容词 调整</span>字体的大小

效果
这条文字使用 百分比 调整字体的大小
这条文字使用 像素单位 调整字体的大小
这条文字使用 形容词 调整字体的大小

[技巧]

使用此标签有的时候能做出很多特殊的东西，使用得当可以为文章的编写带来大帮助。

隐藏字

作为文章写手，隐藏字是一个很重要的东西。
而在这里， <span> 有两种渠道可以让你做出隐藏字，让你在文章中隐藏一段信息。

1.透明字体

透明字是广大文章作者最常使用的隐藏字方式，也是最好找出来的隐藏字。多用于meta文章中，有时也会作为隐藏线索使用。
在这里你可以使用两种隐藏字方式：

  • color:transparent （文本选中后直接显示内容）
  • opacity:0 （文本选中后不会直接显示文本内容与高亮提示，但可以复制出去）

下面是一个示例：

color:<span style="color:transparent;">其实Mount Rain很可爱的</span>
opacity:<span style="opacity:0;">Mount Rain是小男娘</span>

效果
color:其实Mount Rain很可爱的
opacity:Mount Rain是小男娘

那个……Just a joke.

2.font-size:0%

font-size:0 是比较少用的隐藏信息的方式，原理是将一堆信息夹在一个句子甚至词语当中。在复制信息时，会将这些 真·字里行间的信息 一并复制下来，所以需要将整句话复制下来才能看完整的信息。

复制下面这段话试试喵~
MR是一个比较安静的人，有的时候也会比较可爱，<span style="font-size:0;">虽然有的时候ta会像是雌堕了一样过于可爱，也可能会突然说一些糟糕的台词，但在正常交流中ta绝对不会进入这种状态的，所以说……我想</span>你可以与他认识一下<span style="font-size:0;">结个好缘</span>的。

效果
复制下面这段话试试喵~
MR是一个比较安静的人，有的时候也会比较可爱，虽然有的时候ta会像是雌堕了一样过于可爱，也可能会突然说一些糟糕的台词，但在正常交流中ta绝对不会进入这种状态的，所以说……我想你可以与他认识一下结个好缘的。

那个……是不是觉得信息量有点大……Just a joke,too.

链接（a 标签）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a href="url">Link text</a>

href 属性

href属性是a标签中必须含有的属性，它定义链接的地址。

<a href="https://mount-rain.link/">山雨的湖边小屋</a>

效果：
山雨的湖边小屋

target 属性

target属性用来定义被链接的文档在何处显示。
常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。

<a href="https://mount-rain.link/" target="_blank">复制一个山雨的湖边小屋</a>
<a href="https://mount-rain.link/" target="_self">直接进入山雨的湖边小屋</a>

效果：
复制一个山雨的湖边小屋
直接进入山雨的湖边小屋

title属性

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

不要点击这些链接，将鼠标悬停在上面试试吧。
<a href="https://mount-rain.link/" title=".link是真正的湖边小屋">山雨的湖边小屋</a>
<a href="https://mount-rain.wikidot.com/" title=".wikidot不是真正的湖边小屋">山雨的湖边小屋</a>

效果
不要点击这些链接，将鼠标悬停在上面试试吧。
山雨的湖边小屋
山雨的湖边小屋

[技巧]

使用此标签有的时候能做出很多特殊的东西，使用得当可以为文章的编写带来大帮助。

用图片来承载链接
<a href="https://mount-rain.link/">
<img border="0" src="https://mount-rain.link/usr/uploads/2023/08/654093848.png" />
</a>

效果




链接到邮箱
<a href="mailto:mount-rain@qq.com" target="_blank">联系Mount Rain</a>

效果：
联系Mount Rain

列表元素(ul,ol)

HTML 支持有序、无序和定义列表:

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3
    <ul><li>列表子项1
        <ol>
          <li>列表子子项</li>
        </ol>
      </li>
      <li>列表子项2</li>
    </ul></li>
  <li>列表项4</li>
</ul>

效果

  • 列表项1
  • 列表项2
  • 列表项3
    • 列表子项1
      1. 列表子子项
    • 列表子项2

  • 列表项4


有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3
    <ol><li>列表子项1
        <ul>
          <li>列表子子项</li>
        </ul>
      </li>
      <li>列表子项2</li>
    </ol></li>
  <li>列表项4</li>
</ol>

效果

  1. 列表项1
  2. 列表项2
  3. 列表项3
    1. 列表子项1
      • 列表子子项
    2. 列表子项2

  4. 列表项4


自定义列表(定义列表)

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>这是项目1</dt>
<dd>而这是项目1的定义</dd>
<dt>这是项目2</dt>
<dd>而这是项目2的定义</dd>
<dt>这是项目3</dt>
<dd>而这是项目3的定义</dd>
</dl>

效果

这是项目1
而这是项目1的定义
这是项目2
而这是项目2的定义
这是项目3
而这是项目3的定义

HTML文档分区元素(div)

div 标签可以用来划分 HTML 结构，从而配合 CSS 来整体控制某一块的样式。
div 标签是块级元素，它可用做组合其它 HTML 元素的容器。
div 标签可以用作严格的组织工具，如果用 id 或 class 来标记 div 标签，则 div 标签的作用会更加完美。

注意：div 比 p 的优先级大，所以说应该将 p 放进 div 里。

使用div的两种方法

  • 通过 class 来引用外部/文章内部的CSS。
  • 通过 style 来直接在div中编辑。

哦……你可能需要等我编写……