前端--Html和nodejs篇

Pupilshuo

已于 2023-03-01 07:45:30 修改

阅读量936

点赞数

分类专栏：前端文章标签：前端 html javascript

于 2022-11-05 19:56:34 首次发布

本文链接：https://blog.csdn.net/weixin_45755231/article/details/127707809

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

H5新特性

meta标签

1.设置viewport，响应式布局
2.描述HTML文档的编码类型charset，
3.设置页面描述description
4.搜索引擎索引方式：（能否被爬虫
5.设置作者名字

cavas标签

下拉列表

<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>

一，配合（选项卡不可选）

//open属性决定在页面加载时选项卡是否展开，值为true时为展开，false时为收合选项卡一选项卡二选项卡三二，form表单配合select>optgroup>option使用 ``` 选项卡一选项卡二选项卡三柳州 ``` 三，form表单配合input，配合datalist>option使用 ``` 选项卡一选项卡二选项卡三 ```

无序列表和有序列表

标签定义列表项目
1. 定义有序列表
  - 定义无序列表
div当中的id和class的区别

id是唯一的表示，而class是可以几个标签同时使用同样的class名。
在css方面，id对应的css里一般前面加“#”，而class则是“.”，这是两者的一个写法区别。
src和url和href的区别

使用href：a、link
使用src：img、script
href是元素或文档与指定资源联通，是引用；src是下载后嵌入构成文档直接内容。
url是一种URL是资源定位规则，而src、href是标签的属性，而且src可以利用url进行页面请求

块级元素和行内元素以及行内块级元素的区别

行内元素：a,b,br,em,.img,i,input,label,s,select,small,sub,.sup,strong,textarea,span,input,select等等。
块级元素：address,div，p,h1,h2,h3,h4,h5,h6,ol,table,form，ul等等。
行内元素：没有宽和高，只能由内容撑起来，没有margin也没有padding。
块级元素：独占一行，有宽高设置
行内块级元素：行内元素可以设置宽高

浏览器问题

浏览器内核有哪些

Webkit内核，IE内核,Chorme内核(V8)

dom和bom的区别

Bom：是控制浏览器行为的api，
Dom:是页面结构api

Koa

中间件

洋葱结构

跨域（JsonP，Axios+cors,nginx）

jsonp

首先需要在客户端设置一个script标签，然后设置他的src，但是src后面必须接callback进行回调，这样后端需要接下这个callback
```
 function myJsonp(options) {
            var script = document.createElement('script')
            script.src = options.url+"?callback="+options.callback
            //script.type = " application/json"
            document.body.appendChild(script);
        }

        myJsonp({url:'http://localhost:3000/jsonp',callback:"jsonpmethod"})
        function jsonpmethod  (data){
            console.log(data)
        }
```
后端的设置如下，需要接受刚刚传输过来的callback，然后将需要传输的东西进行JSON.stringify,最后使用callback(result)的形式进行
```
router.get('/jsonp',async (ctx)=>{
    console.log(ctx.query.callback)
    const result = JSON.stringify({

        code:200,
        
        data:"helloworld",
        
        msg:'success'
        
        });
        
        ctx.body = `${ctx.query.callback}(${result})`;

})
```
jsonp的缺点:只能使用get模式，方法单一，并且在传输过程当中对格式要求比较高

cors

cors跨域主要针对的是后端，就那我使用的Koa2举例，它需要在响应头加入一个Access-Control-Allow-Origin:“*”
```
 ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type');
```
nginx

正向代理和反向代理的区别

正向代理代理的是客户端，需要在客户端配置，我们访问的还是真实的服务器地址
反向代理代理的是服务器端，客户端不需要任何配置，客户端只需要将请求发送给反向代理服务器即可，代理服务器将请求分发给真实的服务器，获取数据后将数据转发给你。隐藏了真实服务器，有点像网关。

非阻塞IO V8虚拟机事件驱动

webpack的构建流程

需要一个入口文件和一个出口地址，然后通过loader里面的东西将源文件分成一个个的chunk，然后plugin可以触发一些事件来优化整个loader打包的过程，最后将所有的文件转化成一个包，变成浏览器可以加载的东西，比如json可以给他转化成js模式，scss预编译变成css，这样就可以打包完成了。

webpack里面loader和plugin的区别

loader：由于webpack 本身只能打包commonjs规范的js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。
plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。使用它里面在的钩子compiler会有对应的生命周期事件可以触发，自定义的化需要先注册注册，注册完之后就是触发这些事件

webpack tree-shaking：webpack2开始支持且消除效果不好，但是webpack5有更好的tree-shaking（去除未使用代码）