1. 使用语义化 HTML 来提高 SEO 和可访问性
语义化 HTML 可以帮助搜索引擎和辅助技术(ARIA)更好地理解内容。
常用的语义化标签，有
-
• 布局
<header><footer><main><aside><nav> -
• 内容
<article><section> -
• 结构
<details><summary> -
• 图片
<figure><figcaption> -
• 表单
<form> -
• 标记
<mark> -
• 时间
<time> -
• 等等……
示例如下，
<article>
<header>
<h1>文章标题</h1>
<p>由<a href="#author">John Doe</a>发布于 <time datetime="2024-12-21">2024年12月21日</time></p>
</header>
<section>
<h2>章节标题</h2>
<p>这是章节内的一个段落。</p>
</section>
<footer>
<p><small>© 2024 Example Corp.</small></p>
</footer>
</article>2. 利用 <details> 和 <summary> 标签实现可折叠内容
这会创建可展开或折叠的交互式内容。
简单的场景，无需 JavaScript 即可实现点击展开和收拢。
<details>
<summary>点击展开</summary>
<p>这是可以展开或折叠的内容。</p>
</details>3. 结合 picture 元素实现响应式图像
通过使用不同的图像源来增强不同设备上的图像加载。
<picture>
<source media="(max-width: 799px)" srcset="small-image.jpg">
<source media="(min-width: 800px)" srcset="large-image.jpg">
<img src="default-image.jpg" alt="图像描述">
</picture>4. 使用 input[type="range"] 实现滑块控件
非常适合用于设置或任何需要滑块的数字输入。
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100">5. 使用 datalist 元素实现预定义选项
通过提供建议但不限制选择来增强表单的可用性。
<label for="browser">选择你的浏览器：</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>6. 为链接添加 download 属性实现文件下载
明确表示点击链接将下载文件而不是导航。
<a href="example.pdf" download="MyDocument">下载PDF</a>7. 使用 input[type="color"] 实现颜色选择器
让用户选择颜色的一种简单方法。
<label for="colorPicker">选择一个颜色：</label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">8. 实现 progress 来显示进度
对于耗时的操作（如文件上传或处理）很有用。
<label for="file">上传文件：</label>
<progress id="file" value="70" max="100">70%</progress>9. 添加 hidden 属性用于内容管理
这可以隐藏不应立即显示但可能对 JavaScript 操作有用的内容。
<p hidden>这段段落被隐藏了，但可以使用 JavaScript 显示。</p>10. 使用 template 实现可重用内容
该元素允许你定义可重用的内容，默认情况下不会渲染，但可以使用 JavaScript 实例化。
<template id="product-template">
<div class="product">
<h3 class="product-name"></h3>
<p class="product-price"></p>
</div>
</template>
<script>
const template = document.getElementById('product-template');
const clone = template.content.cloneNode(true);
clone.querySelector('.product-name').textContent = '产品名称';
clone.querySelector('.product-price').textContent = '$99.99';
document.body.appendChild(clone);
</script>