配置好前端开发环境后，我们就要开始学习前端知识了。
让我们先从简单的开始，html和css是两门标记语言，语法简单，逻辑深度相对较浅。但是知识比较杂，容易出现“学了就忘”的情况。组长的建议是多实践，动手写几个简单好看的网页；另一种策略是不用花太多时间搞清楚所有知识，在遇到比较复杂的需求时，到互联网上寻求解决方案，这要求对html和css的各种用法有大致的了解，才能在遇到问题时抓住“关键词”快速找到答案。
第四章 目录
4.1 学习HTML
html (全称 Hyper Text Markup Language) 是网页的“骨架”，它规定了网页的结构与布局
【HTML (超文本标记语言)】
https://baike.baidu.com/item/HTML/97049
4.1.1 重要的知识点
HTML的内容相对来说是比较少的，但它是基础中的基础，虽然简单，但也不能随便应付。除了最基本的插入文本、图像、超链接，我认为需要重点掌握的部分有：
【相对路径与绝对路径】（这个不仅在HTML很重要，在其它编程语言也是极重要的知识点）
【div 与 span】（掌握 “块级元素/行内元素/行内块元素” 的特点和应用形式）
【form 标签、input 标签】（表单很重要，涉及到用户输入的部分都要使用它）
4.1.2 推荐的网站与教程
【HTML 教程 | 菜鸟教程】https://www.runoob.com/html/html-tutorial.html菜鸟教程一般当作“工具书”来用，有什么知识点忘记了可以上菜鸟教程速查。这个网站的教程部分也挺不错，提供了很多实例，并且有在线的编辑器供学习者使用
黑马程序员pink老师前端入门教程https://www.bilibili.com/video/BV14J4114768/pink老师的前端入门课程共500多集，乍一看非常多，其实HTML的部分只占前60集。每集时长很短，多在5分钟左右。学习该部分需要的投入时间一般不会超过8h
4.2 学习CSS
css (全称 Cascading Style Sheets) 是网页的“皮肤”，它使网页拥有吸引人的外表
【CSS (层叠样式表)】https://baike.baidu.com/item/CSS/5457
4.2.1 基础语法
和HTML相比，CSS的关键词和知识点极其繁杂，有上百个常用的属性，我的建议是不要强记，有两种解决办法：1、多打css代码，让其成为肌肉记忆；2、需要用到的时候查参考资料
【CSS 教程 | 菜鸟教程】https://www.runoob.com/css3/css3-tutorial.html菜鸟教程确实是很不错的学习网站，虽然教得一般，但是内容确实全。拿来当“参考书”还是很合适的
除此之外，还可以找一些视频教程，这里就不推荐了。前面给的那个黑马程序员的入门课也可以看，后面有 css 的内容，大概看完60到189集就可以了。CSS的内容确实比较多，需要大家花更多的时间和精力来学习
4.2.2 使用 css 布局
css专注于让你的网页呈现出“你想要的样子”，它不仅用于“美化”，还用于和HTML配合进行排版。其中【盒模型】【内外边距】这些知识点还是比较烦人的
这个部分有点难度，但是非常重要，不宜绕过。这里给出几个组长认为比较重要的知识点和概念：
- 标准流布局：重点是【盒模型 以及它的 各种边距】
- 浮动布局(float)：【视频教程】
- 弹性盒布局(flex)：【Flex 布局教程: 语法篇】 【Flex 布局教程: 实例篇】
布局方式远不止这三种，还有绝对\相对定位、网格布局......可以自行了解。对于当前阶段，掌握上面三种方式并且灵活结合，即可完成多种经典的、常用的网页布局样式
4.3 HTML与CSS练习作业
这是全栈组正式成员的第一次任务，任务包含两部分：1、完成指定布局并发布笔记；2、自选主题，发挥学到的知识创作单张或一组网页
4.3.1 第一部分：完成指定布局
尺寸参考：令浏览器宽度为W，高度为H
绿色部分：宽度100%W，高度12.5%H 紫色部分：宽度20%W 其余部分顺眼即可
4.3.2 第二部分：自选主题创作
不需要很好看，但是要求布局大气简洁，颜色简单不花哨。不限制主题和内容，不过希望你能够尽量使用多种HTML标签、多种CSS属性，以体现你的学习成果。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
