一些非常基础的内容合集

程序员文章站 2022-03-14 09:57:18

...

块元素、内联元素、空元素有哪些，它们之间的区别？

行内元素有：a、b、span、img、input、select、textarea、em、img、strong（强调的语气）;

块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;

空元素： input type=“hidden”/>、br>、hr>、link>、meta>;

小结：块元素总是独占一行，margin对内联元素上下不起作用;

cookies，sessionStorage 、 localStorage 你对它们的理解？

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
大小： cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存；sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，面试官可能还会深入了解这些内容。

1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较

简述一下你对HTML语义化的理解？

语义化是指根据内容的类型，选择合适的标签（代码语义化）,即用正确的标签做正确的事情; html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取; 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO。

:before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成），想让插入的内容出现在其它内容前，使用::before，之后则使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。

Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由(licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}

浏览器的最小字体为12px，如果还想再小，该怎么做？
1). 用图片
2). CSS3：css3的样式transform: scale(0.7)，scale有缩放功能;
移动端的边框0.5px,你有几种方式实现？

伪类缩放：现在用的比较多的方式之一 :after 1px然后transform: scale(0.5);基本能满足所有场景，对于圆角的处理也很方便;
示例代码：

本文由平头哥联盟-首席填坑官∙苏南分享
css3的transform:scale  
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
  position:relative;
    &:after{
       left:0px;
       top:0px;
       right:-100%;
       bottom:-100%;
       border-radius:$radius;
       border-style: $style;
       border-color: $color;
       border-width: $width+ px;
       position:absolute;
       display:block;
       transform:scale(0.5);
       -webkit-transform:scale(0.5);
       transform-origin:0 0;
       -webkit-transform-origin:0 0;
       content:'';
    }
}

ES6的数据类型

Boolean
Null
undefined
Number
String
Symbol
Object(Arryay,Function,Object)

千位分隔符

//方法1:
var separator=(num)=>{
    if(!num){
        return '0.00';
    };
    let str = parseFloat(num).toFixed(2);
    return str && str
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
            return $1 + ",";
        });
}

separator(386485473.88) //"386,485,473.88"

//方法2：
(386485473.88).toLocaleString('en-US')  // "386,485,473.88" 由 (sRect)补充

给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：

<body class="container">
    <table id="table">
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        …………
    </table>
<script>
    let table =document.querySelector("#table");
    table.addEventListener("click",(e)=>{
        let {nodeName} = e.target;
        if(nodeName.toUpperCase() === "TD"){
            console.log(e.target);//<td>N</td>
        }
    },false);

</script>
</body>

11. 项目上线前，你们做过哪些性能优化：

图片预加载，css样式表放在顶部且link链式引入，javascript放在底部body结束标签前;
使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减少 DNS 查询，如： ;
减少http请求次数:图片静态资源使用CDN托管;
API接口数据设置缓存，CSS Sprites/SVG Sprites, JS、CSS源码压缩、图片大小控制合适，使用iconfont(+ 字体图标)或SVG，它们比图片更小更清晰，网页Gzip压缩;
减少DOM操作次数，优化javascript性能;
减少 DOM 元素数量，合理利用:after、:before等伪类;
避免重定向、图片懒加载;前后端分离开发，资源按需加载，最好能做到首屏直出(即服务端渲染);

避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性) ;
多域名分发划分内容到不同域名，解决浏览器域名请求并发数问题，同时也解决了请求默认携带的cookie问题;
尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;

12. 如何设置http缓存？

1). Expires

Expires的值为服务端返回的到期时间，响应时告诉浏览器可以直接从浏览器缓存中读取无需再次请求。
缺点：返回的是服务端的时间，比较的时间是客户端的时间，如果时间不一致有可能出现错误。

2). Cache-Control

