黑马程序员技术交流社区
标题:
前端笔记
[打印本页]
作者:
yby
时间:
2019-4-11 13:54
标题:
前端笔记
语义化标签
(1)header 头部标签
<header><header/>
(2)nav 导航标签
<nav><nav/>
(3)article 内容标签
<article><article/>
(4)section 块级标签
<section><section/>
(5)aside侧边栏标签
<aside><aside/>
(6)footer 尾部标签
<footer><footer/>
audio 音频标签
语法:（1）<audio src="音频路径" controls="controls"></audio>
（2）<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
您的浏览器不支持播放声音
</audio>
注：不同浏览器支持的格式不同，解决浏览器兼容问题
注：谷歌浏览器必须加静音属性，才能实现自动播放
属性：（1）autoplay="autoplay"
如果出现该属性，则音频在就绪后马上播放。
(2)controls="controls"
如果出现该属性，则向用户显示控件，比如播放按钮。
(3)loop="loop"
如果出现该属性，则每当音频结束时重新开始播放。
(4)preload="preload"
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
(5)src="路径"
要播放的音频的 URL。
video 视频标签
语法：（1）<video src="音频路径" controls="controls"></video>
(2)<video muted="muted" loop="loop" poster="media/pig.jpg" controls>
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.ogg" type="video/ogg" />
您的浏览器太low了，不支持播放此视频
</video>
注：不同浏览器支持的格式不同，解决浏览器兼容问题
注：谷歌浏览器必须加静音属性，才能实现自动播放
属性：
（1）autoplay=“autoplay”
视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
（2）controls=“controls”
向用户显示播放控件
（3）loop=“loop”
播放完是否继续播放该视频，循环播放
（4）muted=“muted”
静音播放
（5）preload=“auto”（预先加载视频）
preload=“none”（不预先加载视频）
规定是否预加载视频(如果有了autoplay 就忽略该属性）
（6）poster="文件路径"
加载等待的画面图片
新增input表单
语法：<input type="输入类型">
输入类型：（1）type="email"
限制用户输入必须为Email类型
（2）type="url"
限制用户输入必须为URL类型
（3）type="date"
限制用户输入必须为日期类型
（4）type="time"
限制用户输入必须为时间类型
（5）type="month"
限制用户输入必须为月类型
（6）type="week"
限制用户输入必须为周类型
（7）type="number"
限制用户输入必须为数字类型
（8）type="tel"
手机号码
（9）type="search"
搜索框
（10）type="color"
生成一个颜色选择表单
表单属性：（1）required
=“required
”
表单拥有该属性表示其内容不能为空，必填
（2）placeholder="提示文字"
表单的提示信息，存在默认值将不显示
（3）autofocus=“autofocus”
输入光标自动聚焦到指定输入框
（4）autocomplete=”on “ （默认）打开
autocomplete =”off” 关闭
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中曾经已填写的选项
（5）disabled="disibled"
使按钮不能点击
属性选择器
语法：（1）div[att] 选择具有att属性的div元素
（2）div[class="val"] 选择具有class属性且属性值等于val的div元素
（3）div[class^="val"] 匹配具有class属性，且属性值为val开头div元素
（4）div[class$=''val''] 匹配具有class属性，且属性值为val结尾div元素
（5）div[class*=''val''] 匹配具有class属性，且属性值中含有val结尾div元素
结构伪类选择器
语法：（1） ul li:first-child
选择ul里第一个li
(2)ul li:last-child
选择ul里最后一个li
(3)ul li:nth-child(6)
选择ul里第6个li
ul li:nth-child(even)
选择ul里偶数的li标签
ul li:nth-child(odd)
选择ul里奇数的li标签
ul li:nth-child(2n)
选择ul里2*n的li标签，也可以（3n）（4n）.... n从0开始计算，2n相当于选择偶数
ul li:nth-child(n+5)
选择ul里从第5个开始后的所有li，包含第五个
ul li:nth-child(-n+5)
选择ul里第5个li前的所有li，包含第五个
注：:nth-child(n) 选择父元素里的第n个孩子，不管是否是同一种类型
（4）div span：first-of-type
选择div里第一个span
（5）div span：last-of-type
选择div里最后一个span
（6）div span：nth-of-type（2）
选择div里第2个span，也可以（3）（4）......
伪元素选择器
语法：（1）div::before {content:"内容"}
在div里的内容前添加一个内容
（2）div::after {content:"内容"}
在div里的内容后添加一个内容
注：1.必须有content属性，但可以为空内容
2.before和after会创建一个行内元素，可以通过display转为行内块
二。2D转换（变换）transform（移动，旋转，缩放）
（移动）语法：（1）transform：translate（x,y）
连写
（2）transform：translateX(100px)
向x轴移动100px，X为大写
（3）transform：translateY(100px)
向y轴移动100px，Y为大写
注：1.X,Y为大写
2.translate类似定位，不会影响到其他元素的位置
3.transform：translateX(50%)，表示向x轴移动自身宽度的一半
4.对行内标签没有效果
让盒子垂直居中，水平居中
（1）transform：translate（-50%,-50%）
注：同样要使用子绝父相
（旋转）语法：（1）transform:rotate(度数deg); 顺时针
（2）transform:rotate(-度数deg); 逆时针
注：通常和过渡一起使用
模拟三角：1.使用伪元素添加一个正方形盒子，给正方形只设置两个边框
2.定位到指定位置
3.旋转45度
转换中心点 transform-origin
语法：（1）transform-origin：left top；等
注：1.可以是方位名词
（2）transform-origin：x y；例：transform-origin：50px 50px；
注：2.可以是像素值
（3）transform-origin：0; 只写一个值的时候 第二个值默认为 50%;
2d缩放 scale
语法：转换的属性值为 scale(宽的倍数,高的倍数) ;
（1）transform-scale（2，2）;或transform-scale（2）;
注：修改了宽高为原来的2倍
（2）transform-scale（.5，.5）;或transform-scale（.5）;
注：缩小了1倍
2D旋转综合写法
语法：transform：translate（）rotate(度数deg) scale（.5，.5）；
注：1.顺序.位移，旋转，缩放
2.顺序不能变更，有位移及其他属性时，位移必须最前面
动画
语法： /* 我们想页面一打开，一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes 名称 {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用（使用）动画 */
/* 动画名称 */
animation-name: 名称;
/* 持续时间 */
animation-duration: 2s;
}
注：必须属性：动画名称，动画执行时间
常用属性：1. 动画名
设置要使用的动画名 animation-name:xxx;
2. 持续时间
设置动画播放的持续时间 animation-duration:3s
；
3. 速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;
linear： 匀速
ease： 慢-快-慢 （逐渐慢下来） 默认值
ease-in： 慢-快。
（加速）
ease-out： 快-慢。（减速）
ease-in-out： 慢-快-慢。（先加速后减速）
steps(2) 设置分几步完成动画效果
4. 延迟时间
animation-delay: 0s; 默认是0
5. 循环次数
设置动画播放的循环次数 animation-iteration-count: 2;
infinite 为无限循环
6. 循环方向
animation-direction
：normal；
1. normal 默认值 ，正向运行
2. reverse 反向运行
3. alternate 正-反-正...
（倒车）
4. alternate-reverse 反-正-反..
5. 以上与循环次数有关
7. 动画结束状态：
animation-fill-mode 设置动画在等待或者结束的时候的状态
forwards：动画结束后，元素样式停留在 100% 的样式
backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
（默认）
both： 同时设置了 forwards和backwards两个属性值
注：有了无限播放就不要结束状态
8. 暂停和播放
animation-play-state 控制 播放 还是 暂停
running 播放
paused 暂停
注：一般鼠标悬停（hover）时使用此属性
动画简写
语法：animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态；
animation: name duration timing-function delay iteration-count direction fill-mode;
注：1.前两个属性必须写,暂停动画不在简写里
2.给同一个盒子加两个动画，中间用逗号隔开animation: name duration，name duration；
3D transform:translate3d
语法：
移动：
1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
（简写）
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动
(一般用px为单位）
注：1.xyz不能省略，没有的用0表示
2.z轴是垂直屏幕的方向，到眼睛的方向是正值
旋转：1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可
注：1.x轴旋转时正值为往后倒，负值往前倒。（耍单杠）
2.y轴旋转时正值为往右转，负值往左转。（钢管舞）
3.z轴旋转时正值为往右转，负值往左转。（抽奖转盘）
透视 perspertive：100px；
注：1.给需要呈现3d效果的父盒子添加这个值
2.使用3d时必须设置这个值
3d呈现 transform-style
transform-style: flat; 平面模式，不开启3维立体环境
transform-style: preserve-3d; 3维立体环境
注： 代码写给父级，但是影响的是子盒子
过渡transition
语法：1.transition-duration 定义过渡效果花费的时间。默认是 0。
2.transition-property 规定应用过渡的 CSS 属性的名称。
3.transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
4.transition-delay 规定过渡效果何时开始。默认是 0。
简写：transition: 要过渡的属性 花费时间 运动曲线 何时开始;
例：transition: all （全部属性） 1s（运动完成所需时间） linear（匀速） 1s（延迟1秒运动）;
常用：transition: all 1s；
属性值：运动曲线： linear： 匀速
ease： 慢-快-慢 （逐渐慢下来） 默认值
ease-in： 慢-快。
（加速）
ease-out： 快-慢。（减速）
ease-in-out： 慢-快-慢。（先加速后减速）
旋转木马案例
注：1.先放6张图片在同一位置，每张图片沿y轴转60度，依次度数变大60度，并沿z轴前移300px。
css3兼容处理
- 谷歌 -webkit
-
火狐 -moz
-
IE -ms
-
欧朋-o-
注:如对 border-radius 进行兼容性处理
-webkit-border-radius: 30px 10px;
-moz-border-radius: 30px 10px;
-ms-border-radius: 30px 10px;
border-radius 一定要放在最后
border-radius: 30px 10px;
如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性
三。 理想视口 ideal viewport
语法：<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
属性：1.
背景缩放background-size
语法： background-size: 图片的宽度 图片的高度;
注：1.background-size: 500px; 只写一个参数 肯定是宽度 高度省略了 会等比例缩放
2.background-size: 50%; 里面的单位可以跟% 相对于父盒子来说的
3. background-size: cover; cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全
4. background-size: contain; 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域
CSS3盒子模型box-sizin
语法：box-sizing: border-box;
注：1.移动端使用，加到盒子的css中去
2.好处：padding和border不会撑大盒子,设置百分比时会将边框和外边距也算在内
移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
/*禁用横向滚动条*/
overflow-x: hidden;
移动端常见布局（注：固定的盒子必须有宽度）
1. 流式布局（百分比布局）
语法：width：100%； 100%代表为浏览器显示的宽度
注：max-width 最大宽度 （max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
设置浏览器拉伸时最大和最小的显示宽度和高度，也就是让他不能无限放大或缩小
2. flex 弹性布局（强烈推荐）
语法：display：flex；（必须添加这个属性才能设置其他属性）
注：给父元素添加display：flex；属性来控制子盒子的位置和排列方式。
父项常见属性
1. 设置主轴的方向：
语法：flex-direction：;
属性值：1.flex-direction: row; （默认，从左往右）
2.flex-direction:row-reverse ;（从右到左）
3.flex-direction: column; （从上到下）
4.flex-direction:column-reverse;（从下到上）
注：1.水平轴的默认方向是：水平向右，
垂直轴的默认方向是：垂直向下
2.设置父盒子内子盒子的排列方式，加给父盒子。
2.设置子盒子在主轴上的排列方式（也就是让盒子在大盒子里居中，靠下，还是靠上）
语法：justify-content:flex-start;
属性值：1.justify-content:flex-start; （默认，从头部开始，主轴是x轴则从左到右，主轴是y轴则从上到下）
2.justify-content: flex-end;（从尾部开始排列）
3.justify-content: center;（在主轴上居中）
4. justify-content: space-around;（平分剩余空间）
5.justify-content: space-between;（两边的子元素贴边，中间的平分剩下的空间）
注：1.要注意主轴的方向。
3.设置是否换行(设置子盒子满了是否换行）
语法：flex-wrap:nowrap；（默认，不换行）
属性值：1.flex-wrap:nowrap；（默认，不换行）
2.flex-wrap:wrap; （换行）
注：默认子元素不会换行，显示不下时会改变子盒子的大小
4.设置侧轴上的子元素排列方式（单行 ）y轴
语法：align-items: ;
属性值：flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
stretch 拉伸
注：1.拉伸时需要没有高度。
2.子盒子只有单行时使用。
5.设置侧轴上的子元素的排列方式（多行）y轴
语法：align-content：；
属性值：flex-start （默认，在侧轴的头部开始排列）
center（在侧轴中间显示）
space-between（在侧轴两边的子元素贴边，中间的平分剩下的空间）
space-around（在侧轴平分剩余空间）
flex-end（在侧轴尾部开始排列）
stretch（设置侧轴上子盒子平分父盒子的高度）
注：1.仅限子盒子有换行（多行）时使用
小简写： flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
语法：flex-flow:row wrap;
flex-flow:主轴方向 是否换行;
子项常见属性
1. flex 属性（放大当前元素的宽度，用来设置某个盒子占剩余空间的比例值）
语法：flex: 0;（默认值0）
flex:20%;
注：1.谁设置了谁就占。
2.不能直接设置0，可以不写。
3.可以写百分比，相对于父亲的宽度。
2.控制子项自己在侧轴上的排列方式
语法：align-self：；
属性值：flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
注：1.控制某一个子盒子的排列顺序
2.相当于某一个子盒子需要单独设置排列位置时使用（靠上，靠下，居中......）
3.order 属性定义盒子的排列顺序(相当于第3个可以变到第一个)
语法：order: 0; （默认是0，负值小）
注：越小越靠前。值为负
背景线性渐变
语法：background: linear-gradient(起始方向,?颜色1,?颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);（从左往右）
background: -webkit-linear-gradient(left top, red , blue);（左上往右下）
注：1.背景渐变必须添加浏览器私有前缀
2.起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
3.
less+rem+媒体查询布局
1.媒体查询语法规范
语法： @media screen（查询类型） and（关键词） (max-width: 800px)（媒体特性：小于等于800时） {
body {
background-color: pink;
}
}
注：1. 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式
2.从小往大写或从大往小写
查询类型
属性值：1.all（用于所有设备）
2.print （用于打印机和打印预览）
*3.scree （用于电脑屏幕，平板电脑，手机等）
关键词
属性值：*1.and：可以将多个媒体特性连接到一起，相当于“且”的意思。
2.not：排除某个媒体类型，相当于“非”的意思，可以省略。
3.only：指定某个特定的媒体类型，可以省略。
媒体特性
属性值：1.width ：定义输出设备中页面可见区域的宽度
2.min-width ：定义输出设备中页面最小可见区域的宽度(大于设定的值时改变样式）
3.max-width ：定义输出设备中页面最大可见区域的宽度(小于设定的值时改变样式）
混合布局
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2