内容主要为自己在html&css方面的实践尝试内容和简单的笔记整理输出。
-
如果看到了属性不知道含义，可以在MDN Web 文档中可以快速查看各种html和css的属性。
-
需要了解可以调用的属性，可以搜索css常用属性快查，找到类似CSS的常用属性速查表 - 掘金的内容参考即可。
-
基本知识点参考类似W3 School
-
常用的知识点制作成anki卡片，实践和记住即可
- vscode
- 插件： Live Server，用于实时查看html的渲染效果
基于First Web的思路，大致需要完成如下的几个阶段学习与实践
应用导向的学习过程
- 尝试简单的页面，调用html和css，了解基本的知识点
- 尝试做类似一页纸简历的页面，了解float、伪元素等概念以及其他知识点
- 尝试做一个相对完整的单个页面，了解排版等内容
基于以上的知识和实践，html & css 开始发挥威力
- 尝试定制markdown样式
- 尝试基于html和css做文字转图片的输出
- 微信公众号的排版自定义
到这里，html & css的基本内容和实践已然完成。下面进入动态页面和web框架内容实践
- 用户登录
- 博客模板
- 博客部署
如果到这里，html & css 已经掌握在手，如果再走下去，可能就是js的内容了。
新增一个功能点：用html & css 徒手做一些小功能、工具展示出来
2020-09-25 用axure大致画了自己期望完成的页面的样子，先有产品概念再动手。避免自己陷入无尽的技术细节。Html 和 Css 虽然很有趣，但毕竟还是工具，为产品服务。当然这两者是互相迭代的，随着自己懂的多了，在页面的设计上会更了解技术实现方式，在设计时考虑到实现性价比。也为实现提供基础思路。
2020-09-24 昨天已经完成了布局的学习。今天初步的完成了第一个页面导航条的实现。过程并不顺利，花费了大概1小时的时间，最后还是参考了ZREY的代码，写完之后，我突然意识到，其实我的纯粹的学习过程已经结束了。虽然还有很多属性有待研究、看到一个页面还是不能立刻想到如何实现。
但是我已经基本了解html和css的用法；知道了基础的布局概念和一些最常用的元素；也知道在浏览器下用debug状态看源码和效果。
自己告诉自己我不再是一个html和css的学生意味着告诉自己要为结果承担责任。学不会情有可原，学会了还做不出来，问题不在于之前学的过程，如何能够把没做出来的部分做出来。学会了也在尝试给自己一种技术实现的自信，这种自信来源于对基本知识的了解和解决问题元能力的认可。前路漫漫，心中有光，照亮方向。
什么叫学会呢，能够考试100分么，还是考完试不管多少分都算学会？现在不是在学校，连考试都没有了，应该说只要自己觉得学会了，就是学会了。剩下的，不断实践，不断的完成自己想做的内容就好。
要做什么，之前的实践思路里已经有写了，做页面、做简历、做一个自己期望的小电子书网站、markdown格式、html和css转图片、微信公众号的排版等等，未来还有动态的js相关、博客系统的探索等等。这些内容的关键不再像第一个阶段的知识点的一个一个的吃透，而在于达成目标的过程中顺便习得。中间也会停下来看一看，想一想，试一试，但都属于实践过程。学习也是为了实践。
实践还意味着思考，做出来之前有一步是做成什么样，特别是没有考试的约束，天马行空中如何绘图，所以说，产品先行，哪怕是技术实践，也应该围绕产品实现展开。
从9月3日到今天（2020-09-24）22天里花了不到31小时，初步完成了基础学习，基本都是在工作间隙累了学一点，或者回家之后利用空闲时间看一点。时间多不多，不算多，周期长不长，不算长。和那些动不动就是几天学完的同学不好比较，因为不在一个思路上。对我来说，走得慢，反而会快。慢是相对集中学习，快是放到生命周期里，在不到1个月的时间里利用闲散时间习得了一门未来要用许多年的的技能的基本素质，并且拉长周期的学习更不容易忘记。从这个角度来说，我觉得我做的还不错。后面的实践还会花更多的时间，后面再说。
2020-09-16 初步把时间线的绘制照猫画虎出来，还有许多细节可以优化，不过想继续向下走，知识的学习不是线性的一次到位的，走一走，再回头看才会更有感觉。
2020-09-11 看过N遍不如写过N-1遍，html和css本身的知识点繁杂，一开始有点懵很正常，写起来之后，写着学着改着，慢慢就有感觉了。另外，自己为自己设置一些想实现的效果会是很好的指导，不要被教程限制。教程大概看到position和float开始懵，自己上手写一写发现总是出错，解决了问题才真的理解。我的本意是准备把知识点内容整理出来，利用html的页面做成类似左侧导航栏，右边是正常显示内容的状态，但是不断的出现意外，加快了自己的学习步伐。然后再回到教程的线索上会更有感觉，走的更稳。
2020-09-11 在float的理解上花了比较多的时间，全端的写法稍显复杂不好理解，自己构建了更简单的例子，通过13_float、14_float、15_float、16_float的几个例子才搞清楚，float - CSS | MDN里的说明很清楚，可是自己想要理解这句话，需要实践摸索才可以。
2020-09-25 先大致画出页面原型，方便更有针对性的开发实现 2020-09-24 完成学习过程，转向使用者实践 2020-09-16 新增心得体会 2020-09-11 新增心得体会 2020-09-07 Init