美文网首页
H5C3的新特性

H5C3的新特性

作者: 李小白呀 | 来源:发表于2021-02-04 22:38 被阅读0次

H5新特性

  1. 拖拽释放(Drap and drop) API ondrop
  • 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
  1. 自定义属性data-id

  2. 语义化标签(header,nav,footer ,aside, article, section)

  • 语义化标签有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。
  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
    方便其他设备的解析
  • 便于团队开发和维护
  1. 音频 ,视频(audio, video) 自动播放,在属性中添加autoplay

  2. web存储

  • sessionstorage:关闭浏览器清空数据,储存大小约5M。
  • localstorage:永久生效,存储大小20M,多窗口下都可以使用
  • 都只能储存字符串
  1. 地理(Geolocation) API

  2. 表单控件 calendar , date , time , email , url , search , tel , file , number

CSS3新特性

1.选择器:属性选择器E[attr],伪类选择器E:nth-child(n),空伪类E:empty ,排除伪类E:not(selector)

2.颜色:新增了RGBA、HSLA模式

3.文本:为文本设置阴影增强文本的表现能力,通过 text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。

4.盒模型:box-sizing: border-box;

5.边框:圆角border-radius,阴影box-shadow

6.背景:

  • 通过 background-size 设置背景图片的尺寸。
  • 通过 background-origin 可以设置背景图片定位(background-position)的参照原点。
  • 通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。

7.渐变:线性渐变 linear-gradient,径向渐变radial-gradient

8.字体图标 font-face

9.弹性布局flex

10.2D转换:
translate 设置元素的位置(x/y坐标)
scale 设置元素的缩放比例(x/y两个方向)
rotate 设置元素旋转(正值为顺时针,负值为逆时针)
transform-origin 设置转换元素的原点

11.3D转换:
透视(perspective)值为1000px~1200px
将2D元素转换为3D立体(给父元素设置)transform-style: perserve-3d;
设置元素背面是否可见 backface-visibility: hidden;

12.动画:
定义关键帧 @keyframes
通过百分编写帧
在各帧中分别定义各属性
通过animation将动画应用于相应元素

  1. 文字阴影(text-shadow)

  2. 媒体查询 多栏布局 @media screen and (width:800px) {…}

  3. 边框图片border-image

相关文章

  • 面试题

    H5C3新特性标签.属性.操作DOM的方法querySelectAll.document.getElementBy...

  • 前端基础搬运工-H5C3模块

    八、H5C3模块 基础部分 1. CSS3有哪些新特性? - [ ] 1. CSS3实现圆角(border-ra...

  • H5C3的新特性

    H5新特性 拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性,即抓取对象以后拖到...

  • H5C3新特性简单总结

    CSS3新特性: 1.颜色:新增RGBA,HSLA模式 2. 文字阴影(text-shadow) 3. 边框: 圆...

  • JDK新特性书目录

    JDK1.4新特性 JDK1.5新特性 JDK1.6新特性 JDK1.7新特性 JDK1.8新特性

  • HTML5(1.1)

    H5C3 《购物车宣传》案例 综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发...

  • Java11的新特性

    Java语言特性系列 Java5的新特性 Java6的新特性 Java7的新特性 Java8的新特性 Java9的...

  • Java15的新特性

    Java语言特性系列 Java5的新特性 Java6的新特性 Java7的新特性 Java8的新特性 Java9的...

  • Java12的新特性

    Java语言特性系列 Java5的新特性 Java6的新特性 Java7的新特性 Java8的新特性 Java9的...

  • Math方法和es新特性

    es6常用 es7新特性 es8新特性 es9新特性 es10新特性

网友评论

      本文标题:H5C3的新特性

      本文链接:https://www.haomeiwen.com/subject/bjuitltx.html