html面试题

html中常用标签

p 
h1-h6 
div
span
table
tr
td 
tbody
thread
strong 
b
ul
li
ol
li 
img
video
audio
i
hr
iframe
frame
frameset
a
body
header
dt
dl
form
input
selection
svg
lable
 

html 表单元素有哪些

form标签 可以设置请求类型get或post 可以设置请求体协议：文件上传或表单上传
input 标签中有type类型，可设置text,number,checkbox,radio,reset,submit，hidden，file，password，image，date，email，url
select标签,可设置单个选择或多个选择
button 按钮

a标签除了打开网页外，还能做哪些事情

1.锚定，使用#号定位到某个元素
2.打开email

在html使用哪些标签可实现树形效果,不适用css样式。

<ul>
 <li>
   <ul>
    <li></li>
   </ul>
 </li>
</ul>

<ol>
 <li>
   <ol>
    <li></li>
   </ol>
 </li>
</ol>

在html中div标签和span区别

div标签属于块标签，占据一行
span标签属于行内标签，内容占用多少就多宽

在html标签中使用哪些标签嵌入网页

iframe标签
frame frameset标签

html中使用什么标签播放音视频

video 标签
audio 标签

css面试题

什么是盒子模型

在浏览器开发中我们可以将所有元素当前一个盒子，盒子是具有高宽，内外间距，边框

css中常用属性

width
height
font-size
font-family
font-style
font-weight
color
backgroud-image
background
margin
padding
display:none,block,inline-block
list-style
border
text-align
text-decoration
text-index
text-transform
text-shadow
vertical-align
list-style-image
clear
float
position 定位
left
right
top
botton
flex
border-radius
box-shadow
box-sizing
content

css常用的伪类

link
visited
active
hover
focus
:first-child
before
after

css3 中如何实现响应式页面

@media  

css中如何设置盒子模型

box-sizing:content-box border-box inherit

鼠标悬停在到一张图片上让它旋转效果

使用:hover伪类，在伪类中加入
transform：rotate(360deg)

鼠标悬停在一张图片上让它向左移动效果

使用:hover伪类，在伪类中加入
transform：translateX(100px)

鼠标悬停在一张图片上让它放大效果

使用:hover伪类，在伪类中加入
transform：scale

鼠标悬停在一张图片上让它倾斜效果

使用:hover伪类，在伪类中加入
transform：skew

鼠标悬停在一张图片上让它显示透明效果

---

使用:hover伪类，在伪类中加入 opacity

在css3中如何让图片一张图片无限旋转

animation属性+@keyframe属性

使用css3属性如何让一个正方形元素，变成一个圆形

border-radius

css中绝对定位于相对定位区别

relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

在html5页面开发中，经常需要根据移动手机比例自动缩放布局，如果使用像素就会存在问题，请问如何解决

rem 根据html根元素的font-size自动算出字体比例
wv 宽度 hv 高度
百分比方式

css3 中选择器有哪些

id选择器 
类选择器
属性选择器
标签选择器
子类选择器
父类选择器
伪类选择器
通配符选择器

css3 隐藏元素几种方式

disploy:none
opacity:0
visibility:hidde

弹性布局有哪些属性

flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content

row（默认）：主轴水平方向，起点在左端；
row-reverse：主轴水平方向，起点在右端；
column：主轴垂直方向，起点在上边沿；
column-reserve：主轴垂直方向，起点在下边沿。

在div设置100px宽度，div中存放了一张图片，图片大于100px，请说出怎么解决

1、将图片宽度设置100%
2、在div上设置overflow:hidde

浏览器 javascript

BOM（浏览器对象模型）有哪些

window  顶级对象，可以alter
document 文档操作
location 网页调整，获取网站地址信息
navigator 该对象里面保存着浏览器的各种信息，判断浏览器的各种信息就是从该对象里的属性来读取
screen 获取屏幕信息
history 浏览器打开历史信息对象

JavaScript 使用窗口有哪些

window.open
window.alter
window.confirm

javascript获取元素方法

document.getElementById
document.getElementByclassName
document.getElementsByTagName
document.querySelector

null，undefined的区别？

null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表示声明的变量未初始化，转换为数值时为NAN。
typeof(null) -- object;
typeof(undefined) -- undefined

DOM操作

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一

数组对象有哪些原生方法，列举一下

pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some

javascript存储数据有几种方式,有什么区别

cookie  
localStore  
sessionStore

javascript常用的事件

onclick
ondblclick
onLoad
onMouse
onchange 
onerror
onsubmit
onkeyup
onkeypress
onkeydown

let和var区别

let 不允许重复变量名
var 可以重复变量名称

javascript如何文件上传

   var file = document.querySelector("#file").files[0];
   //创建formdata对象
   var formdata = new FormData();
   formdata.append("file",file);
   //创建xhr，使用ajax进行文件上传
   var xhr = new XMLHttpRequest();
   xhr.open("post","/");

es6有哪些特性

新增声明命令let和const
模板字符串（Template String）
函数的扩展，函数的默认参数，箭头函数 
对象的扩展 
var foo = 'bar';
var baz = {foo};
模块化 import和export
Promise对象
set/map数据结构
json.stringfy / json.parse
proxy / reflect
新增数组方法 filter / map / reducer / Array.isArray / flat（数组扁平化）
object.keys() 获取对象的key
数组解构，对象解构 [...arr] {...obj}

canvas是做什么

1、canvas是浏览器提供的一个画板，我们通过他做图形处理，比如：写字板、视频流数据绘制到画板、3D动画效果、游戏等

网络通讯

http的get和post区别

get 参数显示到url地址上
post 请求参数在请求头

http的响应状态有哪些

200
201
301
401
403
404
430
500

前端升级后出现缓存如何解决

在引用的资源地址后面加入版本号，通知浏览器自动刷新

前端如果控制权限相关功能

调用后端接口->返回权限编码->存储权限编码->通过权限编码控制按钮是否显示

在前后端分离项目，如果实现登录功能，请说下开发流程

调用登录接口->返回token->存储到sessionStore->封装统一请求体，并且将token存放在请求协议头->调用其它接口传递token。验证token是否过期，如果快要过期调用刷新token接口。

如何验证websocket安全，请说下开发流程

创建websocket对象->连接websocket服务器->发送token信息->后端认证token是否有效->有效后端发送消息->前端接收到信息。

webpack

前端为什么使用webpack，请说你的看法

单页面打包（webpack支持多页面打包），模块化开发，es6转es5，异步转同步，css和javascript代码压缩，解决缓存缓存问题。

webpack可以运行node api函数

可以，webpack本来就是node编写一个构建打包程序，如果说在webpack打包的配置文件中可以调用node提供的api函数。

代码版本管理

git常用命令

clone 
checkout
add
commit
branch
merge
push
pull

vue

vue生命周期

beforeCreate
created 
beforeMount
mounted
beforeUpdate
updated

vue 组件传值

props
vuex
sessionStore/localStroge/cookie/

Vue中的watch与computed区别

computed  当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

vue常用指令

v-if v-show v-else v-for v-bind v-on v-model

在项目经常经常使用Vuex作为（状态管理模式）全局数据存储，但是浏览器刷新后Vuex数据就自动丢失了，请问如何解开

React

react声明周期

1、挂载过程
constructor()
componentWillMount()
componentDidMount()

2、更新过程
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,nextState)
componentWillUpdate (nextProps,nextState)
render()
componentDidUpdate(prevProps,prevState)

3、卸载过程
componentWillUnmount()

react组件如何编写

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);