<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[a037777777的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/a037777777</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; a037777777]]></copyright><item><title><![CDATA[前端3+1 - 50]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122997462</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122997462</guid><author>a037777777</author><pubDate>Fri, 18 Feb 2022 11:10:46 +0800</pubDate><description><![CDATA[50
html
题目：ajax和flash有何优缺点
答案：
1、ajax
优点：页面不用整个刷新，可以异步请求数据，刷新部分页面数据，提升用户体验
缺点：用户无法回退到前一个页面状态；会带来一些安全问题，跨站脚本攻击、sql注入攻击等；
css
题目：css优化、提高性能方法
答案：
加载性能：减小文件体积、提升页面加载速度。
渲染性能：浏览器解析css代码的速度。
1、尽量把样式写成单独的文件，并且用link引入而不是import》写成单独的样式文件，首先内容和样式分离，易于后续维护；其次减少了页面体积]]></description><category></category></item><item><title><![CDATA[前端3+1 - 49]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122982148</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122982148</guid><author>a037777777</author><pubDate>Thu, 17 Feb 2022 14:52:01 +0800</pubDate><description><![CDATA[49
html
题目：对target = blank有啥理解，有啥安全性问题，如何解决
答案：
=描述：可以在新的浏览器窗口打开点击的连接
=问题：使用window的open方法创建新窗口时，可以获得创建窗口的句柄；使用target=blank创建的子窗口同样也能获得来源窗口的句柄，如果子窗口是个非法窗口，它操作这个句柄对来源窗口做了一些不好的事情，比如替换了来源窗口的url为钓鱼网站，那么用户返回时就会回到钓鱼网站，很危险。
=解决：标签加上rel = noopener；火狐用rel = noreferr]]></description><category></category></item><item><title><![CDATA[前端3+1-47、48]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122958003</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122958003</guid><author>a037777777</author><pubDate>Wed, 16 Feb 2022 16:10:15 +0800</pubDate><description><![CDATA[47
html
题目：h5如何使用音频视频
答案：
视频 - video
&lt;video width="320" height="240" controls&gt;
  &lt;source src="movie.mp4" type="video/mp4"&gt;
  &lt;source src="movie.ogg" type="video/ogg"&gt;
您的浏览器不支持Video标签。
&lt;/video&gt;

音频 - audio
&lt;audio controls&gt;
  &l]]></description><category></category></item><item><title><![CDATA[前端3+1-45、46]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122941217</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122941217</guid><author>a037777777</author><pubDate>Tue, 15 Feb 2022 15:31:27 +0800</pubDate><description><![CDATA[45
html
题目：xml和html区别
答案：
xml比html更严格。比如：
1、xml标签必须小写
2、xml标签必须闭合
3、xml的标签属性必须显示的指定值
…
css
题目：等高布局有几种，实现一下
答案：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width,]]></description><category></category></item><item><title><![CDATA[前端3+1-43、44]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122922858</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122922858</guid><author>a037777777</author><pubDate>Mon, 14 Feb 2022 15:33:58 +0800</pubDate><description><![CDATA[43
html
题目：如何让元素固定底部 - 无滚动条时在页面底部，有滚动条时被内容撑开在底部
答案：
.content {
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
}
.content {
flex-grow: 1;
}
.footer {
flex-grow: 0;
}

css
题目：span和span之间的空白间隙产生原因，如何解决
答案：
=原因：行内元素排版时，浏览器会把行内元素之间的空白符（比如空格 换行]]></description><category></category></item><item><title><![CDATA[前端3+1-41、42]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122875154</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122875154</guid><author>a037777777</author><pubDate>Fri, 11 Feb 2022 15:07:38 +0800</pubDate><description><![CDATA[41
html
题目：websocket如何做兼容处理
答案：
=描述：一个真正实现双向平等对话的服务器技术，即客户端可以向服务器发送请求，服务器也可以主动向客户端推送响应。
=为啥有兼容问题：websocket是h5的新特性，有些旧版浏览器并不支持
=如何解决兼容问题：
1、SockJS；是一个js库，类似websock的对象。会优先使用websock，若不支持则使用streaming，再不支持使用轮询。
2、Socket.IO；启用基于事件的双向通信。会优先使用websock，若不支持则使用如下替代方案]]></description><category></category></item><item><title><![CDATA[前端3+1-40]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122857247</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122857247</guid><author>a037777777</author><pubDate>Thu, 10 Feb 2022 15:51:37 +0800</pubDate><description><![CDATA[40
html
题目：

]]></description><category></category></item><item><title><![CDATA[前端3+1-39]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122730657</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122730657</guid><author>a037777777</author><pubDate>Fri, 28 Jan 2022 17:20:57 +0800</pubDate><description><![CDATA[39
html
题目：title和h1、i和em、b和strong有何区别
答案：
title是放在head里面的，网页窗口标题，利于SEO
h1是放在body里面的，会在网页上展示出来
i和em都是斜体，后者有一种语义上的强调
b和strong都是粗体，后者有一种语义上的强调
css
题目：水平、垂直居中方法
答案：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt]]></description><category></category></item><item><title><![CDATA[前端3+1-37、38]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122713021</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122713021</guid><author>a037777777</author><pubDate>Thu, 27 Jan 2022 14:01:36 +0800</pubDate><description><![CDATA[37
html
题目：h5哪些标签可以优化SEO
答案：title、meta、h1-h6、语义化标签（比如header、main、nav、aside、article、section、footer等）
css
题目：不使用border画出1px的线，在不同浏览器和怪异模式下都表现一致
答案：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="vie]]></description><category></category></item><item><title><![CDATA[前端3+1-34、35、36]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122695870</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122695870</guid><author>a037777777</author><pubDate>Thu, 27 Jan 2022 10:07:08 +0800</pubDate><description><![CDATA[34
html
题目：standards模式和quirks模式有何区别
答案：
1、standards模式；标准模式；width = content；box-sizing = content-box；一般浏览器默认这个
2、quirks模式；怪异模式；width = content + padding + border；box-sizing = border-box；
css
题目：浏览器如何判断元素是否和某个css选择器匹配
答案：首先，与最右边选择器匹配的元素生成一个初始集合，然后从右往左匹配，若该集合]]></description><category></category></item><item><title><![CDATA[前端3+1-31、32、33]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122680079</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122680079</guid><author>a037777777</author><pubDate>Tue, 25 Jan 2022 15:03:48 +0800</pubDate><description><![CDATA[31
html
题目：DOM和BOM区别
答案：
1、BOM - 浏览器对象模型window
2、DOM - 文档对象模型document
注意：只有js运行在浏览器才有这2个对象，运行在nodejs是没有的
css
题目：如何让网页字体并清晰，变细
答案：
1、font-weight: lighter
2、font-family: 更细的字体
3、-webkit-font-smoothing: antialiased（针对mac ios）
js
题目：实现0、1互转
答案：
32
html
题目：对htm]]></description><category></category></item><item><title><![CDATA[前端3+1-28、29、30]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122663395</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122663395</guid><author>a037777777</author><pubDate>Mon, 24 Jan 2022 15:43:20 +0800</pubDate><description><![CDATA[28
html
题目：对meta标签的理解
答案：
描述：元数据，用户不可见，但可以被浏览器、搜索引擎等使用
常用场景：
1、移动端设置视口宽度=设备宽度
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&gt;

2、移动端页面设置视口宽度=定宽（比如640px）（常见于微信浏览器）
&lt;meta n]]></description><category></category></item><item><title><![CDATA[前端3+1-26、27]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122615943</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122615943</guid><author>a037777777</author><pubDate>Fri, 21 Jan 2022 16:16:51 +0800</pubDate><description><![CDATA[26
html
题目：对GBK和UTF-8的理解，为啥有时候页面会产生乱码
答案：
1、gbk；面向中文编码，功能相对简单，所以加载起来比较快
2、utf-8；面向所有语言，功能相对强大，所以加载起来相对慢
3、为啥乱码：
编辑器保存文件时的编码方式跟文件声明的编码方式不一致。或者，编码和解码不一致。
css
题目：对z-index的理解
答案：元素重叠时的显示层级。
js
题目：对bind、call、apply的理解，手动实现bind
答案：
1、bind(指定作用域, arg1, arg2)；指定作用域]]></description><category></category></item><item><title><![CDATA[前端3+1-23、24、25]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122596108</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122596108</guid><author>a037777777</author><pubDate>Thu, 20 Jan 2022 15:51:26 +0800</pubDate><description><![CDATA[23
html
题目：说说form标签的enctype属性
答案：设置表单在提交数据时的编码方式。有以下值
1、默认值application/x-www-form-urlencode；对表单数据进行编码（空格转+号，特殊字符转ascii码），若请求方式是post则封装到body，若请求方式是get则拼接到url上
2、multipart/form-data；表单中包含文件（比如图片）必须使用该值
3、text/plain；编码方式为纯文本，即空格转+号，特殊字符不转ascii码
css
题目：css的优先级]]></description><category></category></item><item><title><![CDATA[前端3+1-20、21、22]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/122582254</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/122582254</guid><author>a037777777</author><pubDate>Thu, 20 Jan 2022 15:12:53 +0800</pubDate><description><![CDATA[19
html
题目：描述html显示元素优先级
答案：
帧元素（比如iframe）&gt;表单元素&gt;非表单元素
有窗口元素（比如select、object）&gt;无窗口元素（其它）
对于同类元素，z-index可以重置优先级
css
题目：如果让谷歌支持显示字体大小小于12px
答案：
1、改用切图
2、设置-webkit-text-size-adjust：none；（有版本兼容问题）
3、设置transform：scale（0.5，0.5）；（注意transform对行内元素不生效，且它虽然缩小]]></description><category></category></item><item><title><![CDATA[前端3+1-19]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/120845703</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/120845703</guid><author>a037777777</author><pubDate>Wed, 19 Jan 2022 15:12:16 +0800</pubDate><description><![CDATA[html
题目：对置换元素和非置换元素的理解
答案：
置换元素；根据属性值去渲染展示；一般行内元素设置宽高不会生效，但行内置换元素设置宽高是可以生效的；比如img、input、textarea、select、object等，大部分都是行内元素；
非置换元素；根据元素内容去渲染展示；除了置换元素之外的都是非置换元素；
css
题目：content属性有什么作用，什么使用场景
答案：
与:before和:after

...]]></description><category></category></item><item><title><![CDATA[nodejs+express+mongoDB之博客项目实战]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/121554430</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/121554430</guid><author>a037777777</author><pubDate>Fri, 26 Nov 2021 17:22:26 +0800</pubDate><description><![CDATA[新建项目
1、安装express和express脚手架
npm install express -g
npm install express-generator -g
2、用express脚手架新建项目
express -e xxx
3、启动项目
cd xxx
npm install
npm start
在localhost:3000就可以访问到项目了
4、安装nodemon
简介：一个监听代码变化的工具，会自动完成node项目重启和数据库服务器重启
安装：
npm install nodemon -g（全]]></description><category></category></item><item><title><![CDATA[nodejs+express+mongoDB之环境搭建和基础练习]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/121397146</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/121397146</guid><author>a037777777</author><pubDate>Tue, 23 Nov 2021 17:12:57 +0800</pubDate><description><![CDATA[nodejs+express
1、安装nodejs
2、安装express
npm install express -g
npm install express-generator -g （由于报错express不是一个可识别命令，增加了这一步，安装命令工具）
3、新建项目
express -e xxx
cd xxx
npm install
npm start
访问localhost：3000
ps：项目文件结构
app.js；主文件
bin；启动文件
public；资源文件（前端）
views；试图文件（]]></description><category></category></item><item><title><![CDATA[前端3+1-18]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/120787254</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/120787254</guid><author>a037777777</author><pubDate>Fri, 15 Oct 2021 17:27:42 +0800</pubDate><description><![CDATA[html
题目：怎样在页面上实现一个圆形的可点击区域
答案：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;style&gt;
  ]]></description><category></category></item><item><title><![CDATA[前端3+1-17]]></title><link>https://blog.youkuaiyun.com/a037777777/article/details/120785644</link><guid>https://blog.youkuaiyun.com/a037777777/article/details/120785644</guid><author>a037777777</author><pubDate>Fri, 15 Oct 2021 16:47:06 +0800</pubDate><description><![CDATA[html
题目：table的作用和优缺点
答案：
作用：写表格、布局（基本很少有人用了）
优缺点（特指使用table来布局）：样式好控制，但不够灵活，维护麻烦
css
题目：sprites的原理和优缺点
答案：
原理：一种网页图片应用处理方式，即把多张图片整合成一张图片，用background-position来实现背景定位；解决图片载入缓慢问题
优点：减少http请求
缺点：可维护性差
js
题目：typeof(‘abc’)和typeof abc都能得出正确结果，那typeof时操作符还是函数
答案：是操]]></description><category></category></item></channel></rss>