H5 CSS3 新特性

时间:2021-6-12 作者:qvyue

H5 新特性

1.语义化标签:article、nav、header、section、aside、footer
2.增强性表单:input的多个type
3.新增表单元素:detalist、keygen、output
4.新增表单属性:placehoder、require、mix和min
5.音频视频:video和audio
6.canvas绘画的
7.地理定位
8拖拽
9.本地存储localStorage和sessionStorage

语义化标签:

header 定义文档的头部区域
footer 定义文档的尾部区域
section 定义文档中的节(section、区段)
nav 定义文档的导航
aside 定义页面的侧边栏内容
article 定义页面独立的内容区域
(这些都是块元素)

增强型表单:

input type 的描述:
  • color 主要用于选取颜色
  • date 从一个日期选择器选择一个日期
  • datetime 选择一个日期(UTC 时间)
  • email 包含 e-mail 地址的输入域
  • month 选择一个月份
  • number 数值的输入域
  • range 一定范围内数字值的输入域
  • search 用于搜索域
  • tel 定义输入电话号码字段
  • time 选择一个时间
  • url URL 地址的输入域
  • week 选择周和年
    新增表单元素:

html5 也新增以下表单元素

表单元素的描述
  • datalist 元素规定输入域的选项列表,使用 input 元素的 list 属性与 datalist 元素的 id 绑定
    元素为 元素规定预定义选项列表。
    用户会在他们输入数据时看到预定义选项的下拉列表。
    元素的 list 属性必须引用 元素的 id 属性。
    option 元素永远都要设置 value 属性。







H5 CSS3 新特性
image.png
  • keygen 提供一种验证用户的可靠方法,标签规定用于表单的密钥对生成器字段
  • output 用于不同类型的输出,比如计算或脚本输出

html新增的表单属性:

html5 新增的表单属性

表单属性 描述

  • placehoder 输入框内的提示字符
  • required 是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 用于验证 input 元素的值
  • min 和 max 设置元素最小值与最大值
  • step 为输入域规定合法的数字间隔
  • height 和 width 用于 image 类型的 input 标签的图像高度和宽度
  • autofocus 是一个 boolean 属性。规定在页面加载时,域自动地获得焦点
  • multiple 是一个 boolean 属性。规定 input 元素中可选择多个值

地理定位

拖拽

html5 新事件:

事件描述
  • onresize 当调整窗口大小时运行脚本
  • ondrag 当拖动元素时运行脚本
  • onscroll 当滚动元素滚动元素的滚动条时运行脚本
  • onmousewheel 当转动鼠标滚轮时运行脚本
  • onerror 当错误发生时运行脚本
  • onplay 当媒介数据将要开始播放时运行脚本
  • onpause 当媒介数据暂停时运行脚本

块级元素:

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5 新增的 header、section、aside、footer 等

行内元素:

img、a、lable、input、em、big、i、textarea、select、small、sub、sup,strong、button

CSS3 新特性:

选择器:

  • :last-child 选择元素最后一个孩子
  • :first-child 选择元素第一个孩子
  • :nth-child(1) 按照第几个孩子给它设置样式
  • :nth-child(even) 按照偶数
  • :nth-child(odd) 按照奇数
  • :disabled 选择每个禁用的E元素
  • :checked 选择每个被选中的E元素
  • :not(selector) 选择非 selector 元素的每个元素
  • ::selection 选择被用户选取的元素部分
伪类元素:
  • ::before {} 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。
  • ::after {} 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。
  • :first-letter 选择该元素内容的首字母
  • :first-line 选择该元素内容的首行
  • ::selection 选择被用户选取的元素部分

边框和背景

边框:
  • border-radius:边框圆角
  • box-shadow :盒子阴影
  • text-shadow:文字阴影
  • border-image:边框图片
背景:
  • background-size:规定背景图片的大小

文本效果

属性
  • text-shadow 向文本添加阴影
  • text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
    text
  • text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
  • text-outline 规定文本的轮廓
  • text-overflow规定当文本溢出包含元素时发生的事情overflow:hidden(溢出隐藏)、overflow:auto(溢出自适应)、overflow:scrol(溢出滚动条)
  • text-wrap 规定文本的换行规则
  • word-break 规定非中日韩文本的换行规则
  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
  • text-decoration 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线
弹性布局的优点:

1 适应性强,在做不同屏幕分辨率的界面时非常实用

2 可以随意按照宽度、比例划分元素的宽高

3 可以轻松改变元素的显示顺序

4 弹性布局实现快捷,易维护




    


Document

        *{
            margin: 0;
            padding: 0;
        }
        .parent-div{
            display: flex;
            width: 100%;
            height: 300px;
        }
        .left-div{
            height: 100%;
            flex: 1;
            background:green;
        }
        .center-div{
            height: 100%;
            width: 200px;
            background: blue;
        }
        .right-div{
            flex: 1;
            height: 100%;
            background: pink;
        }
    

中间盒子宽度固定,左右盒子自适应

 
        *{
            margin: 0;
            padding: 0;
        }
        .parent-div{
            display: flex;  /*给父级添加弹性盒*/
            width: 100%;
            height: 300px;
        }
        .left-div{
            height: 100%;
            flex: 1;        /*左侧盒子占一份*/
            background:green;
        }
        .center-div{
            height: 100%;
            width: 200px;  /*中间盒子设置宽200px*/
            background: blue;
        }
        .right-div{
            flex: 1; /*左侧盒子占一份*/
            height: 100%;
            background: pink;
        }
    

