前端面试-知识点

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

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）；//旋转，缩放，定位，倾斜
• 多背景 rgba
• html 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;
}

注：收集于知乎 不全！！