黑马程序员技术交流社区
标题:
移动开发h5c3学习笔记.
[打印本页]
作者:
张起灵.
时间:
2019-4-10 00:26
标题:
移动开发h5c3学习笔记.
本帖最后由 张起灵. 于 2019-4-10 01:26 编辑
第一天：
电脑 pc端页面布局（html+css）
移动端页面布局（html5 + css3 ）
手机
ipad
html5：
1）新增的语义化标签
(1)header 头部标签
<header><header/>
(2)nav 导航标签
<nav><nav/>
(3)article 内容标签
<article><article/>
(4)section 块级标签
<section><section/>
(5)aside侧边栏标签
<aside><aside/>
(6)footer 尾部标签
<footer><footer/>
2）音频标签
1）语法： <audio src="音频路径" controls="controls"></audio>
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
</audio>
2）属性：
(1)autoplay="autoplay"
如果出现该属性，则音频在就绪后马上播放。
(2)controls="controls"
如果出现该属性，则向用户显示控件，比如播放按钮。
(3)loop="loop"
如果出现该属性，则每当音频结束时重新开始播放。
(4)preload="preload"
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
(5)src="路径"
要播放的音频的 URL。
3）浏览器兼容性处理：
注：不同浏览器支持的格式不同，解决浏览器兼容问题
注：谷歌浏览器必须加静音属性，才能实现自动播放
4）游戏官网、宣传页面，加背景音乐
3）视频标签
1）语法：
(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" />
</video>
2）属性:
(1)autoplay=“autoplay”
视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
(2)controls=“controls”
向用户显示播放控件
(3)loop=“loop”
播放完是否继续播放该视频，循环播放
(4)muted=“muted”
静音播放
(5)preload=“auto”（预先加载视频）
preload=“none”（不预先加载视频）
规定是否预加载视频(如果有了autoplay 就忽略该属性）
(6)poster="文件路径"
加载等待的画面图片
3）浏览器兼容性处理:
注：不同浏览器支持的格式不同，解决浏览器兼容问题
注：谷歌浏览器必须加静音属性，才能实现自动播放
4）新增的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"
生成一个颜色选择表单
5）新增的表单属性
（1）required=“required”
表单拥有该属性表示其内容不能为空，必填
（2）placeholder="提示文字"
表单的提示信息，存在默认值将不显示
（3）autofocus=“autofocus”
输入光标自动聚焦到指定输入框
（4）autocomplete=”on “ （默认）打开
autocomplete =”off” 关闭
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中曾经已填写的选项
（5）disabled="disibled"
使按钮不能点击
（6）
multiple="
multiple
"
可以多选文件提交
css3：
1）属性选择器
根据属性名
根据属性值
语法：（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元素
2）结构伪类选择器
语法：
(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）......
3）伪元素选择器
语法：
（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; }
移动端常见布局
1. 流式布局（百分比布局）
语法：width：100%； 100%代表为浏览器显示的宽度
注：max-width 最大宽度 （max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
设置浏览器拉伸时最大和最小的显示宽度和高度，也就是让他不能无限放大或缩小
2. flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2