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 用于在页面输出一段信息

多媒体:

视频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的兼容性问题。

你可能感兴趣的:(我的博客,html,css3,api,c语言,html5)