Html总结（二）

最新推荐文章于 2024-04-26 09:40:19 发布

Dannii_

最新推荐文章于 2024-04-26 09:40:19 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

分类专栏： Html/Css 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_36748278/article/details/69938893

Html/Css 专栏收录该内容

6 篇文章

订阅专栏

datalist

<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hh</title>
</head>
<body>
    text：<input type="text" name="greetings" list="greetings">
    <datalist id="greetings" >
        <option value="Good Morning">Good Morning</option>
        <option value="Hello">Hello</option>
        <option value="Good Afternnon">Good Afternnon</option>
    </datalist>
</body>
</html>

这里写图片描述

meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，使用 <progress> 标签。
optimum 属性：规定的范围是被视为最佳值的度量值。浮点数。

<p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter> GB</p>
<p>你的得分是：
    <meter value="91" min="0" max="100" low="40" high="90" optimun="100">A+</meter>
</p>

这里写图片描述

select下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> form-list</title>
</head>
<body>
    <form>
        <select>
            <option value="Volvo">Volvo</option>
            <option value="Saab">Saab</option>
            <option value="Fiat" selected="selected">Fiat</option>  //网页进入后默认显示Fiat     
            <option value="Audi">Audi</option>
        </select>
    </form>
</body>
</html>

这里写图片描述

output

for 属性：规定了计算中使用的元素与计算结果之间的关系。

<!DOCTYPE html>
<html lang="en">
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
   <input type="range" id="a" value="50"> 100
   + <input type="number" id="b" value="50">
   = <output name="x" for="a b"></output>
</form> 
</html>

这里写图片描述

number的valueAsNumber属性

valueAsNumber属性：把字符串转换成数字

<!DOCTYPE html>
<html lang="en">
<head>
    <title>valueAsNumber</title>
</head>
<form>
    <input type="number" id="number1"> +
    <input type="number" id="number2"> =
    <input type="number" id="result" readonly>
    <input type="button" value="comput" onclick="sum()">
</form>
<script>
    function sum()
    {
        var number1=document.getElementById("number1").valueAsNumber;
        var number2=document.getElementById("number2").valueAsNumber;
        document.getElementById("result").valueAsNumber=number1+number2;
    }
</script>
</html>

这里写图片描述

若是用value属性，结果会是字符串相加

<!DOCTYPE html>
<html lang="en">
<head>
    <title>valueAsNumber</title>
</head>
<form>
    <input type="number" id="number1"> +
    <input type="number" id="number2"> =
    <input type="number" id="result" readonly>
    <input type="button" value="comput" onclick="sum()">
</form>
<script>
    function sum()
    {
        var number1=document.getElementById("number1").value;
        var number2=document.getElementById("number2").value;
        document.getElementById("result").value=number1+number2;
    }
</script>
</html>

这里写图片描述

selectionDirection

selectionDirection适用于input元素和textarea元素。
用户在input元素或textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为”forward”，反向选取值为“backward”，且当用户没有选取任何文字时，该属性值为”forward”。