Cache-Control可设置的字段有：
private：客户端可以缓存
public：客户端和代理服务器都可以缓存
max-age=xxx：缓存内容在xxx秒后失效
no-cache：需要用另一种缓存策略来验证缓存(ETag,Last-Modified)
no-store：不进行缓存
Last-Modified：浏览器请求获得文件后，服务器返回该文件的最后修改时间Last-Modified，下一次请求会带上If-Modified-Since标识，如果If-Modified-Since等于服务器的文件修改时间，则表示文件没有修改，返回304状态码，浏览器从浏览器缓存中读取文件。如果If-Modified-Since小于服务端的文件修改时间，则浏览器会重新发送请求获取文件，返回状态码200。
ETag：服务器文件的一个唯一标识，例如对文件内容取md5值作为ETag的字段返回给浏览器。当文件变化时ETag的值也会发生变化。下次请求会带上If-None-Match即浏览器保留的ETag值，如果发送了变化，则文件被修改，需要重新请求，返回200状态码。反之浏览器就从缓存中读取文件，返回304状态码。

13. js中的|| 与 &&
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, true返回a, false返回b
转换规则:
对象为true
非零数字为true
非空字符串为true
其他为false

14. 正则相关的一些方法

test()方法检索字符串中的值是否匹配给出的正则规则,返回布尔值 true或false。

/../.test("ab");        // true。

exec()方法检索字符串中的指定值，如果找到匹配的文本，则返回一个结果的数组，反之返回null。

/abc/.exec("defaabc")       //  ["abc", index: 4, input: "defaabc"]
/qqq/.exec("abcdefaabc")     // null

compile()方法用于改变正则匹配内容

/abc/.compile('def’)    //  /def/

split()将字符串分割成字符串数组

"abcd".split(/b/);       // ["a", "cd"]

replace()方法用于在字符串中用一些字符替换另一些字符或者替换一个与正则表达式匹配的字符串

'12345abcde'.replace(/\d\d\d/g,'*');     //  "*45abcde"
// 去掉字符串的引号，全局检索'，替换成''空
'12345abcde'.replace(/'/g,'');     //12345abcde
// 去掉字符串中所有的空格，tab,换页符，换行符
' 12 345ab cd    e '.replace(/\s/g,'');     // "12345abcde"

search() 用于检索字符串中指定的字符串或与正则表达式相匹配的字符串，返回匹配的字符串的起始位置的索引，反之返回-1

'abcdedfasdfs'.search(/[d]/);      // 3
// 即使是全局匹配，也只会匹配到第一个的位置
'abcdedfasdfs'.search(/d/g);     // 3
// 如果没有匹配到，返回-1
'abcdedfasdfs'.search(/o/g);     // -1

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

"aabbbbccbbaab".match(/b+/g);     //  ["bbbb", "bb", "b"]

正则小括号理解方法：
如果想要把 yyyy-mm-dd 替换成格式 mm/dd/yyyy 应该怎么做。
String 的 replace 方法在第二个参数里面可以用 $1 - $9 来指代相应的分组

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-08-09";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); // "08/09/2017"
等价
var result = string.replace(regex, function() {
    return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); // "08/09/2017"
等价
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-08-09";
var result = string.replace(regex, function(match, year, month, day) {
    return month + "/" + day + "/" + year;
});
console.log(result); // "08/09/2017"

中括号理解
1.某个区间内如 [a-zA-Z0-9]
2.某几个字母中的随意一个 [abcd]
3.可以在中括号中进行取非的操作.[^abc]
4.在中括号中的字符不再有特殊的含义如经常匹配全部的 .和* [.][*]

使用 CSS overscroll-behavior 控制滚动行为

当页面中一个 fixed 定位元素滚动到边界时，会滚动元素后面的内容。
解决这种问题，可以使用overscroll-behavior。
overscroll-behavior 属性有 3 个值：

auto - 默认。元素的滚动会传播给祖先元素。
contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。
none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。

#chat .msgs 
{ 
	height: 300px; 
	overflow: auto; 
	overscroll-behavior: contain; 
}

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果，只需要在 body 或 html 元素添加：

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
  /* 如果将overscroll-behavior属性的值设置为none时，可以禁用默认的滚动边界效果 */
  /* 禁用默认的下拉刷新和边界效果,但是依然可以进行滑动导航 */ 
  overscroll-behavior-y: none;
}

当我们阻止了原生的下拉刷新后，就可以实现自己定义的下拉刷新。否则会出现两个下拉刷新。

10) scroll-behavior 浏览器支持的平滑滚动

scroll-behavior 可以把你页面的滑动变得更流畅，也让纯css制作滑动选项卡变得非常容易。
属性：

scroll-behavior: auto;
scroll-behavior: smooth;

auto
滚动框立即滚动。
smooth
滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话。

使用说明：在需要滚动的地方添加scroll-behavior:smooth就好了！

简单例子：

举个例子，在PC浏览器中，网页默认滚动是在标签上的，移动端大多数在标签上，于是，我加上这么一句：

html, body { scroll-behavior:smooth; }

此时，点击如下代码所示的“返回顶部”链接，就会平滑滚动到顶部。感觉就丝一般地流畅。

11) 关于正则的一些使用总结

