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

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),否则会横向滚动。

中文页面不存在 <meta charset='utf-8' /> 必定乱码!

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

页面元素载入完成后才能被JavaScript脚本调用(早于onload事件):
    <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>

//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 = "您按了取消!"; }

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

  new Worker(URL.createObjectURL(new Blob(["console.log(111)"])));
  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("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));

文件多选和上传按钮隐藏


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期