发表于： 2019-11-29 23:43:39

今日完成的事

把复盘第二个页面写了一半，

这个页面相对比较简单没什么难的地方，主要的难点在于每次点击都有一个渐变的效果，这里我研究了一下elemen ui的效果修改了一下他的样式，实现了。

准备复盘评审

meat标签

meat标签用来提供页面最基本的属性，例如文档字符集、使用语言、作者、日期和时间、网页描述、关键词等信息，meat提供的信息不再页面上显示，但是都是非常重要的元信息，例如meat标签的keywods关键字属性可以提高搜索引擎的搜索效率。

Doctype

doctype是声明页面使用哪一个html版本的指令，doctype必须写在html文档的第一行，在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。我们现在写html只需要声明一个 <!DOCTYPE>就可以了。

盒子模型

盒子模型是html最重要的一个知识点，也是比较难理解的一个知识点，盒子模型由margin padding width height border5个属性组成。

width和height组成内容区，width表示内容的宽度，height表示内容的高度，注意这里是内容的宽度和高度，不是盒子模型的宽度和高度，我们平常写的内容都放到这里面，比如说文字，图片或者html元素凡是内容都放到里面。

padding叫内边距，相当于在内容区的周围留点空间，border边框，可以把内编剧和内容框在里面，margin外边距，相当于在盒子周围留点空间。盒子模型其实也挺好理解的。他为啥叫盒子模型就是因为他跟真正的盒子很像，width和height组成的内容区就相当于盒子里面放置的物品，padding相当于物品外面包裹这的填充物，border相当于一个盒子的边框，margin相当于在盒子周围画了一条警戒线禁止越过这条警戒线。

盒子模型又分为标准盒子模型和ie盒子模型，标准盒子模型只有width和height算内容区，padding和border不算在内容区里面，也就是说假如一个标准盒子模型，padding为5，border为1，width和height为100

那么这个盒子模型的宽和高就是（1+5）*2+100=112px。但是ie盒子模型是把padding和border都算在内容区里面的，也就是说width要是100px的话那么盒子的宽就是100px了，不管padding和border为多少px都会算在这个100培训里面。

常用html标签

html标签有很多很多但是常用的就只有那么10多个，div span p h1-h6 inpot img等，其中div是最重要的，因为现在都是用div布局。html元素也分为行内元素和块级元素，

他们是有很大的区别的，行内元素和和其他的行内元素在同一行上，并排拍列，但是块级元素不行，块级元素会独自沾满一行，不管元素内的内容有多少它都沾满一行。行内元素不能设置宽高，他的宽高默认就是内容的宽高，宽度高度随文本内容的变化而变化但是可以设置行高。而块级元素可以随意设置宽高。同时行内元素在设置外边距margin上下无效，而块级元素可以随意设置margin， .块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。在设置margin这里也有两个坑，一个就是如果父元素没有设置border，那么子元素设置margin属性时上下方向会带着父元素一起移动不会自己单独移动，只有父元素设置了边框了那么才会自己单独移动。第二个坑是margin的塌陷问题，如果两个相邻的yuanshu都设置了margin左右方向上会都生效，但是在上下方向哪个margin大哪个会生效，如果一样大那么只有一个会生效。

引入css的三种方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

行内样式使用style属性引入CSS样式。这样写样式的优先级会很高，但是很不方便。内部样式表在style标签中书写CSS代码。style标签写在head标签中，这种方法也不推荐。css外链 CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。