从此
📄文章 #️⃣专题 🌐上网 📺 🛒 📱

HTML元素、标签、脚本等


综合

首选扩展名为 *.html,限制3位文件后缀名的DOS老旧系统才用 *.htm。


HTML模板:

<!DOCTYPE html>
<title>x</title>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width' />
<main id='mc'><h1>唯一h1标签用于Bingbot等SEO最佳实践</h1></main>
<a href='#mc'>Skip to main content</a>
说明 - DOCTYPE声明是否启用标准模式 document.compatMode == 'CSS1Compat'; 不声明则为非标准模式BackCompat
viewport是指把画布(980px)改成屏幕宽度(≈320px),否则会横向滚动;body标签内并不是只能包含主题唯一型的main标签,还包括main外的非唯一性内容。

中文页面不存在 <meta charset='utf-8' /> 必定乱码,即使写在title标签下方也对中文有效。

可选推荐:
<meta name="description" content="SEO描述" />

页面元素载入完成后才能被JavaScript脚本调用(早于onload事件):
    <script>document.addEventListener("DOMContentLoaded", (/* e */) => { });</script>
    或 onDOMContentLoaded = (e) => {};

  控制台引入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>

//document.querySelector('#tt').innerHTML; // 直接获取HTML标签 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

七种Emoji造字方式

字符值引用(numeric character reference, NCR) - 用Unicode字符码来表示 如 & 十六进制 - &#x26; 十进制 - &#38;
JavaScript使用格式 - \u23\uFE0F\u20E3
HTML使用格式 - &#x23;&#xFE0F;&#x20E3;

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


Web JavaScript

读取cookie新API(仅支持https) - await cookieStore.get('x_id');

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

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

Lambda/async、await:
  async标注的function返回值return 1会隐式包装为return Promise.resolve(1); 无return则不能链式then(...);
  fetch的then(...)无论有没有return均能链式下去。

后台线程:
  注意 - 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构造File对象:
  无type构造 - new File([new Blob(["x"])], "x.txt");

Fetch API:
  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 promise并抛AbortError异常 - AbortController.abort()

  JS前端读取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);

文件多选和上传按钮隐藏


Web CSS

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

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

点击查看:HTML元素(标签)列表


点击查看:HTML标准(Living Standard) HTML标准(中文版)


点击查看:HTML5的7类元素


点击查看:浏览器访问网页 建网站发布Web内容 - 《普通人玩技术》第1期

点击查看:Windows系统全程只用键盘快捷键访问网页 - 《普通人玩技术》第2期


特殊

  map方法内await不会等待: arrays.map(async (chunk, index) => { await fetch(url); })
    可换为:for (const chunk of ac) { await fetch(url); }

其他

控制台粘贴时警告(输入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.