A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 超雪 初级黑马   /  2019-4-11 08:47  /  1090 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML5:
1.新增的语义化标签  :header    nav  aside footer
2.音频audio标签:语法         属性           浏览器的兼容性              加背景音乐
其基本语法:< audio controls="condtrols ">
                           <source src=有两种格式  要么是MP3格式要么是Ogg格式,因为存在浏览器兼容性的问题 ,只有用这种方法解决。
     视频video标签 和音频标签解决浏览器的兼容性问题是一样的,其语法格式也是相同,视谷歌浏览器把自动播放这个功能禁止播放了,解决谷歌浏览器  是需要静音  加自动播放这样效果才能显示出来。
3. 新增的input表单标签
  限制输入内容是的格式,
type="email"  限制用户输入必须为Email类型
type="url"    限制用户输入必须为URL类型  
type="number"  限制用户输入必须为数字类型
type="tel"  手机号码
type="search"  搜索框
type="date"   限制用户输入必须为日期类型
这些基本常用的标签
input表单 属性
     1.required =required表单拥有该属性表示其内容不能为空,必填
      2.placeholder提示文本表单的提示信息,存在默认值将不显示autofocus=autofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
      3.autocompleteoff / on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
      4.multiple=multiple可以选中多个文件提交一次上传多个文件
4. CSS3
属性选择器
       元素 [属性]  
       元素[属性和属性值比如 id="tel"]
       元素[att^="val"] ^代表的是以val开头的属性值
       元素[att$="val"] $代表的是以val结尾的属性值


结构伪类选择器

      类选择器、属性选择器、伪类选择器,权重为 10
结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式(从0开始计算)
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
伪元素选择器
        ::before
        ::after
                content不能省略,可以设置为空
伪元素要注意的 :before和after  属于行内元素  在做页面的时候要转化
                            伪元素和标签选择器的权重都为1
5. 2D转换
    转换 transform     translate移动      旋转 rotate   缩放 scale
语法:
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2d移动一般和过度还有定位搭配使用
旋转 语法 transform:rotate (...deg)这个度数单位不能省略
转换中心 是transfom-origin  默认的是以中心点转换的    还有左上角   右上角等
一.移动translate 的步骤
1. 给元素添加 转换属性  transform

2. 属性值为移动 translate(x,y)  如  transform:translate(50px,50px);

3.rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转   注意deg这个单位度数不能省略。
4.2d缩放 scale
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
他的放大个缩小是以四周发散的一个过程。不像宽高 影响其他盒子。
语法 :
transform:scale(0.5)  缩小 小于1 都是缩小
transform:scale(2) 宽和高都放大了2倍 大于1是放大
中间是以逗号隔开的
综合写法 :
transform:translate()位移  rotate()旋转    scale()缩放  中间用空格隔开,其顺便不能变。
二.动画 animation
动画 可以设置变化的次数 甚至是无数次
1.语法步骤 :
  /* 我们想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用(使用)动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
2.动画属性
规定动画 @keyframes
规定 @keyframes动画的名称 :animation-name
动画持续时间:animation-duration
动画的速度曲线 :animation-timing-function
       1. linear: 匀速
        2.ease: 慢-快-慢  默认值
        3.ease-in: 慢-快     
       4.ease-out: 快-慢
        5.ease-in-out: 慢-快-慢。
动画延迟时间 也就是何时开始 :animation-delay
动画循环方向:animation-direction
默认值normal      反向运动reverse     正反正alternate      反正反alternate-reverse


速度曲线细节

透视 perspective
3D呈现 transfrom-style
l控制子元素是否开启三维立体环境。。
ltransform-style: flat 子元素不开启3d立体空间  默认的
ltransform-style: preserve-3d; 子元素开启立体空间
l代码写给父级,但是影响的是子盒子
l这个属性很重要,后面必用

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马