2019年3月

head标签本身并不携带任何东西,他主要是作为盛放其他语义化的容器使用;
HTML规定了在html标签中head标签必须是第一个;且head标签中必须存在title标签作为网站的标题,最多只能包含一个base,如果文档有其他方式指定了title,比如ifrme框架,可以不指定title;

我们来讨论一下title,title是标题的意思,但是html中也有一个h1-h6 heading也是标题头部的意思,在中文来讲,它们非常的难以分辨,更别说老外了;
其实HTML研发的时候也讨论了这个问题,解决方案呢就是:title作为元信息标签可能会被用来分享卡片,收藏书签的作用,所以title起一个概括全文的作用,但是h1有上下文链接的作用,只是展示页面即使无法全写,也不会有太大影响

我们再来谈谈一个冷门标签base是HTML历史遗留的标签,base是提供了文档url的一个基准,在base中指定url,我们在全文档体重就可以不用写前缀url,但是这个标签非常的危险,容易和js冲突,所以不建议使用;

下面我们聊聊meta标签,最重中之重的标签,他是一组键值对,它是通用的元信息表示标签;
一般的meta是由name和content两个属性来定义,name表示元信息的名字,content表示元信息的值


表示页面所在的web-application的名字是IsForums;

html5引入了charset来设置编码;没有content和name

这个非常重要,所以我建议放在文档的第一个;

浏览器读HTML是ASCLL字符,众所周知ASCLL是UTF和大多数编码格式的子集;一般清空下,服务端会通过http头来指定正确的编码方式,但是有些特殊的情况事用file协议打开html,如果没http头,就得设置编码啦;

具有http-equiv属性的meta;

具有equiv的meta,表示执行一个命令,这样的meta不需要name属性;

name 为 viewport 的 meta


我们的content中的内容是键值对的方式,没有在html标准定义viewport,双方约定好就可以自由使用;

QQ截图20190330104716.png

其他预定义的meta的name值:

QQ截图20190330104844.png

文章梗概:head元信息容器,title文档标题,base页面基准url,meta元信息通用标签

在评论区找到了一批干货:推荐大家看一下



常见的还有

format-detection 禁止 iPhone 的自动识别-》



ps:关于name为viewport不是HTML规定,你找不到的,是行业规定,但是非常之重要;

webpack的版本为4

npm init -y

在安装之前我们需要安装node和npm,因为webpack是基于node创造的。
我们可以2种方式安装,一个是全局安装,一个是局部在项目安装。

我们如果选择了全局安装那么,我们就只能运行同一个版本的项目,但是如果是在项目中安装,我们就可以在电脑上运行多个不同版本的webpack

所以推荐第二种方式。

npm install webpack webpack-cli -D

安装成功之后,如果是全局安装是直接webpack index.js

webpack在最早是一个js编译器,但是随着发展,webpack不仅仅能够编译js,png,css等等都可以做到非常棒的打包;

所以webpack应该说是一个模块打包工具;

我们进入packge.json配置private为true,将script清空;

然后我们在根目录上建立index.js,再建立一个header,通过es导入模块的方式引入;

然后可以使用

npx webpack index.js

npx是node提供的一个命令,我们是局部安装,无法使用webpack index.js命令,所以用npx命令可以在本项目中webpack编译index.js

编译成功可以生成出来了一个dist文件夹,下面有一个main.js,这边就是我们打包之后,能够被浏览器阅读的js文件。

webpack团队为了丰富我们使用webpack的赶脚,所以提供了一系默认配置,包括我们在执行编译的时候,会自动生成dist和mainjs,这些都是提供的默认配置;

我们可以自己定义打包文件名称以及编译后的文件名和文件夹名字,需要我们重写webpack.config.js 这个文件名称我们不能改变

const path = require('path') // 引入nodejs函数


    module.exports = {
   entry: "./index.js",
   output:{
    filename: "bundle.js",
    path: path.resolve(__dirname,'bundle') // 获取文件夹路径
    }
  }

我们用commonjs模块导出了一个对象,里面有编译的文件,和编译后的目录地址以及设置文件名称;

我们在这里之所以引入path函数,是因为不能写相对路径

我们配置好webpack之后,我们要去package中修改我们的script:




"scripts": {
"boundle":"webpack"

},

我们这边写这个代码的意思就是:我们可以用boundle关键字来取去找webpack在项目中,然后我们又定义了webpack配置:就可以轻松的使用如下命令来打包了:

npm run boundle

补充知识点:

QQ截图20190327172906.png

众所周知,css的世界,网页布局技术一直是占据着前端工程师几乎每天都会接触的东西;
从最早的,table布局,定位,浮动,margin,padding
到现在比较先进的flex
但是讲真,在flex之前,我们的布局技术感觉力不从心,flex问世之后布局的春天也慢慢来了,但是作为IT界,越晚来的技术一定是最牛逼的,这一点已经在很多框架和技术点上已经见证了,这个技术就是grid!

grid作为最先进的网格布局,上手非常快,也非常简单,但是还是有很多专门写css的前端程序员不知道grid,压根没听过,说明渗透率比flex低,所以今天这个文章,老沈保证三分钟看完所有常用知识点,就可以在项目中进行实战练习了。


