HTML基础课堂小笔记

1.HTML文本效果
文本阴影:text-shadow；
盒子阴影:box-shadow；
处理溢出文件:text-overflow；
文本显示为省略号:text-overflow：ellipsis;
文本裁剪:text-overflow:clip；
设置文本换行:word-wrap,word-break;
2.引入外部字体
引入外部字体使用
3.2D转换
提示：单独设置x或者y时，不能一起单个设置，否者只会执行最后设置的移动轴。
a.transfrom
transfrom:translate(20px,50px);
提示：两个值之间用逗号隔开，可以设置一个值表示x轴的移动，两个值之间用逗号分隔,可以设置一个值，表示X轴的移动, 为正值时沿x轴和Y轴的正值方向，负值为相反方向。
b.translate移动
c.rotate旋转
提示：为正值时顺时针旋转，负值为反方向。
transfrom:rotate(30deg)必须使用角度单位deg；
d.sacle缩放
transform:scale(2,3);
第一个参数缩放是X轴（宽度）， 第二个参数缩放是Y轴（高度）
X轴为负值时，沿Y翻转当前元素
Y轴为负值时，沿X翻转当前元素
e.skew倾斜
transform：skew(20deg,0deg);
单位时角度deg
第一个值为X轴，第二个值为Y轴 正值为顺时针倾斜，负值则相反
倾斜会拉伸当前元素大小
f.matrix 2D转换简写形式，不需要添加单位
transfrom：matrix（1，2，-2，1，2，1）；
X缩放,Y轴倾斜,X轴倾斜,Y轴缩放,X轴平移,Y轴平移
g.transform-origin:10px 50px;改变旋转中心点，可以为上下左右，%，px
h.transform-style: preserve-3d;呈现3D空间
i. perspective: 200px;设置3D透视图，值越小，成像越大
j.backface-visibility:visible;默认状态能看见反面， 设置为hidden反面内容及颜色不能看见
4.transition:css过渡
属性名称 过渡的时间(s,ms,1s=1000ms) 运动的曲线 开始等待的时间
a.ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
b.ease-in 规定以慢速开始的过渡效果
c. ease-out 规定以慢速结束的过渡效果
d. ease-in-out 规定以慢速开始和结束的过渡效果
5.文本
a.文本:
b.按钮：
c.密码：
d.数字：
e.颜色：
f.选择日期:
g.选择日期时间：
提示:datetime选择日期时间 只支持苹果和opear
h.选择日期时间：
提示:datetime-local选择日期时间 只支持谷歌,苹果和opear
i.邮箱：
j.月：
k.可调节输入区域:
l.搜索域:
提示：多了可全部删除符号
m.tel电话:
5.disabled禁止
6.max最大值，min最小值
min最小值通常使用在number类型或range
maxlength最大输入长度，通常与text和password
minlength最小输入长度
7.pattern设置正则表达式验证
8. readonly只读模式
9. required设置必填项
10.size设置input的显示宽度，默认值为20
11. step设置number字符间隔为XX，默认间隔为1
12.创建动画
@keyframes创建一个动画
创建动画可以使用from…to代表0%…100%
animation：name duration timing-function
delay iteration-count
direction fill-mode play-state简写形式
HTML5中创建动画的元素：
animation-name: name;设置动画名称
animation-duration: 2s;设置动画运动的时间
animation-fill-mode: forwards;动画停止的位置
animation-timing-function: ease;设置动画运动的曲线
forwards停止在最后一帧动画
backwards停止在第一帧动画
both最后运动的位置，就是停留的位置
animation-delay: 2s;动画开始时间(什么时候开始)
animation-iteration-count: 2;动画执行的次数
infinite无限循环
animation-direction: normal;
reverse反向
13.html5音频播放
alternate奇数正向播放，偶数反向播放
alternate-reverse奇数反向播放，偶数正向播放
animation-play-state: paused;（轮播原理的暂停和播放）设 置动画是否播放或暂停
paused暂停
running开始

分页

• 
  
• 1
• 
  
• 2
• 
  
• 3
• 
  
• 4
• 
  

autoplay设置视频立马播放（加载完成以后）
controls设置播放的进度条和按钮等
width和height可以设置播放的宽度高度，值可以为带单位 和不带单位
loop循环播放
muted设置视频播放时静音播放
poster设置视频播放的封面
preload页面加载时加载播放视频，如果出现autoplay，那么preload就会失效–>