Web、HTML元素(标签)大全及含义、JavaScript脚本语法

Web用Unicode+Emoji

七种Emoji造字方式

字符值引用（numeric character reference, NCR） - 用Unicode字符码来表示 如 & 十六进制 - & 十进制 - &
JavaScript使用格式 - \u23\uFE0F\u20E3
HTML使用格式 - #️⃣

字符实体引用(character entity reference, CER) - 用直观的实体名来表示。 如 & - & 意思为ampersand

Web JavaScript（Oracle持有其商标）

可选链（使undefined归于null） - var v = data !== null ? data?.items?.[0]?.content : null; if (v !== null) { alert(v); }

读取cookie新API（仅支持https） - await cookieStore.get('x_id');
注意 - 多次赋值不会丢失其他key项：document.cookie="k=v"; document.cookie="kk=vv"; // 输出 k=v; kk=vv

OOP:
  structuredClone(obj) 识别的JS类型比 JSON.parse(JSON.stringify(obj)) 更多。

textContent会保留隐藏标签中的文本，比如<script>alert(true);</script>中的JavaScript文本；而innerText则只保留运行时的实际文本。
知名大数字js库 - https://github.com/MikeMcl/big.js
浏览器Javascript文字朗读API - https://www.cnblogs.com/Amd794/p/17871840.html

引号嵌套：
  console.log(`<button onclick="alert('` + 首选免反斜杠写法 + `')">x</button>`);
  console.log("<button onclick=\"alert('" + 次选 + "')\">x</button>");

闭包：
  <button onclick="this.parentElement.innerHTML='函数结束前，入参将持续有效。'; setTimeout(() => { alert(this); }, 3000);">x</button>

文档/元素：
  let docType = document.implementation.createDocumentType("html", "", ""); // 创建类型
  document.implementation.createDocument(null,"html",docType).doctype; // 创建HTMLDocument对象
  new XMLSerializer().serializeToString(docType); // 解析DocumentType字符串；toString()输出则为类型名

爬取：
  Selenium ChromeDriver.PageSource获取JS渲染后的源码。

弹框：
  if (confirm("确认执行？")) { x = "按确认返回值为true！"; } else { x = "您按了取消！"; }

Lambda/async、await：
  async标注的function返回值return 1会隐式包装为return Promise.resolve(1); 无return则不能链式then(...);
  fetch的then(...)无论有没有return均能链式下去。
  Promise对象简化：
   const f = (func, ...args) => {
    const { promise, resolve, reject } = Promise.withResolvers();
      setTimeout(() => {
        try { resolve(func(...args)); } catch (e) { reject(e); }
      }, 2000);  
    return promise;
   };


后台线程：
  注意 - Blob网址“blob:https://example.com/...”能遵守CORS跨域，但DataURI网址“data:text/javascript;base64,...”则永远判定为不同域，故只能用no-cors关闭跨域，且不会返回响应数据。

  new Worker(URL.createObjectURL(new Blob(["console.log("+location.href+")"])));
  var jsFunction = function () { postMessage("payload"); fetch('https://example.com').then(r =>console.log(r)); };
  new Worker(URL.createObjectURL(new Blob([`(${jsFunction.toString()})()`]))).onmessage = (e) => { console.log(e.data); });
                    };
  // 注意 - 以下所用btoa(...)入参不支持中文、Unicode字符,同时JS中fetch执行时，即使不跨域也会报，必须加no-cors才能解决跨域，且拿不到响应。
  new Worker('data:text/javascript;base64,' + btoa("console.log(123)"));
  new Worker('data:text/javascript;base64,' + btoa(" fetch('https://example.com',{mode:'no-cors'}).then(r =>console.log(r)); "));  // no-cors即只执行不关心响应
  new Worker('data:text/javascript;base64,' + btoa("(" + jsFunction.toString() + ")()"));

文件API:
  File API(HTML标签) - 操作系统本地硬盘真实文件方式；
  File API(FileReader API) - 浏览器本地沙盒方式；
  File System Access API - 操作系统本地硬盘真实文件方式；

通过Blob构造URL或File对象：
  var ou = URL.createObjectURL(new Blob(["默认值为charset=us-ascii"], { type: 'text/plain; charset=utf-8' }));
  const aTag = document.createElement("a");
  aTag.textContent = "Save to file";
  aTag.href = ou;
  aTag.setAttribute("download", new Date().toJSON().replaceAll(":", "-") + ".txt");
  document.body.appendChild(aTag);

  无type构造 - new File([new Blob(["x"])], "x.txt");