验证一个字符串( 精准匹配 )是否被包含, 使用 String.indexOf() 、 String.includes()
验证一个字符串( 模糊匹配 )是否被包含, 使用 String.search()、RegExp.test()
切分一段字符串( 无论确认字符和规则字符 ), 使用 String.split(字符串/正则)
提取分组捕获信息, 使用 String.match()、RegExp.exec() 注意区分它们之间的区别 -> g
替换, 使用 String.replace(String/RegExp, string/function) 注意第二个参数的的规则信息

12) 运算符和=的区别

===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。

100===“100” //返回false
abc===“abc” //返回false
‘abc’=“abc” //返回true
NaN=NaN //返回false
false===false //返回true

2.==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。

类型转换规则：
1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
2）如果等号两边出现了null或undefined,null和undefined和自己相等

100==“100” //返回true
1true //返回true
“1”“01” //返回false，此处等号两边值得类型相同，不要再转换类型了！！
NaN==NaN //返回false，NaN和所有值包括自己都不相等。

13) Flex 设置的问题

单值情况下：

一个无单位的数字：它会被当作 flex-grow 的值，flex-shrink 为 1 ，flex-basis 为 0%。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。
关键字：比如 auto，none 这两个下文会讲。

双值情况下：

第一个值必须是无单位的数字，它会作为 flex-grow 的值；第二个值可以是：

一个无单位的数字：它会被当作 flex-shrink 的值，而flex-basis 的值就是 0% 。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 的取值就是 1 。

三值情况下：

第一个和第二个值必须是无单位的数，分别作为 flex-grow，flex-shrink，flex-basis 的值；第三个值可以是有效的宽度值，也可以是 auto 。

所以：
flex: 0 是 flex: 0 1 0% 的简写
flex: none 是 flex: 0 0 auto 的简写
flex: 1 是 flex: 1 1 0% 的简写
flex: auto 是 flex: 1 1 auto 的简写
flex: 0% 是 flex: 1 1 0% 的简写

一些非常基础的内容合集

林大妈的JavaScript基础知识（二）：编写JavaScript代码前的一些简单工作

PHP必备的一些基础技能？国内用的多的框架？

一些使用频率较高的非常实用的PHP函数

林克的小本本之——记一些基础的linux命令

我已经学习了php的基础内容,下一步该学习什么比较好?

DOM基础及php读取xml内容操作的方法，domxml_PHP教程

MySQL 5.0基础的基本内容的介绍

Java中一些基础概念的使用详解

数据库Left join , Right Join, Inner Join 的相关内容，非常实用

图像格式TIFF、GIF和JPEG的一些基础知识