2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入

感谢老师15天的教学，视频看完了收获很多。我之前是看了一套尚硅谷禹神出的html+css，然后最近把黑马出的这套也看完了。站在我个人学习者的角度对比了一下两套视频，禹神讲的那套比较全面和细致，但不易分清哪些是重点哪些是不常用的。黑马老师讲的这套比较直击痛点，常用的和普遍性的详讲、不常用的讲解的时间很少，同时实战案例的安排上比禹神的丰富很多。因此，个人觉得黑马这套更偏向于实战开发（快速掌握实战开发的技巧，把握重点），尚硅谷禹神那套更偏向于深入与全面学习。没有说谁好谁坏哈，各有风格，这是我自己的看法。下面是我对本套课程的15天学习列举的一些重要知识点和注意事项：

day01：

• <a> 的 href 属性值为 # 时，点击该链接不会刷新网页，但会滚动到网页顶部。如需阻止默认行为，可以使用 JavaScript 的事件监听器阻止链接的默认点击行为，即执行 event.preventDefault()
• <img> 的 src 属性值使用本地绝对路径会报错 Not allowed to load local resource，这是由于浏览器的安全策略所导致的，它限制了通过本地文件路径加载资源，以防止恶意脚本滥用本地文件系统进行攻击。
• <video> 和 <audio> 在非静音情况下如何实现自动播放

day02：

• 学完第二天，老师html5就讲解完了，但 html5 中很多东西都没有讲，本套课程对 html5 的讲解非常非常不完整。

day03：

• 每个HTML元素可以有多个属性，但同一属性在一个标签中只能出现一次。如果一个标签中多次使用相同的属性，浏览器会应用第一个出现的属性值，并忽略后续相同属性的值。
• id 选择器一般 配合 JavaScript 使用，很少用来设置 CSS 样式。
• 同一个 id 选择器在一个页面只能使用一次。如果在一个页面中将相同的 id 应用于多个标签，这将导致 HTML 文档违反了规范。在这种情况下，不同的浏览器的行为将是不确定的，可能会导致不一致的结果。例如只选择第一个匹配的元素，或者选择最后一个匹配的元素，或者根本不选中任何元素。
• 通配符选择器通常用在项目开发初期，可以用于 清除标签的默认样式 ，例如：标签默认的外边距、内边距。

day04：

• 老师讲解了 Emmet 写法，非常有用，可以提高开发效率。
• 老师没对常用标签的默认显示模式模式进行总结。
• 老师没讲常见的图片格式。
• 老师没讲属性选择器。

day05：

• 有一个很重要的细节：:nth-child() 的表达式必须是一个 “an+b” 的形式，其中 a 和 b 都是整数或关键字。例如如果是 :nth-child(2+n) 该选择器是不会生效的，因为不是 an+b 的格式。

day06：

• align-items 和 align-content 都是设置侧轴方向上的对齐方式，当侧轴方向上是单行时 align-items 设置生效，当侧轴方向上是多行时 align-content 设置生效。

day07：

• 如果行内元素是弹性盒子，则不需要再单独转显示模式为行内块或块元素，因为弹性盒子加宽高设置是生效的。

day08：

• 没有讲粘性定位
• transition 过渡效果讲的过于简单了，很多东西没提

day09：

• 在两个连续的<a>标签进行排列时，在水平方向上出现距离的原因可能是由于<a>标签是行内元素，默认的display属性值是inline或inline-block，而行内元素之间会有默认的空白间距（whitespace）。这个默认的空白间距是由于HTML代码中标签之间的空格、换行符等字符造成的。这些字符在渲染时会被解析成空白符，占据一定的宽度，从而导致标签间有一定的水平间距。常见的解决方式：一是通过将<a>标签之间的换行符或空白符删除或注释掉，将它们写在同一行，可以消除它们之间的水平间距，二是设置父容器的字体大小为0

day10：

• 关于子绝父相，子标签参考的父标签的边缘是最外边的padding线，即不是最外边的 border 线。
• P130：老师写的使爱心图标变红的选择器有问题，会选中每一个 li 的爱心，只显示第一个可以使用这个选择器：.topic-bd li:first-child .left p:first-child .iconfont
• 小兔鲜儿的案例花了 day09 和 day10 两个时间段，这个案例老师讲的特别好，很过瘾

day11：

• 渐变方向默认是从上到下。但如果渐变方向设置的是角度度数，则初识位置是朝正北方向，即 0deg 表示渐变方向是 从下到上。
• 终点位置的百分比实际上设置的是在此百分比位置的颜色。

day12：

• translate(x, y) 的两个值可以只写 x 值，y 值默认是 0 。但如果 translate3d(x, y, z) ，那么三个值都必须写，否则该属性不会生效。
• 老师讲了一个很实用的旋转方向记忆技巧：左手法则，很有用。
• 一个细节：坐标轴的建立是以 转换原点 为中心构建的，默认的 转换原点 位置是在盒子的正中心，我们可以通过 transform-origin 调整旋转原点的位置，则 坐标轴 的位置也会发生变化，导致 rotate 的绕轴旋转样式发生变化。同时需要注意，发生 rotate 也会导致 坐标轴 位置发生改变。

day13：

• 制作网页参考的逻辑分辨率 。
• 学习了 less ：CSS的预处理器，可转为 CSS 代码

day14：

• 开发中，不能 vw 和 vh 混用。实际就是因为不同的设备宽高比例不一致导致的，我们的 vw 和 vh 实际都是依据占设备宽高的百分比进行布局。

day15：

• Bootstrap 是由 Twitter 公司开发维护的 前端 UI 框架，它提供了 大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的 网页 及 常见交互效果。