一、mark标签
<mark>高亮文本</mark>
二、sup、sub
- sup:表示上标
- sub:表示下标
一般可以用作数学公式的引用
<div>
3<sup>2</sup>
</div>
<div>
CO<sub>2</sub>
</div>
三、progress
progress是一个进度条
比如一个总进度是100,当前进度是70就可以是
<progress value="70" max="100" />
四、details与summary
details是详情的意思,它可以包裹详细内容并且隐藏,点击之后才展开
<details>
<p>内容</p>
<p>666</p>
</details>
details默认展示的标题是详情,当然也可以通过summary进行修改
<details>
<summary>点击查看更多</summary>
<p>内容</p>
<p>666</p>
</details>
五、datalist
datalist是一个类似Select的下拉的列表,不过它不同的是可以模糊匹配列表中的数据
<label>输入C开头的英文单词:
<input type="text" list="c_word"/>
<datalist id="c_word">
<option value="China"></option>
<option value="Click"></option>
<option value="Close"></option>
<option value="Const"></option>
<option value="Count"></option>
</datalist>
</label>
六、optgroup
optgroup可以给select中的option进行分组,这在下拉项目很多的时候很有用,配合label标签给每组命名。
<select>
<optgroup label="手机">
<option>小米</option>
<option>华为</option>
</optgroup>
<optgroup label="电脑">
<option>联想</option>
<option>戴尔</option>
<option>华硕</option>
</optgroup>
</select>
以上这些标签,都挺有意思的,而且在某些情况下都非常都有用,不用去花费太多时间去写代码