web 汇总

警告
本文最后更新于 2023-07-07,文中内容可能已过时。

下面一些 web 开发的一些总结,还有一些常用到的代码,脚本等!

front-end

html

oblique 和 intalic 的区别

这两个都是font-style属性的值,这两个值都能实现倾斜的效果,但是有区别的。

  • intalic: 这个是字体的倾斜,相当于斜体,字体必须有倾斜属性。
  • oblique: 这个准确地说是让文字倾斜。相当于斜字,字体不一定要有倾斜属性。

title 显示换行

使用
使用

1
2
<a href="#" title="第一行&#10; 第二行&#10; 第三行">使用`&#10;`</a>
<a href="#" title="第一排&#13; 第二排&#13; 第三排">使用`&#13;`</a>

图片类型选择

图片类型选择

css

flexbox

Flex 布局将成为未来布局的首选方案,比如说常见的 bootstrap4 的版本就用 flex 替代了 float 来进行排版。
我在网上看到几个很好的教程,图文并茂,一目了然。

实在懒癌发作,笔记本上手抄了笔记我就不写学习总结了,还有网友 Demo 也写了。

javascript

keydown 和 keypress

  • keydown:按下键盘键
  • keypress:紧接着keydown事件触发(只有按下字符键时触发)
  • 如果用户按下了一个字符键不放,就会重复触发keydownkeypress事件,直到用户松开该键为止。
  • 如果用户按下了一个非字符键不放,就会重复触发keydown事件,直到用户松开该键为止。

详解键盘事件 (keydown,keypress,keyup)

textContent、innerText 和 innerHTML 的区别

  1. 设置标签中的文本内容,应该使用textContentinnerText(更老)属性,区别在于浏览器支援程度
  2. 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+csssvg+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
/* 手机等小屏幕手持设备 */
@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 推广链接

QQ 推广 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

github 介绍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

更多学习内容见 学习课件
练习作业 源码+Demo

Buy me a coffee~
支付宝
微信
0%