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

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. 优雅降级与渐进加强

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

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

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