<h3>新增标签元素</h3>
<table>
<thead>
<tr>
<th>标签类别</th>
<th>具体标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>语义化结构标签</td>
<td>header、footer、nav、main、article、section、aside、figure、figcaption、time、mark</td>
</tr>
<tr>
<td>多媒体标签</td>
<td>audio、video、source、track、canvas、svg</td>
</tr>
<tr>
<td>表单增强元素</td>
<td>datalist、output、meter、progress</td>
</tr>
<tr>
<td>新增 Input 类型</td>
<td>input(date)、input(datetime)、input(email)、input(number)、input(range)、input(tel)、input(color)、input(time)、input(url)、input(search)</td>
</tr>
<tr>
<td>其它标签</td>
<td>details、summary、dialog、template</td>
</tr>
</tbody>
</table>
<h3>本地存储</h3>
<p>生命周期：</p>
<ul>
<li><code>cookie</code> 可设置过期时间</li>
<li><code>localStorage</code> 永久存储</li>
<li><code>sessionStorage</code> 关闭标签页自动清除</li>
</ul>
<p>存储大小：</p>
<ul>
<li><code>cookie</code> 4KB</li>
<li><code>sessionStorage</code> 5MB &#8211; 10MB</li>
<li><code>localStorage</code> 5MB &#8211; 10MB</li>
</ul>
<p>作用域：</p>
<ul>
<li><code>cookie</code>：可设置 Domain 和 Path，控制哪些域名和路径可以访问</li>
<li><code>localStorage</code>：同源策略下的所有窗口和标签页共享</li>
<li><code>sessionStorage</code>：仅当前标签页有效，即使同源的其他标签页也无法访问</li>
</ul>
<p>以下是整理成 Markdown 表格的浏览器存储特性对比：</p>
<table>
<thead>
<tr>
<th>特性</th>
<th>Cookie</th>
<th>localStorage</th>
<th>sessionStorage</th>
</tr>
</thead>
<tbody>
<tr>
<td>生命周期</td>
<td>可设置过期时间（<code>Expires</code>/<code>Max-Age</code>）</td>
<td>永久存储，除非手动清除</td>
<td>关闭标签页后自动清除</td>
</tr>
<tr>
<td>存储大小</td>
<td>约 4KB</td>
<td>5MB &#8211; 10MB（不同浏览器可能有差异）</td>
<td>5MB &#8211; 10MB（同 localStorage）</td>
</tr>
<tr>
<td>作用域</td>
<td>通过 <code>Domain</code> 和 <code>Path</code> 控制访问范围</td>
<td>同源策略下的所有窗口/标签页共享</td>
<td>仅当前标签页有效，同源其他标签页不可访问</td>
</tr>
<tr>
<td>数据发送</td>
<td>每次请求自动携带在 HTTP 头部</td>
<td>不自动发送，仅客户端存储</td>
<td>不自动发送，仅客户端存储</td>
</tr>
<tr>
<td>API 易用性</td>
<td>需手动解析字符串</td>
<td>直接使用 <code>setItem()</code>/<code>getItem()</code> 等操作</td>
<td>同 localStorage</td>
</tr>
</tbody>
</table>
<p><strong>补充说明</strong></p>
<ul>
<li>同源策略：协议、域名、端口必须完全相同。</li>
<li>安全建议：
<ul>
<li>Cookie 敏感数据建议设置 <code>HttpOnly</code> 和 <code>Secure</code> 属性。</li>
<li>大容量数据优先使用 <code>localStorage</code> 或 <code>sessionStorage</code>。</li>
<li><code>sessionStorage</code> 适合临时数据（如表单填写中途防止丢失）。</li>
</ul></li>
</ul>
<h3><code>&lt;script&gt;</code> 加载方式</h3>
<pre><code class="lang-html language-html html">&lt;!-- 默认加载：同步阻塞 HTML 解析 --&gt;
&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;!-- defer 加载：延迟执行，直至 DOM 解析完成后 --&gt;
&lt;script defer src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;!-- async 加载：异步引入，下载完成后立即执行 --&gt;
&lt;script async src=&quot;script.js&quot;&gt;&lt;/script&gt;</code></pre>
<p><strong>加载说明</strong>：</p>
<ul>
<li>默认：<code>&lt;script&gt;</code> 同步加载，阻塞 HTML 解析和渲染</li>
<li>defer：<code>&lt;script&gt;</code> 延迟执行，DOM 解析完成后按顺序执行</li>
<li>async：<code>&lt;script&gt;</code> 异步加载，下载完成后立即执行（执行顺序不固定）</li>
</ul>

WEB前端-HTML篇