【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://developer.aliyun.com/article/1635461
出自【进步*于辰的博客】注：本文中“子级”指子级盒子或子级标签；“逻辑位置”指根据理论推断的所在位置，“实际位置”指实际显示的所在位置。
1、知识点扩展
<video>标签引入视频默认不会自动播放，需设置属性autoplay: muted；<video>不同于<img>，比例不能随意改变，需设置属性object-fit: cover进行拉伸。2.2 input
参考笔记一，P8.11、P9.14。
属性：
autofocus：自动聚集；pattern：设置正则表达式；novaliable：取消提交表单时对整个表单的验证；autocomplete = "on/off"设置表单是否打开自动完成功能；
注：“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。2.3 画布 Canvas
推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》（转发）。
参考笔记一，P4.9/10/12。
注：下文中的“canvas1”是Canvas标签，代码是在js中执行。
2.3.1 属性设置
- 修改参考点：即修改坐标原点。
canvas1.translate(x, y)； - 旋转坐标轴：
canvas1。rotate(<弧度>)；
修改刻度的width、height：
注：刻度的width、height与Canvas标签的width、height（用css修改）不是一个概念。
方法1、内嵌式修改width、height属性。
<Canvas id="canvas1" width="500" height="500" ></Canvas>
AI 代码解读
方法2、js修改width、height属性。
canvas1.width = 500; canvas1.height = 500;AI 代码解读
2.3.2 示例：画动态时钟
思想：
- 通过旋转坐标轴的方法画出刻度和时分秒针；
- 定义定时器（interval），时隔1s，先画出刻度，再根据时分秒针转动联系画出时分秒针。注意：先擦除（覆盖），再画。
转动联系：
- 秒针转动一圈，分针转动
π/30； - 分针转动一圈，时针转动
π/6。2.4 选项列表 datalist
笔记一，P9.12/13。
需要与<input>连用，用于存放<input>的可选值。
示例：
country：<input type="text"list="list1">
<datalist id="list1">
<option value="China" />
<option value="American" />
</datalist>
AI 代码解读
2.5 折叠列表 details
<summary>是列表的标题。
示例：
<details>
<summary>country</summary>
<p>China</p>
<p>American</p>
</details>
AI 代码解读
3、关于 margin
参考笔记一，P8.1/7。
- 相邻同级盒子的margin会相互覆盖；
- 若父级设置了border，则不会受子级的margin影响，即使子级的margin大于父级的margin；
- 若父级未设置border，则子级和父级的margin会相互覆盖。其中，若子级的margin大于父级的margin，父级会被“挤开”，这种现象称为；（解决方法：第2点）
若父级设置了定位方式，则不会受子级的margin影响。
4、overflow: hidden 的用法
参考笔记一，P8.2。
隐藏多余部分；
- 动态height。
当子级个数未知时，无法确定父级的height（注意：此时子级肯定设置了浮动float），设置父级overflow: hidden可实现动态height。当然，实现动态height还有一种方法：position: aboslute/fixed，但若使用此方法，则无法使用margin: 0 auto进行盒子水平居中，而overflow: hidden可以； - 解决外边距塌陷问题。
5、动态 height
参考笔记一，P8.9。、
实现动态height的前两种方法上文已阐述。
方法3：伪选择器。
伪选择器
after的作用：创建一个子级，此子级的“逻辑位置”在所有子级的最后。
操作：为父级用:after创建一个盒子，再清除此盒子的相应浮动（clear: xx）。
原理：由于after是为父级创建盒子，故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动，则不再受其他子级影响，故此盒子的“实际位置”在最后一个子级后面。因此，父级只能扩展height来保证能“容纳”此盒子，即动态height。为什么清除浮动？因为其他子级都设置了浮动，而此盒子未设置浮动，故此盒子会因其他盒子浮动而向上移动。因此，需要清除浮动来消除影响使其停留在原位置。
说明示例：
1、演示。
ul:after { content: "6";// 设置文本内容是"6" clear: left;// 清除左浮动 display: block;// 设置为块级元素,即默认占一行 width: 20px; height: 20px; background-color: gray; }AI 代码解读
从演示效果可以看出，前5个子级都设置了左浮动，故此盒子需要清除左浮动。注意：此盒子必须设置为块级元素display: block（缘由我暂未知，需要大家自行查阅和研究了）。
2、实现动态height。
ul:after { content: ""; clear: left; display: block; }AI 代码解读
最后
这些笔记是当年学习前端原生技术时做的，是基于容易忘记、需要注意或新知识点考虑所记录的。做笔记肯定不是原版原抄，而是经个人理解后的精简，故如一些基础知识便不在此列，如：$("#xx").css({})，这是jq设置盒子样式的一个基础函数。
我的发展方向是后端，平日（包括工作）涉及前端都是框架，很少再使用这些前端原生技术。此文章于今年撰写，过去再熟悉平日少接触都会生疏，所以可能有些阐述会略有问题。
知识点所涉及的内容，我会斟酌适当地做一些注释，如果大家不理解，只能请大家另寻高见。
本文中的例子是为了方便大家理解和阐述知识点而简单举出的，旨在阐明知识点，并不一定有实用性，仅是抛砖引玉。
本文持续更新中。。。
