WEB全栈学习笔记-HTML和CSS

2020/06/14 这是WEB前端全栈的第一周笔记

九层之台，起于累土；千里之行，始于足下。
我们的目标是全栈开发，但我们要从最基础的HTML开始。
第一章入门。
WEB的载体互联网是美国在冷战时期由军方发明而后商业化产生的，所以说美国人曾经也是很厉害的。
浏览器的作用是解释HTML和渲染页面。浏览器-服务器就是BS架构。
第二章初识。
WEB开发分前后端，前端3大件HTML/CSS/JS。
WEB标准从WD到CR一直REC的制定流程，以及暂未成标准的NOTES的解释等。
开发工具VScode介绍。
HTML发展史，语法严格规范与灵活使用之间的权衡。标签简介：单/双标签、元素、属性。
第三章常用标签。
首先是HTML的结构标签：head/body。标题、段落、非语义标签div/span。
链接anchor，以及历史上用空链接用做按钮的做法。
图片、列表。
第四章表格。
表格的结构thead/tbody/tfoot。行和列，跨行和跨列。
各种属性：bgcolor/height/width/border/align/valign/cellspacing/cellpadding，控制不同的展示细节
总结：
老师除了讲解HTML技术外，也准备了相关标准背景，技术历史等知识。这是一门不错的课程，值得我们好好学习。

2020/06/21（2020/07/04补记） 这是WEB前端全栈的第二周笔记

本周笔记由于其它事情耽误了，今日补记。
HTML第5章表单。
表单是form，老师打的一个比喻比较好。表单里有许多一个个的小的组件，但是他们组合起来，就可以形成内容丰富的表单。
学习Input元素，它的属性：name/value/type（展示了表单组件的多样性）。演示了一个单选框内容上点击可选中的实用小技巧。
CSS第一章简介。
CSS全称是Cascading Style Sheet，即层叠样式表。这个名称的含义：样式可以是多样的，被覆盖和层叠堆砌的。
讲解css的标准化历史，它是在HTML发展中遇到页面表现的难点而出现的技术，所以它的标准化在HTML之后。
css引入的几种方法；css的语法；css的层叠和继承特性。
CSS第二章选择器。
选择器的作用是选择HTML文档中的元素。可以支持通配符，这里老师展示了在chrome里检视元素的方法和细节，非常实用。
可以通过多个维度来进行选择，如id/类/属性；还有伪类、派生、相邻兄弟等。权重的计算。
本章比较枯燥，需要在实际使用中去加深理解。
总结：
第2周相对第1周，新鲜感会逐渐减弱，要坚持学习~

2020/06/28（2020/07/05补记） 这是WEB前端全栈的第三周笔记 

本周笔记由于其它事情耽误了，今日补记。
CSS第三章-常用属性。
内容有：字体、文本、尺寸、列表、和背景。
字体首先科普了衬线/非衬线字体、等宽字体的概念，讲解了如何在chrome里查看rendered fonts. 字体有family/size/style/weight等属性。
文本主要有color/line-height/text-align-indent-decoration-shadow/direction/letter-spacing（可负）等属性
尺寸有width/height/min-max-auto等
列表有list-style-image/position/type等，可以用type:decimal实现和有序列表标签一样的效果
背景有background-color/image/repeat/position/attachment等。
CSS第四章-CSS盒模型。
以快递包裹做比喻，包裹从里到外是商品、保护垫、快递盒、外保护层，分别对应于Content,padding,border,margin。非常容易理解。
padding的属性顺序：top right bottom left
border讲到了复合属性，我理解可能不准确，感觉和简写属性没啥区别。
margin对于块和内联元素之间距离的不同处理。display对于块和内联可以反转配置。
讲解了一个面试技巧：如何去除内联元素之间的天生的间隙。
总结：
第3周愈发枯燥，学习知识本来就是比较枯燥的。

2020/07/05 这是WEB前端全栈的第四周笔记 

CSS第五章-浮动。
内容有：float,clear 或 上层的overflow:hidden 或是clearfix方案，这个方案使用了伪元素，需要以后进一步理解。
本章有一个实战例子，是做二侧固定宽度，中间自适应。使用了double飞(不是大保健的double飞哦)翼布局来实现。其中的技巧是用到了负margin，另外中间的div部分是先加载的，左右部分是后加载，这与一般理解有些差别。
看老师在VS里的快捷输入，比如h20是height:200px的快捷输入。
CSS第六章-定位。
内容有：position:static/fixed/relative/absolute
层级z-index是个配角，配合absolute使用
如何应用，是个问题
总结：
第4周愈发枯燥。需要多做习题，特别是最后一个实践题。否则只是停留在听过课的层次，不能进化到熟练掌握的层次。