这是我参与「第四届青训营」笔记创作活动的第26天

HTML是什么

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

完整的HTML页面示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

剖析：

<!DOCTYPE html>: 声明文档类型。很久以前，早期的 HTML(大约 1991 年 2 月)，文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html> 是最短有效的文档声明。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于元素的内容。
<meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

HTML标签

360截图20220818231202626.jpg

360截图20220818231232026.jpg

360截图20220818231251294.jpg

360截图20220818231310120.jpg

360截图20220818231329390.jpg

360截图20220818231343588.jpg 示例：

<p>:可以将该行文字封装成一个段落（Paragraph）元素来使其在单独一行呈现

用法：<p>My cat is very grumpy</p>

通过使用标签<em>和</em>（在前面放置<em>打开元素，在后面放置</em>关闭元素）——这使得行内容变成斜体强调！

用法：<em>刀枪剑戟 斧钺钩叉</em>

结果： 360截图20220818232221568.jpg

在<strong>中，意味着这个单词被着重强调

元素<img>是用来在元素<img>所在位置插入一张指定的图片

 用法：
<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

属性：

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。

元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：

href: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。
title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

示例： <p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>

结果：
欲练葵花宝典，需引刀自宫

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如[`disabled`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-disabled) 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">

方便起见，我们完全可以将其写成以下形式 (我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有 disabled 属性，所以用户可以向其中输入 -->
<input type="text">

上面两段 HTML 代码产生的效果如下：

360截图20220818233837586.jpg

注意：

镶嵌元素要使元素正确的打开和关闭。

属性都是用单双引号来包裹都可以，但应注意单引号和双引号不能在一个属性值里面混用。

空格一个和多个含义是一样的。

HTML入门 | 青训营笔记

HTML是什么

完整的HTML页面示例

HTML标签

属性：

布尔属性

注意：