第一分钟:

建立dom和初始化grid布局

  <div class="container">
    <div class="header">HEADER</div>
    <div class="menu">MENU</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
  </div>
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
  }

首先,网格布局的容器:
1.声明display:grid
2.行 用repeat函数拆分成12列,每一列为1fr(份) 份的意思:除去确定尺寸,剩下将会自动平均分配,1fr就是一份
3.列 确定了3行,第一行的高是50,第二行是350px,第三行是50px
4.(可选)网格之间的间隙,还可传入2个参数,一个是列 / 行


第一分钟看完了?我们看看实际的效果。
QQ截图20190325142412.png


第二分钟:
其次,为了把网格利用的非常好,我们需要来用div填格子;
1.在子div中我们可以通过grid-column-start 和 grid-column-end来规定开始和结束的网格线,ps:如果宽12列,那么加上最左边和最右边就是13条网格线(11+2,12列11条线),所以如果要沾满第一行,就必须是从1到13,可以用代码这样写:

grid-column-start:1
grid-column-end:13

为了简写我们可以grid-column:1/13
2.行是这样,列也是同理


第二分钟看完了?我们看看实际的效果

QQ截图20190325143906.png

第三分钟

我们再来一种不一样的方式布局,如果数格子太low了,我们有没有更简单的方法,答案是有
我们可以利用

 grid-template-areas:
  "h h h h h h h h h h h h"
  "m m c c c c c c c c c c"
  "f f f f f f f f f f f f";

第一眼是不是没看懂?hhh mm cc ff是啥玩意啊,这个是自己定义,这个代码的意思就是说我在父元素定义了这个布局,我的子元素只要和这个hh mm进行一个标识匹配就可以不用数格子,那如何匹配呢?

.header {
 grid-area: h;
}

天哪,这么秀的吗?不仅仅可以这么秀,如果你要空隙咋办?

grid-template-areas:
  ". h h h h h h h h h h ."
  "m m c c c c c c c c c c"
  "f f f f f f f f f f f f";

通过.的占位符就可以留出空隙了,我们可以结合媒体查询写一个非常简单的响应式布局;


@charset "utf-8";

.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;
/ 图表可视化表示 /
grid-template-areas:

"m m h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";

}

.header {
grid-area: h;
background: red;
}
.menu {
grid-area: m;
background: blue;
}
.content {
grid-area: c;
background: yellowgreen;
}
.footer {
grid-area: f;
background: black;
}
@media screen and (max-width: 640px){

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
    /* 图表可视化表示 */
    grid-template-areas:
      "h h h h h h h h h h m m"
      "c c c c c c c c c c c c"
      "f f f f f f f f f f f f";
  }

}


结束;转载请说明出处-因卓诶老沈

winter老师说,在他面试和认识的前端开发者中百分之70的人对浏览器是一知半解的状态,对于一个每天每时每刻都会接触的开发工具,我们需要对其浏览器运行过程和HTTP进行一些必要研究,因为这些都是面试中非常常见的考点。
这最近几篇文章,都是前端必知的浏览器知识,而不是浏览器开发者必知浏览器知识。
首先浏览器是如何工作的?其实无非就是把url一请求,浏览器只提供view视图来显示而已,这是对于浏览器开发者来说的。
过程解析:请求使用HTTP或者HTTPS协议,向服务端请求页面 -> 请求回来的HTML被构建成DOM树 -> 计算DOM树上的CSS属性 ->
最后根据CSS的属性对其一个一个渲染 得到位图-> (可选步骤)对位图进行合成,可以加快后期的绘制速度 -> 合成之后绘制到界面上;
这是一个浏览器从请求到解析再到界面的全部过程;这也是面试可能被问到的,所以这边不用记忆这么死板的知识点;
请求->构建dom->计算css属性->渲染dom->合成->绘制到页面
ps:请求过来的HTML,浏览器经历这一切都是“流”式的工作方式,即不一定要等到上一步骤的完全结束,就开始输出内容,所以我们加载网页的时候,网络比较差会看到一块一块的出来,这就是流的特点。

--HTTP协议
1.HTTP1.1 https://tools.ietf.org/html/rfc2616
2.HTTP1.1 https://tools.ietf.org/html/rfc7234
上面两份是HTTP协议的靠谱文档

HTTP协议是基于TCP协议出现的,它规定了REQUEST 和 RESPONSE 两种模式,tcp是一种双向的通讯通道,而HTTP协议的出现可使浏览器必须首发起。

我们可以口述一个基于TCP手动实现一个HTTP请求:首先建立TCP连接与服务器 -> 然后写request-line,它分为三个部分,HTTP Method,也就是请求的“方法”,请求的路径和请求的协议和版本 -> 然后返回的第一行就是response-line,也分为三个部分,协议版本,状态和文本;

