你可能不知道的7个HTML小技巧

五一期间，知道大家都比较懒，我也是。所以写篇简单且基础的技术小文，不需要动脑子，扫一眼就能掌握的那种。

DETAILS 标签

<details> 标签将额外的详情信息隐藏起来，用户在需要的时候点击即可展开查看详情。

<details><p>这是一段文字</p><p>用户可以在需要或不需要的时候选择显示或隐藏</p>
</details>

SUMMARY 标签

<details> 标签的内容默认是“详细信息”，在其内部放置 summary 标签可以指定该值：

<details><summary>1、Summary 标签</summary><p>这是一段文字</p><p>用户可以在需要或不需要的时候选择显示或隐藏</p>
</details>

DIALOG 标签

<dialog> 标签用来展示一个对话框，通过 open 属性来指定显示和隐藏。

<dialog open>这是一个打开的对话框
</dialog>

TIME 标签

<p>我每天在 <time>6:00</time> 发表文章</p>

<time> 标签用于 date 或 time 的展示，效果上没有什么特别的，在开发的角度增加代码的可读性而已。

DATALIST 标签

<datalist> 标签用来为各种类型的 <input> 标签提供数据源，有点像 <select> 标签，但它结合 <input> 标签可以支持自定义输入和检索。

<input list="lang" placeholder="请选择语言" /><datalist id="lang"><option>JavaScript</option><option>C#</option><option>Python</option><option>Rust</option>
</datalist>

PROGRESS 标签

<progress> 标签用来表示某个任务的进度，效果是一个进度条。当不指定 value 属性时是动画效果。

<label for="file1">正在下载</label>
<progress id="file1" value="30" max="100">30%</progress>
<p/>
<label for="file2">正在下载</label>
<progress id="file2"></progress>

SMALL 标签

<small> 标签使用文本更小，一般用来修饰不重要的文本信息。

<p>价格：199<small>.00</small> 元</p>

完。

你可能不知道的7个HTML小技巧相关推荐

10-N个你可能不知道的Mixly软件操作小技巧 | Mixly技巧系列
Mixly 是由北师大米思齐团队开发的图形化编程软件,自发布以来深受国内创客圈的喜爱.Mixly 编程软件采用图形化编程,不用记代码,只需要拖拽.简单设置,就能让你快速完成创意电子编程. 本专栏系列课 ...
ipad分屏功能怎么开启_小白必看，自己整理的 10 个你可能不知道的 iPad 系列使用小技巧...
你手上拿着最新款的 iPad,但 iPad 一些及便捷又适用的操作小技巧你肯定或多或少不太清楚,所以趁着这个机会,我想把自己整理的 10 个你可能不知道的 iPad 系列使用小技巧告诉大家,让大伙也能 ...
你也许不知道的5个微信小技巧
对大家来说,手机中最重要的软件肯定是微信了,毕竟微信的功能实在太实用,一刻也离不开啊, 不过用了这么久的微信,下面这些小技巧你知道几个呢?知道了能让你的手机好用数倍! 1.减少占用空间随着微信使用时 ...
你可能还不知道的暗黑3常用小技巧
以下是上次活动热心坛友发来的游戏小技巧,经过我的搜集和加入一些自己和朋友们分享的经验整合编辑而成.再次感谢大家的热心参与. 都非常实用哟!!! 操作篇 1,如果你不希望朋友进入你的游戏时,按ESC,在 ...
vscode 逗号不换行_你肯定不知道的，苹果手机输入法小技巧，大大提高我们打字效率哦...
Iphone手机因为它的IOS系统,是很多人选择苹果手机的原因.Iphone手机用了这么久,可能大多数人都对ihpone手机技巧了如指掌,今天我们就来分享几个较冷门的实用小技巧,你不一定全都知道哦. ...
delphi webbrowser 对象不支持_建模初学者，那些你可能还不知道的10个ZBrush小技巧！【值得收藏】...
介绍如果你对zbrush软件的了解,只是认为它是一款雕刻软件,那么现在是时候对它另眼相看了. 作为数字雕刻的行业标准,ZBrush的工具集非常灵活,以至于能够让用户选择比较适合他们自己的工作流,人们 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
十个你可能不知道的CloudFlare免费CDN加速技巧
十个你可能不知道的 CloudFlare 免费 CDN 加速技巧 - SSL\DDOS\Cache. 要说免费 CDN 服务的 "大牛" 恐怕就只能当数 CloudFlare 了. ...
axure中出现小手_你所不知道的15个Axure使用技巧
Axure 6.5已于4月18日发布,可直到上周我才发现,于是赶紧下载升级.等待下载的过程中,闲来无聊跑去看了Axure的版本历史,又浏览了一下官方的使用教程,忽然发现Axure竟如此博大精深,自己平 ...

你可能不知道的7个HTML小技巧

五一期间，知道大家都比较懒，我也是。所以写篇简单且基础的技术小文，不需要动脑子，扫一眼就能掌握的那种。

DETAILS 标签

SUMMARY 标签

DIALOG 标签

TIME 标签

DATALIST 标签

PROGRESS 标签

SMALL 标签

你可能不知道的7个HTML小技巧相关推荐

最新文章

热门文章

​你可能不知道的7个HTML小技巧

五一期间，知道大家都比较懒，我也是。所以写篇简单且基础的技术小文，不需要动脑子，扫一眼就能掌握的那种。

DETAILS 标签

SUMMARY 标签

DIALOG 标签

TIME 标签

DATALIST 标签

PROGRESS 标签

SMALL 标签

​你可能不知道的7个HTML小技巧相关推荐

最新文章

热门文章

你可能不知道的7个HTML小技巧

你可能不知道的7个HTML小技巧相关推荐