使用 标签设置
<p>aaaa<mark>hahahahha</mark></p>
.mark{ background-color: yellow; color: #61dafb;}
data-*属性用于存储页面或应用程序专用的自定义数据。可以在JavaScript代码中使用存储的数据来创建更多的用户体验。
data- *属性由两部分组成：
-
属性名称不得包含任何大写字母，并且前缀“ data-”后必须至少长一个字符
-
属性值可以是任何字符串
-
<h2> Know data attribute </h2> <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret! </div> <button onclick="reveal()">Reveal</button> function reveal() { let dataDiv = document.getElementById('data-attr'); let value = dataDiv.dataset['customAttr']; document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;}
<datalist>标签指定了预先定义的选项列表，并允许用户添加更多。它提供了一项autocomplete功能，使您可以提前输入所需的选项。
<form action="" method="get"> <label for="fruit">输入一个并提交:</label> <input list="fruits" name="fruit" id="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Orange"> <option value="Banana"> <option value="Mango"> <option value="Avacado"> </datalist> <input type="submit"> </form>
请勿将<meter>标签用于进度条。我们有<Progress>HTML5的标记
range具有滑块，范围选择的输入类型
<input type="range" name="range" min="0" max="100" step="1" value="" onchange="changeValue(event)"/>
