1. 缩写
abbr的全称是,应用场景也很简单,对一些文章中的缩写添加注解。
以往对文章中缩写的解释往往是这样的:
DAU(Daily Active User),日活跃用户数 ......
那么使用 abbr 标签怎么样?
DAU
,日活跃用户数 ......
显示效果如下:
这个标签可以隐藏全称,弱化信息量caption是什么意思,让真正不知道缩写的用户主动去获取缩写的具体含义,这在 中经常出现。
2. 马克
它也常用于,用于突出显示换行的文本。
高亮文本
效果如下:
如果想让整个文本使用统一的高亮样式,可以专门重新设置 mark 标签的样式。这样就不用给每个使用的 div 添加 class 名,这样做不具备语义,只会增加文档大小。
3. supcaption是什么意思,sub
和 分别代表上标和下标,在中文中经常出现,例如数学公式和引用文。
3[2]
42
效果如下:
上标和下标的样式原理也比较简单,主要是利用-align的top和sub属性值,然后缩小字体大小。不过有现成的标签,何必不用呢?
四、
它用于包裹其他标签的内容,然后使用另一个标签对包裹的内容给出文字描述,例如:
效果如下:
如果图片挂了怎么办?
为了使其更加友好,我们可以删除img标签的alt属性。
漂亮,终于摆脱了我一直恼火的图标破裂的问题了,而且风格也很漂亮。
当然,它可以包装的不仅仅是 img 标签,其他任何东西都是可能的。
嘿嘿,这篇文章给大家举个实际的例子,下面这个可以点击,样式也是用了这个标签。
我被标签所创造
五,
说起
这个标签很有意思,去年有一段时间我做的业务涉及到一个进度条,是当时以前的同事做的英语作文,出现了一些性能问题,当时在研究怎么优化,减少进度条变化带来的性能问题。
虽然最后问题解决了,但是还是很幸运的收到了张鑫旭的评论,说这个标签就够了,兼具语义和进度条功能,性能好,兼容性也好,尝试了几次之后,发现确实是当时自己孤陋寡闻了,所以推荐给大家。
浏览器自身的样式已经很好看了,效果如下:
在业务中我们还可以通过控制value属性来改变进度条的进度。
6. 面积
area标签也挺有意思的,用来给图片提供点击热点,可以定义图片的哪些区域是可以点击的,点击后跳转的链接也可以设置下载文件,我们来举个例子:
Area 通常和 map 标签一起使用,每个 area 标签代表一个热区,例如上面的代码中我们定义了两个热区,热区的形状都是 rect(长方形),它们的热区分别是:
我们都知道默认的坐标轴是这样的:
因此我们划分的两个热区为:
最后我们来看看我们的实际结果:
七,
字面意思就是“详细信息”,经常用在 中,被该标签包裹的内容会默认被隐藏,只留下简单的说明,我们点击之后才会显示详细内容。
我是一段被隐藏的内容
效果如下:
还没有添加一行js代码,我们点击之后,会给标签添加一个open属性,隐藏的内容就会显示出来。
默认情况下,简要文字为“详细信息”,如果要修改此文字,需要配合标签使用。
点击查看更多
我是一段被隐藏的内容
就是这样!
八,
浏览器自带了alert、close等弹窗方法,样式都是固定的,每个浏览器都不一样,也会阻塞页面运行。除此之外,还提供了一个标签,它的用法有点类似各大组件库的Modal组件,浏览器也为这个标签提供了原生的DOM方法:close,可以直接控制弹窗的显示与隐藏。
<script>
const dialog = document.getElementById('dialog')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('close')
openBtn.addEventListener('click', () => {
// 打开弹框
dialog.showModal()
})
closeBtn.addEventListener('click', () => {
// 隐藏弹框
dialog.close()
})
</script>
效果如下:
仔细的大家有没有注意到,这个原生的弹窗也是带有背景遮罩的,虽然无法通过点击关闭,但至少不会遮挡页面。
那么当弹窗显示出来的时候,我们也可以通过按Esc键来关闭弹窗。
九,
它是一个用于为输入框提供可选值的列表标签,类似于我们常用的组件。
我可以用它来实现一个“输入联想”功能。
试一试吧:
第一次点击的时候会列出所有推荐的选项,然后根据后面输入的内容,过滤掉不匹配的选项。比如我输入cl,不以cl开头的单词都会被过滤掉,只剩下Click和Close。
最后发现这个下拉框挺好看的,这个原生输入框默认样式怎么这么丑啊,什么时候改啊
十,
该标签用于对表单内的元素进行分组管理,如果设置了该属性,那么被它包裹的表单元素全部会被禁用,并且变灰,不会随表单一起提交,是的,它会变成一个摆设。
这是什么意思?以下是一个例子:
这里我们将ID和email的表单进行包装,并设置只打开一个name的输入控件,界面如下:
可以看到除了姓名输入框之外,其他两个输入框都被禁用了,这时候点击提交会是什么样子的呢?
嗯,只提交了姓名字段。
十一,
此标签仅在浏览器不支持或者被禁用时显示,多用于对js依赖较大的应用中,比如现在大部分SPA页面,一旦不支持,页面基本就没什么内容了,此时此标签可以起到友好提示的作用。
一般我们不需要特意去使用它,大部分都是在打包过程中自动插入到HTML静态文件中的,例如:
// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '点击出弹窗'
root.appendChild(button)
<script defer src="./init.js"></script>
当没有禁用时,页面如下:
禁用时,它看起来像这样: