web 汇总
下面一些 web 开发的一些总结，还有一些常用到的代码，脚本等！
front-end
html
oblique 和 intalic 的区别
这两个都是font-style属性的值，这两个值都能实现倾斜的效果，但是有区别的。
intalic: 这个是字体的倾斜，相当于斜体，字体必须有倾斜属性。oblique: 这个准确地说是让文字倾斜。相当于斜字，字体不一定要有倾斜属性。
title 显示换行
1 2 | <a href="#" title="第一行 第二行 第三行">使用` `</a> <a href="#" title="第一排 第二排 第三排">使用` `</a> |
|---|
图片类型选择
css
flexbox
Flex 布局将成为未来布局的首选方案，比如说常见的 bootstrap4 的版本就用 flex 替代了 float 来进行排版。 我在网上看到几个很好的教程，图文并茂，一目了然。
实在懒癌发作，笔记本上手抄了笔记我就不写学习总结了，还有网友 Demo 也写了。
javascript
keydown 和 keypress
keydown：按下键盘键keypress：紧接着keydown事件触发（只有按下字符键时触发）- 如果用户按下了一个字符键不放，就会重复触发
keydown和keypress事件，直到用户松开该键为止。 - 如果用户按下了一个非字符键不放，就会重复触发
keydown事件，直到用户松开该键为止。
详解键盘事件 (keydown，keypress，keyup)
textContent、innerText 和 innerHTML 的区别
- 设置标签中的文本内容，应该使用
textContent或innerText（更老）属性，区别在于浏览器支援程度 innerHTML能够获得元素内的所有标签内容，也可以设置标签使之生效。（注意防止 XSS 注入）
如果某个属性在浏览器中不支持，那么这个属性的类型是undefined，判断这个属性的类型是不是undefined，就知道浏览器是否支持。
1 2 3 4 5 6 7 8 9 10 11 | <script> // 设置任意的标签中间的任意文本内容 function setInnerText(element, text) { //判断浏览器是否支持这个属性 if (typeof element.textContent == "undefined") {//不支持 element.innerText = text; } else {//支持这个属性 element.textContent = text; } }; </script> |
|---|
图床方案
- 自行搭建 比如使用开源图床 ImgURL 搭建的
img.lruihao.cn（需要服务器） 使用上传工具加第三方免费空间，比如PicGo + 腾讯云 COS（无需服务器） - 使用各大图床 诸如 sm.ms，腾讯云 COS，阿里云 OSS，七牛云，又拍云，Github，微博图床，ImgURL 图床等等
font-awesome
现在使用 5 的版本，可以使用webfont+css或svg+js
1 | <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> |
|---|
其他的图标 js
1 2 3 4 | <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js"></script> <svg class="card-avatar" aria-hidden="true"> <use xlink:href="#icon-{{n+1}}"></use> <!--n 为一个数字--> </svg> |
|---|
响应式（自适应）
1 2 | <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"> |
|---|
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"> |
|---|
- .col-xs- 超小屏幕 手机 <768px
- .col-sm- 小屏幕 平板 >=768px
- .col-md- 中等屏幕 >=992px
- .col-lg- 大屏幕 >1200px
css3 写法 @media （宽度具体调整）
1 2 3 4 5 6 7 8 9 10 11 12 | /* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) { /*手机端 css 样式表*/ } /* 平板之类的宽度 1024 以下设备 */ @media only screen and (min-width: 321px) and (max-width: 1024px) { /*电脑端 css 样式表*/ } |
|---|
link 引入不同 css
1 2 3 4 | <!--手机端--> <link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/> <!--电脑端--> <link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/> |
|---|
jquery
1 2 3 4 5 6 7 8 | <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> //还有其他的源 ... |
|---|
QQ 推广链接
1 | <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=1074627678&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1074627678:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> |
|---|
Google fonts
1 2 3 4 | https://fonts.google.com/ 一般选用国内源镜像替代（待补充 ...） + https://fonts.loli.net + //fonts.lug.ustc.edu.cn |
|---|
fancybox
1 2 | <link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script> |
|---|
back-end
腾讯云开发者
