这是我参与「第五届青训营」伴学笔记创作活动的第 1 天今天学到的东西都是HTML的，基础且有些标签不一定用的上，但学的多总会有用到的地方

1 HTML概述

HTML的全称为超文本标记语言是一种标记语言它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找。

2 head标签

2.1 什么是head标签

HTML中的<head>和<body>不一样，不会在浏览器中显示，包含的一般是一些元数据

2.2 title标签

<title>是整个HTML文档的标题，一般表现为网页最上方显示的名字

2.3 meta元素---元数据

2.3.1 指定文档中字符的编码

<meta charset="utf-8">

utf-8是一个通用的字符集，它包含了任何人类语言中的大部分字符

2.3.2其他类型的元数据

当你在看其他网站的源码时，你会发现很多其他的元数据，旨在向某些网站提供可使用的特定信息

3 HTML文本基础

3.1 标题和段落

h为header的缩写，所以h1、h2、h3、h4、h5、h6都是标题元素标签，他们分别代表从一到六级的标题

p标签则是paragraph段落的简写，内容表示一个段落

3.2 列表

列表包括无序列表和有序列表两种

3.2.1 无序列表

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

上面就是一段无序的html代码，效果如下

3.2.2 有序列表

<ol>
  <li>H</li>
  <li>T</li>
  <li>M</li>
  <li>L</li>
  <li>真好</li>
</ol>

上面是一段有序的html代码，效果如下

H
T
M
L
真好

3.3斜体字、粗体字、下划线

<i>被用来表达斜体的意义
<b>被用来表达粗体的意义
<u>被用来表达下划线的意义

4 高阶文字排版

4.1 描述列表

这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等

<dl>
  <dt>1</dt>
    <dd>描述1的内容</dd>
  <dt>2</dt>
    <dd>描述2的内容</dd>
  <dt>3</dt>
    <dd>描述3的内容</dd>
</dl>

4.2 引用

4.2.1 块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源

4.2.2 行内引用

使用<q>元素对内容进行引用标记，并设置cite属性指定引用资源

例子：

<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
  <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

4.3 缩略语

<abbr>常被用来包裹一个缩略语或缩写，并且提供缩写的解释

<p><abbr title="美国国家航空航天局（National Aeronautics and Space Administration）">NASA</abbr> 做了一些动人心弦的事情。</p>

4.4 标记联系方式

<address>用于标记联系方式

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

4.5 上标和下标

<sup>表示上标，常为表示数字的次数
<sub>表示下标，常委表示化学式的下标

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

咖啡因的化学方程式是 C8H10N4O2。

如果 x2 的值为 9，那么 x 的值必为 3 或 -3。

4.6 展示计算机代码

<code>: 用于标记计算机通用代码。
<pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。

4.7 时间和日期

<time>元素用于存放时间和日期，它的datatime属性用于标记日期

<time datetime="2023-01-15">2023年1月15日</time>

HTML介绍 | 青训营笔记