WEBSTORM前端——第1章：HTML——第3节：其他常用标签-CSDN博客

本文链接：https://blog.csdn.net/2401_82750246/article/details/147125448

1.< details >与< summary >标签

1.< details >与< summary >标签

<details>标签：用于描述文档或文档某部分细节

<summary>标签：作为<details>标签的第一个子元素，用于定义<details>标签的标题。

注：标题是可见的，当用户单击标题时，会显示或隐藏<details>标签中的其他内容！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
    <details>
        <summary>details标签和summary标签</summary>details标签：用于描述文档或文档某部分细节，summary标签：作为details标签的第一个子元素，用于定义details标签的标题。<u>注：标题是可见的，当用户单击标题时，会显示或隐藏details标签中的其他内容！</u>
        <summary>内容2</summary>
        <summary>内容3</summary>
        <summary>内容4</summary>
    </details>
    <details>
        <summary>details标签</summary>
        <summary>内容1</summary>
        <summary>内容2</summary>
        <summary>内容3</summary>
    </details>
</body>
</html>

效果图：

2.< time >标签

①作用：用于定义时间或日期，它不会在浏览器中呈现效果

②分类：

属性	描述
datetime	定义具体时间（如15：00）或日期（如2010-10-10），否则，由标签的内容给定日期/时间。
pubdate	定义<time>标签中的日期/时间，一般情况下，值为pubdate。

3.< progress >标签

①作用：用于定义运行中的任务进度

②属性：

属性	描述
max	规定需要完成的值
value	规定进程的当前值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
    progress标签用法一：表示任务正在进行
    <br>工作进行中：
    <progress></progress>
        <br><hr>
    <br>progress标签用法二：表示已完成的任务量
    <br>已修满学分：
        <progress value="45" max="100"></progress>
</body>
</html>

效果图：

4.< meter >标签

①作用：用于定义度量衡

②属性：

属性	描述
high	定义被界定为高的值的范围
max	定义最大值，默认值是1
title	光标移到进度条上提示文字
low	定义被界定为低的值的范围
min	定义最小值，默认值是0
value	定义度量的值
optimum	定义最佳值，如该值高于high属性对应的值，则意味值越高越好，如低于low属性对应的值，则越低越好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
    手机电量显示：
    <br>充足模式：
        <meter min="0" max="100" low="10" high="20" optimum="100" value="80" title="80%">80%</meter>
    <br>省电模式：
        <meter min="0" max="100" low="10" high="20" optimum="100" value="15" title="15%">15%</meter>
    <br>低电模式：
        <meter min="0" max="100" low="10" high="20" optimum="100" value="5" title="5%">5%</meter>
</body>
</html>

效果图：

5.全局属性

①draggable属性：规定元素是否能被拖动，有2值，true和false，默认false

（1）当为true时，表该元素中被选中后可以进行拖动操作

（2）当为false时，表示该元素被选中后不可以进行拖动操作

②hidden属性：是布尔属性，用于规定元素是可见的

（1）当值为true时，则显示

（2）当值为false时，则隐藏

③spellcheck属性：规定是否元素的输入内容进行拼写和语法检查

（1）当值为true时，则检查

（2）当值为false时，则不检查

注：①②③适合与JS搭配使用

④contenteditable属性：规定是否可以编辑元素的内容，使用前提是该元素必须获得鼠标焦点且不是只读的

（1）当值为true时，则编辑

（2）当值为false时，则不编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
    <h2>不可编辑菜单：</h2>
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
        </ul>
    <h2 contenteditable="true">可编辑菜单：</h2>
    <ul contenteditable="true">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>
</body>
</html>

效果图：

6.表单标签`< form >`

作用：创建 HTML 表单，用于用户输入数据并提交到服务器。
含义：提供用户与服务器交互的界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
<form action="submit.php" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>
</body>
</html>

效果图：

7.`< footer >标签`

作用：定义页面或页面中某个区域的底部，通常包含版权信息、联系方式等。
含义：标识页面或区域的结束部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<body>
<footer>
    <p>版权所有 &copy; 2025</p>
</footer>
</body>
</html>

效果图：