HTML的概述
HTML的概念：
什么是HTML？
HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。它的作用是：负责描述文档语义的语言。
HTML是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
接下来，我们需要学习 HTML 中的很多“标签对”，这些“标签对”能够给文本不同的语义。
比如，面试的时候问你，<h1> 标签有什么作用？
- 正确答案：给文本增加主标题的语义。
- 错误答案：给文字加粗、加黑、变大。
HTML的结构
我们来看一个简单的html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
复制代码可以看出，HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div>，但也有少部分单标签（单边标记），如：<br />、<hr />和<img src="https://juejin.cn/post/images/1.jpg" />等。
<!DOCTYPE html>
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器；
<html></html>:
页面中最大的标签，我们称为根标签，它包裹着整个文档
<head></head>：
head 元素是所有头部元素的容器。位于 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。
title：指定整个网页的标题，在浏览器最上方显示，它有助于SEO搜索引擎优化。meta：提供有关页面的基本信息，上面的示例中charset就是告诉浏览器编码方式，是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。link：引入外部资源，如css
<body></body>：
body
面试常考：“常见的行内元素有哪些？” 或 “常见的块级元素有哪些？”
答：常见的行内元素有：
span, a, strong, em, br, label, i, font …，常见的块级元素有：div, p, ul, ol, form, h1-h6…
语义化标签
HTML5提供了新的语义元素来定义网页的不同部分，有利于我们构建目前主流的网页布局，如图：
<header>
- 展现介绍性信息
- 通常包含一组介绍性或是辅助导航的元素，如标题、Logo、导航栏、搜索框、作者名称等
- 不能放在
<footer>、<address>或者另一个<header>元素内部
<nav>
- 在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
- 用来放置一些热门的链接，不常用的链接通常放到footer里置于底部
<main>
- 定义页面的主要内容，一个页面只能使用一次。
- 如果是web应用，则包围其主要功能。
<article>
- 定义页面独立的内容
- 专注于单个主题的博客文章，报纸文章或网页文章
- article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
<section>
- 定义文档中的节（section）
- 比如章节、页眉、页脚或文档中的其他部分。
<aside>
- 表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容
- 通常放在侧边栏，用于展示广告、tips、引用内容，相关阅读，推荐视频等
<footer>
- 定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
HTML解析
浏览器请求得到资源文件(html、css、js)后，将他们渲染到浏览器屏幕上的这个过程，叫做关键渲染路径，优化这个过程则能大大提高性能
- 构建DOM树
- 渲染引擎会从上而下解析HTML文档并把标签转换成内容树中的DOM节点。
- 构建CSSOM树
- 浏览器根据style元素和外部css文件解析样式数据构建CSSOM树
- 构建Render树
- 将DOM树和CSSOM树合并成一个Render树
- 计算布局
- 根据渲染树来布局（Layout），以计算每个节点的几何信息
- 绘制
-
- 将各个节点绘制到屏幕上。
经典面试题
浏览器从输入url到页面展示发生了什么？
1. 解析url
2. 根据dns查找ip
3. 建立tcp连接（三次握手）
4. 发送http请求，查找缓存(强缓存与协商缓存)
5. 断开TCP连接（四次挥手）
6. 解析资源
复制代码
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
