HTML知识点汇总

# 1.DOCTYPE作用？

规定浏览器用什么标准解析文档。如果声明了就按照W3C和ECMAscript(ECMA-262)制定的标准(标准模式)，否则按照浏览器厂商的标准解析(兼容模式)。

# 2.SGML 、 HTML 、XML 和 XHTML 的区别？

SGML是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言。
HTML是超文本标记语言，用于显示网页。
XML是可扩展的标记语言，与HTML的区别是可以自定义标签，而HTML标签固定且有限。
XHTML就是严格化的HTML，比如标签必须小写，必须闭合等。

# 3.行内元素与块级元素的区别？

块级元素：常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

块级元素特点：

独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素。

p,h1,h2,h3,h4,h5,h6,dt，是文字类块级标签，里面不能放其他块级元素，如p 不能放div

行内元素：常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
除了左右内外边距是有效的，其他高、宽、上下内外边距直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。

特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

# 4.空元素（自闭合标签）定义

空元素就是标签内没有内容的HTML标签，比如常见有br hr img input link meta。这类标签的正确写法为<br> 或者 <br/>，在XHTML中严格要求使用第二种写法。

# 5.link标签的作用，与@import的区别？

link 标签用于定义文档与外部资源的关系。

与@import最基本的区别是，link除了导入样式表还可以定义RSS、引入网站的图标；并且link引入的CSS在加载页面时同时加载，而@import只能在页面加载完毕后才加载。

# 6.src和href的区别？

请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

# 7. 浏览器内核及渲染的理解

浏览器内核分为两部分：渲染引擎和JS引擎。但现在 JS 引擎越来越独立，内核就倾向于只指代渲染引擎。

常见浏览器使用的内核：Chrome、Edge、Opera是Blink内核；IE是Trident内核；Firefox是Gecko内核；Safari是Webkit内核；国产浏览器多是双内核或者使用以上内核。

浏览器渲染过程：

解析收到的文档，根据文档定义（DTD+DOCTYPE)构建DOM树，DOM树由HTML元素及属性节点组成；

解析关联的CSS文件，生成CSS规则树；

根据DOM树和CSS规则树构建render渲染树，同时隐藏的DOM元素不会被插入到渲染树中；

布局，确定渲染树中各节点的位置坐标；

绘制，使用UI绘制组件显示渲染树内容。

重绘：当渲染树中的元素只影响外观的属性改变时，比如color等样式改变则需要重新绘制页面。

回流：当渲染树中的部分或全部元素的尺寸、布局、隐藏等改变时需要重新构建渲染树，再进行布局和绘制的操作。

回流的成本很大，远大于重绘。导致回流的场景：

1. 添加或者删除可见的 DOM 元素； 2. 元素尺寸改变——边距、填充、边框、宽度和高度 3. 内容变化，比如用户在 input 框中输入文字 4. 浏览器窗口尺寸改变——resize事件发生时 5. 计算 offsetWidth 和 offsetHeight 属性 6. 设置 style 属性的值 7. 当你修改网页的默认字体时。

减少回流的方法：

1）不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。

2）把DOM离线后修改。如：

使用documentFragment 对象在内存里操作DOM
先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4）为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

5）不要使用table布局

# 8.async和defer的作用和区别？

正常情况，如果在页面文档解析过程遇到 JS 脚本，会立即执行，如果是外引文件，则立即下载这个资源并执行，也就会阻塞了页面的解析。

如果script标签有async="async" 这个属性会在网页解析的同时请求脚本资源，如果脚本加载好就立即执行，多个脚本的执行顺序无法保证，此执行过程也会阻塞网页解析。

如果script标签有defer="defer"这个属性也会在网页解析的同时请求脚本资源，只不过等待整个网页解析完成后再执行脚本文件。多个脚本按顺序执行。

# 9. DOMContentLoaded事件和Load事件的区别？

当HTML文档加载和解析完成后，触发DOMContentLoaded事件，无需等待样式表、图片等其他资源加载完成。

Load事件是当所有资源加载完成后触发的。

# 10.HTML5的新特性

