前端入门 HTML+CSS 万字血书总结-强烈安利

Posted 2022-07-13 黑马程序员官方

前言：想成为Web前端工程师这三件法宝少不了 html、CSS和JavaScrip，工作中我们能够运用它们完成大多数任务。一位好的Web前端开发工程师在知识体系上不仅要有广度还要有深度，前端基础是重中之中！ 

带你高效率入门前端

一、 HTML（3天时间）

HTML负责网页的结构层，是网页开发的基础，从最简单的网页骨架搭建入手，使用常见的 HTML 标签丰富网页结构。

重点掌握内容：

HTML基础语法 | 排版标签 | 路径 | 多媒体标签 | 链接标签 | 列表标签 | 表格标签 | 表单标签 | 布局标签 | 语义化标签 | 字符实体
 

二、 CSS（7天时间）

CSS在 HTML 搭建的网页结构基础上，通过 CSS选择器 精准选择标签，使用外观、盒模型相关属性完成网页全部内容，利用浮动、定位等布局技巧精准控制网页布局，最终结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。

重点掌握内容：

选择器 | 外观 | 文字 | 背景 | 标准流 | 三大特性 | 盒模型 | 伪元素 | 浮动 | 伪类 | 定位 | 圆角 | 阴影 | 透明 | 过渡
 

三、HTML+CSS学习笔记整理如下（已完结）：
 

HTML入门级	CSS入门总结	CSS之emmet语法	CSS的复合选择器
CSS的显示模式	CSS背景	CSS三大特性	CSS盒子模型及PS基础
CSS之圆角	CSS之浮动知识点汇总	CSS前端基础了解PS切图	CSS属性书写顺序（重点）
CSS练手之学成在线页面制作	CSS定位的4种分类	CSS综合案例：学成在线模块添加	HTML+CSS之定位（position）的应用
HTML+CSS案例：淘宝轮播图	CSS之元素的显示与隐藏	HTML+CSS综合案例：土豆网鼠标经过显示遮罩	【重点】CSS之精灵图
CSS字体图标	CSS三角以及京东三角案例	CSS用户界面样式源码	CSS之vertical-align 属性应用
CSS：溢出的文字省略号显示	CSS常见布局技巧+案例	面试的时候你能说出几个HTML5的新特性？	已完结

HTML+CSS项目《品优购》完整笔记+源码（万字版可复制）：

HTML+CSS大项目1：品优购项目笔记+源码（万字收藏）

HTML+CSS大项目2：品优购项目笔记+源码（万字收藏）

移动开发笔记（已完结）

移动WEB开发之入门&视口	移动WEB开发之二倍图	移动端web开发主流方案选择	移动WEB开发之flex布局附携程网首页案例制作
移动WEB开发之rem基础&媒体查询	移动WEB开发之less基础	移动Web开发之rem实际开发适配方案	已完结

下篇内容 【javascript 高能总结】 关注再学，好方便~

---

前端学习路线图概览：

HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序

​

2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。