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周愈发枯燥。需要多做习题，特别是最后一个实践题。否则只是停留在听过课的层次，不能进化到熟练掌握的层次。

CSS web前端 HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。