网站改版费用,中企动力科技股份有限公司苏州分公司,wordpress模板视频,wordpress群组作者 | 零一来源 | 前端印象今天给大家推荐几个冷门但非常实用的 HTML 标签#xff0c;不只是语义化#xff0c;它们都有自己的应用场景和特殊自带功能。一、center让你实现水平居中#xff0c;用这个标签就对了#xff0c;标签名也非常得语义化center零一/cen… 作者 | 零一来源 | 前端印象今天给大家推荐几个冷门但非常实用的 HTML 标签不只是语义化它们都有自己的应用场景和特殊自带功能。一、center让你实现水平居中用这个标签就对了标签名也非常得语义化center零一/center效果如下水平居中原理也很简单其实就是这个标签自带了 text-align: center 的样式二、abbrabbr 全称是 abbreviations意思是缩写。应用场景也很简单为一些文章中的缩写增加注释。以前在文章中对于缩写的解释经常会这么做DAUDaily Active User日活跃用户数 ......那我们用 abbr 标签呢abbr titleDaily Active UserDAU
/abbr
span日活跃用户数 ....../span展示的效果如下这个标签就可以把全称隐藏掉弱化信息量让真正不知道该缩写的用户主动去获取缩写的具体意思这个在 markdown 里经常会出现三、markmark/ 在 markdown 中也是很常用的用于将包裹的文本高亮展示mark高亮文本/mark效果如下如果全文统一高亮样式可以专门对 mark 标签进行样式重置这样就不用对你用的每个 div 加一个 highlight 的类名了又不语义化又徒增文档大小四、sup、subsup/和sub/分别表示上标和下标在 markdown 中出现得也很频繁比如数学公式和引用div3sup[2]/sup/div
div4sub2/sub/div效果如下上标和下标的样式原理也比较简单主要就是利用了 vertical-align 的 top 和 sub 属性值然后将字号缩小不过有现成的标签干嘛不用呢五、figurefigure 是用于包裹其它标签的内容的然后再利用另一个标签 figcaption 可以对包裹的内容进行一个文本描述例如figureimg src/media/cc0-images/elephant-660-480.jpgalt大象figcaption这是一张大象的照片/figcaption
/figure效果如下那要是图片挂了呢再友好点处理我们把 img 标签的 alt 属性去掉漂亮终于把我一直厌烦的图裂icon给干掉了样式还巨好看当然不止能包裹 img 标签其它任何都是可以的嘿嘿给大家在本文来个实战下面这个可以点击样式也是利用了 figure 这个标签我是figure标签产生的六、progress说到 progress/ 这个标签就很有意思了去年有段时间我做的业务里涉及到了进度条当时是前同事做的然后有一些性能问题我就在研究如何优化减少进度条改变带来的性能问题。虽然最后问题时解决了但是也有幸收到了张鑫旭大佬的评论他告诉我 progress 这个标签就足够了既有语义化又有进度条的功能性能还好兼容性也很不错。后来经过一番尝试还真是当时是我孤陋寡闻了也安利给大家!-- 进度条最大值为100当前进度为60即60% --
progress max100 value60/浏览器自带的样式就已经很好看了效果如下业务中我们也就可以通过控制 value 属性来改变进度条的进度了七、areaarea 这个标签也非常有意思它的作用是为图片提供点击热区可以自己规定一张图的哪些区域可点击且点击后跳转的链接也可以设置成点击下载文件我们来举个例子img srcexample.png width100 height100 alt usemap#mapmap namemaparea shaperect coords0,0,100,50 altbaidu hrefhttps://www.baidu.comarea shaperect coords0,50,100,100 altsougou hrefhttps://www.sogou.com//maparea 一般要搭配 map 标签一起使用每个 area 标签表示一个热区例如上面代码中我们定义了两个热区热区形状都为rect矩形他们的热区分别是坐标 (0,0) 到 坐标 (100,50) 的一个矩形坐标 (0,50) 坐标 (100,100) 的一个矩形我们都知道默认的坐标轴是这样的因此我们划分的两个热区就是:最后再来看一下我们的实际效果i 八、detailsdetails 字面意思是 详情在markdown里也经常用用该标签包裹了的内容默认会被隐藏只留下一个简述的文字我们点击以后才会展示详细的内容detailsp我是一段被隐藏的内容/p
/details效果如下这还没有加任何一行的 js 代码我们点击后details 标签上会多一个 open 的属性被隐藏的内容就展示出来了默认情况下简要文字为 详情想要修改这个文字要搭配 summary 标签来使用detailssummary点击查看更多/summaryp我是一段被隐藏的内容/p
/details就搞定了九、dialog浏览器自带弹窗方法 alert、confirm、prompt样式固定且每个浏览器不同同时还会阻塞页面运行除了这个还提供了一个 dialog 标签它的使用方式有点类似于现在各大组件库的 Modal 组件了浏览器还为该标签提供了原生的 dom 方法showModal、close可以直接控制弹窗的展示和隐藏dialog iddialoginput typetextbutton idcloseok/button
/dialog
button idopenBtn打开弹框/buttonscriptconst 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 键来关闭弹窗十、datalistdatalist 是用于给输入框提供可选值的一个列表标签类似咱们常用的 Select 组件我可以用其实现一个 输入联想 的功能label 输入C开头的英文单词/label
input listc_words/datalist idc_wordsoption valueChinaoption valueClickoption valueCloseoption valueConstoption valueCount
/datalist来试一试刚点击时会把所有推荐的选项都列出来然后根据后面输入的内容会过滤掉不匹配了的选项比如我输入 cl会过滤掉不是 cl 开头的单词最后只剩下 Click 和 Close 了最后我发现他这个下拉框有点好看啊为啥这原生的 input 框默认样式那么丑啥时候改改十一、fieldsetfieldset 标签是用于分组管理 form 表单内的元素的若 fieldset 设置了 disabled 属性则被其包裹的所有表单元素都会被禁用置灰且不会随着表单一起提交上去是的就成了摆设什么意思呢看个例子form action/examplefieldset disabledlegend被禁用区域/legendlabelID/labelinput typetext nameid value1label邮箱/labelinput typetext nameemail value1234567163.com/fieldsetlabel名字/labelinput typetext namenamebutton typesubmit提交/button
/form这里我们把 ID 和 邮箱 的表单包裹了起来且设置了 disabled只开放了一个 name 的输入控件此时界面如下可以看到除了 name 输入框其它的两个输入框都被禁用了此时点提交会是什么样子呢嗯只提交了 name 字段十二、noscript这个标签是在浏览器不支持或禁用了 javascript 时才展示的大多用于对 js 强依赖的应用比如现在大部分的 SPA 页面一旦不支持 javascript页面基本上什么内容都没了此时可以靠这个标签做友好提示一般我们不需要特地去使用大多都是在打包过程中自动插入到 html 静态文件里去了的例如// init.js
const root document.getElementById(root)
const button document.createElement(button)
button.innerText 点击出弹窗
root.appendChild(button)!-- index.html --
script defer src./init.js/scriptnoscript不好意思你的浏览器不支持或禁用了 JavaScript请更换浏览器或启用 JavaScript
/noscriptdiv idroot/div未禁用 javascript 时页面时这样的禁用了 javascript 时是这样的最后希望本文对你有所帮助若有错误欢迎指正若你有更多有意思的想法欢迎评论区讨论往期推荐如果让你来设计网络Docker从入门到实战过程全记录没有操作系统程序可以运行起来吗如何在 Kubernetes Pod 内进行网络抓包点分享点收藏点点赞点在看
