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

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>
说明 - 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>

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');


Web CSS

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


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


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


点击查看:HTML5的7类元素


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

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