07（补）js面试题-2

1.请写出5个hTml5新增的标签中文和英文

                  -header   ---  头部标签

                  - nav        ---  导航标签

                  - article ---   内容标签

                  - section ---   块级标签

                  - aside     ---   侧边栏标签

                  - footer   ---   尾部标签

                   Video     视频

                   Audio     音频

2.请写出视频属性中6个属性

                    autoplay视频就绪后立马播放

                   controls视频的播放控件

                   loop循环播放

                  muted视频静音

                  poster下载时显示的图像,值为url

                  Src 路径

                 Width 宽度

                 Height高度

3.请写出input中10种type类型

button  按钮 text 默认文本 radio 单选 checkbox 复选框 submit  提交

password  密码 reset 重置 color  颜色 number  数字 file   上传文件

url  网址 email 邮箱 tel手机号 search 搜索框 date  日期 range  滑块

time 时间 month  月 week 周

4.请写出表单中8种属性

multiple 可以上传多个文件，通常与file搭配使用 -->

                   <!-- placeholder  表单的请示文字 -->

                   <!-- required 表单输入不能为空 -->

                   <!-- autofocus设置默认焦点 -->

                   <!-- autocomplete记录历史输入  on打开  off关闭 -->

                   <!-- pattern 正则验证 -->

                   <!-- min  max  数字的值   通常与number和range -->

                   <!-- step 数字的跳跃间隔 -->

                   <!-- readonly只读模式 -->

                   <!-- disabled禁用模式-->

5.请写出web存储中3大存储的区别

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

                  sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage和sessionStorage  存储大小为5MB

Cookie可设置过期时间，存储大小为4kb，请求时呆在http请求头中

6.Css3中有几种盒模型，分别是哪几种，有什么区别？

2种，

1.标准盒子模型

 box-sizing:content-box;

 2.IE盒子模型||怪异盒子模型

  box-sizing: border-box;

标准盒子模型：当盒子设置内边距时，会把原本的盒子大小撑大说明是标准盒子，

IE盒子模型：当盒子设置内边距时，不把原本的盒子大小撑大说明是IE盒子，且内边距大小没有超过自身宽度高度，超过自身宽度高度也会撑大

7.弹性盒子对齐方式有哪几种？分别是哪几种？有什么区别？

   3种

justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

8.文字单行省略和多行省略如何实现

单行省略

overflow: hidden;

/* 强制在一行显示 */

white-space: nowrap;

/* 显示省略号 */

text-overflow: ellipsis;

多行省略

display: -webkit-box;/* //对象作为弹性伸缩盒子模型显示 */

overflow: hidden;/* //溢出隐藏 */

-webkit-box-orient: vertical;/* //设置伸缩盒子对象的子元素的排列方式 */

-webkit-line-clamp: 3;/* //设置 块元素包含的文本行数 */

9.请写出清除浮动的5种方式

1.给父级div定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";overflow:hidden;height:0;}

.clearfloat{zoom:1;}

2.在浮动尾部添加空div标签clear:both;

3.父级div定义overflow:hidden

4.父级给高度height

5.父级随子级一起浮动

6.父级div定义overflow:auto

7.父级div定义为表格display:table

8.加br标签

10.请写出浏览器5大兼容性

-o-            欧朋浏览器

-moz-      火狐浏览器

-ms-          IE浏览器

-webkit-  谷歌和Safari 浏览器