h5、c3基础知识整理

HTML5

HTML5广义的概念: 代表着浏览器技术发展的阶段，是html5 css3和js（API）一套前端技术的组合。

HTML5新定义了一堆语义化标签，更有利于搜索引擎或辅助设备理解HTML页面内容。在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。低版本采用条件注释：

 

表单：

表单元素（标签）

 <datalist> 数据列表（input下的下拉菜单）

 与input 配合使用

 <input type=”text” list=”data”>

 <datalist id=”data”>

 <option>男</option>

 <option>女</option>

 <option>不详</option>

</datalist>

<meter>   表示度量器，不建议用作进度条

<progress></progress> 进度条

表单属性：

placeholder 占位符，autofocus 获取焦点，autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)，required 必填项

pattern 正则表达式 验证表单

表单事件：

oninput 用户输入内容时触发，用于移动端输入字数统计

oninvalid 验证不通过时触发

setCustomValidity 用于在页面输出一段信息

多媒体：

<audio>音频标签 用于输出音频文件

<video>视频标签 用于输出视频文件

视频DOM:(重点)

属性：currentTime 视频播放的当前进度、duration:视频的总时间、

      paused:视频播放的状态

方法：load() 加载、play() 播放、pause() 暂停

事件：oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

ontimeupdate:通过该事件来报告当前的播放进度。

onended:播放完时触发。

全屏：video.webkitRequestFullScreen();

自定义属性：

在H5中，可自定义属性，使用data-*=””，可以通过node.dataset[‘’]，使用驼峰命名法。Node.dataset是以类对象形式存在的。

拖拽：在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素：页面中设置了draggable="true"属性的元素

目标元素：页面中任何一个元素都可以成为目标元素

事件监听

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend    应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop    应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

Web存储：

传统方式document.cookie来进行存储的。

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效，除非手动删除

2、可以多窗口共享

全屏：

 HTML5规范允许用户自定义网页上任一元素全屏显示。

 requestFullscreen() 开启全屏显示

 cancleFullscreen() 关闭全屏显示

但是需要加入私有化前缀，不同浏览器兼容性不同。

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

window.online用户网络连接时被调用

window.offline用户网络断开时被调用

应用缓存：

Font Awesome 字体框架：

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

坚持渐进增强原则：

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

属性选择器：通过属性来选择元素。

伪类选择器：

1.以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类，是通过该元素的父元素来选择选择器

2.目标伪类：E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

3.伪元素选择器 ：：before/after

颜色设置问题：

单纯用opacity设置透明度时，子盒子会继承父盒子，用transparent设置透明度时，不能调节透明度，始终为0.

新出2个设置颜色方法：(均不会出现继承问题）

rgba(red,green,blue,opacity)；

HSLA(Hue,Saturation,Lightness,opacity);

文本阴影:text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）:（可连续设置多个阴影，用逗号隔开）

（1）、水平偏移量 正值向右 负值向左；

（2）、垂直偏移量 正值向下 负值向上；

（3）、模糊度是不能为负值；

盒子模型：（兼容性较好，可以使用）

可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

box-sizing 有两个值:content-box  border-box

可以分成两种情况：

content-box:对象的实际宽度等于设置的width值和border、padding之和。

border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。

私有化前缀（hack)：

边框:

1.边框圆角（bordre-radius)

每个角可以设置两个值 ，x 值，y值，可分别设置，用/分开。

2.边框阴影(border-shadow)

共有5个值：偏移量、阴影大小、模糊度、颜色，inset还可以设置内阴影。注意：模糊度不能为负值，外阴影不用设置。

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

可以设置多重边框阴影，实现更好的效果，增强立体感。

3.边框图片(border-image):其中设置图片平铺的时候，可选参数stretch 为拉升，round 会自动调整缩放比例。

背景属性：

最重要的是图片尺寸，

参数cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。整个背景图片可能不完整显示在背景区域.

参数contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

也可以使用长度单位或百分比设置大小。

background-origin(原点，起点)设置背景定位的原点。

background-clip设置背景区域clip(裁切)。

以逗号分隔可以设置多背景，可用于自适应局，设置多属性的时候，最后的大小用/隔开。

渐变：

1.线性渐变（line-gradient）：

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

Background:linear-gradient(

To right  表示方向 (left,top,right,left ,也可以使用度数)

      Yellow   渐变起始颜色

Green   渐变终止颜色)

2.径向渐变（radial-gradient）：

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。

 background: radial-gradient(
           150px  at  center,
           yellow,
           green);

过渡：

Transition:param1  param2

param1    要过渡的属性

param2    过渡的时间.

transition-property设置过渡属性

transition-duration设置过渡时间 用来控制速度

transition-timing-function设置过渡速度  

transition-delay设置过渡延时  超过时间后执行动画

2D转换：位移、旋转、变形

缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；

移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

旋转 rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；

倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

transform-origin可以调整元素转换的原点

3D转换：

透视：（perspective）透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

perspective有两种写法：

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素。

b) 作为transform属性的一个值，做用于元素自身。

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换元素。

flat：所有子元素在 2D 平面呈现。preserve-3d：保留3D空间。

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

backface-visibility : 设置元素背面是否可见。

动画-必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性；

d、通过animation将动画应用于相应元素。

关键属性

a、animation-name设置动画序列名称；

b、animation-duration动画持续时间；

c、animation-delay动画延时时间；

d、animation-timing-function动画执行速度，linear、ease等；

e、animation-play-state动画播放状态，running、paused等；

f、animation-direction动画逆播，alternate等；

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等；

h、animation-iteration-count动画执行次数，inifinate等；

i、steps(60) 表示动画分成60步完成。

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

伸缩布局：CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。(ui不支持伸缩布局)。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

必要元素：

a、指定一个盒子为伸缩盒子 display: flex；

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction；

c、明确主侧轴及方向；

d、可互换主侧轴，也可改变方向；

各属性详解

a、flex-direction调整主轴方向（默认为水平方向）；

b、justify-content调整主轴对齐；

c、align-items调整侧轴对齐。

字体图标-优点：

1、将所有图标打包成字体库，减少请求；

2、具有矢量性，可保证清晰度；

3、使用灵活，便于维护；

H5的兼容性问题：通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。