html标签总结:好用不知道的HTML标签
html标签总结:好用不知道的HTML标签<!-- html 代码 --> <input list="weather"> <datalist id="weather"> <option value="晴天"> <option value="阴天"> <option value="小雨"> <option value="雷阵雨"> </datalist>input 标签上的 list属性和 datalist 标签上的 id 属性是一致的,datalist 为 input输入框提供可选值列表。datalist效果 <!-- html 代码 -->
details标签details 标签可以实现点击更多或者手风琴的效果,不需要写额外的 js 代码,需要配合 summary 标签一起使用。
details标签效果
<details>
<summary>展开更多</summary>
<table>
<tr>
<th>序号</th>
<th>名称</th>
<th>地址</th>
<th>工作</th>
</tr>
<tr>
<td>1</td>
<td>tom</td>
<td>美国</td>
<td>搬砖</td>
</tr>
<tr>
<td>2</td>
<td>jack</td>
<td>日本</td>
<td>搬砖</td>
</tr>
</table>
</details>
contenteditable可编辑属性
contenteditable是可以在元素上设置以使内容可编辑的属性。 它适用于 div span 等元素。只需要在标签属性上添加 contenteditable 属性就可以实现元素内容的编辑。
可编辑效果
<!-- html 代码 -->
<div contenteditable>可编辑区域</div>
mark标签
mark 标签表示为引用或符号目的而标记或突出显示的文本,这里是 mark 标签默认的标记背景颜色,也可以通过 css 样式来修改,例如:
mark标签高亮的内容
datalist标签datalist 标签包含了一组<option>元素,这些元素表示其它表单控件可选值,具有一定的联想过滤功能。
datalist效果
<!-- html 代码 -->
<input list="weather">
<datalist id="weather">
<option value="晴天">
<option value="阴天">
<option value="小雨">
<option value="雷阵雨">
</datalist>
input 标签上的 list属性和 datalist 标签上的 id 属性是一致的,datalist 为 input输入框提供可选值列表。
noscript标签如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在 noscript 标签中定义脚本未被执行时的替代内容。比如现在大部分的 SPA 页面,一旦不支持 ,页面基本上什么内容都没了,此时可以靠这个标签做友好提示。在vue 框架的入口文件 index.html中就使用了 noscript 标签。