h5&css3

HTML5

1. HTML5简介
   • 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为
   • 它具有更大的技术集，允许更多样化和强大的网站和应用程序
   • 增加了新特性：
     • 语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
   • 广义的HTML5
     • 广义的HTML5是HTML5本身+CSS3+JavaScript
     • 虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势，将来将全面进入HTML的世界
2. H5新增语义化标签
   • 以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的
   • < header>:头部标签
   • < nav>: 导航标签
   • < article> : 内容标签
   • < section>: 块级标签
   • < aside> : 侧边栏标签
   • < footer>: 尾部标签
   • 注意：
     • 这种语义化标准注意针对搜索引擎的
     • 这些新标签页面中可以使用多次的
     • 再IE9中，需要把这些元素转换为块级元素
     • 其实，我们移动端更喜欢使用这些标签
     • HTML5还增加了很多其他标签，我们后面再慢慢学
3. H5新增多媒体标签
   • 多媒体标签包含两个，具体如下：
     • 音频：< audio>
     • 视频: < video>
     • 使用它们可以很方便的再页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件
   • < audio>音频标签
     • HTML5再不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
     • 1.音频格式
       • 当前，< audio>元素支持三种音频格式：
         • Ogg Vorbis、MP3、Wav
       • 音频标签语法格式
         • < audio src="文件地址" controls = "controls">< /audio>
         • < audio> 音频标签常见属性

1. • • • • • 谷歌浏览器把autoplay属性给我们禁用了
         • 因为不同浏览器支持不同格式 我们采取的解决方案是 我们为这个音频准备多个格式

           • + < audio  controls = "controls">
             + •         < source scr = "happy.mp3" type="audio/mpeg">
             + •         < source scr = "happy.ogg"   type="audio/ogg">
             + •         您的浏览器太low了，  不支持audio播放
             + < /audio>

   • < video>视频标签
     • 当前 视频标签支持三种格式 Ogg、MPEG4、WebM
     • 音频标签语法格式
       • < video src="文件地址" controls = "controls">< /video >
       • 兼容性写法

         • + < video   controls = "controls">
           + •         < source scr = "happy.mp4" type="video/mp4">
           + •         < source scr = "happy.ogg"   type="video/ogg">
           + •         您的浏览器太low了，  不支持video 播放
           + < /video >

       • < video > 音频标签常见属性

1. • • • • 谷歌浏览器把autoplay属性给我们禁用了 解决方案 给视频加静音属性
   • 总结：
     • 音频标签和视频标签使用基本一致
     • 浏览器支持情况不同
     • 谷歌浏览器把音频和视频自动播放禁止了
     • 我们可以给视频标签添加muted属性可以自定播放视频，音频不可以
     • 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
2. H5新增input表单、表单属性

1. • 示例代码如下
     • < input type="email">
   • 新增表单属性

1. • • 示例代码如下
     • < input type="email" required = "required" >

CSS3

1. CSS3现状
   • 在CSS2的基础上新增(扩展)样式
   • 移动端支持优于PC端
   • 不断改进中
   • 应用相对广泛