弹性盒子属性:

父级属性:

  • flex-wrap: nowrap; /换行/
  • flex-wrap: wrap; /不换行/
  • justify-content: space-between; /左右靠边 中间盒子之间距离相等/
  • justify-content: space-around; /每个两侧盒的间隔相等。所以,盒子之间的间隔比盒子与边框的间隔大一倍。/
  • justify-content: space-evenly; /每个盒子之间的距离都相等/
  • justify-content: flex-start; /左对齐/
  • justify-content: flex-end; /右对齐/
子级属性:
  • align-items: center; /居中/
  • align-content: space-around;/每个两侧盒的间隔相等。所以,盒子之间的间隔比盒子与边框的间隔大一倍。/
  • align-content: space-between;/上下靠边 中间盒子之间距离相等/
  • align-items: flex-end; /底部对齐/
  • align-items: flex-start; /顶部对齐/
 
        *{
            margin: 0;
            padding: 0;
        }
       .parent-div{
            display: flex;  /*给父级添加弹性盒*/
            flex-direction: row; /*弹性盒方向:主轴方向X轴  */
            flex-direction: column;  /* 弹性盒方向:主轴Y轴方向 */
            flex-direction: row-reverse;/* 弹性盒方向:主轴方向X轴 倒叙 */
            flex-direction: column-reverse;
            justify-content: space-between;  /*左右靠边  中间盒子之间距离相等*/
            justify-content: space-around;   /*每个两侧盒的间隔相等。所以,盒子之间的间隔比盒子与边框的间隔大一倍。*/
            justify-content: space-evenly;    /*每个盒子之间的距离都相等*/
            justify-content: flex-start;   /*左对齐*/
            justify-content: flex-end;      /*右对齐*/
            width: 100%;
            height: 200px;
        }
        .left-div{
            height: 100%;
            /* flex: 1;        左侧盒子占一份 */
            background:green;
            width: 200px;
            align-items: center;        /*居中*/
            align-content: space-around;/*每个两侧盒的间隔相等。所以,盒子之间的间隔比盒子与边框的间隔大一倍。*/
            align-content: space-between;/*上下靠边  中间盒子之间距离相等*/
            align-items: flex-end;      /*底部对齐*/
            align-items: flex-start;    /*顶部对齐*/
        }
        .center-div{
            height: 100%;
            width: 200px;  /*中间盒子设置宽200px*/
            background: blue;
        }
        .right-div{
            flex: 1; /*左侧盒子占一份*/
            height: 100%;
            background: pink;
        }
    

2D/3D 转换

2D 转换(transform)
  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px, 100px);

  • rotate():元素顺时针旋转给定的角度。若为负值,元素将逆时针旋转。transform: rotate(30deg);

  • scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,也可以一个值(宽高)。transform: scale(2,4);

  • skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg, 20deg);

  • matrix(): 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换
  • rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
  • rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
  • perspective:规定 3D 元素的透视效果
动画、过渡
  • 过渡效果(transition),使页面变化更平滑,以下参数可直接写在 transition 后面
  • transition-property :执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。
  • transition-duration:过渡动画的一个持续时间。
  • transition-timing-function:在延续时间段,动画变化的速率,常见的有: – ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
  • transition-delay:延迟多久后开始动画
动画(animation)

先定义 @keyframes 规则(0%,100% | from,to)
然后定义 animation,以下参数可直接写在 animation 后面

  • animation-name: 定义动画名称
  • animation-duration: 指定元素播放动画所持续的时间长
  • animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ): 指元素根据时间的推进来改变属性值的变换速率,即动画的播放方式
  • animation-delay: 指定元素动画开始时间
  • animation-iteration-count: infinite | number:指定元素播放动画的循环次数
  • animation-direction: normal | alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为 normal 时,动画的每次循环都是向前播放;另一个值是 alternate,规定动画在下一周期逆向地播放(来去播放)
  • animation-play-state: running | paused :控制元素动画的播放状态

canvas使用:

1、需要有一个ID ,画布的尺寸;

2、通过ID获取canvas的Dom对象,获取context;

var canvasDom=document.getElementById('myCanvas')
var ctx=canvasDom.getContext('2d')

操作context两种默认方式:1,绘制线(stroke)2,填充(fill);


    var canvasDom=document.getElementById('canvas')
    var context=canvasDom.getContext('2d')
    ctx.moveTO(x,y)//移动x,y
    ctx.lineTo(x,y)//连线至x ,y
    ctx.stroke();//描边;
    ctx.lineWidth='10' //绘制出的线粗细;
    ctx.fillRect(x,y,width,height)//填充矩形;
    ctx.clearRect(x,y,width,height)//清除画布区域;清除重复绘制的现象
    ctx.beginPath()//----)开辟新路径;
    ctx.closePath()//----闭合路径;
    ctx.stroke()//----描边;
    ctx.fill();//----填充;
    ctx.lineWidth='10'//----线宽;
    ctx.lineJoin//----连接点样式;
    ctx.lineCap//----线头样式;
    ctx.strokeStyle='red'//----描边颜色;
    ctx.fillStyle='blue'//----填充颜色;

视频

音频

 
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。