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

1. HTML是什么❓

HTML全称是 超文本标记语言(HyperText Markup Language), 主要用来结构化Web网页以及其内容的标记语言，而并不是一门编程语言。
HTML由一系列元素组成，这些元素使得不同部分的内容以不容的方式呈现，例如：将一段重要文字加粗，改变文字字号。

2. HTML元素

2.1 元素的主要部分

开始标签
结束标签
内容

这三者结合即一个完整的元素。
⚡tips:
空标签可以闭合，例如<img>标签，这个标签并没有</img>结束标签，也没有内容，仅表示向所在位置嵌入一个图像。

2.2 元素的属性：

属性中包含的是元素的额外信息，这些信息本身不显示内容之中。下例中， id属性为元素提供一个表示名称，方便后续进行其他操作时候查找使用。

<p id="note">这是我的第一篇笔记 </p>

⚡tips:

属性值推荐使用双引号包裹
属性与元素名称/上一个属性值之间的空格符
标签属性不区分大小写，推荐使用小写

3. HTML文档

上述内容介绍了HTML元素，而一个完整的HTML页面由元素之间彼此协同构成。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first note</title>
  </head>
  <body>
    <h1>Note</h1>
    <img src="images/first.png" alt="My first note">
  </body>
</html>

<!DOCTYPE html>: 保证文档正常读取.
<html></html> ：根元素，包含页面的整个内容.
<head></head> ：该元素包含的内容不会在浏览器中显示，作用是保存页面的一些元数据，例如面向搜索引擎的搜索关键字，指向CSS的链接(如果选择的是使用CSS来为HTML内容添加样式)和字符编码声明等都在其中。大型页的<head>往往会包含很多元数据！
<meta charset="utf-8">：指定文档使用 UTF-8 字符编码，UTF-8 基本上可以处理任何文本内容。
🔊一个页面中的元素可以有很多种不同种类的<meta>元素，除了指定文档的字符编码，还可以使用标签定义页面的作者以及一些关键字,这其实就是一个搜索引擎优化（SEO）行为，它会使得页面在搜索引擎的相关搜索出现得更多。
<title></title> : 设置页面的标题，也作为收藏网页的描述文字。注意区分<h1>是为body添加标题的，而<title>元素为文档添加标题,是会显示在浏览器上的。
<body></body>: 包含用户在访问页面时看到的内容，包括文本、图像、视频、游戏、或其他内容。

4. 谁在使用HTML

开发者：修改以及维护页面
浏览器：展示页面
搜索引擎：提取关键字、排序
屏幕阅读器：给视力障碍人去读页面内容
⚡相关内容： HTML表格更高级的功能，以及表格的无障碍访问性。

🤔总结感悟：
HTML专注于传达内容本身，而不是样式。作为前端学习者，我们需要了解每个标签和属性的含义，但是更重要的是思考当描述一个具体内容时采用什么标签是最合适的。

HTML | 青训营笔记

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