![](https://img-blog.csdnimg.cn/20200704143606684.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML
HTML各种实现
looper.zhuo
编程从入门到放弃到挣扎到了解到熟悉到精通
展开
-
彻底搞懂多种方式实现垂直水平居中布局
起源今天看了一篇文章,面试官面试一个有三年经验的面试者,其中一个问题就是:有哪些方式可以实现垂直水平居中的方式?结果面试者就是知道有一个flex布局,支支吾吾也没有说清楚。所以我准备整理一下常用的居中方式:使用absolute绝对定位实现效果:1.使用absolute盒子没有指定宽度和高度,再配合css3里的transform属性实现//代码<body > <div> <h2>我是一个垂直水平居中的元素&l...原创 2020-09-03 11:27:21 · 234 阅读 · 0 评论 -
原生js实现日历效果
先看看效果吧项目结构html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Calender Demo</title> <link rel="stylesheet" type="text/css" href="./demo.css" /> <script te.原创 2020-08-26 21:44:37 · 605 阅读 · 0 评论 -
HTML之行内元素和块级元素的区别有哪些?
背景在css基础当中,我们往往会遇到块元素和行内元素。在实际开发中,会经常把他们弄混淆,而且很难记住。那么行内元素和块级元素的区别有哪些?下面我们就来说说常见的行内元素<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del&...原创 2020-08-06 17:44:51 · 412 阅读 · 0 评论 -
精心整理前端登录验证码实现
最近在做登录的时候需要在界面上开发一个验证码功能,防止恶意登录,先看看效果图:利用canvas实现了一个简单的验证码判别功能:点击验证码刷新验证码 输入忽略大小写 输入空字符串自动tirm附上github的demo代码:点击这里...原创 2020-06-08 15:34:17 · 847 阅读 · 6 评论 -
input的事件使用的坑
最近在做项目(angular)时需要做一些动态的响应式验证,市场上提供的一些组件并不能满足要求,所以打算在input上做一些处理达到我们预期的效果,在做的时候遇到一些坑分享出来:1.pattern使用pattern这个属性对于input很重要,我们可以设置一些正则表达式去查看我们的输入是否合理,比如 pattern="^[0-9]*$",只能输入数字,当输入不满足时候我们可以加一些逻辑验证...原创 2019-11-23 14:48:57 · 471 阅读 · 4 评论 -
前端实现HTML标签转义及反转义,又吃螃蟹喽
背景:最近在做一个输入memo之后保存到数据库,当时没注意,等到上线运行一段时间后发现<p><b>等字符很多,觉得有问题,就去试了一下,输入< @和html标签,我屮艸芔茻(戳),居然给我转译存到db里面去了。后面发现在api里面有个插件对特殊的标签进行了转译。解决方式:既然保存成那个鬼样子了,我也吐了,那就硬来吧如下:html里的innerText和innerHTML其实可以实现相互转译 转译(把标签转译成特殊字符)func原创 2020-07-02 16:29:45 · 1420 阅读 · 0 评论