HTML总结

标签：总结缓存浏览器元素 HTML 文档服务器页面

一、文档声明

<!DOCTYPE html>告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析HTML文档
文档声明需要放在文档最前面，不能省略，否则会有兼容性问题
HTML5的文档声明比HTML4.0、HTML1.0简洁很多

二、标准模式与怪异模式

由于历史原因，早期W3C标准还未制定，浏览器生产厂商之间都有各自的网页渲染、展示标准。在W3C标准制定后，总的来说归为两大类渲染展示模式：标准模式和混杂模式（怪异模式）。对于没有文档声明的采用混杂模式进行解析，对于有文档声明的大多采用标准模式解析。
二者区别：
- 标准模式下，浏览器根据规范呈现页面；混杂模式下，页面以一种比较宽松的兼容方式显示。
- 它们最大的不同是对盒模型的解析。在标准模式下，width用作内容content宽度，元素的真正宽度=width+margin+border+padding。在混杂模式下，width用作元素的实际宽度，内容content宽度=width-margin-border-padding。

三、HTML语义化

根据html文档的结构，在合适的位置使用正确的标签
语义化的优点：
- 利于开发者阅读
- 更好地支持SEO
- 方便其他设备解析（如：屏幕阅读器、盲人阅读器）
有哪些语义化标签
- header、nav、section、main、article、aside、footer....

四、src和href的区别

src和href都是HTML中用来引用外部资源的属性，主要区别如下：

用途和请求资源类型：
- src（source）主要用于嵌入到HTML文档中的资源，如图像、音频、视频或JavaScript文件。当请求src资源时，浏览器会将其指向的资源下载并应用到文档中。
- href（Hypertext Reference）则主要用于建立当前元素和文档之间的链接，指向一些网络资源，如CSS样式表、字体文件和网页链接等。href更多地被用作超文本引用，它并不要求浏览器下载所链接的资源。
引用方式和作用结果：
- src引用的资源是必需的，并且会在文档中占据一定的空间，直接影响文档的渲染和加载。
- href引用的资源则是可选的，不会占据文档的空间，仅用于指定链接到文档之外的资源。
解析方式：
- 浏览器解析到src时，它会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。这意味着src引用的资源会阻塞页面的加载。
- href则不会阻塞页面的加载，浏览器会并行下载资源，并且不会停止对当前文档的处理。

五、script标签中defer和async的区别

执行顺序
- defer：带有defer属性的脚本会按照它们在页面中出现的顺序执行，即使它们的下载完成顺序可能不同。这意味着，如果页面中有多个带有defer属性的脚本，它们会等待页面解析完成后再按照顺序执行。
- async：带有async属性的脚本不会按照它们在页面中出现的顺序执行，而是只要它们下载完成就会立即执行。这可能导致脚本的执行顺序与它们在页面中的顺序不一致。
执行时机
- defer：带有defer属性的脚本会在文档解析过程中异步下载，但不会阻塞文档的解析。这意味着，脚本会在文档解析完成后才执行，但不会影响到页面的渲染。
- async：带有async属性的脚本也会在文档解析过程中异步下载，并且不会阻塞文档的解析。但是，与defer不同的是，async脚本可能会在文档解析完成之前就开始执行，这取决于脚本的下载速度。

六、meta标签

meta标签用于描述一个HTML网页文档的属性，标签里的数据是供机器解读的，不会显示在用户界面上。它在搜索引擎优化（SEO）、页面加载与刷新、网页转换动态效果、页面缓冲控制、网页定级评价等方面发挥着重要作用。常用的meta标签有：

基本信息：
- <meta name="description" content="网页描述内容">：用于告诉搜索引擎网站的主要内容，有助于提高网站在搜索结果中的点击率。
- <meta name="keywords" content="关键词1,关键词2,...">：定义网页的关键词，有助于搜索引擎理解网页的主题。
- <meta name="author" content="作者姓名">：定义网页的作者。
- <meta name="generator" content="软件名称">：定义生成网页所用的软件。
- <meta name="copyright" content="版权信息">：定义网页的版权信息。
字符集设置：
- <meta charset="UTF-8">：定义网页使用的字符编码，UTF-8是一种兼容多种语言的编码方式。
视口设置（针对移动设备）：
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置网页在移动设备上的视口宽度和初始缩放级别。
页面重定向和刷新：
- <meta http-equiv="refresh" content="秒数;url=目标网址">：页面定时刷新或重定向到另一个页面。
搜索引擎爬虫指令：
- <meta name="robots" content="index,follow">：控制搜索引擎爬虫如何索引和跟踪页面。
IE浏览器兼容模式设置：
- <meta http-equiv="X-UA-Compatible" content="IE=edge">：指定IE浏览器使用其最新的渲染模式。
禁止缓存：
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">：禁止浏览器缓存页面。

