CMS – HEZHIYI

标签： HTML

  • WEB前端-HTML篇

    新增标签元素

    标签类别 具体标签
    语义化结构标签 header、footer、nav、main、article、section、aside、figure、figcaption、time、mark
    多媒体标签 audio、video、source、track、canvas、svg
    表单增强元素 datalist、output、meter、progress
    新增 Input 类型 input(date)、input(datetime)、input(email)、input(number)、input(range)、input(tel)、input(color)、input(time)、input(url)、input(search)
    其它标签 details、summary、dialog、template

    本地存储

    生命周期：

    • cookie 可设置过期时间
    • localStorage 永久存储
    • sessionStorage 关闭标签页自动清除

    存储大小：

    • cookie 4KB
    • sessionStorage 5MB – 10MB
    • localStorage 5MB – 10MB

    作用域：

    • cookie：可设置 Domain 和 Path，控制哪些域名和路径可以访问
    • localStorage：同源策略下的所有窗口和标签页共享
    • sessionStorage：仅当前标签页有效，即使同源的其他标签页也无法访问

    以下是整理成 Markdown 表格的浏览器存储特性对比：

    特性 Cookie localStorage sessionStorage
    生命周期 可设置过期时间（Expires/Max-Age） 永久存储，除非手动清除 关闭标签页后自动清除
    存储大小 约 4KB 5MB – 10MB（不同浏览器可能有差异） 5MB – 10MB（同 localStorage）
    作用域 通过 Domain 和 Path 控制访问范围 同源策略下的所有窗口/标签页共享 仅当前标签页有效，同源其他标签页不可访问
    数据发送 每次请求自动携带在 HTTP 头部 不自动发送，仅客户端存储 不自动发送，仅客户端存储
    API 易用性 需手动解析字符串 直接使用 setItem()/getItem() 等操作 同 localStorage

    补充说明

    • 同源策略：协议、域名、端口必须完全相同。
    • 安全建议：
      • Cookie 敏感数据建议设置 HttpOnly 和 Secure 属性。
      • 大容量数据优先使用 localStorage 或 sessionStorage。
      • sessionStorage 适合临时数据（如表单填写中途防止丢失）。

    <script> 加载方式

    <!-- 默认加载：同步阻塞 HTML 解析 -->
<script src="script.js"></script>
<!-- defer 加载：延迟执行，直至 DOM 解析完成后 -->
<script defer src="script.js"></script>
<!-- async 加载：异步引入，下载完成后立即执行 -->
<script async src="script.js"></script>

    加载说明：

    • 默认：<script> 同步加载，阻塞 HTML 解析和渲染
    • defer：<script> 延迟执行，DOM 解析完成后按顺序执行
    • async：<script> 异步加载，下载完成后立即执行（执行顺序不固定）