本文章 对各大学习技术论坛知识点，进行总结、归纳自用学习，共勉🙏
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
语义化的优点如下：
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：
src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。title 属性表示网页的标题，h1 元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而b是展示强调内容i 是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而 em 是emphasize（强调）的简写，表示强调的文本构成：结构层（html）、表示层(css)、行为层(js)
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。
优点：
目的是为了在移动端不让用户缩放页面使用的
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
每个表示的含义
with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度maximum-scale=1 指定用户能够放大的最大比例minimum-scale=1 指定用户能够缩小的最大比例编码格式不匹配
浏览器打开网页时,需要根据网页源代码的编码格式来解码。如果网页的编码格式与浏览器的编码格式不匹配,就会出现乱码。比如,网页的编码格式为 UTF-8,而浏览器的编码格式是 GB2312,那么就会出现乱码。
网页编码错误
在编写网页的时候,如果编码出现错误,也会导致浏览器打开网页时出现乱码。比如,在写 HTML 代码时,如果忘记给中文字符指定编码格式,就会出现乱码。
字体缺失
有些网页会使用比较特殊的字体,如果浏览器中没有这个字体,就会找不到对应的字符,从而出现乱码。
优点
可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
灵活性与复用性，可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余 。
动态加载内容，加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
方便地实现跨域访问，绕过同源策略限制，可以在主页面中嵌入来自不同域名的内容，实现跨域资源的集成和交互
集成第三方内容，方便集成广告、地图、视频播放器等第三方服务，这些服务往往需要独立的JavaScript和CSS，Iframe可以避免与主页面的样式和脚本冲突。
缺点
SEO不友好， 搜索引擎可能无法正确解析 iframe 中的内容，抓取和索引能力有限；可能影响页面的搜索引擎排名
性能影响，会阻塞主页面的 onload 事件
和主页面共享连接池,影响页面并行加载
安全性问题，Iframe可能被用于点击劫持、恶意脚本注入等安全攻击，需要开发者谨慎处理以确保安全
、 input 的 type 属性指定类型是 color 还是 date 或者 url 等)video,audio)navigator.geolocation.getCurrentPosition(callback))，允许Web应用访问用户的地理位置信息，为基于位置的服务提供支持sessionStorage 与 localStorage)document.querySelector()和 document.querySelectorAll())<html lang="en">
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
<script>
// 获取元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "RoyalBlue";
ctx.fillRect(50, 50, 100, 100);
</script>
</html>
在 JavaScript 框架变得流行之前，前端开发者经常使用 data- 属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
而现在，不鼓励使用 data- 属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。
| / | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 由谁来初始化 | 客户端或服务器，服务器可以使用 Set-Cookie 请求头 | 客户端 | 客户端 |
| 过期时间 | 手动设置 | 永久存储 | 会话存储 当前页面关闭时 |
| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 |
| 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过 Cookie 请求头，自动发送给服务器 | 否 | 否 |
| 容量（域名） | 4kb | 5MB | 5MB |
| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
把 标签放在 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。把