七、浏览器渲染机制

解析HTML
- 浏览器向服务器发出请求获取对应的HTML文档，一旦接收到HTML文档，浏览器会开始解析它。这个过程是将HTML代码转换成一个DOM（文档对象模型）树。DOM树是一个节点和对象组成的树形结构，它表示了HTML文档的结构和内容。
- 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。
解析CSS
- 同时，浏览器也会解析HTML文档中的CSS样式信息。这些样式信息被解析成一个CSSOM（CSS对象模型）树。CSSOM树由样式规则和对象组成，它表示了HTML文档的样式信息。
- 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
构建渲染树
- 浏览器会将DOM树和CSSOM树合并成一个渲染树（Render Tree）。渲染树只包含需要显示的节点和样式信息，它会排除那些不可见（如display:none）或隐藏（如head标签中的内容）的节点。
布局
- 一旦有了渲染树，浏览器就会开始布局过程。布局是根据渲染树的信息来计算每个节点在屏幕上的确切位置和大小。这个过程也称为重排或回流。
绘制
- 布局完成后，浏览器会将计算出的位置和大小信息转换成实际的像素，这个过程称为绘制或重绘。绘制引擎会遍历渲染树，并使用UI后端层来绘制每个节点到屏幕上。
合成与显示
- 在某些情况下，浏览器可能会使用GPU来加速绘制过程，通过合成多个图层来优化渲染性能。最终，用户会在屏幕上看到渲染完成的网页。

整个渲染过程中，如果页面的内容或样式发生变化（例如，通过JavaScript修改DOM或CSS），浏览器会重新执行必要的步骤来更新显示。这可能会涉及到重绘和回流，其中回流通常比重绘的代价更高，因为它可能涉及到整个渲染树的重新计算和布局。

为了提高渲染性能，开发者可以采取一些优化策略，如避免不必要的DOM操作、使用CSS属性来触发重绘而不是回流、利用浏览器的缓存机制等。此外，了解设备的刷新率（如60FPS）也是关键，因为所有渲染操作最好能在一帧内完成，以确保流畅的用户体验。

八、从浏览器输入地址到页面渲染发生了什么

地址解析：浏览器解析地址，获取协议（如http或https）、主机名、端口号、路径等信息。
DNS解析：浏览器使用解析出的主机名（域名）向DNS服务器查询对应的IP地址。DNS服务器会返回与该域名关联的IP地址。该过程通常包含以下步骤：
- 本地解析：查询浏览器缓存、操作系统缓存以及本地host文件，看是否有对应的IP地址记录。
- 查询本地域名服务器：如果本地解析未找到对应的IP地址，浏览器会向本地域名服务器（LDNS）发送DNS查询请求。
- 递归查询：如果本地域名服务器的缓存中没有该记录，它会开始递归查询过程。这涉及向根域名服务器发送请求，获取顶级域名服务器的地址。然后，本地域名服务器会向顶级域名服务器发送请求，获取下一级域名服务器的地址，依此类推，直到找到正确的IP地址记录。
- 缓存与返回结果：一旦找到正确的IP地址记录，本地域名服务器会将其保存到自身的缓存中，以便下次查询时能够直接使用。同时，本地域名服务器会将查询到的IP地址返回给浏览器，浏览器使用该IP地址连接到服务器并获取请求的资源。
建立TCP连接：浏览器使用解析出的IP地址与服务器建立TCP连接。这通常涉及TCP三次握手过程，确保客户端（浏览器）和服务器之间的连接稳定可靠。三次握手步骤如下：
- 客户端发送SYN包：这个SYN包用于初始化TCP连接，并告诉服务器客户端想要建立一个新的TCP连接。SYN包中还会包含一个随机数（序列号），用于后续数据传输时确定数据包的顺序。
- 服务器发送ACK和SYN包：服务器接收到了客户端的SYN包，它会回复一个ACK应答包，表示确认客户端的请求。同时，服务器还会发送一个带有SYN标志的数据包给客户端，以完成连接的建立。在这个应答包中，序列号指的是服务器将要发送给客户端的第一个数据包的编号。
- 客户端发送ACK包：客户端接收到服务器的SYN+ACK包后，它会发送一个ACK包给服务器，以确认收到服务器的SYN包。至此，TCP连接就成功地建立了，客户端和服务器都可以开始向对方发送数据。
发送HTTP请求：一旦TCP连接建立，浏览器会向服务器发送HTTP请求。这个请求包含了请求的方法（如GET、POST等）、路径、头部信息（如User-Agent、Accept等）等。
服务器处理请求：服务器接收到HTTP请求后，会根据请求的路径和方法执行相应的操作。这可能包括查询数据库、执行代码、读取文件等。服务器处理完成后，会生成响应数据。这些数据通常包括HTML、CSS、JavaScript、图片等。
浏览器接收响应并解析：如问题七所述

