尚硅谷禹神版前端入门教程发布

名师力作，纵享前端学习丝滑开场！尚硅谷禹神版前端入门教程发布！

一、上手易

禹神一出手，就知有没有。教程竭尽用心，对初学者极度友好，入门不易理解的浮动、定位、变换、过渡、动画等知识点，均配备了精细的 3D 模型图和演示案例，让你看得更直观，学得更轻松！

这不仅仅是一套视频，每一个知识点、每一次总结、每一张图示、各种注意事项等，均整理汇总成了笔记，堪称视频学习最佳拍档，帮你大大节省了学习时间，可以方便快速地复习、练习、备查。充分考虑到初学的所有痛点，只有你们想不到，没有这套教程做不到！

二、实战强

对标实际应用讲解，知识点精心排序，如 CSS 选择器，将 CSS2 和 CSS3 中所有的选择器一次性介绍完，因为在实际开发中，更关注是如何快速而又精准的选中元素。教程不只停留在理论学习，更是让你的学习顺序就是一个顺应真实开发的顺序！

教程采用专业的网页设计软件 Figma，制作企业级高保真设计稿，不再使用老掉牙的标注图，让你学习时拿到的设计稿，就是实际开发中所用的设计稿。手把手带你 1 比 1 精准还原设计稿，无缝衔接企业级真实项目！

全程使用目前主流的 Vscode 编辑器，并对安装、设置、插件均进行了细致的讲解。

三、内容深

对于小白容易模糊的知识点，全部进行了从概念到应用的细致剖析，让你知其然更知其所以然。例如：选择器权重到底怎么计算、vertical-align 到底是什么在对齐、BFC 到底是个什么东西……让你从开始就夯实基础，扫清障碍，不为后续学习埋雷！

教程目录

001.教程简介

002.认识两位先驱

003.计算机基础

004.CS 架构与 BS 架构

005.浏览器相关知识

006.网页相关概念

007.HTML 简介

008.准备工作

009.HTML 初体验

010.HTML 标签

011.HTML 标签属性

012.HTML 基本结构

013.安装 VSCode

014.安装 LiveServer 插件

015.HTML 注释

016.HTML 文档声明

017.HTML 字符编码

018.HTML 设置语言

019.HTML 标准结构

020.开发者文档

021.HTML 排版标签

022.HTML 语义化标签

023.块级元素与行内元素

024.常用的文本标签

025.不常用的文本标签

026.HTML 图片标签

027.相对路径_绝对路径

028.常见图片格式_1

029.常见图片格式_2

030.超链接_跳转页面

031.超链接_跳转文件

032.超链接_跳转锚点

033.超链接_唤起指定应用

034.超文本的真正含义

035.列表

036.列表_注意事项

037.表格_基本结构

038.表格_常用属性

039.表格_跨行与跨列

040.补充几个常用标签

041.表单_基本结构

042.表单_文本框与密码框

043.表单_单选框与多选框

044.表单_隐藏域

045.表单_提交与重置

046.表单_普通按钮

047.表格_文本域和下拉框

048.表单_禁用表单控件

049.表单_label 标签

050.表单_fieldset 与 legend

051.表单_总结

052.框架标签

053.HTML 字符实体

054.HTML 全局属性

055.meta 元信息

056.HTML 总结

057.CSS_简介

058.CSS_行内样式

059.CSS_内部样式

060.CSS_外部样式

061.CSS_样式表优先级

062.CSS_语法规范

063.CSS_代码风格

064.CSS_通配选择器

065.CSS_元素选择器

066.CSS_类选择器

067.CSS_ID 选择器

068.CSS_交集选择器

069.CSS_并集选择器

070.CSS_HTML 元素间的关系

071.CSS_后代选择器

072.CSS_子代选择器

073.CSS_兄弟选择器

074.CSS_属性选择器

075.CSS_伪类选择器_概念

076.CSS_伪类选择器_动态伪类

077.CSS_伪类选择器_结构伪类 1

078.CSS_伪类选择器_结构伪类 2

079.CSS_伪类选择器_结构伪类 3

080.CSS_伪类选择器_否定伪类

081.CSS_伪类选择器_UI 伪类

082.CSS_伪类选择器_目标伪类

083.CSS_伪类选择器_语言伪类

084.CSS_伪元素选择器

085.CSS_选择器优先级_简单聊

086.CSS_选择器优先级_详细聊

087.CSS_三大特性

088.CSS_聊聊像素

089.CSS_颜色_第 1 种表示_颜色名

