h5、c3基础知识整理

蔚落 2022-06-09 13:38 268阅读 0赞

# 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/][http_caniuse.com] 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

[http_caniuse.com]: http://caniuse.com/