前端面试-知识点

过几天要前端面试啦 找了些面试技巧

htnl

1.HTML 、XML、XHTML的区别

html ：超文本标记语言，是语法较为松散的，不严格的web语言XML：可扩展的标记语言，主要用于存储数据和结构，可扩展XHTML：可扩展的超文本标记语言，基语xml，作用与html类似，但语法更严格 2.什么是html5以及html的区别是什么 概念： html5是html的新标准，其主要目标是无需任何额外的插件如flash，silverlight等，就可以传输所有内容。它囊括了动画，视频，丰富的图形用户界面等。

html 只有简单的声明 < !DOCTYPE html>

从语法结构中来看： HTML4.0:没有体现结构与异化的标签，通常都是这样来命名

来表示网页头部 html5：在语义上却有很大的优势。提供了一些新的标签， **扩展**：不输入< !DOCTYPE html> ,浏览器将无法识别html文件，因此html无法工作

3.html 、xhtml 、html5区别以及有什么联系 xhtml与html区别

xhtml：标签必须小写xhtml：元素必须被关闭xhtml：元素必须被正确嵌套xhtml：优速必须有根元素 xhtml 与 xhtml5的区别html5新增了canvas绘画元素html5新增用于绘媒介回访的video和audio元素更具语义化的标签，便与浏览器识别对本地离线存储有更好的支持；MATHML，SVG等，可以更好地render；添加新的表单控件：calendar，data、time、email等 4、行内元素 ：a,b,span,img,input,select,strong 块级元素： div，ul,li,dl,dt,dd,h1-5,p，等 空元素： <br>,<img>,<link>,<meta><hr>

5,标签上title属性与alt属性的区别是

alt 是为了在属性图片未能正常先显示是给予文字说明 长度少于100个英文字符或则用户必须保证替换文字尽可能的短

title 属性未设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

优点

iframe可以实现无刷新文件上传

iframe可以跨域通信

解决了加载缓慢的第三方内容 如图标和广告等的加载问题 缺点

iframe会阻塞主页面的onload事件

无法被一些搜索引擎引到

页面会增加服务器的http请求

会产生很多页面，不容易管理 6，src 与 href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系 7.table的作用

可用于布局

用于显示批量数据 8，浏览器乱码的原因是什么？如何解决 产生乱码的原因

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器会出出现乱码

网页源代码是gbk的编码，而程序从数据库中调出呈现是utf-8编码的，这样浏览器会出出现乱码 解决方法

使用软件编辑html网页内容

如果网页设置编码是gbk，而数据库存储数据编码格式是utf-8，此时需要程序查询数据库数据显示数据库前进程序转码

如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换 9，html元素如何体现嵌套元素

块级元素可以包含行内元素

块级元素不一定能包含块级元素

行级元素一般不能包含块级元素（a元素除外）

css

1.前端页面有哪三层构成，分别是什么，作用是什么

结构层由html负责，负责搭建页面的结构表示层由css负责，负责页面的样式行为层由JavaScript负责，负责页面的交互 2.css选择符 标签选择符，类选择符，ID选择符，伪类选择符，子代选择符，后代选择符，通配选择符，属性选择符 优先级：就近原则 3.html中div和span区别div 块级元素，独自占一行，宽度默认是占满父级的宽度，可以设置宽高span 是行内元素，排列在一行内，宽度是内容的宽度，不能设置宽高 4.css实现垂直水平居中 定位，top和left设置50%，再通过transform的translate（-50%，-50%）设置实现垂直水平居中 定位，top和left设置50%，再通过margin-top和margin-left自己宽高的一般设置实现垂直水平居中 定位，top，bottom，left，right都设置为0，再通过margin设值为auto实现垂直水平居中 flex布局，先设置justify-content为center实现水平居中，在设置align-items为center实现垂直居中 table布局，设置父元素display为table-cell，在设置vertical-align为middle实现垂直居中，把自己display设置为inline-block，父级设置text-align为center实现水平居中

html5 css3

1.css有哪些新特性

css3实现圆角（border-radius），阴影（box-shadow）对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）transform：ratate（9deg）scale（0.85，0.90）translare（0px，-30px）skew（-9deg，odeg）；//旋转，缩放，定位，倾斜多背景 rgbahtml canvas元素有什么作用 canvas 元素用于在网页绘制图形，该元素标签可以直接在html上进行图形操作 2.消除浮动，什么时候需要消除浮动，消除浮动都有哪些方法

方法

为父元素设置高度为父元素添加 overflow：hidden伪元素 .fix::after{ content:""; display:block; clear:both; }

3.让一个不定宽高的盒子水平垂直居中

定位方式：

.father { position:relative; } .son{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }

css3属性

.father { position:relative; } .son{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

flex布局

.father{ display:flex; justify-content:center; align-item:center; }

注：收集于知乎 不全！！