快捷搜索:  汽车  科技

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 标签一起使用。

html标签总结:好用不知道的HTML标签(1)

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标签总结:好用不知道的HTML标签(2)

可编辑效果

<!-- html 代码 --> <div contenteditable>可编辑区域</div>mark标签

mark 标签表示为引用或符号目的而标记或突出显示的文本,这里是 mark 标签默认的标记背景颜色,也可以通过 css 样式来修改,例如:

html标签总结:好用不知道的HTML标签(3)

mark标签高亮的内容

datalist标签

datalist 标签包含了一组<option>元素,这些元素表示其它表单控件可选值,具有一定的联想过滤功能。

html标签总结:好用不知道的HTML标签(4)

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 标签。

html标签总结:好用不知道的HTML标签(5)

猜您喜欢: