4-基础-HTML

站长

2023年03月21日 19:34 · 阅读数 32

HTML发展简史 HTML标签与元素 HTML文档结构常用Meta标签及作用标签分类、语义化 HTML5新标签网页原理

以上基础内容略，如果以上掌握还不够熟练建议赶紧补习下，不然下面的内容理解起来可能有些困难。

渲染引擎

众所周知浏览器两大件：渲染引擎与JavaScript引擎，经常所说的浏览器引擎（内核）Webkit、Blink、Gecko等其实所指的都是渲染引擎，而JavaScript引擎比如大名鼎鼎的V8引擎。渲染引擎通常被叫做浏览器引擎，这个名词在日常也出现次数最多，另外也可以叫做布局引擎。主要工作是将HTML文档和网页的其他资源转换为用户设备上的交互式视觉表示。理论上渲染与布局可以单独处理，但实际上两者紧密耦合，很少单独划分，JS引擎不一样已经实现与浏览器的完全脱钩，这也实现JS可以在其它地方使用。

模板引擎

模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术，HTML引擎模板目前比较常见的比如Nodejs下模板引擎ejs、jade、handbars，其中ejs在我们团队内部是比较受欢迎的，也应用了好几个项目。

HTMLUnknownElement

MDN介绍:developer.mozilla.org/zh-CN/docs/…简单来说，你随便在HTML里写一个本来不存在的标签，这个就是一个HTMLUnknownElement元素。

<!-- 随便写的标签 -->
<abc></abc>

<script>
  // 验证下类型
  document.querySelector('abc') instanceof HTMLUnknownElement; // true
</script>

在HTML规范中，HTMLUnknownElement元素是合法的，CSS也可以作用在该类元素上，

<style>
    abc{
        color:red;
    }
</style>

<body>
   <abc>
      ABC
  </abc>
</body>

// 效果：页面ABC字体变红

HTMLUnknownElement元素与其它规范HTML元素最大的区别是其自身不具备任何私有属性和私有方法，就好比给你一张白纸，内容任你填写。这也为之后我们在使用HTMLUnknownElement元素提供了广阔的空间。 4-基础-HTML

自定义组件

自定义组件 ≠ HTMLUnknownElementHTML自定义组件的实现基于 window.customElements.define()接口

<script>
  // 组件定义
  class TextDemo extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const document = shadow.ownerDocument;
      const div = document.createElement('div');
      div.innerHTML = `<p>  text demo content <p>`;
      shadow.appendChild(div);
    }
  }
  // 该方法接受两个参数
  // 第一个参数是自定义元素的名字
  // 第二个参数是一个 ES6 的class
  window.customElements.define('text-demo', TextDemo);
</script>

<!-- html调用 -->
<text-demo></text-demo>

Custom Elements 标准

HTML5 标准规定了自定义元素是合法的，W3C为自定义元素制定了一个单独的 Custom Elements 标准。 Custom Elements 标准对自定义元素的规范做了限制：自定义元素的名字必须包含一个破折号，自定义元素的定义可以使用 ES6 的class语法等。如上面代码所示：'text-demo'是合法的，'textdemo'是不允许的。Custom Elements、HTML Imports，HTML Template、Shadow DOM统称为 Web Components 规范。

Custom Elements

可以自定义元素名称和行为，也可以对现有的HTML元素进行扩展，通过registerElement接口定义。 registerElement API在Chrome v80版本以下支持，高版本不兼容，目前该已被HTML5弃用，现在都统一通过customElements.define进行自定义元素。按照最新协议标准自定义组件代码规范如下：

class HelloWorldElement extends HTMLButtonElement {
  constructor() {
    super()
    // 自定义实现
  }
}
 
customElements.define('hello-world', HelloWorldElement, { extends: 'button' });

Templates

这是新的HTML元素：template，内容虽然会被浏览器解析但是不会被激活，需要通过脚本动态激活。在Vue中也有大量使用tempalte的地方，大家对此应该并不陌生。看下官方给出的案例：

<!-- 官方参考案例 -->
<template id="template">
  <p>Smile!</p>
</template>
<script>
  let num = 3;
  const fragment = document.getElementById('template').content.cloneNode(true);
  while (num-- > 1) {
    fragment.firstChild.before(fragment.firstChild.cloneNode(true));
    fragment.firstChild.textContent += fragment.lastChild.textContent;
  }
  document.body.appendChild(fragment);
</script>

DocumentFragment 类型相信研究过Vue模板更新原理的同学都不陌生，这里我们用它所提供的 clone 方法以 template 里的内容为基础创建一个元素节点，之后也可以在内存中操作这个元素节点，最后插入到 document 中，完成页面渲染。

Shadow DOM

Shadow DOM提供了一种将展现和内容分离的机制，本质上实现了分离与代码作用域。shadow-dom 结构示意图如下： 4-基础-HTML

