Web万维网(WWW)、浏览器、网站程序开发、网页脚本编写、层叠样式表、WordPress、PWA

综合/新

HTML元素标签、CSS样式表、SEO、HTTP & Nginx、宽带路由器
新：
  HTTP/2 - Nginx、Google Cloud Run已支持；
    H2C 虽说因明文问题被浏览器不予支持，但可以用于curl或HttpClient库方式中，且拥有HTTP/2一切的新特性，特别是后端明确支持H2C的情况下，连Upgrade协商都可以省略。
    支持不包含Content-Length头(HTTP 1.x则必须提供)的fetch body: readableStream，火狐则会将[object ReadableStream]当作字符串发送。

  HTTP/3.0 - UDP端口443；Nginx已支持(v1.25.0起/proxy_pass则不支持)；Cronet网络库已支持，自动协商且优先使用HTTP/3.0。
  ECH（Encrypted Client Hello） - 加密整个 Client Hello，以取代加密明文 SNI 的 ESNI。
  JS脚本文件下载后调首个函数时才初始化（页面载入时避免CPU过载）：defer import noInitModule from './no-init.js'; button.onclick = async () => { await noInitModule.inited(); };

编程中常用：
  HTML标签取值永不为null：document.querySelector("#selectOrInput").value
  HTML pre标签只转义小于号“<”为 &lt; 即可，“>”不会识别为Tag。
  取消input type="file"标签的文件选择：document.getElementById('file').value = null;

网站上线检查清单：
  域名 A/AAAA/HTTPS 解析检测，IPv4和IPv6均应正常访问。
  引用的 JavaScript 脚本，部分 CDN 或域名被墙，应改为：单文件无引用的直接本地拷贝，有引用的则用墙内源。
  Chrome浏览器手机模式和真机观察下，或长内容不换行看会不会破坏布局。
  ICO图标尺寸定为 256x256 像素，浏览器支持favicon.ico图标重定向。
  上传大小限制 - Nginx默认1MiB，需显式设置较大值，至少测试下低于1MiB和超出1MiB这两种情况。
  检查 CORS 跨域情况，比如 GCS 的 bucket.toBuilder().setCors(ImmutableList.of(cors)).build().update();
  前端API网关（Nginx等）是否配置了CORS跨域、WebSocket和SSE长连接超时。
  必须转义HTML标签value="含双引号"等属性。
  a链接添加rel="noreferrer"来禁止传递document.referrer，也可避免（target="_blank"）新开页控制原页面： window.opener.location.href ="恶意域名.com"
  标签的文件后缀限制会被绕过，故应通过JS事件onchange或后端再次检查下：<input type="file" id="file" accept=".wav,.flac,.webm,.ogg,.mp3" onchange="checkAndPreview(this)" />

技术选型：
  图片格式首选*.webp 未来用*.avif 老派则用*.png - Windows、Linux主流桌面系统，Safari、Chrome等主流浏览器均已支持WebP图像格式。
  数据传输格式：首选较长但直观的HEX、次选Base64、Base64Url、JSON等；Uint8Array.prototype.toBase64 and Uint8Array.prototype.toHex？

国内静态资源镜像：
  脚本 - https://tsc.openle.com/.well-known/static/redundant/by-name/scripts/qrcode-generator/qrcode.min.js

主要

HTTP协议 - 首选HTTP/2或HTTP/3，抛弃HTTP/1.x；Nginx反向代理不支持HTTP/2，故新技术场景可换用 HAProxy 或 Google Cloud Run+H2C(Jetty or Golang)。

PowerShell查看HTML： curl http://localhost:8080/tmp/ | Select -ExpandProperty Content

application/xml取代了不识别xml声明encoding编码属性的text/xml；“text/plain; charset=utf-8”不跟charset则也是us-ascii；text/html则默认为UTF-8。
附件头指定文件名编码： 
  格式 - 单引号分隔编码名、[留空]语言名、URL编码后的文件名；filename*会覆盖filename参数。
  Content-Disposition: attachment; filename="EURO rates.txt"; filename*=utf-8''%e2%82%ac%20rates.txt
  主流浏览器均已支持rfc5987写法，故废弃不带*符号的filename属性： Content-Disposition: attachment; filename*=utf-8''%e2%82%ac%20rates.txt

判断浏览器： navigator.userAgent.toLowerCase().includes("chrome")
UA通常200个字符内(最长见过400多字符)，故限制在500字符：request.getHeader("User-Agent")

http协议网页报undefined，https则可用： if(crypto.randomUUID){ crypto.randomUUID(); }

anchor属性href值若为跨域或301、302跳转，均会忽略其download属性，且无调整的可能。

File继承自Blob对象，故可直接调.stream()转换为ReadableStream。
修改File对象文件名： var fd = new FormData(); fd.append("file1", file, file.name);


所有符号均不断开换行 - display: inline-block;
只英文不断开 - overflow-wrap: break-word;

避免重复提交：element.addEventListener('click', myFunction, {once: true});
  等同回调执行后执行removeEventListener移除myFunction。

监听是否执行过DOMContentLoaded（默认多次添加多处执行）：
    function dcl(evt) {
        console.log(evt.currentTarget);
    }
    if (document.readyState === "loading") {
        // 此时加载尚未完成
        document.addEventListener("DOMContentLoaded", dcl);
    } else {
        // `DOMContentLoaded` 已经被触发
        dcl();
    }