HTTP协议：
  HTTP/2乱序分帧解决了HTTP/1.1线性的队头阻塞问题；HTTP/3通过无连接的UDP协议，解决了HTTP/2存在的TCP层的队头阻塞。
  分块儿传输 - HTTP/2内置分块儿传输，网络库遇到Transfer-Encoding: chunked头会自动清除。
  Strict-Transport-Security (HSTS）头 - 浏览器强制切换至https协议。永久生效需提交域名

JSON:
  JS语法中引号可有可无，但字符串化后必须双引号，单引号都不行。

Fetch API:
  强记 - fetch入参headers是复数；body赋值前必须字符串化JSON对象。
  注意 - QueryString传参会被浏览器历史或收藏夹记录，故应改为Header或POST方式传参。
  原理 - fetch首个.then(response => response.json())回调只会读取响应头等信息，而response.json().then(body=>console.log(body))则将读取body数据体。
  库 - Redaxios 文件大小比 Axios 小15倍。

  发送流 - Chrome已支持，Firefox未支持，其他浏览器未测 https://web.dev/fetch-upload-streaming/
  接收流 - response.body.getReader() // Server - jakarta.ws.rs.core.StreamingOutput基于Transfer-Encoding: chunked?

  验证头：
    fetch("https://httpbin.org/post", { method:"post",
        headers: { "Authorization": "Basic x.y.z" }
    }).then(r=>r.text()) // 或 .then(r=>r.json()).then(r => alert(JSON.stringify(r)))

  fetch("https://congci.com/.well-known/static/images/old/home-page-logo.png").then(r => {
    const file = new File([r.blob()], "x.png", {type: "image/png"});
    const fd = new FormData(); fd.append("file", file); console.log(fd.get("file"));
  });

  var type = {type: "text/plain"};
  var file = new File([new Blob(["x"], type)], "x.txt", type);
  var fd = new FormData(); fd.append("file", file);
  fetch('/main/api/default/ga/anonymous/temp/main/test-google-drive',
    {method: 'POST', body: fd}).then(r => console.log(r));

  CORS - 简单请求HEAD\GET\POST执行前不会发送OPTIONS预请求(Preflight request)。

  fetch超时中断：
    const ac = new AbortController();
    const tt = setTimeout(() => ac.abort(), 3000);
    const fr = await fetch("https://slowmo.glitch.me/5000",{signal: ac.signal})
      .then(r => r.ok ? r.json() : null).catch(err => { // default return undefined
        console.log(err.name === 'AbortError'); return null;
      });
    clearTimeout(tt); console.log(fr);

  JS前端fetch流式响应ReadableStream：即实现SSE的EventSource流响应；或读取Java后端响应的File流
    Java - Response.ok((Object)file).type("audio/mpeg").build(); // todo - 最好改整体传输为流式返回
   循环式读取：
    const chunks = [];
    // const reader = response.body.pipeThrough(new TextDecoderStream()).getReader(); // 或 pipeThrough(new CompressionStream('gzip'))
    const reader = response.body.getReader(); // TextDecoderStream会先将value字节改为文本
    while (true) {
        const {value, done} = await reader.read();
        if (done) {
            break;
        }
        chunks.push(value);
        console.log('Received', value);
    }
   异步迭代器：
    let total = 0; const response = await fetch("https://example.org");

    // [Chrome124+已支持]或手动处理下：
    if (!response.body[Symbol.asyncIterator]) {
        response.body[Symbol.asyncIterator] = () => {
            const reader = response.body.getReader();
            return {next: () => reader.read()};
        };
    }

    for await (const chunk of response.body) { total += chunk.length; }
    console.log(total);

WebAssembly

WebAssembly - 浏览器低级汇编基础 JavaScript环境之外集成

Web CSS

text-wrap:balance - 文本包裹多行字数保持均衡

fieldset标题居中：<legend style="text-align: center;">x</legend>

CSS空格保留和控制换行：
  code { overflow-wrap: break-word; }
  或换行 pre { white-space: break-spaces; overflow-wrap: break-word; }
  说明 - white-space暂理解成只用于否决换行，不写时则单用overflow-wrap或word-break均可；由于pre标签默认就被white-space否决了换行，故应显式break-spaces下，或用暴力的滚动条方式 pre { overflow: scroll; }
  多行溢出隐藏：
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

  保留连续空格：首选汉字全角空格 　  [or ]密    码,此方式linux下和windows下宽度不一致

CSS animation 动画：
document.getElementById("showArea").animate([
  // @keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  fill: "both", // 停在最后一帧，而不是回到第一帧。
  iterations: Infinity // 填1则只执行一次。
});

弹性布局：
  参考 - https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
  flex布局 - display: flex; 配合 flex-wrap: wrap; 可实现宽度自适应换行。
  grid布局 - display: grid; 配合 grid-template-columns: repeat(auto-fill, 100px); 可实现下一行左对齐。

其他

废弃特性：HTTP/2移除Chunked transfer encoding、HTTP/3移除Server Push、浏览器解析XSLT。

控制台粘贴时警告(输入allow pasting即可解除/中文则输入“允许粘贴”) - Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting.