HTML5的网页10个标准化

这会创建可展开或折叠的交互式内容。

简单的场景，无需 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">下载PDFa>

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>

---end---