ZhenYu's 知识库

外观

html-基础知识

约 1227 字大约 4 分钟

htmlbase

2024-03-04

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

DOM - Document Object Model

BOM - Browser Object Model

1. Elements

1.1. <pre></pre>

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签（例如标题、 <p> 和 <address> 标签）绝不能包含在 <pre> 定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

<pre>{{ code }}</pre>

2. DOM

2.1. History

window.history.replaceState(null, null, url);

3. 3.BOM

3.1. MutationObserver

API 提供了监视对 DOM 树所做更改的能力 | 兼容性

const $body = document.getElementById('body');

// 需要注意兼容性问题
const MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;

// 观察器的配置（需要观察什么变动）
const config = {
  childList: true, // 子节点的变动（新增、删除或者更改）
  attributes: true, // 属性的变动
  characterData: true, // 节点内容或节点文本的变动
  subtree: true, // 是否将观察器应用于该节点的所有后代节点
  attributeFilter: [] // 要监视的特定属性名称的数组
};

const mutationObserver = new MutationObserver(function(mutations) {
  console.log('body 发生了变动：', mutations);
})

mutationObserver.observe($body, config);

3.2. IntersectionObserver

MDN / 参考文章

4. 事件

迁移文档

4.1. 事件和事件绑定的底层机制(40+42)

4.2. 什么是事件？什么是事件绑定？

事件：

浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要行为操作进行了，那么一定会触发相关的事件行为

事件绑定：

给元素的某一个事件行为绑定方法，目的是行为触发会可以做点自己想做的事情

4.3. 浏览器自带的事件

https://developer.mozilla.org/zh-CN/docs/Web/Events

  • 鼠标事件 (MouseEvent)
  • 键盘事件 (KeyboardEvent)
  • 表单元素常用事件
  • 移动端手指事件 (TouchEvent)
  • 音视频常用事件
  • 其它常用事件

4.4. 事件绑定 DOM0 事件绑定/DOM2 事件绑定

4.4.1. DOM0 事件绑定】

element.onxxx=function(){}

element.onxxx=null;

原理：给 DOM 元素对象的某一个私有事件属性赋值函数值，当用户触发这个事件行为，JS 引擎会帮助我们把之前绑定的方法执行的

  1. 不是所有的事件类型都支持这种方式，元素有哪些 onxxx 事件属性，才能给其绑定方法（例如：DOMContentLoaded 事件就不支持这种绑定方案）

  2. 只能给当前元素的某一个事件行为绑定一个方法（绑定多个也只能识别最后一个）

4.4.2.【DOM2 事件绑定】

element.addEventListener([事件类型],[方法],[传播模式])

element.removeEventListener([事件类型],[方法],[传播模式])

​function anonymous(){
​   console.log('ok');
​}
​box.addEventListener('click',anonymous,false);
​box.removeEventListener('click',anonymous,false);

原理： 基于原型链查找机制，找到 EventTarget.prototype 上的 addEventListener 方法执行，它是基于浏览器事件池机制完成事件绑定的。如果是鼠标操作，获取的是 MouseEvent 类的实例 -> 鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype -> Event.prototype -> Object.prototype

每次一事件触发，浏览器都会这样处理一下

捕获到当前操作的行为（把操作信息获取到），通过创建 MouseEvent 等类的实例，得到事件对象 EV

通知所有绑定的方法（符合执行条件的）开始执行，并且把 EV 当做实参传递给每个方法，所以在每个方法中得到的事件对象其实是一个

后面再重新触发这个事件行为，会重新获取本次操作的信息，用新的信息替换老的信息，然后继续之前的步骤。

可以同一个元素绑定多个方法

let AA = null;
box.onclick = function(ev) {
  console.log("DOM0-1", ev);
  AA = ev;
};
box.addEventListener("click", (ev) => {
  console.log("DOM2-1", ev === AA);
});
box.addEventListener("click", (\_) => {
  console.log("DOM2-2");
});
box.onclick = function() {
  console.log("DOM0-2");
};

// 点击后打印
// DOM2-1 true
// DOM2-2
// DOM0-2

5. meta 元数据元素

5.1. Referrer-Policy

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy

你也可以在 HTML 内设置 referrer 策略。例如，你可以用一个 name 为 referrer 的 <meta> 元素为整个文档设置 referrer 策略。

<meta name="referrer" content="origin" />

参考：