语义化标签
增强型表单
<audio>和<video>的音媒体代替了flash
canvas和webGL对2D、3D图形的绘制
history API在vue路由中的使用
requestAnimationFrame解决了js动画时间精度问题
地理定位，可用于地图软件获取经纬度
本地存储localStorage和sessionStorage
webSocket用于实时直播、通信的全双工通讯技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            float: left;
        }
        figure{
            display: inline-block;
            margin: 0;
            border: 1px solid #000;
        }
        img{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 语义化标签的使用 -->
    <header>
        <h1>

        </h1>
        <nav>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h1>

                </h1>
            </header>
            <p>

            </p>
            <footer>
                <small>

                </small>
            </footer>
        </article>
        <aside>
            <h2>

            </h2>
            <!-- 图片+图片描述 -->
            <figure>
                <img src="1.jpg" alt="sunce">
                <figcaption>江东小霸王</figcaption>
            </figure>
            <!-- 日期，有疑义 -->
            <time datetime="PT 1D 3H 59M 59S">123</time>
        </aside>
    </section>
    <section>
        <!-- 地区联动下拉框 -->
        <input type="text" list="area">
        <datalist id="area">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="黑龙江">黑龙江</option>
            <option value="杭州">杭州</option>
            <option value="深圳">深圳</option>
        </datalist>
    </section>
    <section></section>
    <footer>
        <small>

        </small>
    </footer>
    <script>
        // web存储
        // localStorage.name='lwy';
        // console.log(localStorage.name)
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

# 11.你对HTML语义化的理解？

用正确的标签做正确的事，使用语义化的HTML标签能使页面的结构更清晰，即便是因为一些原因CSS样式不能正确显示，也能便于理解；
相比于使用类名说明语义，不同的开发者命名会有很大差异，而语义化的HTML标签则更加标准，统一，因此方便了程序的维护；也方便了搜索引擎的解析和SEO。

# 12.b和strong的区别？i和em的区别？

从效果上看，b和strong都会将包围的文字加粗，i和em包围的文字会倾斜。
但strong和em是语义化的样式标签，除了文字外观上的改变，也有强调文本的作用，在使用阅读设备阅读网页时，strong还会重读。
em表示一般的强调文本，strong表示比em语义更强的强调文本。

# 13.前端需要注意的SEO？

合理的title、description、keywords：title中重要关键词靠前，description把页面内容高度概括，不要堆砌关键字；
语义化的 HTML 代码符合 W3C规范，更容易让搜索引擎理解网页；
重要内容的 HTML 代码放前面，尤其是h1和a标签里的内容；
搜索引擎不会抓取 iframe 和 js 输出的内容；
图片必须使用 alt 属性；
提高网站运行速度。

# 14.HTML5离线存储技术？

SessionStorage、LocalStorage用于客户端存储数据，如非关键字的Ajax数据；存储大小可达5M或更多；其中，localStorage存储的数据在浏览器关闭后不丢失，除非主动删除，sessionStorage存储的数据会在页面会话结束时清除，重新加载或恢复页面不会消失。

cookie用于记录用户身份，弥补http非持久链接的缺陷；存储大小不超过4k；设置的cookie只会在过期前一直有效，受Expires和max-age的影响（max-age优先）。

Application Cache用于存储静态资源，可离线访问网页。

# 15.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，就会请求manifest文件，如果是第一次访问，浏览器就会根据manifest文件中的内容下载相应资源进行离线存储。后续访问会先使用离线资源加载页面，然后对比服务器新的manifest文件，如果文件没有改变，不做任何操作；如果发生改变，就重新下载文件中的资源进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

# 16.iframe的使用有哪些缺点？

iframe的挂载的脚本会阻塞主页面的onload事件，解决办法是使用js动态设置iframe的脚本；
搜索引擎不会解读iframe中的网页内容，不利于 SEO，因为爬虫遇到iframe会认为网站受到了攻击；
浏览器后退功能失效；
小型移动设备不能完全显示iframe框架。

# 17.Label标签的作用？

当用户点击label标签时，会自动将焦点转到相关的表单控件上。

# 18.如何实现浏览器内多个标签页之间的通信？

使用websocket让服务器做中介者，当任一方发送消息时，服务器向所有建立连接的标签页推送消息；
使用localStorage，因为一个浏览器不同标签页公用一个localStorage，当一方对localStorage进行修改，另一方就可以监听到localStorage变化；
使用postMessage进行通信。

# 19.页面可见性（Page Visbility API）的用途？

通过监听网页的可见性，节省浏览器或服务器的资源。比如当用户不看网页，我们可以停止对服务器的轮询，网页动画，正在播放的音频或视频。

# 20.如何在页面上实现一个圆形的可点击区域？

使用area标签可以设定一个圆形且带有坐标的点击域；
使用border-radius：50%；设置一个div块；
使用js，监听点击事件，计算鼠标点击位置是否在规定的圆形区域内。

# 21.title和alt的区别？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。

# 22.Canvas和SVG有什么区别？

Canvas 是使用 JavaScript 绘制的 2D 图形，因为属于位图，所以对图形进行缩放时会出现锯齿；

SVG 是使用 XML描述 2D 图形的语言，其保存的是图形的绘制方法，因此进行缩放时不会失真。

# 23.渐进增强和优雅降级的定义？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

# 24. css reset 和 normalize.css 有什么区别？

reset 的作用是把所有浏览器的默认样式重置掉，解决浏览器间的样式不兼容；但存在一些性能上的问题，比如复杂的继承链，而且也重置了一些不必要的样式。

normalize.css 在保留浏览器自带样式的基础上，进行调整，使得浏览器间的样式表现一致，并且修复了一些浏览器的bug。

# 25.disabled 和 readonly 的区别？

disabled 指禁用 input 。input内容不会随着表单提交。

readonly 规定输入字段为只读。input 内容会随着表单提交。

但两者都能通过 js 脚本更改输入框的值。

# 26.前端性能优化

页面内容优化：

通过文件合并，CSS 雪碧图等方式减少 HTTP 请求数，
延迟加载，按需加载初次请求网页的资源，后续资源用户访问时在请求，
缓存加载过的资源，如果资源不常用则可以从 DOM 树中移除，
预加载

服务器优化：

使用 CDN（内容分发网络）利用就近的服务器返回用户请求的资源，减轻网络拥塞，提高资源请求时的响应速度，
服务端使用 Gzip、Deflate 等方式对传输的资源进行压缩，减少文件的体积，
尽可能减少 cookie 的大小，通过将静态资源分配到其他域名下，避免对静态资源请求时携带不必要的 cookie ,

代码优化：

把样式表放在页面的 head 标签中，减少页面的首次渲染的时间，
避免使用 @import 标签，
尽量把 js 脚本放在页面底部或使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染，
对 JavaScript 和 CSS 的文件进行压缩，减少文件的体积。

基础优化（开发阶段） 比较基础的优化像，将css，script写在外部，将script脚本放在最下面或者使用defer和async异步延迟加载资源；css中不用通配符，样式值为0时不需要单位；使用c3动画代替js动画，使用事件代理减少监听事件的个数。图片格式的选择，比如背景图用png格式，商品图用jpg格式等。

请求优化 减少HTTP请求的数量，比如对图片使用精灵图技术，base64编码；减少HTTP请求的大小，gzip压缩，js混淆，css压缩，图片压缩（缩略图）对dns缓存，减少dns的查找；使用内容分发网络CDN请求，同时不会携带cookie

进阶优化 使用预加载，提前缓存资源提高页面流畅性；使用懒加载减轻服务器压力，同时减少dom节点，提高流畅性。对于懒加载之前的图片，可将其从dom树中移除，缓存起来，需要时再添加回去，这样可减少回流耗费的资源。减少回流次数的一些方法。

# 27.前端优化：请求静态资源时不携带cookie

网站向服务器请求的时候会自动携带cookie，如果是在请求静态资源，不需要cookie的情况，会浪费流量，请求变慢。所以，把静态文件放在CDN，因为跨域请求不会携带cookie，这样可降低请求头的大小，减少请求时间。

# 28.图片格式的选择

矢量图与位图

矢量图是点线面通过计算的方式绘制的图像，优点是文件小、放大不会失真。位图是像素点拼接的图像，如jpg、png、gif等。位图的优点是显示的色彩层次丰富，缺点是文件大，放大图像会失真。

有损压缩和无损压缩

有损压缩jpg格式，会去掉容易被人们忽视的细节，然后使用附近的颜色利用渐变进行补充，不支持透明。无损压缩png格式，原理是先判断图象上哪些区域颜色是相同的，然后对出现的颜色进行索引，节省空间。如果图像上出现的颜色大于图片可以保存的颜色数量时就会丢失部分图像信息，所以有PNG8和PNG24可以存储更多的颜色。

综上

颜色较多的采用JPG存储，而颜色简单对比强烈采用PNG。在网页开发中，容器的背景、按钮、导航的背景等应该尽量用PNG格式，保证设计品质；其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

# 29.Waterfall 网页瀑布图

瀑布图是浏览器调试器中的一项工具，用来预览资源从请求到渲染消耗的时间，也可以用来排查页面卡顿的原因等。

# 30.扫描二维码登录网页原理？

浏览器获得一个临时 id，通过长连接等待客户端扫描带有此 id 的二维码后，从长连接中获得客户端上报给服务器的账号信息进行展示。

客户端点击确认后，获得服务器授权的令牌，进行随后的信息交互过程。当超时、网络断开、其他设备登录后，此令牌失效，从而对授权过程形成有效的安全防护。

# 31.从输入URL到打开页面发生了什么？

先确定输入的 URL 是否为本机地址，如果是则直接定位本机资源；
根据 URL 获取 IP 地址：

查看浏览器缓存是否有对应 IP 地址规则；
查看本地 hosts 文件；
查看本地路由器是否缓存；
向本地 DNS 服务器发送域名解析请求；
向上级 DNS 服务器查询解析域名。

三次握手建立 HTTP 连接，发起请求;（从应用层到服务器应用层）
服务器发送响应报文，识别状态码，四次挥手结束连接;
解析获取的 HTML 文档，进行页面渲染。

参考：
CavsZhouyou/Front-End-Interview-Notebook

作为前端复习用的html笔记