Document：常规页面文档，可以理解为页面。
shadow boundary：shadow边界位置，即shadow区域范围。
shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。
shadow bounday：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。
shadow root：Shadow tree 的根节点，从这里开始之后的内容将会被隐藏到页面中。
contents：具体实现。

基本用法：

<div id="root"></div>

<script>
    const root = document.getElementById("root");
    const shadowroot = root.attachShadow({ mode: 'open' })
    const template = `
        <div>Dom Shadow Contnet</div>
        <style>
            :host {
                display:inline-block;
                padding:20px;
                border: 1px solid #000;
                color: red;
            }
        </style>
    `;
    shadowroot.innerHTML = template;
</script>

结合自定义组件使用示例：

<text-demo></text-demo>

<script>
    class TextDemo extends HTMLElement {
        constructor() {
            super();
            // mode参数
            // open:shadow root 元素可以从 js 外部访问根节点,即element.shadowRoot
            // closed:拒绝从 js 外部访问关闭的 shadow root 节点
            const shadow = this.attachShadow({ mode: 'open' });
            const document = shadow.ownerDocument;
            const div = document.createElement('div');
            const template = `
                <div>text demo content</div>
                <style>
                    :host {
                        display:inline-block;
                        padding:20px;
                        border: 1px solid #000;
                        color: red;
                    }
                </style>
            `;
            div.innerHTML = template;
            shadow.appendChild(div);
        }
    }
    window.customElements.define('text-demo', TextDemo);
</script>

Imports

提供一种重用HTML文档的方法，通过link标签，指定rel属性为import，可以把一份HTML文档导入进来<link rel="import" href="dom_block.html">兼容上我们也可以看到Chrome已经放弃了对于Imports的支持 4-基础-HTML

Web Components

因为早期组件生态很乱，有各种各样的框架和库，各自都有各自的规范，为了解决这种生态分化的问题，能够让 Web 组件模型统一化，所以才有了Web Components规范的出现，其目标是提供一种权威的、浏览器能理解的方式来创建组件。Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标签，在不用加载任何外部模块的情景下，直接就可以在浏览器中运行。在当下流行的mvvm框架中，依托WebComponent技术才可以实现组件的跨框架运行需求：例如Angular组件运行在Vue环境。

Polymer

Polymer是由谷歌的Palm WebOS团队打造，并在2013 Google I/O大会上推出，Polymer 库提供了一组用于创建自定义元素的功能，旨在使自定义元素更轻松、更快捷，就像标准 DOM 元素一样工作。。Polymer中有一个MDV设计原则，即Model-Driven Views，数据驱动模型，而当下盛行的MVVM模式就是这个原则的很好体现。目前已经发展到3.0版本，建议官网Demo都跟着撸一撸。官网：polymer-library.polymer-project.org/

文档流与布局

页面从上往下一行一行，其中每行从左至右的顺序，这种排列方式称为文档流。如果排列顺序不遵循正常情况下文档的排列顺序即为脱离文档流。以绝大部分中后台项目来说，现在HTML5模式下主流布局结构通常如下所示：

4-基础-HTML

以此为基础，目前有几大主流布局需要掌握：Flex弹性、Grid网格、移动端适配、响应式。

4-基础-HTML

回流与重绘

回流-relow:：确定盒子模型的大小和尺寸，计算布局，一定会引起repain
重绘-repain：计算颜色、轮廓等，不会影响布局，不一定引起relow

reflow和repain非常消耗性能，尤其在移动设备上有时会造成页面卡顿，严重影响用户体验所以在交互过程中应该尽可能减少reflow和repain产生

离线缓存

ApplicationCache：浏览器在缓存中分出来一块缓存区，用来存储一定的资源，目前Chrome浏览器最大支持5M大小，可以将html、css、图片等存储在本地缓存中，以保证在离线状态下继续访问Web应用。在使用该功能前要检测当前浏览器是否支持该功能：

if(window.applicationCache){
  console.log("您的浏览器支持离线缓存功能");
}else{
  console.log("抱歉，您的浏览器还不支持离线缓存");
}

使用离线缓存最重要的一点要记住：保证缓存的更新！，通常以下两种方式进行更新操作；

修改manifest文件
update()检测

SVG标签

其实SVG标签是在HTML5中才新增的，全称Scalable Vector Graphics，即可缩放矢量图，是一种基于XML语法的图像格式，在HTML里其它图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。而且SVG相对于Canvas的灵活之处在于，它可以基于HTML、CSS、JavaScript三方面访问控制，JavaScript中创建SVG元素不同之处在于需要指定命名空间。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.setAttribute('height', 200);

document.body.appendChild(svg);

结尾

在Web开发里似乎HTML是最简单的技术点，尤其现在都是以HTML片段的组件式的开发，加上HTML5的普及，在项目中对于整个HTML的处理较之前也简化了很多。HTML运用的好可以极大的提高渲染速度，带来更好的页面访问体验。

转载自:https://juejin.cn/post/7207477672665022520