这个过程可能受到多种因素的影响，如网络延迟、服务器性能、浏览器优化等。为了提高页面加载速度和用户体验，开发者通常会采取一些优化措施，如压缩文件大小、使用CDN加速、优化代码结构等。

九、重绘和回流

回流：回流（reflow）发生在当渲染树中的部分或全部元素的尺寸、结构、显示隐藏等发生改变时，浏览器需要重新计算元素的几何属性，并重新构建渲染树的过程。这涉及到页面布局的改变，比如添加或删除可见的DOM元素、元素尺寸或位置的变化、元素内容的变化以及浏览器窗口大小的变化等。回流是一个相对昂贵的操作，因为它可能涉及到整个页面的重新渲染。
重绘：重绘（repaint）发生在当页面的某些元素需要更新，但布局和几何属性没有改变时。浏览器只需要根据新的样式重新绘制这些元素，而不需要重新计算布局。因此，重绘的代价通常比重回流要小。
回流一定会触发重绘，因为页面布局的改变通常需要新的绘制操作来反映这些变化。但重绘不一定会引发回流，只有当元素的几何属性或布局发生改变时，才会触发回流。

十、BFC

BFC（Block Formatting Context，块级格式化上下文）是 CSS 布局的一个关键部分，用于决定块级元素如何布局以及如何与其他元素交互。一个块格式化上下文是一个包含块级盒子的区域，在这个区域中，普通流盒子的布局不会影响其它块级盒子的布局，也就是说在BFC中的元素布局不受外部元素影响。

BFC的特性
- 在同一个BFC里面，元素一个接一个在垂直方向上排布
- 在同一个BFC里面，垂直方向的间距通过 margin 产生
- 在同一个BFC里面，相邻元素之间margin会折叠
- 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的
- BFC中的元素不会与浮动元素重叠
- 计算BFC的高度时，浮动元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
BFC的应用
- 清除浮动：通过将父元素设置为BFC（例如，通过添加 overflow: hidden），可以确保父元素能够包含其浮动的子元素。
- 防止垂直外边距折叠：当两个相邻的块级元素的外边距相遇时，它们会折叠成一个外边距，这有时不是我们所期望的。通过将其中一个元素放入BFC，可以防止这种折叠。
- 布局控制：BFC可以用于创建复杂的布局，因为它允许元素独立于其外部元素进行布局。
BFC的创建
- 根元素（<html>）
- 浮动元素（元素的 float 不是 none ）
- 定位元素（绝对定位或固定定位）
- 行内块元素（display : inline-block）
- 表格单元格元素（display : table-cell）、表格标题（display : table-caption）
- 匿名表格单元格元素（display值为：table、table-row、table-row-group、table-header-group、table-footer-group）
- overflow元素（不为visible的块元素）
- 弹性元素（display 为 flex 或 inline-flex 的元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 的元素的直接子元素）
- display 值为 flow-root 的元素

十一、块级元素和行内元素

