【H5C3总结】

01-h5c3

    1.什么是html5？

        HTML 标准的最新版本，是对 HTML 的第五次重大修改。HTML5的出现，对于WEB来说意义重大，其目的是想要把目前WEB中存在的各种问题一并解决掉。

    2.常用的新属性有哪些？

        placeholder  提示信息

        autofocus  自动获取焦点

        multiple  多文件上传

        autocomplete  提示以前保存内容

        required  必填项

        tabindex  指定获取焦点的顺序

        data-  自定义标签

    3.新增的input的type属性值有哪些？

        email  邮箱格式

        tel  手机号码格式

        url  路径格式

        number  数字格式

        search  搜索框

        range  自由拖动滑块

        time  日期

        date  时间

        month  月

        week  周

    4.什么是自定义标签属性?如何设置?如何取值?

        data： 能自定义属性和属性名

        使用attribute方法自定义属性的值

        使用dataset属性存取自定义属性的值

    5.多媒体标签是那三个？

        embed  标签定义嵌入内容

        audio  播放音频

        video  播放视频

    6.什么是字体图标?为什么使用字体图标?

        能对图标进行缩放，并且不会失真，内存占用少的图标

        优点：

        能做和图片一样的事

        本质是文字，可以随意改变颜色，阴影，透明等

        体积占用更小，信息不变

        几乎支持所有浏览器

        移动端设备必备良药

 

    02-h5c3

    1.CSS3有哪些私有属性和兼容情况？

        "-webkit-"私有属性为 Webkit内核浏览器使用 如Safari(苹果)和Chrome（谷歌）浏览器

        "-moz-"私有属性为  Gecko内核浏览器使用  如Firefox（火狐）浏览器

        "-o-"私有属性为  Presto  如Opera（欧朋）浏览器

        "-ms-"私有属性为  Trident内核浏览器使用  如IE浏览器

 

    2.CSS3新增哪些选择器？（元素选择器、属性选择器、结构性伪类选择器）

        选择相邻兄弟： ** + **{}

        匹配选择器：  ** ~ **{}

        属性选择器：

        [attribute]  选取指定属性的元素

        [attribute=value]  选取指定属性和值的元素

        [attribute^=value]  选取指定属性和值开头的元素

        [attribute$=value]  选取指定属性和值结尾的元素

        [attribute*=value]  选取属性包含指定值的元素

        [attribute~=value]  选取属性中（包含）指定词汇的元素

        [attribute|=value]  选取属性中（开头）指定词汇的元素

 

    3.CSS3内容追加伪元素选择器？

        整体结构类型：

        :first-child  匹配的是某父元素的第一个子元素

        last-child   匹配的是某父元素的最后一个子元素

        标签结构类型：

        :first-of-type   匹配的是某父元素下相同类型子元素中的第一个

        指定子元素的序号：

        :nth-child(n)  对指定序号的子元素设置样式（从前往后数）

        :nth-last-child(n)   对指定序号的子元素设置样式（从后往前数

        :nth-of-type(n)  匹配指定序号的同一种类型的子元素（从前往后数）

        :nth-last-of-type(n)  匹配 指定序号的同一种类型的子元素（从后往前数）

        其他伪类选择器：  

        :root   将样式应用到页面的根元素中

        :empty  指定当元素内容为空白时使用的样式

        :not(selector)  排除selector选择器选中的元素，不对它们应用样式解析  

        :target   对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效

        文本选择伪元素：  

        ::selection   指定当前元素处于选中状态部分的样式

        表单中使用的状态伪类选择器：

        :disabled   指定当前元素处于不可用状态时的样式

        :enabled    指定当前元素处于可用状态时的样式

        :checked    指定表单中单选框或复选框处于选中状态时的样式

        内容追加伪元素：

        ::before   向当前的元素前面追加内容

        ::after    向当前的元素内容后面追加内容

 

    4.CSS3新增哪些js选择器？

        querySelector();  获取元素

        querySelectorAll();   获取全部元素

    5.:before和::before写法的区别?

        相同点：

        1.都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的

        2.伪类对象要配合content属性一起使用

        3.伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

        4.不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

        不同点：

        :before是css2的写法，::before是css3的写法，在H5开发中建议使用::before比较好。

 

    6.所有选择器的权重关系（包括css）？

        !important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性

        css的权重:行内样式,ID选择器,类选择器,标签

    7.如何设置多重背景?

        background-image

        再使用背景定位position定位背景

    8.两种类型的渐变（background-image）分别是什么？

        线性渐变 Linear Gradients   向下/向上/向左/向右/对角方向**

        径向渐变 Radial Gradients   由它们的中心定义

 

    9.如何给背景定位原点？

        background-origin

        padding-box   从padding的外边缘(border的内边缘)开始显示背景图片

        border-box    从border的外边缘开始显示背景图片

        content-box   从content的外边缘(padding的内边缘)开始显示背景图片

 

    10.CSS3的opacity属性有什么作用？

        opacity  设置元素的不透明级别  0-1  透明-不透明

 

    03-h5c3

    1.transition是什么?是哪几个属性的简写?

        transition  过渡

        transition: transition-property(要过渡的属性)  transition-duration(花费时间)  transition-timing-function(运动曲线)  transition-delay(何时开始);

 

    2.transform是什么?移动,旋转,伸缩,倾斜扭曲分别是什么？

        transform  2d变形/3d变形

        translate(x, y)   移动

        scale(x, y)（0~1）缩放

        rotate(deg) 旋转

        transform-origin  调整元素的原点

        skew(deg, deg)  倾斜

    3.transform2D和transform3D有哪些属性?区别是什么?

        transform  2d变形

        translate(x, y)   移动

        scale(x, y)（0~1）缩放

        rotate(deg) 旋转

        transform-origin  调整元素的原点

        skew(deg, deg)  倾斜

        transform  3d变形

        rotateX()   沿着 x 立体旋转

        rotateY()   沿着y轴进行旋转

        rotateZ()   沿着z轴进行旋转

        perspective  透视

        backface-visibility   属性定义当元素不面向屏幕时是否可见

        transform-style  flat(子元素将不保留其 3D 位置)  preserve-3d  (子元素将保留其 3D 位置)

        translateX()  水平方向移动

        translateY()  垂直方向移动

        translateZ()  前后方向移动

        translate3d(x,y,z)   总写

    4.animation是哪几个属性的简写?

        animation:animation-name(动画名称)  animation-duration(动画时间)  animation-timing-function(运动曲线)   animation-delay(何时开始)   animation-iteration-count(播放次数)   animation-direction(是否反方向)  animation-play-state(是否运行或暂停)  animation-fill-mode (动画结束后状态);

 

    5.perspective属性指的是什么？

        perspective  透视  视距，表示视点距离屏幕的长短

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

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

    6.transform-style属性指的是什么？

        transform-style   保留其 3D 位置

        flat(子元素将不保留其 3D 位置)  preserve-3d  (子元素将保留其 3D 位置)

 

    04-h5c3

    1.flex布局是什么，基本概念

        Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

        flex container  父盒子是

        flex item  子元素

        给父盒子添加flex属性，来控制子盒子的位置和排列方式

        容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

        项目默认沿主轴排列

    2.作用在父盒子容器的属性

        flex-flow   flex-direction属性和flex-wrap属性的简写

        flex-direction  主轴排列方式

        row（默认值）：主轴为水平方向，起点在左端。

        row-reverse：主轴为水平方向，起点在右端。

        column：主轴为垂直方向，起点在上沿。

        column-reverse：主轴为垂直方向，起点在下沿。

        flex-wrap   主轴换行

        nowrap（默认）：不换行

        wrap：换行

        wrap-reverse：换行 从底部开始

        justify-content  主轴对齐方式

        flex-start（默认值）：左对齐

        flex-end：右对齐

        center： 居中

        space-between：两端对齐，项目之间的间隔都相等。

        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

        align-items 副轴对齐方式

        flex-start：交叉轴的起点对齐。

        flex-end：交叉轴的终点对齐。

        center：交叉轴的中点对齐。

        baseline: 项目的第一行文字的基线对齐。

        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器

        align-content  多跟轴线对齐方式

        flex-start：与交叉轴的起点对齐。

        flex-end：与交叉轴的终点对齐。

        center：与交叉轴的中点对齐。

        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

        stretch（默认值）：轴线占满整个交叉轴

 

    3.作用在子元素上的属性

        flex（flex-grow, flex-shrink ，flex-basis）

        order 项目的排列顺序

        flex-grow  放大比例

        flex-shrink  缩小比例

        flex-basis  项目占据的主轴空间

        align-self  上中下特别对齐方式

 

    4.主轴对齐方式有哪些

        flex-start（默认值）：左对齐

        flex-end：右对齐

        center： 居中

        space-between：两端对齐，项目之间的间隔都相等。

        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

 

    5.副轴对齐方式有哪些

        flex-start：交叉轴的起点对齐。

        flex-end：交叉轴的终点对齐。

        center：交叉轴的中点对齐。

        baseline: 项目的第一行文字的基线对齐。

        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器

 

    6.媒体查询的语法那些

        @media not|only 设备类型 and (设备特性) and（设备特性）...{

            CSS-Code;

        }

    7.响应式开发原理

        使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

    8.二倍图的理解

        可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

        使用倍图来提高图片质量，解决在高清设备中的模糊问题

    9.说一说你对视口的理解

        layout viewport  布局视口  布局视口等于浏览器窗口的宽度

        visual viewport  视觉视口  用户正在看到的网页的区域

        ideal viewport  理想视口  当布局视口的尺寸等于设备屏幕的尺寸时

 

    05-h5c3

    1.简单说明canvas的作用

        canvas 通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果

    2.canvas浏览器不兼容问题

        ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持

        只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)

        移动端的兼容情况非常理想，基本上随便使用

    3.使用canvas创建画布需要注意哪些？

        不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。

        重新设置canvas标签的宽高属性会导致画布擦除所有的内容。

        可以给canvas画布设置背景色

    4.简单说一下canvas绘制的基本步骤?

        1.获取上下文对象(CanvasRenderingContext2D)  

        var cxt = mcanvas.getContext("2d");

        2.设置绘制起点(moveTo)  

        cxt.moveTo(x, y);

        3.绘制直线(lineTo)

        cxt.lineTo(x, y);

        4.路径的开始和闭合

        开始路径

        cxt.beginPath();

        闭合路径

        cxt.closePath();

        5.绘制图形(stroke)

        cxt.stroke();

        6.画笔的颜色和粗细  

        cxt.strokeStyle   cxt.lineWidth

        7.填充图形(fill)

        cxt.fill();

 

        第一步：获得上下文（笔） =>canvasElem.getContext('2d');

        第二步：开始路径规划 =>cxt.beginPath();

        第三步：移动起始点 =>cxt.moveTo(x, y);

        第四步：绘制线(线条、矩形、圆形、图片...) =>cxt.lineTo(x, y);

        第五步：闭合路径 =>cxt.closePath();

        第六步：绘制描边 =>cxt.stroke();

 

    5.可以利用canvas做什么功能操作?

        绘制矩形（rectangle）

        cxt.rect(x, y, width, height);

        绘制圆弧

        语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);

        绘制圆形和饼图

        绘制文字

        绘制图像

 

    6.svg的使用方式?svg的属性都有哪些？

        1.svg代码直接插入网页中

        2. 使用标签引入svg

        3. CSS中引入svg文件

        <svg width height>

    <circle cx cy r stroke stroke-width fill/>

        </svg>

        width  height

        -x 属性定义圆点的 x 坐标

        cy 属性定义圆点的 y 坐标

        r 属性定义半径

        fill：填充色

        stroke：描边色

        stroke-width：边框宽度

    7.canvas和svg的区别?

        canvas 输出的是⼀整幅画布,就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。

        svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修饰

        8.为什么使用svg?

        SVG是用来描述XML中2D图形的语言，Canvas借助JavaScript动态描绘2D图形

        SVG可支持事件处理程序而Canvas不支持

        SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图，而Canvas不可以，更适合视频游戏等

        Canvas可以很好的绘制像素，用于保存结果为png或者gif,可做为API容器

        Canvas取决于分辨率。SVG与分辨率无关

        SVG具有更好的文本渲染，而Canvas不能很好的渲染，渲染中的SVG可能比Canvas慢，特别是应用了大量的DOM

        画布更适合渲染较小的区域。SVG渲染更好的更大区域。

 

    06-h5c3

    1.介绍一下Location对象以及Location的属性和方法？

        Location 包含有关当前 URL 的信息

        是 window 对象的一部分，可通过window.location属性对其进行访问

        属性

        origin  返回页面来源的域(当前协议 + 主机名+端口号)

        host  返回一个URL的主机名和端口

        hostname  返回URL的主机名

        port  返回一个URL服务器使用的端口号

        pathname  返回的URL路径名。

        protocol  返回一个URL协议

        href  返回完整的URL

        hash  返回从井号 (#) 开始的 URL（锚）

        search  返回从问号 (?) 开始的 URL（查询部分）

        方法

        assign()  加载新的文档。跟href一样，可以跳转页面

        replace()  用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退

        reload()  重新加载当前文档。

 

    2.介绍一下Navigator对象？

        Navigator  包含有关浏览器的信息

        window.navigator 接口表示用户代理的状态和标识

    3.简单描述Navigator.onLine网络状态是什么？

        onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true

    4.讲一下History对象及History的属性和方法？

        History 对象包含用户（在浏览器窗口中）访问过的 URL

        History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问

        属性

        length  返回浏览器历史列表中的 URL 数量。

        state   返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。

        方法

        back()  加载 history 列表中的上一个 URL。

        forward()  加载 history 列表中的下一个 URL。

        go()  加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面

        pushState()  用于在历史中添加一条记录。

        replaceState()  用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。

    5.FileReader对象与Files对象的区别和作用？

        FileReader对象

        通过FileReader对象我们可以读取本地存储的文件，使用 [File ](https://developer.mozilla.org/zh-CN/docs/DOM/File)对象来指定所要读取的文件或数据

        Files对象

        由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个Files对象（伪数组形式）。

 

        HTML5新增内建对象，可以读取本地文件内容。

        可以实例化一个对象

    6.拖拽Api的事件有哪些？

        拖拽：Drag

        释放：Drop

        ondragstart：源对象开始被

        ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

        ondragend：源对象被拖动

        ondragenter：目标对象被源对象拖动着进入

        ondragover：目标对象被源对象拖动着悬停在        

        ondragleave：源对象拖动着离开了目标    

        ondrop：源对象拖动着在目标对象上方释放/    

 

    07-h5c3

    1.localStorage和sessionStorage的区别?

        通过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，数据将一直保留在用户的电脑上，永不过期

        通过sessionStorage存储的数据有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了

 

    2.什么是同源策略?

        同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收

    3.本地存储的有哪几个方法可以实现增删改?如何使用?

        调用setItem(key, value)方法将对应的名字和值传递进去，可以实现数据存储

        调用getItem(key)方法，将名字传递进去，可以获得对应的值

        使用length属性和key(index)方法，传入0至length-1之间的数字，可以遍历所有存储数据的名字

        调用clear()方法（不需要参数），可以删除所有存储的数据

    4.如何监听存储事件?

        为存储事件注册处理程序可以使用addEventListener()方法。在绝大多数浏览器中，还可以使用给window对象设置storage属性的方式

 

    5.与存储事件相关的5个属性都是什么?

        key : 修改或删除的key值，如果调用clear()时，该属性值为null

        newValue: 新设置的值，如果调用removeItem()时，该属性值为nul    

        oldValue : 调用改变前的value值；添加新项时，该属性值为nul      

        storageArea : 当前的storage对      

        url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）

 

    6.如何利用本地存储记录用户相关信息?

        1.用sharepreference来记录临时的数据

        2.文件本地保存