关于前端:前端题库总结一

前端题库总结一

HTML

1.HTML5为何只有写<!doctype html>

· HTML5不基于SGML（规范通用标记语言），所以不须要援用DTD，但须要doctype来标准浏览器的行为（使得浏览器晓得应该以何种解析形式对文档进行解析）

· HTML4.0基于SGML，所以要援用DTD能力告知浏览器文档所应用的文档类型

2.讲讲行内元素、块元素、空元素有哪些

· 行内元素：a，span，img，input，select，strong，em，b（标记性元素）

· 块元素：div，p，ul，li，ol，dd，dt，dl，h1-h6

· 空元素：hr，br，input，img，link，meta

3.导入款式时，应用link与@import的区别

· link属于XHTML标签，除了能够加载css外，还能定义SSR，定义rel连贯属性等作用，@import是css提供的，只能加载css款式

· 页面加载时，link引入的资源可能同时被加载，而@import引入的css必须等页面加载实现后能力进行加载

· link是XHTML标签，无兼容问题，而@import是css2.1提出的，IE5以下的低版本浏览器不反对

4.简述对HTML5语义化的了解

· 在没有css款式时，以一种文档的模式显示，并且是容易浏览的

· HTML5语义化使页面的内容结构化，构造更清晰，便于浏览器、搜索引擎解析

· 有利于哪些有视障的人应用屏幕阅读器依据标记来拜访网站

· 有利于团队的开发和保护

· 有利于SEO：便于爬虫抓取更多无效的信息

5.形容下cookie、localStorage和sessionStorage的区别

· cookie本是用来客户端与服务端进行通信的，因为其有存储性能，而被借用来存储信息，cookie数据会始终在同源http申请中携带

· localStorage和sessionStorage不会主动把数据发送到服务器上，仅在本地存储

存储大小

o cookie只有4k；而localStorage和sessionStorage能够达到5M或者更大

过期工夫

o cookie在设置的过期工夫前始终无效，

o localStorage长期有效，敞开浏览器数据不会失落，除非用户被动删除数据

o sessionStorage数据在以后浏览器窗口敞开后主动删除

6.实现不必border画出1px高的线，在不同浏览器里，规范模式与怪异模式下都能保持一致的成果

7.网页验证码的作用及解决的平安问题

辨别用户是人还是机器，能够避免歹意破解明码、刷票等；能够避免黑客对某一特定注册用户以暴力破解的形式一直的尝试登录

8.data-属性的作用

data-*用于存储页面或者应用程序的公有自定义的数据，能够在所有的html元素中嵌入data-自定义属性，能够被js利用来操作数据

留神：data属性应该为小写，且data-后至多要有一个字符，不能单单应用data，data属性值能够是任意字符串

9.说说HTML5新个性，移除的元素（说说HTML5）

新个性：

· 绘画canvas

· 用于媒介回放的video、audio元素

· 本地离线locaStorage长期存储数据，浏览器敞开后数据不失落

· sessionStorage在浏览器敞开后数据主动删除

· 表单控件：data、email、search、url、calendar、time

· 语义化标签：header、footer、nav、section、article

· 新的技术：webworker、websocket、Geolocation

移除的元素

· 纯体现元素：basefont、center、font、big、u、tt、strike、s

· 对可用性产生负面影响的元素：frame、frameset、noframes

CSS

1.介绍下规范的盒子模型和IE的怪异盒子模型

· w3c规范盒子模型：content的width就是设置的width

· IE怪异盒子模型：content的width蕴含border和padding

2.css优先级计算

· 优先级就近准则，等同权重时款式最近者优先级更高

· !import > id > class > tag

· !import比内联款式优先级更高

3.简述css文件为什么要reset

浏览器品种泛滥，不同浏览器的默认款式不一样，须要进行reset对立浏览器的款式

4.如何使两个div进行程度布局

· 应用flex布局：父元素设置：display：flex

· 应用浮动布局（或者应用display：inline-block）

// html

</div> // css

.left{

float: left;

background: red;

/*display: inline-block;*/

}

.right{

overflow: hidden;

background: green;

/*display: inline-block;*/

}

5.右边固定宽度，左边自适应

· 右边定宽+设置浮动width：300px；float：left；左边设置overflow：hidden（或者margin-left：右边的宽度）

.left{

float: left;

width: 300px;

background: red;

}.right{

overflow: hidden;

background: green;

}