块级元素：默认占据一行，并垂直排列，无法在同一行内添加其他块级元素（除非使用浮动或特殊的CSS布局技巧）。块级元素可以设置宽度、高度、内外边距等属性，并且可以包含其他块级元素和行内元素。
- div、p、h1-h6、ul、ol
行内元素：不会独占一行，而是根据内容的大小在同一行内自动排列。它们的宽度和高度由内容决定，不能直接设置宽度和高度属性，只能设置行高（line-height）以及左右内边距。行内元素的内外边距只影响元素自身的排列，不会改变其他元素的位置。此外，行内元素不能包含块级元素，只能包含其他行内元素或文本内容。
- span、a、img、strong、em、input、label

十二、data属性的用法

data-*属性是HTML中的全局属性，被称为自定义数据属性。它允许我们在所有HTML元素上嵌入自定义数据，并通过脚本在HTML和DOM之间实现专有数据交换。

data-*属性的主要作用是为页面提供私有自定义数据，使页面具有更好的交互体验，无需使用Ajax或去服务端查询数据。

自定义的data-*属性并不会被浏览器直接解析或应用样式，它们主要是为JavaScript提供数据。同时，这些属性也不会被提交到服务器。

data-*的值的获取和设置方式
- 传统方法 getAttribute() 获取data-属性值； setAttribute() 设置data-属性值
- HTML5新方法
  - dataset.属性名 获取 data-属性名 对应的属性值；
  - dataset.属性名 = "属性值" 设置 data-属性名 对应的属性值
两种方式对比
- 传统⽅法⽆兼容性问题，但是不够优雅、⽅便
- HTML5新⽅法很优雅、⽅便，但是有兼容性问题
data属性的优势
- 使页面具有更好的交互体验，无需使用Ajax或去服务端查询数据。

十三、cookie，sessionStorage 和 localStorage 的区别

存储大小
- cookie的存储空间相对较小，通常只能存储大约4KB的数据，这是因为每次HTTP请求都会携带cookie，所以为了性能考虑，其大小被限制得较小
- sessionStorage和localStorage的存储空间则要大得多，可以达到5M或更大
数据有效期
- cookie的数据在设置的过期时间之前一直有效，即使窗口和浏览器关闭也不会丢失。
- sessionStorage的数据只在当前浏览器窗口打开时有效，一旦窗口关闭，数据就会被清除。
- localStorage的数据则始终有效，除非手动删除，窗口或浏览器的关闭也不会影响其数据的保存。
与服务器的交互方式
- cookie的数据会自动在浏览器和服务器之间传递，服务器端也可以写入cookie到客户端。
- sessionStorage和localStorage则不会自动把数据发给服务器，它们仅在本地保存。
数据共享
- cookie、sessionStorage和localStorage都遵循同源原则，即它们只能访问和修改与当前页面同源的数据。
- sessionStorage还有一个额外的限制，即它只能在当前页面内共享数据，不同浏览器窗口或标签页中的相同页面也无法共享。
应用场景
- cookie常用于判断用户是否登录，因为其在浏览器和服务器之间的自动传递特性使得其非常适合用于身份验证。
- sessionStorage则常用于存储会话数据，如临时状态或用户输入，因为它在窗口关闭时会自动清除数据。
- localStorage则常用于存储持久数据，如用户的偏好设置或购物车信息，因为它可以长期保存数据，直到用户手动删除。

十四、HTML5新特性

如何区分HTML5：DOCTYPE声明\新增的结构元素\功能元素，新特性如下：

语义化标签：HTML5引入了新的标签，如<header>, <nav>, <article>, <section>等，这些标签为网页内容提供了更好的描述和组织方式，提高了页面的语义化水平，有助于搜索引擎理解网页内容，同时也有助于提高无障碍性和可维护性。
视频和音频支持：HTML5支持在网页中通过<video>和<audio>标签直接嵌入视频和音频内容，无需依赖外部插件（如Flash）。这使得视频和音频的播放更加便捷、流畅，同时也提高了可访问性和可维护性。
Canvas和SVG：HTML5引入了<canvas>和<svg>两个标签，使得在网页上创建和展示矢量图形和动画更加容易。Canvas提供了一个原生的方法来创建交互式和动态的图形，而SVG则是一种基于XML的矢量图形标准。
Web存储：HTML5支持Web存储，包括localStorage和sessionStorage两种方式。
新技术：webworker, websocket, Geolocation。
响应式设计：HTML5支持响应式设计，使得网页能够根据设备的屏幕大小和分辨率自适应调整布局和样式，提供更好的跨设备浏览体验。
表单控件：HTML5增加了新的表单控件，如<date>, <time>, <email>, <url>等
移除元素：纯表现的元素（basefont，big，center，font, s，strike，tt，u）和对可用性产生负面影响的元素（frame，frameset，noframes）
支持html5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持html5新标签，浏览器支持新标签后，还需要添加标签默认的样式

