HTML5 +CSS3 新技术酷美棒

最新推荐文章于 2022-09-27 18:44:08 发布

三人行 | Dylen

最新推荐文章于 2022-09-27 18:44:08 发布

阅读量205

点赞数

分类专栏：前端基础文章标签： css java js

本文链接：https://blog.csdn.net/zwq56693/article/details/108396625

版权

前端基础专栏收录该内容

26 篇文章 1 订阅

订阅专栏

HTML5 + CSS3 强强联合

H5新增语义化标签

<header> : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 块级标签
<aside> : 侧边栏标签
<footer> : 尾部标签
注意 :
1. 语义化标准主要是针对搜索引擎的
2. 可以使用多次
3. 在ie9中,需要把这些元素转换成块级元素
4. 移动端更喜欢使用这些标签

H5新增多媒体标签

<audio> : 音频标签 HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,但是支持的格式是有限的,目前只支持三种音频格式,Ogg Vorbis Mp3 Wav.

<audio controls="controls" loop="loop" autoplay="autoplay">
   <source src="字母歌.ogg" type="audio/ogg">
    <source src="字母歌.mp3" type="audio/mpeg">
    您的浏览器太low啦
</audio>

<video>: 视频标签,主流播放器支持MP4,ogg格式

<video controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="Comp1_3.mp4" type="video/mp4" >
    <source src="Comp1_3.ogg" type="video/ogg" >
    您的浏览器太low啦 不支持播放视频
</video>

H5新增表单,表单属性

H5新增input表单

<form action="#" method="post">
   邮箱 : <input type="email" >
   网址 : <input type="url" >
   日期 : <input type="date" >
   时间 : <input type="time" >
   购买数量 : <input type="number" >
   手机号码 : <input type="tel" >
   关键字查询 : <input type="search" >
   <input type="submit" value="提交">
</form>

H5新增表单属性
1. required=“required” 表单拥有该属性表示其内容不能为空
2. placeholder : 表单的提示信息
3. autofocus : 自动聚焦属性,页面加载完成自动聚焦到指定表单
4. autocomplete : off/on : 当用户在字段开始输入时,浏览器基于之前键入过的值.默认开启. 需要放在表单内同时加上name属性,此外还需要同时成功提交.
5. multiple : 可以多选文件提交

CSS3之选择器part

属性选择器
1. 基本语法 : 元素(标签)[属性值]
```
<body>
    <button>开启</button>
    <button disabled="disabled">关闭</button>
</body>

<style>
    button {
        cursor: pointer;
    }
    button[disabled] {
        cursor: default;
    }
</style>
```
2. 其他使用
  1. E[attr^=value] : 以value开头的都会被选出来
  2. E[attr$=value] : 以value结尾的都会被选出来
  3. E[attr*=$value] : 包含value的都会被选出来
  4. E[attr=value] : 属性等于值的都会被选出来
结构伪类选择器
1. E:first-child : 第一个child被选出来
2. E:last-child : 最后一个被选出来
3. E:nth-child : 我们要选第几个,n就是几可以是数字,关键字,也可以是公式,常用的even(偶数),odd(奇数)
  1. 例如 : E:nth-child(2n) ,E:nth-child(n+5)
  2. 注意 : n是从0开始的
4. E :nth-of-type(n) : 指定类型和第几个进行选择
伪元素选择器
1. ::before : 在元素内部的前面插入内容
2. ::after : 在元素内部的后面插入内容
3. 注意 :
  1. before和after必须有content属性
  2. before在内容的前面,after在内容的后面
  3. before和after创建一个元素,但是属于行内元素
  4. 因为在dom里面看不见刚才创建的元素,所以我们称为伪元素
  5. 伪元素和标签选择器一样,权重为1

CSS3之转换part

CSS3之2D转换
1. translate: 是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位.
  1. transform : translate(x,y) 移动到x,y的位置,不影响其他元素的位置
  2. transform : translateX(n)
  3. transform : translateY(n)
  4. translate中的百分比单位是相对于自身元素的translate(50%,50%)
  5. 对行内标签没有效果
