​你可能不知道的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>

完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/310189.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

青年节寄语和新课程免费上架

大家好&#xff0c;确实好久没有写东西了&#xff0c;希望这篇推送不是用来提醒你取消关注哈。2020年这突如其来的疫情&#xff0c;打乱了我们的生活&#xff0c;也让很多人更加明白了生活的无常以及可贵吧&#xff0c;在此也真诚希望大家都要好好哒&#xff0c;不负韶华&#…

从堆里找回“丢失”的代码相关命令简介

前言 在上一篇文章中&#xff0c;我们主要使用了三个命令 !address&#xff0c;s&#xff0c;.writemem 把丢失的代码成功的保存到了文件中。本文简单介绍一下上文用到的这三个命令。windbg 中的地址范围语法 很多命令都会用到 地址范围。比如 s 命令&#xff0c;.writemem 命令…

慎用ToLower和ToUpper,小心把你的系统给拖垮了

不知道何时开始&#xff0c;很多程序员喜欢用ToLower&#xff0c;ToUpper去实现忽略大小写模式的字符串相等性比较&#xff0c;有可能这个习惯是从别的语言引进的&#xff0c;大胆猜测下是JS&#xff0c;为了不引起争论&#xff0c;我指的JS是技师的意思~一&#xff1a;背景1. …

mysql 2008 日_SQL2008 的 日期数据类型

摘要你是否曾经想在数据库中存储一个日期而没有时间部分&#xff0c;或者想存储一个时间值希望有更高的精度&#xff1f;在SQL Server 2008的介绍中&#xff0c;微软介绍了一些新的日期数据类允许你只存储一个日期、更高精度的时间值等。这些新的数据类型为你存储日期和时间相关…

别了,JavaScript;你好,Blazor

Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世&#xff0c;WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令。WebAssembly 的 官方工具链 能够编译 C/C 代码&#xff0c;但许多社区也提供了不同语言的编译器&#xff0c;如 Rust&#xff0c;Python…

[Java基础]接口组成(默认方法,静态方法,私有方法)

默认方法: 代码如下: package MyInterfacePack;public interface MyInterface {void show1();void show2();// void show3();public default void show3(){System.out.println("show3");};}package MyInterfacePack;public class MyInterfaceImplOne implements …

linux jdk1.7 tomcat mysql_Linux环境搭建 jdk+tomcat+mysql

好久之前搭建的&#xff0c;现在记录下 防止下次配置去找安装jdk(jre也行),tomcat MySQL一、jdk安装及环境变量配置:我是用 jdk-8u191-linux-x64.tar.gz 安装的安装之前提前下载好 jdk版本 看你用什么版本吧 都一样的步骤 按照下面的步骤操作 要确保完全是一个新环境…

开源 一套 Blazor Server 端精致套件

Blazor 作为一种 Web 开发的新技术已经发展有一段时间了&#xff0c;有些人标称 无 JS 无 TS&#xff0c;我觉得有点误导新人的意味&#xff0c;也有人文章大肆宣传 Blazor 是 JavaScript 的终结者&#xff0c;是为了替代 JavaScript 而生的&#xff0c;我认为这些言论都太激进…

[Java基础]函数式接口

代码如下: package MyInterfacePack01;FunctionalInterface public interface MyInterface {void show(); }package MyInterfacePack01;public class MyInterfaceDemo {public static void main(String[] args){MyInterface my ()->System.out.println("hello world&q…

从零搭建分布式文件系统MinIO比FastDFS要更合适

前两天跟大家分享了一篇关于如何利用FastDFS组件来自建分布式文件系统的文章&#xff0c;有兴趣的朋友可以阅读下《用asp.net core结合fastdfs打造分布式文件存储系统》。通过留言发现大家虽然感兴趣&#xff0c;但是都觉得部署比较麻烦。的确&#xff0c;fastdfs的部署很繁琐&…

[Java基础]方法引用

代码如下: package PrintablePack;public interface Printable {void printString(String s);}package PrintablePack;public class PrintableDemo {public static void main(String[] args){usePrintable(s-> System.out.println(s));usePrintable(System.out::println);/…

甲方爸爸,大概你要的是代码生成器吧?

作者&#xff1a;邹溪源&#xff0c;长沙资深互联网从业者&#xff0c;架构师社区特邀嘉宾&#xff01;一1&#xff09;有一天&#xff0c;我的朋友Y童鞋分享了他正在做的一个内部开源项目&#xff0c;这个开源项目从外表上看&#xff0c;跟目前市场上那些代码生成器本没有特别…

使用pdf.js来预览pdf文件_适用于Dynamics365与PowerApps的注释预览组件

powerapps/dynamics365适用的注释预览/批量下载组件自定义组件为预览功能原生预览支持的文件类型:图像,zip,音频,pdf支持批量打包注释为zip下载到本地使用浏览器预览支持:音频,视频,图像,pdf,文本,xml,json等,理论上只需要浏览器支持打开的文件类型,均可预览使用方法:1.导入解决…

消息队列,我只选RabbitMQ!

高并发架构是架构师的必修课&#xff0c;而消息队列&#xff0c;则是王冠上最闪亮的那颗明珠&#xff01;能否驾驭消息队列这款高并发神器&#xff0c;亦成为架构师的试金石。作为专注.NET领域十多年的老架构师&#xff0c;下面从队列本质、技术选型、实战应用三个方面&#xf…

python比较三个数_python经典练习题(三)

人生苦短&#xff0c;你需要python继续学习python第一题题目&#xff1a;输入三个整数 x,y,z&#xff0c;请把这三个数由小到大输出不借助sortnum1 int(input("请输入第一个数"))num2 int(input("请输入第二个数"))num3 int(input("请输入第三个数&qu…

使用Jexus 容器化您的 Blazor 应用程序

在本文中&#xff0c;我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI&#xff0c;因此无论平台如何&#xff0c;使用的命令都将是相同的。Blazor 托管模型Blazor 有两个托管模型&#xff0c;它们的要求不同&#xff0c;本文主要基…