HTML5的页面元素及属性

最新推荐文章于 2022-11-27 18:06:31 发布

周白卿

最新推荐文章于 2022-11-27 18:06:31 发布

阅读量1.2k

点赞数 1

分类专栏： HTML/CSS学习笔记文章标签： 1024程序员节 html5

本文链接：https://blog.csdn.net/qq_51088023/article/details/120935384

版权

HTML/CSS学习笔记专栏收录该内容

18 篇文章 4 订阅

订阅专栏

页面交互元素

1.details元素和summary元素

details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details元素定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。其基本用法如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>details和summary的使用</title>   
    </head>
    <body>
        <details>
            <summar>显示列表</summar>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
            </ul>
        </details>
    </body>
</html>

2.progress元素

progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如百分比）。

progress元素的常用属性有两个：

value:已经完成的工作量。
max：共有多少工作量。

PS：value和max属性的值必须大于0，且value的值要小于或等于max属性的值。

其基本用法如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>progress的使用</title>   
    </head>
    <body>
        <h1>我的工作进度</h1>
        <p> <progress value="50" max="100"></progress> </p>
    </body>
</html>

3.meter元素

meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个候选者的投票人数占投票总人数的比例等，都可以使用meter元素。

meter元素的常用属性
属性	说明
high	定义度量的值位于哪个带你被界定为高的值
low	定义度量的值位于哪个带你被界定为低的值
max	定义最大值，默认值是1
min	定义最小值，默认值是0
optimum	定义什么样的度量值是最佳的值。如果该值高于high属性，意味着值越高越好。如果该值低于low属性的值，则意味着越低越好。
value	定义度量的值

其基本用法如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>meter元素的使用</title>   
    </head>
    <body>
        <h1>学生成绩表</h1>
         <p>
             小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
             <br>
             小李：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
             <br>
             小明：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter>
         </p>
    </body>
</html>

全局属性

全局属性是指任何元素中都可以使用的属性，在HTML5中常用的全局属性有：draggable、hidden、spellcheck和contenteditable

1.draggable属性

draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。

2.hidden属性

在HTML5中，大多数元素都会支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容时用过浏览器创建的，页面装载后允许使用JaveScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。

3.spellcheck属性

spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。

4.contenteditable属性

contenteditable属性规定是否可以编辑元素的内容，但是前提时该元素必须可以获得鼠标焦点并且其内容不只是读的。在HTML5之前的版本中如果直接在页面上编辑文本需要编写比较复杂的JavaScript代码，但是在HTML5中只要指定该属性的值即可。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。

周白卿

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5的页面元素及属性

页面交互元素1.details元素和summary元素details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details元素定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。其基本用法如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UT
复制链接

扫一扫