可使用成熟的框架：如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

十五、浏览器缓存

缓存的原理
- 在首次请求后保存一份请求资源的响应副本，当用户再次发起同样的请求时，如果判断缓存命中，则拦截请求，将之前存储的响应副本返回给用户，从而避免重新向服务器发起资源请求。
缓存分类
- 缓存的种类：代理缓存、浏览器缓存、网关缓存、负载均衡器、内容分发网络等。这些大致可分为两类：共享缓存和私有缓存。共享缓存指的是缓存内容可被多个用户使用，如：公司内部的web代理；私有缓存指的是只能单独被用户使用的缓存，如：浏览器缓存。
- HTTP缓存是前端开发最常接触的缓存机制之一，可分为：强制缓存和协商缓存，二者最大的区别在于判断缓存命中时，浏览器是否需要向服务器进行询问。
浏览器缓存
- 浏览器缓存的优点
  - 减少冗余的数据传输
  - 减轻服务器压力
  - 加快客户端加载速度
- 浏览器缓存分类
  - 强缓存：不会向服务器发请求，直接从缓存中读取资源
  - 协商缓存：在使用本地缓存之前，需要向服务器发送请求。服务器根据请求头的一些参数，来判断是否命中协商缓存。如果命中，则返回304状态码并带上新的响应头，通知浏览器从缓存中读取资源。协商缓存可以解决强缓存情况下，资源不更新的问题。
强制缓存
- Expires：（已弃用）
  - 响应头中设置过期时间，浏览器再次请求该资源，如果在过期时间内，则命中强制缓存。
  - Expires设置以分钟为单位的过期时间
  - Expires优先级比Cache-Control低
- Cache-Control：
  - max-age=300：代表在这个请求正确返回时间的5分钟内再次请求资源，会命中强缓存。
  - Cache-Control以秒作为单位
协商缓存
- 设置协商缓存 : cache-control : -no-cache（不强制缓存）
- Last-Modify/If-Modify-Since：
  - 浏览器第一次请求某个资源，服务端返回的响应头会加上Last-Modify，Last-Modify用于标识该资源最后的修改时间，当浏览器再次请求该资源时，请求头会包含If-Modify-Since，该值为之前返回的Last-Modify。服务端收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。如果命中，则返回304状态码。如果不命中，则返回修改过的资源，设置状态码200。
  - Last-Modify使用秒作为单位，如果服务端资源在第一次请求后的1秒内做了修改，则在后面的请求中，无法判断资源已被修改，所以会继续走缓存。这是Last-Modify存在的一个问题。
- Etag/If-None-Match：
  - 服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定），发现资源具有Etag声明，则向服务器再次请求时带上请求头If-None-Match（Etag的值）。服务器收到请求后，发现有请求头If-None-Match，则与被请求资源的相应校验串进行比对，决定是否命中协商缓存。
  - Etag的值是资源文件对应的hash值（会加大服务器开销）
- Etag和Last-Modify的区别
  - Etag使用文件hash，Last-Modify使用修改时间，所以Etag更准确
  - Etag需要通过hash算法计算hash，会加大服务器压力
补充说明
- Cache-Control的属性值：
  - max-age=300：强缓存
  - -no-cache：协商缓存
  - -no-store：禁止浏览器缓存
  - -public：可以被所有用户缓存，包括终端用户和CDN等中间代理服务器
  - -private：只能被终端用户的浏览器缓存，不允许CDN等中继服务器缓存

十六、HTML5离线存储