2. 属性选择器

   • 选择符	简介
     E[att]	选中具有att属性的E元素
     E[att="val"]	选中具有att属性且属性值等于val的E元素
     E[att^="val"]	匹配具有att属性、且值以val开头的E元素
     E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
     E[att*="val"]	匹配具有att属性、且值中含有val的E元素 可以在任何位置

   • disabled是禁用的意思 示例的代码如下

     • + < button disabled = "disabled">按钮< /button>+ < button>按钮< /button>+ button[disabled]{  #选择的是button标签里面又具有属性disabled的标签 + cursor:default;   + }+ < input type="text" value="文本框"> + input[value="文本框"]{  选择input标签里面的value属性且属性值为"文本框"的标签+ width:40px;+ }

   • 类选择器、属性选择器、伪类选择器的权重为10
3. CSS3结构伪类选择器

   • 选择符	简介
     E:first-child	匹配父元素中的第一个子元素E
     E:last-child	匹配父元素中最后一个E元素
     E:nth-child(n)	匹配父元素中的第n个子元素E
     E:first-of-type	指定类型E的第一个
     E:last-of-type	指定类型的E的最后一个
     E:nth-of-type(n)	指定类型E的第n个

   • 示例代码如下

     • + < ul>  + < li>1< /li>  + < li>2< /li>  + < li>3< /li>+ < /ul>+ ul li:first-child{  #选择ul里面的第一个li标签+ background-color : pink;+ }+ ul li:nth-child(2){  #选择ul里面的第2个li标签+ •    background-color : deeppink;+ }等价于+ ul :nth-child(2){#选择ul里面的第2个标签+ •    background-color : deeppink;+ }

   • nth-child(n)
     • n可以是数字、关键字和公式
     • n如果是数字，就是选择第几个
     • 常见的关键词有even偶数 odd奇数
     • 常见的公式如下(如果n是公式，则从0开始计算)
     • 但是第0个元素或者超出了元素的个数会被忽略

       • 公式	取值
         2n	偶数
         2n+1	奇数
         5n	5 10 15....
         n+5	从第5个开始(包含第五个)到最后
         -n+5	前5个(包含第5个)

     • :nth-child(n) 选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
   • 示例代码如下

     • + < div>+ •       < p>我是一个屁< /p>+ •       < span>我是span< /span>+ •       < span>我是span< /span>+ •        < span>我是span< /span>+ < /div>+ #of-type 选择指定类型的元素+ div span:first-of-type{   #选择div 里面的第一个span+ backgrpund-color : purple;+ }+ div span:nth-of-type(2){    #选择div里面的第二个span+ backgrpund-color : pink;+ }

4. 伪元素选择器(重点)

   • 选择符	简介
     ::before	在元素内部的前面插入内容
     ::after	在元素的内部的后面插入内容

   • 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
   • 注意
     • 语法: Element::before{}
     • before和after必须有content属性
     • before在内容的前面，after在内容的后面
     • before和after创建一个元素，但是属于行内元素
     • 因为在dom里面看不见刚才创建的元素，所以我们称为伪元素
     • 伪元素和标签选择器一样，权重为1
   • 示例代码如下：

     • + < div>是< /div>+ div::before{+ content:"我";+ }    结果为: 我是

   • 伪元素清除浮动
     • 1.额外标签法也称为隔墙法，是W3C推荐的做法
     • 2.后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化
     • 伪元素清除浮动示例代码如下

       • + 第一种清除浮动  + .clearfix::after{  + content:"";   伪元素必须写的属性  + display:block;   插入的元素必须是块级  + height:0;    不要看见这个元素  + clear:both;    核心代码清除浮动  + visibility: hidden;   不要看见这个元素  + }+ 第二种清除浮动  + .clearfix::before, .clearfix::after{  + content: "";  + display: table;  转换为块级元素，并在一行显示  + }  + .clearfix::after{  + clear:both;  + }

5. CSS3盒子模型
   • CSS3中可以通过box-sizing来指定盒模型，，有2个值，即可指定为content-box,border-box,这样我们计算盒子大小的方式就发生了改变
   • 可以分成两种情况
     • 1.box-sizing: content-box 盒子大小为width+padding+border(以前默认的)
     • 2.box-sizing：border-box 盒子大小为width
       • 如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(提取padding和border不会超过width宽度)
6. CSS3其他特性(了解)
   • 1.CSS3滤镜filter:
     • filter CSS属性将模糊或颜色偏移等图形效果应用于元素
     • 语法格式如下
       • filter: 函数(); 例如： filter:blur(5px); blur模糊处理， 数值越大越模糊
   • 2.CSS3 calc函数：
     • calc()此 CSS函数让你在声明CSS属性值时执行一些计算
     • 语法格式如下
       • width: calc(100%-80px);
       • 括号里面可以使用 + - * /来进行计算
7. CSS3过渡(重点)
   • 过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JS的情况下。当元素从一种样式变换为另一种样式时为元素添加效果
   • 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局
   • 我们现在经常和:hover 一起搭配使用
   • 语法格式为
     • transition: 要过渡的属性 花费时间 运动曲线 何时开始;
       • 1.属性: 想要变换的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了
       • 2.花费时间：单位是秒(必须写单位) 比如0.5s
       • 3.运动曲线： 默认是ease(可以省略) linear(匀速) ease-in(加速) ease-out(减速)
       • 4.何时开始：单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s(可以省略)
       • 示例代码如下

         • + div{+ width:200px;+ height:100px;+ background-color:pink;+ #如果想要写多个属性，利用逗号进行分割+ transition:  width 3s, height 3s;+ #如果想要多个属性都变换，属性写all就可以了+ transition: all  3s;+ }+ div:hover{+ width:400px;+ height:200px;+ }

       • 注意：谁做过渡就给谁加
8. CSS3 2D转换
   • 转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
   • 转换(transform)你可以简单理解为变形
     • 移动： translate
     • 旋转：rotate
     • 缩放：scale
   • 二维坐标系
     • 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
   • 2D转换之移动translate
     • 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
     • 语法
       • transform: translate(x,y); 或者分开写
       • transform: translateX(n);
       • transform: translateY(n);
     • 示例代码如下
       • div{
       • x 就是x轴上移动位置， y就是y轴上移动位置 中间用逗号隔开
       • transform:translate(100px,100px)
       • }
     • 重点：
       • 定义2D转换中的移动，沿着X和Y轴移动元素
       • translate最大的优点: 不会影响到其他元素的位置
       • translate中的百分比单位是相对于自身元素的translate:(50%,50%);
       • 对行内标签没有效果
   • 2D转换之旋转rotate
     • 2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
     • 语法格式
       • transform: rotate(度数)
     • 重点：
       • rotate里面跟度数，单位是deg 比如 rotate(45deg)
       • 角度为正时，顺时针，负时，为逆时针
       • 默认旋转的中心点是元素的中心点
     • 2D转换中心点 transform-origin
       • 我们可以设置元素转换的中心点
       • 语法
         • transform-origin: x y;
       • 重点：
         • 注意后面的参数x和y用空格隔开
         • x y 默认转换的中心点是元素的中心点(50% 50%)
         • 还可以给x y 设置像素或者 方位名词( top bottom left right center)
   • 2D转换之缩放scale
     • 缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小
     • 语法
       • transform:scale(x,y);
     • 注意:
       • 注意其中的x和y用逗号分隔
       • transform:scale(1,1) : 宽和高都放大一倍，相对于没有放大
       • transform:scale(2,2): 宽和高都放大了2倍
       • transform: scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
       • transform : scale(0.5,0.5)缩小
       • sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
   • 2D转换综合写法
     • 注意：
       • 1.同时使用多个转换，其格式为:transform:translate() rotate() scale()...等
       • 2.其顺序会影响转换的效果(先旋转会改变坐标轴方向)
       • 3.当我们同时有位移和其他属性的时候，记得要将位移放到最前面
9. CSS3动画
   • 动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
   • 动画的基本使用
     • 制作动画分为两步:
       • 1.先定义动画
       • 2.再使用(调用)动画
     • 1.用keyframes定义动画(类型定义类选择器其)
       • @keyframes 动画名称{
       • 0%{
       • width:100px;
       • }
       • 100%{
       • width:200px;
       • }
       • }
       • 动画序列
         • 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
         • 再@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
         • 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
         • 请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%
         • 1.可以做多个状态的变化 keyframe 关键帧
         • 2.里面的百分比是整数
         • 3.里面的百分比就是 总的时间的划分
     • 2.元素使用动画

       • div{
         
         animation-name: 动画名称;  ///调用动画
         
             animation-duration: 持续时间;
         
         }

   • 动画常用属性

     • 属性	描述
       @keyframes	规定动画
       animation	所有动画属性的简写属性，除了animation-play-state属性
       animation-name	规定@keyframes动画的名称(必须的)
       animation-duration	规定动画完成一个周期所花费的秒或毫秒,默认是0.(必须的)
       animation-timing-function	规定动画的速度曲线，默认是‘ease‘
       animation-delay	规定动画是何时开始，默认是‘ease‘
       animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite 无限
       animation-direction	规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放
       animation-play-state	鼠标放上去规定动画是否正在运行或暂停。默认是"running"还有"paused"
       animation-fill-mode	规定动画结束后状态，保持结束状态forwards 回到起始backwards(默认是这个)

   • 动画简写属性
     • animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
       • animation: myfirst 5s linear 2s infinite alternate
     • 总结：
       • 简写属性里面不包含 animation-play-state
       • 暂停动画: animation-play-state:puased; 经常和鼠标经过等其他配合使用
       • 想要动画走回来，而不是直接跳回来： animation-direction : alternate
       • 盒子动画结束后，停在结束位置 animation-fill-mode：forwards
   • 速度曲线细节
     • animation-timing-function: 规定动画的速度曲线，默认是‘ease’

     • 值	描述
       linear	动画从头到尾的速度是相同的。匀速
       ease	默认。动画以低速开始，然后加快，在结束前变慢
       ease-in	动画以低速开始
       ease-out	动画以低速结束
       ease-in-out	动画以低速开始和结束
       steps()	指定了时间函数中的间隔数量(步长)

     • steps()就是分几步来完成我们的动画 有了steps 就不要在写ease或者linear了 可以用来实现打字机效果
   • 我们元素可以添加多个动画，用逗号隔开
10. CSS3 3D转换
    • 三维坐标系
      • 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的
      • x轴：水平向右 注意：x右边是正值，左边是负值
      • y轴：垂直向下 注意：y下面是正值，上面是负值
      • z轴：垂直屏幕 注意：往外面是正值，往里面是负值
      • 3D转换我们主要学习工作中最常用的3D位移和3D旋转
    • 3D转换之3D移动 translate3d
      • 3D移动在2D移动 的基础上多加了一个可以移动的方法，就是z轴方向

        • translform:translateX(100px); 仅仅是在x轴上移动
          
          translform:translateY(100px); 仅仅是在Y轴上移动
          
          translform:translateZ(100px); 仅仅是在Z轴上移动(注意:translateZ一般用px单位)  向外移动100px   正值向外移动  负值向内移动
          
          translform:translate3d(x,y,z); 其中x、y、z分别指要移动的轴的方向的距离   xyz是不能省略的，如果没有就写0

    • 3D透视 perspective
      • 在 2D平面产生近大远小视觉立体，但是只是效果二维的
        • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内 )
        • 模拟人类的视觉位置，可认为安排一只眼睛去看
        • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
        • 距离视觉点越近的在电脑平面成像越大，越远成像越小
        • 透视的单位是像素
      • 透视写在被观察元素的父盒子上面的
        • d: 就是视距，视距就是一个距离人的眼睛到平面的距离
        • z：就是z轴，物体距离平面的距离，z轴越大(正值) 我们看到的物体就越大
      • 语法:
        • perspective:300px
    • 3D旋转rotate3d
      • 3D旋转指可以让元素在三维平面内沿着x轴、y轴，z轴或者自定义轴进行旋转
      • 语法：

        • + transform: rotateX(45deg):沿着x轴正方向旋转45deg
          + transform: rotateY(45deg):沿着y轴正方向旋转45deg
          + transform: rotateZ(45deg):沿着z轴正方向旋转45deg
          + transform: rotate3d(x,y,z,deg):沿着自定义轴旋转 deg为角度(了解即可)‘
            + transform: rotate3d(1,0,0,45deg) 沿着x轴正方向旋转45deg
            + transform: rotate3d(1,1,0,45deg) 沿着对角线旋转45deg

      • 对于元素旋转的方向的判断 我们使用左手准则 x轴的左手法则
        • 左手的手拇指指向x轴的正方向
        • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)
      • y轴的左手准则
        • 左手的手拇指指向y轴的正方向
        • 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
    • 3D呈现 transfrom-style
      • 控制子元素是否开启三维立体环境
      • transform-style:flat; 子元素不开启3d立体空间 默认的
      • transform-style:preserve-3d; 子元素开启立体空间
      • 代码写给父级，但是影响的是子盒子
11. 浏览器私有前缀
    • 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加
    • 1.私有前缀
      • -moz-: 代表firefox浏览器私有属性
      • -ms-: 代表ie浏览器私有属性
      • -webkit-: 代表safari、chrome私有属性
      • -o-: 代表Opera私有属性
    • 写法
      • -moz-border-radius:10px;

+ < audio  controls = "controls">+ •         < source scr = "happy.mp3" type="audio/mpeg">+ •         < source scr = "happy.ogg"   type="audio/ogg">+ •         您的浏览器太low了，  不支持audio播放+ < /audio>

原文地址：https://www.cnblogs.com/fengzi759/p/12072439.html