--HTTP方法
HTTP的方法和JAVA亦或者是和web编程的REST风格很相似,有get,post,delete,put,connect,head,options,trace;
get默认我们在地址栏输入url时候就是默认的get提交
post一般为表单提交
put 做一个增加的操作
delete 删除操作
connect 通常和webscoket连接
head 返回头部信息
options和trace 在企业中一般做测试,在线上环境一般没有这玩意

--HTTP状态码
1** 临时回应,表示让客户端继续
2** 表成功
3** 表目标发生资源变化 301&&302 永久或者临时跳转 304跟客户端缓存没更新
4** 客户端请求错误 403没权限 404资源丢失 418(愚人节彩蛋)ps:要不是winter说我还没见过这个菜单
5** 服务端请求错误 500 请求错误服务端 503 暂时错误,一会再试试

--HTTP的head (这边直接上图)规定了对应的属性和值
request head
2be3e2457f08bdf624837dfaee01e4a2.png

response head
efdeadf27313e08bf0789a3b5480f7c9.png

ps:这个请求头要知道看到它就要知道它什么意思

--HTTPS和HTTP2

https://tools.ietf.org/html/rfc2818
HTTPS顾名思义:super http 它是也是基于TCP的,他在连接的时候会首先和服务端建立TLP连接,相当于在HTTP外层包了一层加密的壳,它与HTTP传输的内容没有任何区别,TLS是基于TCP的;主要作用就是确确定服务端身份,以及不会存在1.1的从网络传输节点进行窃听和篡改的问题

HTTP2 是HTTP1.1的升级版本
优点:支持服务端推送,支持TCP复用

服务端推送能够在客户端发送第一个请求到服务端时,提前把一部分内容推送给客户端,放入缓存当中,这可以避免客户端请求顺序带来的并行度不高,从而导致的性能问题。

TCP 连接复用,则使用同一个 TCP 连接来传输多个 HTTP 请求,避免了 TCP 连接建立时的三次握手开销,和初建 TCP 连接时传输窗口小的问题。

--结束

这段时间写第二章,希望能对我和你们都有一定的帮助理解浏览器的工作原理,知识不易,大家消化一下,部分demo出自winter
《重学前端》,转载说明出处:因卓诶-老沈

前端部分,css是最缺乏标准的语言,不像html和js有着大量的规范标准,但是css你几乎找不到一个像他们一样的标准。
css的顶层样式表分为at-rule和qualified-rule 一个是at规则,一种是普通规则;
我们的at规则是由一个@发起,跟一个区块组成的,如果没有区块是以分号结束的;at规则是远远比普通规则少并且少用的,
所以大家可能会对at-rule比较陌生。

@charset : https://www.w3.org/TR/css-syntax-3/
@import :https://www.w3.org/TR/css-cascade-4/
@media :https://www.w3.org/TR/css3-conditional/
@page : https://www.w3.org/TR/css-page-3/
@counter-style :https://www.w3.org/TR/css-counter-styles-3
@keyframes :https://www.w3.org/TR/css-animations-1/
@fontface :https://www.w3.org/TR/css-fonts-3/
@supports :https://www.w3.org/TR/css3-conditional/
@namespace :https://www.w3.org/TR/css-namespaces-3/

上面这么多,是已经整理好的at文档
下面我们给所有的at规则做一个解释和demo

@charset "utf-8" ---- 规定css文件的编码
@import "index.css" ---- 引入对应的css文件(除了编码都可以全部引入) ->
@import url("index.css") ->
@import [ | ]

    [ supports( [ <supports-condition> | <declaration> ] ) ]?
    <media-query-list>? ;

@media print { ---- 他能对设备做一些判断,此方法体是普通规则

body { font-size: 10pt }

}

---- @page,针对于分页媒体网页表现,除了设置页面本身自己,也可以设置周围其他盒

@page {
size: 8.5in 11in;
margin: 10%;

@top-left {

content: "Hamlet";

}
@top-right {

content: "Page " counter(page);

}
}

-- counter-style 它可以自定义列表前缀表现,具体的方法可以百度有详细的api
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}

@ support support --检查环境的特性,它与 media 比较类似。
@ namespace --用于跟 XML 命名空间配合的一个规则,表示内部的 CSS 选择器全都带上特定命名空间。
@ viewport --用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被 html 的 meta 代替。

普通规则:由选择器和声明区块构建的;声明区块又由属性和值构建而成;
下面这张图,就能很好的解释选择器的优先级和权重问题
4fa32e5cf47c72a58f7a8211d4e8fc67.png

值得注意的是:我们在写属性的时候不要写两个--,否则会被当成css变量处理,与之配合的是var函数

:root {
--main-color: #06c;
--accent-color: #006;
}
/ The rest of the CSS file /

foo h1 {

color: var(--main-color);
}

css也支持一些计算属性:

calc() max() min() clamp() toggle() attr()

这些函数用的比较多的就是calc和max min函数,实际开发中我们可以用calc简单的计算出不同运算符加减乘除

test{

height:calc(50% - 10px)
}

ps: 这些变量我们再做运算的时候,一定要空格隔开

css的函数有很多,欢迎提出你日常中用到过的函数以及应用场景吧!

本文部分demo摘自winter老师的专栏