absolute 绝对的active 活动的，激活的， 标记的一个伪类
align 对齐
alpha 透明度，半透明anchor 锚记 标记是这个单词的缩写
arrow 箭头
auto 自动
B
background 背景border 边框
banner 页面上的一个横条both 二者都是clear 属性的一个属性值
black 黑色bottom 底部，是一个CSS 属性
blink 闪烁box 盒子
block 块br 换行标记
blue 蓝色
bug 软件程序中的错误
body 主体，一个HTML 标记
building 建立
bold 粗体
button 按钮
C
cell 表格的单元格
color 颜色
center 中间，居中
contact 联系
child 孩子
content 内容
circle 圆圈
class 类别
css 层叠样式表
clear 清除
cursor 鼠标指针
cm 厘米
D
dashed 虚线
display 显示，CSS 的一个属
div 就是这个单词的缩写
decoration 装饰
document 文档
default 默认的
dotted 点线
double 双线
E
element 元素
F
father 父亲float 浮动
filter 滤镜，过滤器font 字体
first 第一个for 在循环语句中的一个保留字
fixed 固定的four 4 个
G
gif 一种图像格式green 绿色
gray 灰色
H
hack 常用于CSS 中的一些招数，或者类似于偏方的技巧
here 这里
hand 手
hidden 被隐藏
head 头部
home 首页
height 高度
horizontal 水平的
help 帮助
hover 鼠标指针经过时的效果，或称为“悬停状态”
I
Image 图像
inline 行内
important 重要的
inner 内部的
indent 缩进
italic 意大利体，斜体
index 索引
J
jpg 一种图像格式justify 两端对齐
L
language 语言
line 线
last 最后一个
link 链接
left 左边
list 列表
length 长度
M
margin 外边距
millimeter 毫米
max 最大的
min 最小的
medium 中间
model 模型
menu 菜单
move 移动
middle 中间
N
navigation 导航
none 无，不，没有
new 新的
O
object 对象
orange 橙色
one 一个
outer 外面的
only 仅仅
overflow 溢出
open 打开
P
padding 内边距
point 点
pointer 指针，指示器
purple 紫色
position 定位，位置
R
red 红色
resize 重新设置大小
relative 相对的
right 右边
repeat 重复，平铺
row 行
S
scroll 滚动
silver 银色
size 尺寸
square 方块
solid 固体，实线
static 静态的
solution 方案
strong 强壮，加粗的
son 儿子
style 样式
span 一个HTML 标记
T
table 表格title 标题
td 单元格的HTML 标记
top 顶部
text 文本
tr 表格中“行”的HTML 标记
transitional 过渡的
two 两个
three 三个type 类型
through 穿过
U
underline 下划线
uppercase 大写
upper 上面的
url 网址
V
vertical 竖直的
visited 访问过的
W
white 白色
width 宽度
Y
yellow 黄色
2021年2月19日学习笔记
【椭圆】
【半椭圆】
沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同
4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值
当border-radius: 10px / 5px 20px时，相当于
border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px
【四分之一椭圆】
其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角
【扩展练习】
【平行四边形】
【平行四边形--伪元素】
【八角形】
【菱形】
需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等
scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin
通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整
【裁切路径方案clip-path菱形】
【相关知识点】
clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）
生成器https://www.html.cn/tool/css-clip-path/
一、基本图形
inset()矩形（上右下左的边距round上右下左圆角）
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
circle圆形
circle()可以传人2个可选参数：
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
半径公式
如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比
ellipse椭圆
ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点
二、多边形polygon--正三角形
x: 0, y:100% 从元素的左上角开始，并从那里开始移动
x: 50%, y: 0
x: 100%, y: 100% 元素右边，元素底部
从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点
正方形
从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点
正五边形 59/（59+95）=38.31%，31/（81*2）=19.14%
162/2 = 81
59是上面三角形的高度
95是下面三角形的高度
31是下面四边形的高度
正六边形 50/（100+50 2）=25%，150/（100+50 2）=75%
50 是左边三角形的高度
100 是边长
正七边形
22/（100+62 2）=10.09%
202/（100+62 2）=90.18%
43/（43+97+78）=19.72%
（43+97）/（43+97+78）=64.22%
62/（100+62 2）=27.68%
（100+62）/（100+62 2）=72.32%
正八边形
71/（100+71 2）=29.34%
（71+100）/（100+71 2）=70.66%
五角星
红叉叉
标签
也可用于动画中
如果觉得百分比不好计算，可以换算成px
下面就是第一个点的计算方法
35.00%*800=280px
29.75%*400=119px
只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了
如果不同是没有效果的
小技巧，如果点不够，可以将两个坐标点进行重合即可
推荐网址：
http://species-in-pieces.com/
30个动物全部使用CSS3写的。超牛
今天小编要跟大家分享的文章是关于适合初学者学习Web前端技术的学习路线汇总。在当下来说Web前端开发工程师可谓是高福利、高薪水的职业了。所以现在学习Web前端开发的技术人员也是日益增多了，但是在学习Web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的。那么想学好Web前端，该从哪里入手学习呢?零基础学习Web前端学习路线图从哪里可以找到呢?在此为大家整理完整的适合零基础学员的Web前端学习路线分享给大家，来和小编一起看一看吧!
1.HTML5介绍
内容包括：(互联网发展趋势、H5语言的优势、简单易学人人都能编程、H5就业和薪资情况、H5常见的项目与产品、H5的未来与方向)
2.HTML基础
内容包括：(HTML简介与历史版本、常用开发软件、常见标签与属性、表格与表单、标签规范与标签语义化、实战：网页结构布局)
3.CSS基础
内容包括：(css简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用photoshop工具测量样式、HTML+CSS开发网页、实战：高仿电商首页效果)
4.CSS3基础
内容包括：(css3常见样式、css3选择器、变形与动画、3D效果与关键帧、弹性盒模型)
5.移动端布局
移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架
6.JavaScript基础
内容包括：(JS简介、JS变量、数据类型与类型转换、运算符与优先级、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循环、break、continue语法、函数定义与调用、全局变量与局部变量、函数传参与返回值、函数作用域与变量作用域。
而且还有DOM的基本操作、定时器使用、this指向与修改指向、数组、字符串等方法操作、时间对象与正则对象、掌握常见BOM操作、常见事件与事件细节、JSON与AJAX、JSONP跨域操作、前端cookie的使用、实战：JS配合HTML与CSS完成电商项目)
7.jquery框架
内容包括：(jquery框架介绍及优势介绍、jquery核心思想、jquery常见方法、jquery动画操作、jqueryAJAX操作、jquery工具方法、利用jquery快速开发网页)
8.PHP基础
内容包括：(PHP简介与基本语法、mysql数据库及sql语法、apache服务器与集成开发工具、PHP链接数据库、PHP与AJAX交互、实战：留言板、登录、注册等)
9.H5基础项目
内容包括：(项目简介、项目功能演示、项目划分及框架、编写HTML页面结构、设置CSS样式、添加JS交互、可选框架：bootstrap、jquery、PHP等、项目调试及兼容、项目验收)
如何成为合格的Web前端开发工程师(Web前端职业规划+各阶段薪资待遇)
原来是需要熟练的掌握HTML、CSS、JS、JQ等最基本的技术。
现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，Web前端开发不比从前，现在的功能非常强大。
而前端开发为什么现在这么火，在于互联网高速发展，和HTML5技术的不断成熟，各大浏览器的不断兼容，让Web前端开发成为最热的职业。
WEB前端初级开发工程师需要掌握的具体知识点包含：
HTML5基础、CSS基础、jquery框架、PHP基础
此阶段可达成学习效果：
可胜任Web前端开发工程师前端页面布局与重构工程师。
薪资可以达到：4K-6K。
WEB前端中高级开发工程师所需要掌握的知识点包含：
面向对象、javascript、Nodejs、微信端开发
此阶段可达成效果：
可胜任Web前端工程师、高级Web前端工程师、网站开发工程师、移动前端开发工程师等职位。
薪资可达到：6K-10K。
WEB前端大神级开发工程师需要掌握的知识点包含：
VueJS框架、ReactJS框架、AngularJS框架、HybridApp开发、前端架构
此阶段可达成效果：
可胜任高级Web前端工程师、全栈工程师、移动前端App开发工程师、微信开发工程师、小程序开发工程师、数据可视化开发工程师等职位。
薪资可达到：10K-15K+。
以上就是小编今天为大家分享的关于适合初学者学习Web前端技术的学习路线汇总的文章，希望本篇文章能够对正想要学习Web前端知识的小伙伴们有所帮助，想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
