07/23 HTML ｜青训营笔记HTML简介 HTML HTML不是一门编程语言，而是用于构建网页基本结构及其内容的

这是我参与「第四届青训营 -前端场」笔记创作活动的的第1篇笔记

HTML简介

HTML

超文本标记语言(HyperText Markup Language)

HTML不是一门编程语言，而是用于构建网页基本结构及其内容的标记语言（markup language）
**超文本：**文本中包含指向其他文本的链接
标记语言：标记语言是一套标记标签 (markup tag)，它将文本以及文本相关的其他信息结合起来，展现出文档结构，如： HTML 、 XML 、 KML 、 Markdown 等等
HTML 使用标记标签来描述网页

HTML 文档

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们；浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

网页三大基本元素

html：网页基本结构
css：网页展现效果
js：网页功能行为

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

由尖括号包围的关键词，比如 <html>
成对出现的，比如 <b> （开始标签）和 </b>（结束标签）
标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML结构

▪️ 快捷键：**！+tab**

<!DOCTYPE html>   ← 文档类型              
<html lang="en">	← 页面根标签

<head>
  <meta charset="UTF-8">    ← 文件的字符编码
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> ← 防止页面缩放
  <meta http-equiv"X-UA-Compatible" content="ie=edge"> ← 如果在IE打开，告诉IE使用最新内核（IE11）
  <title>Document</title>
</head>

<body>

</body>
</html>

HTML页面结构

DOCTYPE

**<DOCTYPE HTML>**

常放在 HTML 文档最前面的位置加上后将按照 W3C 的 HTML5 标准解析渲染页面

HTML

**<html>**

网页的根元素 包含整个页面的内容

head

**<head>**

此标签对用户不可见其中包括面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等内容

body

**<body>**

该元素包含能够被用户访问到的内容 包括文本、图像、视频、游戏、音频等内容

meta

**<meta>**

常设置的内容有： charset/name/http-equiv

常用配置信息：

<meta charset="utf-8">定义文档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML基础">页面描述
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移动端，定义设备屏幕上用来显示网页的区域
<meta http-equiv="expires" content="31 Dec 2021">http头部

title

**<title>**

表示页面的标题，经常显示在浏览器的标签页上

style

<style> - CSS 的样式。

link

<link> - 表示跳转链接

几种常见的 link 方式如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
当前页面的favicon

<link rel="stylesheet" href="my-css-file.css">
链接到样式表

<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替换的样式表

script

<script> - 表示可执行脚本

<script type="text/javascript" src="javascript.js"></script>

三类script
- script：浏览器解析 HTML 时，如果遇到一个没有任何属性的 script 标签，将暂停解析先发送网络请求，获取该 JS 脚本的代码内容。
  
  然后使 JS 引擎执行该代码，在代码执行完毕后再恢复解析。
  
  具体如下图：
  
  script 阻塞了浏览器对 HTML 的解析，若获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，将会导致白屏或者用户看不到页面内容的情况
- defer（延迟）：当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML
  
  一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码
  
  具体如下图：
  
  如果存在多个 defer script 标签，浏览器（IE9及以下除外）将保证它们按照在 HTML 中的出现顺序进行执行，不会破坏 JS 脚本之间的依赖关系
- async（异步）：当浏览器遇到带有 async 属性的 script 时，获取该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML
  
  一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析并先使 JS 引擎执行代码，执行完毕后再进行解析
  
  具体如下图：
  
  如果在 JS 脚本请求回来之前，HTML 已经解析完毕，则立即执行 JS 代码，如下图所示：
  
  由于执行时间不确定async 是不可控的，在异步 JS 脚本中想要获取的某个 DOM 元有可能获取不到。并且如果存在多个 async，它们之间的执行顺序完全依赖于网络传输结果，因此无法确定