HTML/JavaScript/CSS
HTML

高频

标准（严格模式）与兼容模式（混杂模式）各有什么区别？

  • 在标准模式下，浏览器会按照HTML和CSS规范的最新标准解析和渲染页面，能提供更一致的渲染结果，但对错误的处理更加严格。
  • 在兼容模式下，浏览器会以一种更宽松的方式解析和渲染页面，以保持与旧版本浏览器的兼容性，但也可能导致不同浏览器之间的渲染结果不一致。

一般推荐使用最新的HTML5 DOCTYPE声明（<!DOCTYPE html>），以获得更好的一致性和可靠性。

哪些是行内（内联）元素，哪些是块级元素？

  • 行内元素不从新行开始，只占用必要宽度，不可以设置宽高，只能包含数据和其他行内元素。例如<a>、<span>等。
  • 块级元素从新行开始，占用全部宽度，可以包含其他块级或行内元素。例如<div>、<p>、<table>、<h>等。
  • 还有一些行内块级元素，它可以在一行中放置多个行内块级元素，也可以自由设置元素宽度和高度。比如：<input>、<img>、<button>、<textarea>

可以通过css属性display: inline|block改变元素的行内/块级属性。

了解重绘和重排吗？

  • 当Dom的变化影响到了元素的几何属性例如宽和高等，会引起浏览器重新计算元素的几何属性，并重新构建渲染树，这个过程称为重排。
  • 当一个元素发生外观上的变化例如颜色背景，就会重绘。重排必然引起重绘。

讲一讲HTML5有什么新特点？

  • 添加了许多语义化的标签。例如<main/><article/>
  • 增强了表单能力。
  • 支持音/视频的控制。
  • 支持Canvas/SVG绘图。
  • 增加了web storage。
  • 增加了web socket长联能力。

HTML5是2014年发布的，上一版HTML4.x是在2000年左右发布的。

在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

  • 浏览器检查当前url是否存在缓存和缓存是否过期
  • 如果过期了则根据DNS服务器进行域名解析得到ip，然后三次握手建立tcp连接
  • 返回页面报文，解析下载的HTML生成DOM树，解析下载的CSS生成CSS树
  • DOM树和CSS树合并为渲染树，然后根据渲染树绘制节点

script 标签中 defer 和 async 的区别？

  • <script> ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
  • <script async> ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
  • <script defer> ：完全不会阻碍 HTML 的解析，当页面已完成加载后，才会执行脚本。

元素的innerText outerText innerHTML的区别？

  • innerText和outerText取值都是对象起始和结束标签内部的文本内容。但是在设置的时候，outerText会把该标签也替换掉。
  • innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签。设置时是填充该标签内部。
  • outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签。设置时是连该标签也替换掉。
  • textContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换。
  • nodeValue 属性设置或返回指定节点的节点值。 nodeValue 属性的替代选择是 textContent 属性。nodeValue只适用于文本节点和属性节点，对标签节点不适用，返回null；

如何获取标签上的自定义属性？

使用.getAttribute('xxx')，如果是标签上的自有属性，则直接可以ele.xxx就行。

HTML中childNodes和children有什么区别？

  • Node：在 DOM 树中，所有的节点都是 Node，也就是说 Node 包含了 HTML 元素标签、文本、以及注释等等内容，它是所有 DOM 的基类。
  • Element：Element 是所有 HTML 标签的基类，也就是说 Element 只包含 HTML 元素标签。

Node 和 Element 两者是包含关系，Node 包含 Element。 从而衍生出了两个集合：NodeList 和 HTMLCollection。

  • NodeList 是 Node 的集合（childNodes）。
  • HTMLCollection 是 Element 的集合（children）。

虽然我们可以通过NodeType=1元素|2属性|3文本来辨别种类，但注释也会算进文本节点。

src和href的区别？

  • href：用于加上链接，点击就会跳转到这个链接，例如a标签。
  • src：用于用链接里的内容进行替换，例如img标签。

src和href都是用于外部资源的引入。

ArrayBuffer 和 Blob 对象的区别？

ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范，是 JavaScript 操作二进制数据的一个接口。

  • ArrayBuffer 对象是以数组的语法处理二进制数据。代表储存二进制数据的一段内存，它不能直接读写。 浏览器原生提供 ArrayBuffer() 构造函数，用来生成实例。
  • Blob 全称：Binary Large Object （二进制大型对象）。表示一个二进制文件的数据内容，通常用来读写文件。 浏览器原生提供 Blob() 构造函数，用来生成实例。

注意，Blob并不像ArrayBuffer是JS语⾔内置的，⽽是Web API，Node.js的API⾥就没有Blob。

Buffer是nodejs独有的。Buffer 是 Node.JS 中用于操作 ArrayBuffer 的视图，是 TypedArray 的一种。

TypedArray是一种特殊的数组，用于以特定的数值类型来读写ArrayBuffer的内容。

DataView提供了一种用于读写ArrayBuffer内容的低级接口。与TypedArray不同，DataView允许你以任意顺序和字节序来读写ArrayBuffer的不同部分。

XSS 攻击/ CSRF 攻击是什么？

  • Cross Site Script,跨站脚本攻击。是指攻击者在网站上注入恶意script代码， 通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。 比如攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户， 都有可能在他们的浏览器中执行这段恶意的 JavaScript 代码。

CSRF就是利用用户的登录态发起恶意请求。

响应式布局，怎么做移动端适配

首先，需要设置viewport的meta标签，将width设置为device-width：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • width=device-width: 让当前 viewport 宽度等于设备的宽度
  • user-scalable=no: 禁止用户缩放
  • initial-scale=1.0: 设置页面的初始缩放值为不缩放
  • maximum-scale=1.0: 允许用户的最大缩放值为 1.0
  • minimum-scale=1.0: 允许用户的最小缩放值为 1.0

然后可以使用：

  • 媒体查询方案
  • 动态 rem 方案

低频

在HTML5中DOCTYPE的作用是什么？

DOCTYPE（文档类型声明）是HTML中的一种标记，用于告诉浏览器使用哪个HTML版本解析文档。确保浏览器正确地渲染和显示网页内容。

meta标签的作用？

<meta> 标签定义关于 HTML 文档的元数据。这些数据用于描述整个文档。 通常用于指定字符集、页面描述、关键词、文档作者和视口设置，一个 HTML 文档中可以多个 meta 元素。

meta属性主要有：

  • name，规定元数据的名称，相当于key。值可以为author，keywords，description，viewport，application-name，generator
  • content，文本，相当于value，规定与 http-equiv 或 name 属性关联的值。
  • charset，字符集，规定 HTML 文档的字符编码。
  • http-equiv，为 content 属性的信息/值提供 HTTP 标头。可以为content-security-policy，content-type，default-style，refresh

用法例如：<meta charset="UTF-8">

网络与浏览器JavaScript