· 父元素设置display：flex；右边设置width：300px；左边设置flex-grow：1

· 父元素设置display：table；右边设置width：300px；左边设置display：table-cell；width：100%；

· 父元素设置position：relative；右边设置position：absolute；width：300px；左边设置margin-left：右边的宽度

6.两个div实现两列布局：要求高度不定（父元素也是），两个div实时等高（右边div高度被子元素撑高时，左边div高度与右边统一）

· 父元素设置display：table；左边设置：display：table-cell

· 父元素设置display：flex；左边设置flex-grow：1

7.实现左右两边宽度固定，两头自适应

· 应用左右浮动布局，两头居中布局，此时两头div要放在右浮动上面（因为center的div在失常文档流中，占据全屏宽度，左边的浮动元素会搁置在下一行）

// html

<div class="right">ddddd</div>

</div> // css

.left{

float: left;

background: red;

}

.right{

float: right;

background: green;

}

.center{

margin: 0 auto;

background: yellow;

}

· 应用flex布局

父元素设置display：flex；右边定宽width：300px；左边定宽width：300px；两头设置flex-grow：1

// html

<div class="right">ddddd</div>

</div> // css

.box{

display: flex;

}

.left{

width: 300px;

background: red;

}

.right{

width: 300px;

background: green;

}

.center{

flex-grow: 1;

background: yellow;

}

· 应用相对定位，左右两边相对定位，脱离文档流，两头应用margin留出定宽的margin值

.left{

position: absolute;

top: 0;

left: 0;

width: 300px;

background: red;

}.right{

position: absolute;

right: 0;

top: 0;

width: 300px;

background: green;

}.center{

margin: 0 300px;

background: yellow;

}

8.圣杯布局（与双飞翼布局差不多）

其实是利用负margin值实现，也就是固比固（两边盒子宽度固定，两头盒子自适应）

<div class="center col">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg

dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg</div>

.box{

overflow: hidden;

padding: 0 150px;}.left{

left: -150px;

margin-left: -100%;

width: 150px;

height: 50px;

background: red;}.right{

right: -150px;

margin-left: -150px;

width: 150px;

height: 50px;

background: green;}.center{

width: 100%;

height: 50px;

background: yellow;}.col{

position: relative;

float: left;}

定位实现后，要进行position：relative；再左右两栏增加left和right值，使两头的内容不被遮蔽

9.双飞翼布局

<div class="center">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg

dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg

</div>

</div>

.left{

margin-left: -100%;

width: 150px;

height: 50px;

background: red;

}

.right{

margin-left: -150px;

width: 150px;

height: 50px;

background: green;

}

.center{

width: 100%;

height: 50px;

background: yellow;

}

.col{

float: left;

}

.wrap{

margin: 0 150px;

}

与圣杯布局只是两头的div减少了蕴含的容器，避免遮蔽文字应用了在蕴含容器中设置margin：0 定宽值；

10.如何程度居中一个浮动元素，如何程度居中一个相对定位元素

居中浮动元素

</div>

.right{

float：left;

width: 150px;

height: 50px;

margin: 0 0 0 -75px;

position: relative;

left: 50%;

top: 50%;

background: green;

}

居中相对定位元素

.right{

position: absolute;

width: 150px;

height: 50px;

margin: 0 auto;

left: 0;

top: 0;

bottom: 0;

right: 0;

background: green;

}

11.position的值relative和absolute的定位原点是哪里

· absolute：生成相对定位元素，绝对于值不为static的第一个父元素进行定位

· fixed：生成相对定位，绝对于浏览器窗口进行定位

· relative：生成绝对定位元素，绝对于其失常地位进行定位

· static：没有定位，元素呈现在失常的流中（疏忽偏移申明：top、left、right、bottom、z-index）

· inherit：从父元素继承position属性的值

12.li与li之间有看不见的空白距离是什么起因引起的

行框的排列会受到两头空白（回车或者空格）的影响，空格也属于字符，也会利用款式，占据空间

将字符大小设为0就能够将距离去除

13.优雅降级与渐进加强

· 渐进加强：针对低版本浏览器进行构建页面，保障最根本的性能，而后再针对高级浏览器进行成果、交互等改良，追加性能达到更好的用户体验

· 优雅降级：先构建残缺的性能，再针对低版本浏览器进行兼容

//本期对于前端题库总结到了这里完结啦,心愿对大家有所帮忙,是不是很简略!让咱们一起致力走向巅峰!