H5个C3的新特性

最新推荐文章于 2023-07-20 16:04:29 发布

未谢顶的程序猿

最新推荐文章于 2023-07-20 16:04:29 发布

阅读量331

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_49333876/article/details/115598164

H5的新增

首先我们来看一下在h5中都有哪些新增
1.语义化标签：header、footer、section、nav、aside、article

语义化标签主要就是方便了后期项目的管理，别人看见这个标签了解他的意义是哪个方面的内容，更方便他人介入管理

2.增强型表单：input 的多个 type

比如input可以通过type类型转换为button ，单选框（checkbox）

3.表单控件，calendar、date、time、email、url、search。
表单控件也可以理解为input的多个type，使用就是吧input改成需要是控件，例：

<form action="">
        <input type="time">
</form>

4.新增表单属性：placehoder、required、min 和 max
placehoder：可以看作是占位符，或提示符，默认成灰色在input框中显示，输入时就会消失。例：

<input type="text" placeholder="我是占位符">

required ：属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。语法：

<input required="required">

min和max是输入的最小和最大的长度

<input type="text" maxlength="10" minlength="5">

5.音频视频：audio、video
音频标签audio
浏览器支持

浏览器、版本	支持格式
Internet Explorer ——9.0+	MP3, AAC
Chrome ——6.0+	Ogg Vorbis, MP3, WAV（9.0+）
Firefox ——3.6+	Ogg Vorbis, WAV
Safari ——5.0+	MP3, AAC, WAV
Opera ——10.0+	Ogg Vorbis, WAV

属性：

src路径
controls="controls"播放控件
autoplay="autoplay"自动播放，只有IE支持自动播放，其他都禁用这个功能
loop="loop"循环播放

视频标签video
浏览器支持

浏览器、版本	支持格式
Internet Explorer—— 9.0+	MP4
Chrome—— 6.0+	MP4,WebM,Ogg
Firefox——3.6+	WebM,Ogg
Safari—— 5.0+	MP4
Opera——10.0+	WebM,Ogg

属性：

src路径
controls="controls"播放控件
autoplay="autoplay"自动播放，只有IE支持自动播放，其他都禁用这个功能（只有在静音的情况下才可以自动播放 muted(静音)）
loop="loop"循环播放
poster="图片路径"记载等待的画面
perload 预加载他对应的有auto(自动加载) none(不加载)

6.canvas绘画
首先，找到元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
Canvas 坐标
canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke().

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

</body>
</html>
<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(0,0);//起始位置
	ctx.lineTo(100,50);//终点位置
	ctx.stroke();
</script>

7.地理定位 getCurrentPosition() ——Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

我也没有办法解释毕竟我是一只小白兔，上代码

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度

8.拖拽
9.本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
localStorage
支持长期储存数据，那么在储存时可以通过setItem（‘名称’，储存内容）取出时可以用getItem(名称)取出（sessionStorage 同样但在游览器关闭时就会清空）

10.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、 onplay、onpause

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

11.WebSocket：单个 TCP 连接上进行全双工通讯的协议

C3新增

1.选择器

:last-child /* 选择元素最后一个子元素 */
:first-child /* 选择元素第一个子元素 */
:nth-child(1) /* 按照第几个子元素给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

伪类和伪元素：
根本区别在于它们是否创造了新的元素（抽象）
伪类:用于向某些选择器添加特殊的效果（没有创建新元素）

:last-child /* 选择元素最后一个子元素*/
:first-child /* 选择元素第一个子元素*/
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

伪元素:创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

2.背景和边框
背景
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
边框
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片
3.文本效果

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

4.2D/3D 转换
2D 转换（transform）
1.translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。 transform: translate(50px, 100px);
2.rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
3.scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
4.skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
5.matrix()：把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换
1.rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
2.rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
3.perspective：规定 3D 元素的透视效果

5.动画、过渡
过渡效果（transition）：使页面变化更平滑，以下参数可直接写在 transition 后面
1.transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
2.transition-duration：过渡动画的一个持续时间。
3.transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4.transition-delay：延迟多久后开始动画

动画（animation）
先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面

1.animation-name: 定义动画名称
2.animation-duration: 指定元素播放动画所持续的时间长
3.animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )：指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
4.animation-delay: 指定元素动画开始时间
5.animation-iteration-count: infinite | number：指定元素播放动画的循环次数
6.animation-direction: normal | alternate：指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
7.animation-play-state: running | paused ：控制元素动画的播放状态
6.媒体查询
原理就是监测用户的屏幕尺寸，通过检测到的尺寸来改变样式

/* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}
/* 2. 小屏幕下  大于等于768  布局容器改为 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}
/* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */     
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

7.用户界面
CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
1.resize
2.box-sizing
3.outline-offset
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

div {
  resize: both; /* none|both|horizontal|vertical; */
  overflow: auto;
  }

box-sizing 属性可设置的值有 content-box、border-box 和 inherit
content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width
border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成
inherit：规定应从父元素继承 box-sizing 属性的值
8、弹性盒
弹性盒主用于移动端，能够更快捷的布局，他又叫伸缩布局，弹性布局，伸缩盒布局。是通过给父盒子添加flex属性，来控制子盒子的位置和排序
那么再使用时就要给其父级添加display:flex;
.app{ display: flex; }
设置完弹性盒后其子元素就相当于都添加了浮动效果，行内也可以添加宽高
那么咱们来看一下弹性盒的其他方法，上代码

.app {
            display: flex;
            flex-direction: row;
            /*弹性盒方向：主轴方向X轴  */
            flex-direction: column;
            /* 弹性盒方向：主轴Y轴方向 */
            flex-direction: row-reverse;
            /* 弹性盒方向：主轴方向X轴 倒叙 */
            flex-direction: column-reverse;
            /* 弹性盒方向：主轴Y轴方向 倒叙*/
            flex-wrap: nowrap;
            /* 弹性盒换行：不换行 默认的 */
            flex-wrap: wrap;
            /* 弹性盒换行：换行 */
            /*设置主轴方向子元素排列顺序*/
            justify-content: flex-start;
            /* 从左到右排列 默认的 */
            justify-content: flex-end;
            /* 从尾部开始排列 不影响子元素排列顺序 */
            justify-content: center;
            /* 从主轴居中对齐 */
            justify-content: space-around;
            /* 平分主轴剩余空间 */
            justify-content: space-between;
            /* 两边对齐，中间评分剩余空间 */
            justify-content: space-evenly;
            /* 间距相同 */
            align-items: center;
            /* 侧轴单行居中 */
            align-items: flex-end;
            /* 侧轴单行倒序 */
            align-items: flex-start;
            /* 单行默认排序方式 */
            align-content: center;
            /* 侧轴多行居中 */
            align-content: flex-end;
            /* 侧轴多行倒序 */
            align-content: flex-start;
            /* 侧轴多行默认排序 */
            align-content: space-around;
            /* 侧轴多行平分侧轴剩余空间 */
            align-content: space-between;
            /* 侧轴多行两边对齐中间自适应 */
        }

以上属性都是添加与父级，也有部分添加在子级的属性

.sublevel{
            align-self: flex-end;
            /* 子级在侧轴倒序 */
            align-self: flex-start;
            /* 子级在侧轴正常排序 */
            align-self: center;
            /* 子级在侧轴居中 */
        }