安全拼接HTML：
  var aTag = document.createElement("a");
  aTag.href = document.location.href;
  aTag.textContent = document.title;
  console.log(aTag.outerHTML);

  如果有编程环境可转义下：<input value="<%=com.google.common.html.HtmlEscapers.htmlEscaper().escape(含半角双引号字符串)%>" /> 转换后为 &quot; 用JS获取则为实际文本。

模板

Fetch API:

  

  跨域携带Cookie(避免JSESSIONID次次变)： fetch(url, {method: 'POST', body: fd, credentials: "include"}).then(r => r.text());
    同时响应端也应 - Access-Control-Allow-Credentials: true

  fetch添加select标签options：
            fetch("https://abc.passed.app/main/apis/more/ga/auth/global/kv/forever/list-all-without-value").then(r => {
                if (r.ok) {
                    r.json().then(data => {
                        console.log(data);
                        if (data.length > 0) {
                            document.querySelector("#keys").options.length = 0;
                        }
                        for (k in data)
                        {
                            var opt = document.createElement("OPTION");
                            opt.text = data[k].id;
                            opt.value = data[k].id;
                            document.querySelector("#keys").options.add(opt);
                        }
                        //console.log(document.querySelector("#keys").value);
                    });
                }
            });

建站资源

博客系统 - WordPress.org（未墙）| 免费博客 - WordPress.com（未墙/1G存储空间）
  页面语言(即<html lang="zh-CN">)：设置->常规->站点语言->zh-tw - 繁体中文
  注意 - 中国访问在WordPress.com开设的博客未被墙，但后台发文章页面则会被部分脚本卡住。
    临时解决（直接失败避免卡住） - Chrome F12 -> ︙或 ⚙ 勾上 Network request blocking: 添加以下域名
      www.google.com 用于 https://www.google.com/jsapi 等。
      0.gravatar.com、www.gravatar.com 用于 头像。
    Hosts:
      192.0.78.22    public-api.wordpress.com
      192.0.78.13    openle.wordpress.com
    [可选]DNS:
      1.2.4.8
      114.114.114.114

  WordPress.com免费版和个人版不支持REST API开发接口。
  WordPress.com商务版可集成AdSense插件 - https://wordpress.com/zh-cn/plugins/google-site-kit
  自建WordPress.org博客集成AdSense插件 - https://wordpress.org/plugins/google-site-kit/
  或 集成WordPress.com官方广告插件 WordAds。
  免费版网址默认包含标题，分享时容易乱码，故可在文章编辑里修改别名(slugs)为英文或拼音。

  网页收录提交：
    说明 - Google、Bing、Baidu均需要登录账号才能进入提交入口，且只有Baidu不需要验证网站就能提交。
    注意 - WordPress.com 子域名博客无法通过搜索引擎的网站验证。

    百度提交入口 - https://ziyuan.baidu.com/linksubmit/url
    谷歌提交入口 - https://search.google.com/search-console?action=inspect  或 https://search.google.com/u/1/search-console?action=inspect

浏览器

User Agent:
  规律 - 根据UA字符判断浏览器时，Firefox和Edg应直接短路返回，而Chrome和Safari则应多条件判定。

  Windows Chrome  - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
  Windows Edge    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0
  Windows Firefox - Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

  macOS Chrome    - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
  macOS Safari    - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.5.23

上传/下载

传输请求体前让服务端决定是否继续 - 若服务端条件充裕，或长连接场景，可关掉该机制来节省耗时。
  HttpClient增加HTTP头“Expect: 100-continue”，等待Server端响应最多3秒，若未被拒绝则会自动发送请求体：
    if ("100-continue".equalsIgnoreCase(request.getHeader("Expect"))) {
      // 比如检查 Content-Length 头等预期情况。
      response.setStatus(HttpServletResponse.SC_CONTINUE); response.flushBuffer(); return;
    } else { System.out.println("request body..."); }

长连接

SSE：
  非HTTP/2协议下，浏览器会限制为最多6个连接数，HTTP/2则为100且可调整，可通过SharedWorker优化连接数？
  Open Liberty 连接时持续挂起，导致 onopen 不被触发，亲测 Quarkus 框架则正常。

WebSocket:
  Ping Pong 机制 - 服务端给客户端发送Ping，然后客户端会自动回应Pong，表明自己仍然在线：webSocket.session.getAsyncRemote().sendPing(message);

PWA

普通网页，在Android Chrome浏览器不做任何配置，就能“添加到主屏幕”。
桌面版的 Firefox 和 Safari 不区分 PWA 和普通网页，不会标出“安装至桌面”图标。

应用清单：
  浏览器识别后，会在地址栏右侧出现“安装至桌面”图标。
  <link rel="manifest" href="manifest.json" />

安全

阻断：
  如果自己能控制客户端和服务端，可以在两端防火墙上丢弃 rst 包，强行继续连接。

TLS/SSL:
  Let’s Encrypt 证书目录：
    首选 fullchain.pem = cert.pem + chain.pem
    合并 cat privkey.pem fullchain.pem > haproxy.pem

其他

腾讯云存储 - 已禁止*.apk、*.ipa下载，据猜测是为了规避管局app备案政策，曾出现过敏感app应用连累云存储域名根域名，被一刀切的封禁情况。
Google JSAPI Loader脚本 - 已过时，早前被谷歌用于CDN载入 知名框架(JQuery等)。