090.CSS_颜色_第 2 种表示_rgb 与 rgba

091.CSS_颜色_第 3 种表示_HEX 与 HEXA

092.CSS_颜色_第 4 种表示_HSL 与 HSLA

093.CSS_常用字体属性_字体大小

094.CSS_常用字体属性_字体族

095.CSS_常用字体属性_字体风格

096.CSS_常用字体属性_字体粗细

097.CSS_常用字体属性_字体复合属性

098.CSS_常用文本属性_文本颜色

099.CSS_常用文本属性_文本间距

100.CSS_常用文本属性_文本修饰

101.CSS_常用文本属性_文本缩进

102.CSS_常用文本属性_文本对齐_水平

103.CSS_细说 font-size

104.CSS_常用文本属性_行高_概念

105.CSS_常用文本属性_行高_注意事项

106.CSS_常用文本属性_文本对齐_垂直

107.CSS_常用文本属性_vertical-align

108.CSS_列表相关属性

109.CSS_边框相关属性

110.CSS_表格独有属性

111.CSS_背景相关属性

112.CSS_鼠标相关属性

113.CSS_常用长度单位

114.CSS_元素的显示模式

115.CSS_总结各元素的显示模式

116.CSS_修改元素的显示模式

117.CSS_盒子模型的组成部分

118.CSS_盒子的内容区_content

119.CSS_关于默认宽度

120.CSS_盒子的内边距_padding

121.CSS_盒子的边框_border

122.CSS_盒子的外面局_margin

123.CSS_margin 的注意事项

124.CSS_margin 塌陷问题

125.CSS_margin 合并问题

126.CSS_处理内容溢出

127.CSS_隐藏元素的两种方式

128.CSS_样式的继承

129.CSS_元素的默认样式

130.CSS_布局小技巧

131.CSS_元素之间的空白问题

132.CSS_行内块的幽灵空白问题

133.CSS_浮动_简介

134.CSS_元素浮动后的特点

135.CSS_浮动的小练习

136.CSS_浮动后的影响

137.CSS_解决浮动产生的影响

138.CSS_浮动布局练习

139.CSS_相对定位

140.CSS_绝对定位

141.CSS_固定定位

142.CSS_粘性定位

143.CSS_定位的层级

144.CSS_定位的特殊应用

145.CSS_布局_版心

146.CSS_布局_常用类名

147.CSS_布局_重置默认样式

148.尚品汇_设计稿说明

149.尚品汇_顶部导航条

150.尚品汇_头部

151.尚品汇_主导航

152.尚品汇_内容区_侧边导航

153.尚品汇_内容区_侧边二级菜单

154.尚品汇_内容区_右侧尚品快报

155.尚品汇_内容区_右侧图标导航

156.尚品汇_秒杀

157.尚品汇_楼层_顶部

158.尚品汇_楼层_底部

159.尚品汇_页脚

160.H5_简介

161.H5_新增布局标签

162.H5_新增状态标签

163.H5_新增列表标签

164.H5_新增文本标签

165.H5_新增表单控件属性

166.H5_input 新增 type 属性值

167.H5_新增视频标签

168.H5_新增音频标签

169.H5_新增全局属性

170.H5_兼容性处理

171.CSS3_简介

172.CSS3_新增长度单位

173.CSS3_新增盒子属性

174.CSS3_新增背景属性

175.CSS3_新增边框属性

176.CSS3_新增文本属性

177.CSS3_新增渐变

178.CSS3_web 字体_字体图标

179.CSS3_2D 变换

180.CSS3_3D 变换

181.CSS3_过渡

182.CSS3_动画

183.CSS3_多列布局

184.CSS3_伸缩盒模型_简介

185.CSS3_伸缩盒模型_容器与项目

186.CSS3_伸缩盒模型_主轴方向

187.CSS3_伸缩盒模型_主轴换行方式

188.CSS3_伸缩盒模型_flex-flow

189.CSS3_伸缩盒模型_主轴对齐方式

190.CSS3_伸缩盒模型_侧轴对齐

191.CSS3_伸缩盒模型_水平垂直居中

192.CSS3_伸缩盒模型_基准长度

193.CSS3_伸缩盒模型_伸缩性

194.CSS3_伸缩盒模型_flex 复合属性

195.CSS3_伸缩盒模型_排序与单独对齐

196.CSS3_伸缩盒模型_案例练习

197.CSS3_响应式布局_媒体查询

198.CSS3_响应式布局_常用阈值

199.BFC。