1、简述!DOCTYPE的作用？
决定浏览器渲染方式；
帮助浏览器正确地显示网页
文档类型声明（简称为 "DTD"），告诉浏览器这个文件的类型，让浏览器知道该用哪个规范来解析文档。
声明必须在HTML中的第一行，Doctype 是一条声明它不是一个HTML标签，只起到声明作用。
：用HTML5的doctype声明文件包含HTML5标记2、常见的浏览器及其内核有哪些？
有五大浏览器，分别是：
1、chrome 浏览器 --Google公司
特点 安全、高效、安全
2013年前使用苹果公司的webkit内核，13年后开始使用 webkit 的分支 Blink 内核
内核 webkit,Blink
2、Firefox 浏览器 --Mozilla公司
特点 非盈利、Gecko项目开源
内核 Gecko
3、safari 浏览器 --苹果公司
特点 移动端占有率高
内核 webkit
4、Opera 浏览器 --Opera Sftware ASA公司
特点 自主研发presto内核
使用自研的 Presto 内核 2016年被收购后改用 webkit 内核，后跟随谷歌改用 Blink 内核
内核 presto、webkit -> blink
5、 IE 浏览器 --Microsoft微软公司
特点 依托强大的Windows系统的市场占有率捆绑安装不可卸载
内核 trident
1）使用trident内核的IE，及一些国产浏览器
2）使用Gecko内核的Mozilla Firefox
3）使用blink内核的chrome、opera
4）使用webkit内核的Safari、chrome，及一些国产的双核浏览器3、常见的块级标签和行内标签分别有哪些？
块级标签
h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr
行内标签
span、i、em、b、strong、sub、sup、del4、b 和 strong （i 和 em ）标签的区别？
b 和 strong
默认情况下它们起的均是加粗字体的作用
二者所不同的是，标签是一个实体标签，用来呈现文字的粗体效果
而标签是一个语义标签，它的作用是加强字符的语义，用来表示重要文本，在文本中呈现粗体效果
i 和 em
默认情况下它们起的均是倾斜字体的作用
二者所不同的是，标签是一个实体标签，文本呈现为斜体，没有特殊语义
而标签是一个语义标签，它的作用是用来呈现被强调的文本，在文本中呈现斜体效果5、谈谈对语义化的理解？
即根据页面内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有利于SEO，便于团队开发和维护。如：标题用h1~h6,段落使用p标签
语义化的好处：
1）在没有css的情况下，页面也能呈现出较好的内容结构；
2）语义化使代码更具有可读性，便于团队开发和维护；
3）语义化有利于用户体验
4）语义化有利于SEO搜索引擎优化6、如何合并表格单元格？
表格合并
跨行合并 rowspan
跨列合并 colspan7、thead、tbody、tfoot 有什么作用？
thead、tbody、tfoot标签结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
标签默认不会影响表格布局8、常见表格元素有哪些？
标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
td（标准单元格）|th（表头单元格）元素 定义表格内的表头单元格。
9、引入css的方式有几种?
引入的三种方式：
行内样式/内部样式/外部样式
行内样式
内容
内部样式
外部样式
10、单行文本水平垂直居中如何实现？
先设置高度
height:10px;
行高等于高度
line-height:10px;
文本居中
text-align:center;
11、选择器优先级如何计算？
一般来说选择器的权值越大，优先级越高
基本选择器的权值由小到大分别为：
通配符选择器（0）<标签选择器（1）
12、哪些CSS属性是可以继承的？
子标签可以继承父标签的样式
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
13、简述css盒模型？
盒模型又称框模型（Box Model）在页面布局中，将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。css盒模型的本质是一个盒子，封装周围的HTML元素
盒模型由：
元素的内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)要素组成
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
14、如何使用border实现小三角?
三角形
.box1 {
width: 0;
height: 0;
border: 40px solid;
border-color: #f30 transparent;
border-bottom: 0;
/* 清除ie6下默认高度和最小高度问题 */
overflow: hidden;
font-size: 0;
line-height: 0;
}
空三角
.box2 {
width: 1em;
height: 1em;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(135deg);
}
15、margin外边距常见问题及处理方法？
（1）父子关系外边距塌陷问题——元素嵌套关系，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现其中较大的外间距的值
原因：父盒和子盒公用一个上外间距的区域
解决方法：
给父元素设置边框或内边距；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距，两个值相同时，取当前值，如果两个值不同，取较大值
原因：上、下两个兄弟关系的盒子共用一个外间距区域
解决方法：
给两个盒子都套一个父盒子，父盒添加overflow属性
--->改变父级的渲染规则有以下四种：
position: absolute/fixed;
display: inline-block;
float: left/right;
overflow: hidden;
16、CSS选择器有哪些？优先级算法如何计算？内联和important哪个优先级高？
基本选择器：通配符选择器、标签选择器、类选择器、id选择器
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器：群组选择器、后代选择器、父子选择器、交集选择器、伪类选择器
div,p div p div>p div.box1
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
选择器的权值越大，优先级越高，选择器中的权值使用加法计算，如果权值相同后写的内容覆盖先写的内容
行间样式的优先级高于id选择器的优先级
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式；
在样式中定义!important ，优先级高于行间样式
17、行内元素和块级元素的特性，具体区别是什么？行内元素有哪些？块级元素有哪些？
行内元素：宽度自适应；高度自适应；默认并列在一行显示；具有部分盒模型特征（默认没有宽高[css定义宽高时无效]，有横向间距margin-right、margin-left和留白padding-left、padding-right，没有纵向margin-top、margin-bottom和留白padding- top、padding-bottom，边框保留）；换行会被解析成空格
行内元素: a b strong em i del sup sub span
块级元素：宽度100%；高度自适应；默认独立成行；具有盒模型特征（默认可以设置盒子的宽、高、外间距、内填充、边框）
块级元素：div p h1 h2 h3 h4 h5 h6 form ul ol li dl dt dd
18、margin外间距常见问题及处理方法
（1）父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
解决方法：
给父元素设置边框或内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
解决方法： 给两个盒子都套一个父盒子，父盒添加overflow属性
触发bfc，改变父级渲染规则的方法
19、浮动产生的问题，清浮动的方案？
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，影响与父元素同级的后续元素的正常布局
1）为浮动元素的父级盒加固定的高度——不够灵活
2）为浮动元素的父级盒加浮动——会产生新的浮动问题
3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
5）推荐方法：
给浮动元素的父元素添加.clearfix，(不会在结构上产生冗余代码，可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }
20、简述BFC规则，及解决的问题？
1）什么是BFC？
BFC(Block Formatting Context)是web页面的可视化CSS 视觉渲染的一部分，是页面中的一个独立的渲染区域。用于决定块盒子的布局及浮动元素与其他元素交互的一个区域，可以改变父级的渲染规则。
2）BFC规则：
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
3）BFC解决的问题
解决外边距折叠问题
自适应两栏或三栏布局
防止字体环绕
清除浮动
21、如何让盒子水平垂直居中
1）margin负间距
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半
2）margin: auto；实现绝对定位元素的居中
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;
22、等高布局、圣杯布局、双飞翼布局的实现原理？
等高布局：
方法一：利用内外间距相抵消，注意为父元素设置“overflow: hidden;”
方法二：利用内容撑开父元素的特点，给每一列添加相对应的容器，进行相互嵌套，并在每个容器中设置背景色
方法三：利用边框模拟背景，实现等高列显示效果
圣杯布局：
圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者的实现原理有所不同。圣杯布局的实现思路：
1）HTML结构中，先主体内容后侧边栏
2）两侧固定宽度，中间内容宽度设置100%;
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）将中间露出来；
6）分别为左侧边和右侧边设置position:relative; 然后还原左侧边和右侧边
双飞翼布局：
1）HTML结构中--先主体后侧边栏；
2）两侧固定宽度，中间宽度100%；
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）在主体内容的子盒上设置margin值，将中间内容露出来
23、简述精灵图(css sprites)的原理及优缺点，如何使用
css sprites——精灵技术、雪碧技术，通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上，通过background-image、background-repeat属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。
好处：
1）减少网页的http请求，从而大大的提高页面的性能
2）图片命名上的困扰
3）更换风格方便
缺点：
1）必须要限定容器大小符合背景图元素位置 ，需要计算
2）维护的时候比较麻烦—图片修改麻烦
步骤：
1）制作一张具有多个状态的拼合图片
2）给要显示背景的盒一个固定的尺寸，以背景方式加载让其局部显示
3）通过背景图定位控制不同的显示状态
24、你能想出几种方法让元素在页面中消失？
1）display: none; 元素的隐藏，将整个元素隐藏，不占用任何空间
2）visibility: hidden; 元素内容不可见，只隐藏内容，占位空间仍然保留
3）通过position属性设置元素位置，让其消失
4）overflow属性实现，将要隐藏元素移出父元素的范围
5）opacity属性，实现元素的不可见
25、css3新增了哪些选择器
属性选择器：
element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素
结构性伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素 element:nth-of-type(n){ } 一组元素中选择特定类型的元素
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素
26、如何处理HTML5新标签的浏览器兼容问题？
方案一：使用javascript新增元素的方法解决
document.createElement(“header”);
document.createElement(“footer”);
…
由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。
header,footer{ display:block;}
方案二：使用封装好的插件html5shiv.js解决兼容性问题。
27、说说常见浏览器兼容问题
1）ie8中图片边框问题：
解决方案:img{ border:none; }
2) ie8中背景复合属性写法问题：
在标准浏览器中能正常显示背景图片，但在ie8中图片显示异常。
.bg{ background:url(“./images/bg.jpg”)no-repeat center; }
解决方案:
.bg{ background:url(“./images/bg.jpg”) no-repeat center; }
3) 在 IE6 及更早浏览器中定义小高度的容器问题？
解决方案：#test{ overflow:hidden; height:0px; font-size:0; line-height:0; }
4) IE6 及更早浏览器浮动时产生双倍边距的 BUG问题 ？
解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可
#test{ float:left; _display:inline; }
5) IE7 下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父标签也设置相对定位 position:relative;
6)块转内联块 ie7- 不在一行显示问题
解决方案：div { display:inline-block; *display:inline; *zoom:1; }
7) IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
解决方案：给加vertical-align:middle/top/bottom
li{ vertical-align:top; }
28、HTML5中新增的表单元素和表单属性有哪些？
新增表单标签--input类型
1）url类型：包含访问协议的URL地址的输入域
2）email类型：包含e-mail地址的输入域
3）search类型：用于检索关键字的输入域
4）tel类型：用于输入电话号码的输入域
5）number类型：用于包含数值的输入域
6）range类型：生成一个数字滑动条
7）color类型：生成一个颜色选择器
8）date类型：日期选择器
9）datetime类型：输入日期时间
10）datetime-local类型：日期和时间选择器
11）month类型：月选择器
12）time类型：时间选择器
13）week类型：周选择器
14）datalist类型：选项列表，与input元素配合使用
新增表单属性：
1）min、max、step属性：输入域中所允许的最小值、最大值、步长
2）placeholder属性：为输入域设置提示信息
3）list属性：通过input元素和datalist元素实现可选的下拉列表
4）autocomplete属性：是否启用自动完成功能
5）autofocus属性：自动获取焦点
6）form属性：定义表单元素所属的表单区域
7）required属性：提交表单时，表单元素不能为空
8）pattern属性：对用户输入内容做验证
9）multiple属性：选择多个值
29、简述rem布局原理
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px，一个div的width为1rem，则div的width大小为100px。
rem布局实现步骤
1）设置页面的viewport
2）动态计算并设置html的fontsize值
3）按照pc端布局方式正常布局，把px单位换算成rem
30、什么是less?less有什么好处？
拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别。
好处：
结构清晰，结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码，可以方便地应用到老项目中。
31、常见的移动端布局解决方案有哪些？原理如何？
1）流式布局
垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
优先：可以很好解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2）rem布局
rem——相对于根元素的font-size属性值的单位，css3新增单位
未经调整的浏览器的默认字号为16像素，1rem = 16px
rem布局的实现：
设置页面的viewport；
动态计算并设置html的font-size值;
按照PC端布局方式正常布局，将px单位换算成rem单位
3）vw适配
vw——viewport's width css3规范中视口单位
vh——viewport's height
vw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%
4）flexible.js
将设备划分成10份，确定好html标签的font-size属性值。假设有750px的设计稿，则html{ font-size: 75px; }，页面中元素的rem值 = 元素的px值/75
5）响应式布局
一站适配所有终端。通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果
6）grid网格布局
将页面划分成相应的表格进行布局
32、如何解释这句话呢？
viewport 虚拟窗口
width 虚拟窗口的宽度
device-width设备宽度
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户手动缩放窗口
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，最大缩放比1倍，最小缩放比1倍，同时不允许用户手动缩放
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好，今天我来分享一项JavaScript的实战技巧，即如何在JS中使用Ajax进行异步请求，让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术，可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视，慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说，可以直接使用三方的监控，比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax？ajax作用是什么？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术，其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说，再熟悉不过了，像我07年接触web前端开发就是用的dreamweaver，一直用到现在，身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照，其中一张是较为罕见的死侍在被改造之前的剧照，其余两张剧照都是死侍在执行任务中的状态。据外媒推测，片方此时发布剧照，预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础重点知识点：数据类型、核心语法、面向对象...
- 不用海淘，真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机（黄色/蓝色）扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机，此款是mini8的小黄人特别版，除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发，你是否也曾遇到过这些痛点：面对海量目标URL，单线程爬虫爬取一周还没完成任务；动态渲染的SPA页面，requests库返回的全是空白代码；好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求，取消axios请求，取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求，只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
-
- 最近发表
-
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)