HTML元素、标签、脚本等
综合
首选扩展名为 *.html，限制3位文件后缀名的DOS老旧系统才用 *.htm。
HTML模板：
<!DOCTYPE html> <title>x</title> <meta charset='utf-8' /> <meta name='viewport' content='width=device-width' /> <main><h1>唯一h1标签用于Bingbot等SEO最佳实践</h1></main>
viewport是指把画布(980px)改成屏幕宽度(≈320px)，否则会横向滚动。
中文页面不存在 <meta charset='utf-8' /> 必定乱码！
可选推荐：
<meta name="description" content="SEO描述" />
<script>document.addEventListener("DOMContentLoaded", (/* e */) => { });</script>
控制台引入js文件调试用：
var s =
document.createElement("script");
s.src="https://cdn.bootcdn.net/ajax/libs/tinymce/6.2.0/tinymce.min.js";
document.body.appendChild(s);
点a链接在iframe中打开
<a href="//example.com" target="iframeName">在iframe中访问</a><iframe name="iframeName"></iframe>
JavaScript使用template标签
<template id="tt"><div id="x"></div></template>
let tcc = document.importNode(document.querySelector('#tt').content, true);
//tcc.querySelector("x").textContent = "x"; // 可选 - importNode后再修改
document.getElementById("area").appendChild(tcc);
解决iframe阻塞onload事件导致页面部分空白
【非首屏时】 <iframe loading="lazy" src="//example.com" ></iframe>
【首屏时】
onload = (event) => {
document.getElementById("iframeId").src="//example.com";
// or document.getElementById('iframeId').srcdoc = '<h1>html string</h1>';
// or document.getElementById('iframeId').src = "data:text/html;charset=utf-8,"+document.title;
};
Popover API - 顶层top-layer悬浮框，支持焦点外消失，而dialog标签则需要自己控制。
Web用Unicode+Emoji
字符值引用（numeric character reference, NCR） - 用Unicode字符码来表示 如 & 十六进制 - & 十进制 - &
JavaScript使用格式 - \u23\uFE0F\u20E3
HTML使用格式 - #️⃣
字符实体引用(character entity reference, CER) - 用直观的实体名来表示。 如 & - & 意思为ampersand
Web JavaScript
读取cookie新API（仅支持https） - await cookieStore.get('x_id');
Web CSS
text-wrap:balance - 文本包裹多行字数保持均衡