2. rotate : 让元素在2维平面内顺时针或者逆时针旋转.
  1. 语法 : transform : rotate(度数)
  2. 特点 :
    1. rotate里面跟度数,单位是deg 比如 rotate(45deg)
    2. 角度为正时,顺时针,负时为逆时针
    3. 默认旋转的中心是元素的中心点
3. transform-origin : 设置元素转换的中心点
  1. 语法: transform-origion: x y
  2. 特点:
    1. 后面的参数x和y用空格隔开
    2. x y默认转换的中心点是元素的中心点(50% 50%)
    3. 还可以给x y设置像素或者方位名次 (top buttom left right center)
  3. scale: 缩放, 顾名思义,可以放大和缩小, 只要给元素添加上了这个属性就能控制它放大还是缩小.
    1. 语法: transform: scale(x, y)
    2. 特点:
      1. 其中的x和y用逗号分隔
      2. 里边的数字大于一则是放大,反之是缩小
      3. 可以设置转换中心点,默认以中心点缩放的,而且不影响其他盒子

CSS3之动画part

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果,相对于过渡,动画可以实现多变化,更多控制,连续自动播放等效果.
1. 动画的定义:
```
<style>
@keyframes donghuamingcheng {
   0% {
        width: 50%;
    }
    100% {
        width: 150%;
    }
}
</style>
```
2. 动画的使用,在使用的元素下添加动画名称和持续时间
```
<style>
   div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /*引入动画名称*/
        animation-name: donghuamingcheng;
        /*动画持续的时间*/
        animation-duration: 2s;
    }
    @keyframes donghuamingcheng {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(300px);
        }
    }
</style>
```
3. 动画属性
  1. @keyframes: 规定动画
  2. animation: 所有动画属性的简写属性,除了animation-play-state属性
  3. animation-name: 规定@keyframes动画的名称(必须有)
  4. animation-duration:规定动画完成一个周期所花费的秒或毫秒,默认是0(必须有)
  5. animation-timing-function: 规定动画的速度曲线,默认是"ease"
  6. animation-delay: 规定动画何时开始,默认是0
  7. animation-iteration-count: 规定动画播放的次数,默认是1,还有infinite(循环)
  8. animation-direation: 规定动画是否在下一周期播放,默认是"normal",还有"alternate"逆播放.
  9. animation-play-state: 规定动画是否正在运行或暂停,默认是"running",还有"paused".
  10. animation-fill-mode : 规定动画结束后的状态,保持forword回到原始backwords.
  11. 速度曲线细节
    1. liner: 动画从头到位的速度是相同的,匀速
    2. ease: 默认动画从低速开始,然后加快,在结束前变慢
    3. ease-in: 动画以低速开始
    4. ease-out: 动画以低速结束
    5. ease-in-out: 动画以低速开始和结束
    6. steps(): 指定了时间函数中的间隔数量

CSS3之3Dpart

透视(perspective): 在2D平面产生近大远小视觉立体,但是只是效果二维的.
1. 如果想要在网页产生3D效果需要透视,(理解为3D物体投影在2D平面内)
2. 模拟人类的视觉位置,可认为安排一只眼去看
3. 透视我门也称为视距,视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的在电脑平面成像越大,越远成像越小
5. 透视的单位是像素
透视写在被观察元素的父盒子上面的
1. 视距就是一个距离人的眼睛到屏幕的距离
2. 物体距离屏幕的距离,z轴越大我们看到的物体就越大
3D 旋转: 指可以让元素在三围平面内沿着x轴,y轴,z轴或者自定义轴进行旋转.
1. 语法:
  1. transform: rotateX(45deg): 沿着x轴正方向旋转45度
  2. transform: rotateY(45deg): 沿着y轴正方向旋转45度
  3. transform: rotateZ(45deg): 沿着z轴正方向旋转45度
  4. transform: rotate3d(x,y,z,deg): 沿着自定义轴旋转deg为度
  5. transform-style: preserve-3d: 保留3d效果