离线存储的原理
- HTML5的离线存储功能主要基于一个新建的.appcache文件，这个文件包含了需要离线存储的资源清单。当用户的浏览器与网站建立连接时，浏览器会下载并存储这个清单文件及其指定的资源。此后，即使在没有因特网连接的情况下，用户也可以访问这些已缓存的资源。
- .appcache文件是一个简单的文本文件，它告诉浏览器哪些内容需要被缓存，哪些内容不需要。通过配置这个文件，你可以指定哪些HTML、CSS、JavaScript文件，甚至是图片和其他媒体文件，需要被存储在用户的本地浏览器中。
离线存储的优势
- 离线浏览：用户可以在没有因特网连接的情况下使用web应用，这大大提高了应用的可用性和用户体验。
- 速度提升：已缓存的资源加载速度更快，因为它们不需要从服务器重新下载。
- 减少服务器负载：浏览器只会从服务器下载更新过或更改过的资源，这有助于减轻服务器的负担。

十七、iframe

iframe是HTML中的一个标签，全称为inline frame，即内联框架。它可以在网页中嵌入其他页面或文档，将其他页面的内容以框架的形式展示在当前页面中。

优点
- 内容嵌入：iframe允许将其他网页或文档嵌入到当前网页中，使得在一个页面中展示多个页面内容成为可能，这大大丰富了页面的内容和交互方式。
- 代码复用：iframe可以将常用的代码片段封装成一个独立的页面，然后在其他页面中通过iframe引用，实现了代码的复用，提高了开发效率。
- 避免命名冲突：在团队开发中，不同的页面可能会使用相同的命名，如CSS类名或JavaScript函数名，通过iframe可以很好地避免这种命名冲突。
缺点
- SEO不友好：搜索引擎对iframe中的内容索引能力较弱，可能会降低被嵌入内容的搜索排名，影响网页的可见性。
- 性能问题：iframe的加载可能会阻塞页面的渲染，影响用户体验。同时，每个iframe都需要加载独立的网页或文档，增加了请求次数和页面加载时间，降低了页面的加载性能。
- 安全性风险：iframe可以加载来自不同域名的内容，这增加了恶意网页通过iframe进行钓鱼、欺诈等攻击的风险。
- 页面管理困难：iframe可能会产生很多页面，增加了管理的难度。同时，多个iframe框架之间如果存在滚动条，可能会分散用户的注意力，影响用户体验。
- 兼容性问题：在一些老旧的浏览器中，对iframe的支持可能存在兼容性问题，需要进行额外的处理和兼容性测试。

十八、视口

视觉视口（Visual Viewport）
- 视觉视口是指用户当前在屏幕上实际看到的网页区域。它的大小等同于移动设备的浏览器窗口的宽度。
- 用户可以通过缩放来查看网站的内容，而缩放操作仅影响视觉视口的大小，不会影响到布局视口的宽度。
- 视觉视口是用户看到的网页的即时呈现，可以随着用户的缩放操作而变化。
布局视口（Layout Viewport）
- 布局视口是浏览器用来布局网页内容的区域。它代表了网页的宽度，且一般移动端浏览器都默认设置了布局视口的宽度。
- 根据设备的不同，布局视口的默认宽度可能是768px、980px或1024px等。这样的默认宽度在移动设备屏幕上展示时，往往会导致网页内容过宽，需要用户左右滑动才能查看完整的一行内容。
- 布局视口在网页加载时确定，并且不会因为用户的缩放操作而改变。
理想视口（Ideal Viewport）
- 理想视口是指对于特定设备来说最理想的视口尺寸。当布局视口的尺寸与设备的屏幕尺寸相匹配时，就达到了理想视口的状态。
- 为了实现理想视口，通常需要在HTML文档的<head>部分添加meta视口标签，如<meta name="viewport" content="width=device-width, initial-scale=1.0">。这样，浏览器就会根据设备的实际宽度来设置布局视口的宽度，从而实现页面的理想展示。
- 理想视口的状态能够使得网页内容在移动设备上获得最佳的浏览和阅读体验，避免了用户因内容过宽而需要缩放或滑动的操作。

标签：总结,缓存,浏览器,元素,HTML,文档,服务器,页面
From： https://www.cnblogs.com/finish/p/18072703