主题： html
-
使用 srcset、sizes 和 picture 实现响应式图片
带宽度描述符的 srcset 配合 sizes 属性，可以让浏览器根据当前视口和像素密度，选择能填满显示区域的最小图片文件。x 描述符为固定显示尺寸提供多种密度；带 source 元素的 picture 用于构图调整和格式回退。始终保留 width 和 height，避免图片加载时布局偏移。
-
HTML 原生表单验证：required、pattern、type 与 Constraint Validation API
HTML 无需脚本即可在提交前验证表单控件：required、minlength、min/max、pattern 和指定类型的输入定义约束，浏览器阻止提交并显示消息，CSS 可为 :user-invalid 设置样式，Constraint Validation API 则向脚本暴露同一状态。这是易用性层，而非安全层；服务器仍会再次验证。
-
Web Components：自定义元素、Shadow DOM 与封装的边界
自定义元素用带连字符的标签名注册类，并提供生命周期回调；Shadow DOM 给予它作用域受限的子树，样式不会向任一方向泄漏；模板和声明式影子根提供标记。所有跨边界交互，从通过 parts 和自定义属性设置样式，到通过 ElementInternals 参与表单及关联标签，都必须有意开放。
-
Forms that declare native HTML constraints produce fewer server-side validation rejections per submission than forms validated only in custom JavaScript
Hypothesis: the browser blocks interactive submission of a form whose native constraints (required, pattern, type, min and max) fail, while MDN notes that calling submit() bypasses this and novalidate disables it; the proposal is that forms carrying native constraints that mirror the server rules reach the server with fewer rejections per submission than forms whose checks live only in custom scripts, because the native checks keep working when the script fails to load or errors; a proposed A/B test, with no result claimed.
-
Favicons and the web app manifest: the files to ship and how to declare them
Browsers fall back to /favicon.ico when no link rel=icon is declared, so keep that file in place; declare a scalable SVG or a sized PNG with link rel=icon, an apple-touch-icon, and a manifest whose icons carry sizes and a purpose (any, maskable, monochrome). Search engines want one stable, square favicon per hostname.
-
无障碍表单：标签、错误消息与自动填充
为每个控件提供通过 for 和 id 关联的标签，用文字和属性标明必填字段，使用 autocomplete 令牌让浏览器和辅助技术了解字段用途，并以错误摘要和通过 aria-describedby 关联的逐字段消息报告错误。
-
dialog versus popover: modal behaviour, the top layer and light dismiss
dialog with showModal() is modal: top layer, inert page, ::backdrop, Escape, closedby and form method=dialog; the popover attribute makes any element a non-modal top-layer overlay that a button toggles without script, light-dismissed in auto state. Use dialog for blocking prompts and forms, popover for menus, tooltips and toasts.
-
ARIA roles: why a native HTML element beats a div with a role
The W3C's first rule of ARIA use is to prefer a native HTML element or attribute that already has the semantics and behaviour required; ARIA only changes what assistive technology is told, never what the element does. A div with role=button still needs focusability, key handling and states added by hand, and every mistake is invisible in visual testing.
-
Focus management in single-page interactions: dialogs, route changes and removed elements
When a page changes without a full load, keyboard focus must be moved on purpose: into a dialog when it opens and back to its trigger when it closes, to the new view's heading after a client-side route change, and to a sensible neighbour when the focused element is deleted. Otherwise focus falls to the document body and screen-reader users are sent back to the top.
-
Barrierefreiheit: die vier WCAG-Grundsätze praktisch angewendet
Die WCAG 2.2 ordnen alle Erfolgskriterien vier Grundsätzen zu: wahrnehmbar, bedienbar, verständlich, robust. Wer pro Grundsatz die häufigsten Verstösse kennt (fehlende Textalternativen, Tastaturfallen, zu wenig Kontrast, unbeschriftete Felder, zu kleine Ziele), findet viele Barrieren ohne Spezialwerkzeug; Stufe AA ist das übliche Ziel.
-
details and summary: native disclosure widgets, exclusive accordions and hidden until-found
details/summary is a disclosure widget with no script: the open attribute shows the content, a shared name attribute makes a group exclusive so opening one closes the others, the toggle event reports changes, and summary is styled as display: list-item. For collapsed content that must stay searchable, hidden=until-found reveals it on find-in-page or fragment navigation.
-
Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority
Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.
机器可读： JSON