前端html+css+js面试题整理，附常用标签属性手册。

一、什么是选择器，选择器包括哪几种？

选择器：选择器就是找到你要渲染的那个HTML标签。
选择器类型：
HTML标签选择器：直接作用于某个HTML标签
类选择器：可在页面中被多次使用
ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次

二、样式的引用（三种）

行内样式：写在某个标签中，只对本行有效。
内嵌样式：也在某个页面中，只对本页面有效前面的例子都是内嵌样式。
外部样式：写在某个单独的.CSS文件中，对引用该文件的页面有效。

三、行内样式和内嵌样式的优缺点

优点：方便在同页面中修改样式，比较灵活。
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。尤其是行内样式，将页面内容与样式渲染混杂在一起，失去了内容与样式分离的原则。

四、引入外部样式表的两种方式： 链接方式 、 导入方式

五、CSS复合选择器有哪些？ 语法表示形式分别是什么？

后代选择器 p strong{
color:red;
font-size:36px;
}

交集选择器 p.ztsz{
color:red;
font-size:36px;
}

并集选择器 p,.ztsz,#uname{
color:red;
font-size:36px;
}
伪类选择器 a:link a:visited a:hover a:avtive等

六、优先级的计算方法

HTML选择器的优先级：1
类选择器的优先级：10
ID选择器的优先级：100

七、请说明什么是标准文档流，并分别列举出块级元素和内联元素

HTML标准文档流：将窗体自上而下分成一行一行，并在每行中从左到右依次排放元素。它是窗体上可显示元素在排列时所占用的位置。
块级元素

…

、

、

、

、
…
内联元素 、、、、一段文字(匿名内联元素)…

八、块级元素和内联元素的区别？

1.内联元素从左到右横向排列，到最右端自动折行，即不独占一行
2.块级以块状显现，并和同级块依次垂直排列，左右撑满，即独占一行。
3.块级元素可以包含内联元素和块级元素(P标签不能包含P标签)。但内联元素不能包含块级元素。
4.内联元素与块级元素属性的不同，主要是盒模型属性上。
5.内联元素的内容可以自动换行(汉字自动换行，字母在在空格处)，它的宽度和高度是自动的。因此设置width无效，height无效。但可以设置line-height。
6.内联元素的border无效，margin上下无效，padding上下无效。也就是padding和margin的left和right是可以设置的 。
7.img比较特殊，它的border，margin，padding是有效的。

九、display 和 visibility区别？
display的隐藏不占有位置 而visibility的隐藏占有位置
display父块隐藏，子块也隐藏
visibility父块隐藏，子块不隐藏

十、元素在页面的定位方式有哪几种？

静态定位：依据文档流定位（这是默认的）。
相对定位：以自身为基准点，不脱离文档流。
绝对定位：以父元素为基准点，脱离文档流。
固定定位：位置固定，脱离文档流。

十一、静态流式布局 响应式布局 弹性布局 的区别与应用

静态流式布局即从上倒下 从左到右依次排列
响应式布局适用于多设备，针对不同分辨率屏幕有不同样式，适合简洁的界面
弹性布局适合移动端开发 自适应不同大小的屏幕 布局方便

十二、边框与轮廓的区别？ border/outline

1.外轮廓线画在border外面 。
2.外轮廓线不占用网页布局空间。
3.外轮廓线不一定是矩形，因此也没有上下、左右边框之说。
4.外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现，可以起到突出元素的作用。

十三、简述margin的叠加规则
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.两个外边距一正一负时，折叠结果是两者的相加的和。

十四、margin叠加的解决方式

1、用外元素的 padding 代替元素的 margin；
2、给外元素加透明边框，即：border:1px solid transparent;也就是有边框分隔的时候不会产生 margin 叠加；
3、元素绝对定位；
4、外元素设置 overflow:hidden；
5、内元素浮动。

十五、响应式布局的标志？
@media 即媒体查询

十六、四种主流设备都有什么？分辨率范围是多少

大屏幕 >=1200
PC端 >=1024
平板 >=768
手机 768以下

十七、四种常用浏览器内核前缀

浏览器 前缀
谷歌/safari -webkit
火狐 -moz
IE -ms
opera -o

十八、rgba() 和opacity的区别
rgba(红，绿，蓝，透明度)设置颜色透明度，opacity设置元素透明度
rgba()样式不能不继承，opacity可以继承

十九、JS语言特点
脚本语言，基于对象，简单，跨平台，嵌入式

二十、JS中的数据类型
数字类型，布尔型，字符串，对象类型，未定义，空指针

二十一、JS中两种数据转换
强制转换 parse() 隐式转换= =

二十二、= =和= = =的区别
= =：双等先将两边的值转换成同种类型，然后比较
= = =：三等，先判断两边类型是否相同，再判断值

二十三、全局变量与局部变量
全局变量: 如果在任何函数定义之外声明了一个变量，则该变量为全局变量， 且全局变量在整个持续范围内都可以访问和修改。
局部变量: 如果在函数定义内声明了一个变量，则该变量为局部变量。每次执行该函数时创建此局部变量，函数调用结束后，该变量被卸载；且局部变量不能被该函数外的任何事物访问。

二十四、前端的有哪些渲染技术，包括哪些具体方式
第一种：h5+css渲染
第二种：js渲染 包括dom文档对象模型和数据可视化
数据可视化又分为canvas和svg矢量图

二十五、svg矢量图与canvas的区别
Canvas：支持事件，但内部图像不支持，不好调，放大失真适合小数据和游戏。
svg矢量图:采用标签来绘制图，放大不失真，方便调试，支持事件，用dom控制适合频繁数据更改。

二十六、TCP/IP协议栈包含的网络协议有哪些？
TCP（传输控制协议）:Transmission Control Protocol ，是一种面向连接的、可靠的、基于字节流的传输层通信协议；
UDP（用户数据报协议）：User Datagram Protocol，用于处理数据包，是一种无连接的、不可靠的通信协议；
IP （网络协议）：Internet Protocol，把数据从源传送到目的地。它不负责保证传送可靠性，流控制，包顺序等。
ICMP（网络控制报文协议）：Internet Control Message Protocol，是TCP/IP协议栈的一个子协议，用于在IP主机、路由器之间传递控制消息。

二十七、什么是HTTP
HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议；

二十八、Http报文的组成部分
HTTP请求信息由请求行、请求头部、体三个部分组成；
HTTP响应也由四个部分组成，分别是：状态行、响应头部、响应体。

二十九、什么是C/S,B/S,RIA
C/S结构是Client/Server（客户机/服务器）的简称，桌面应用程序采用的多是这种结构；
B/S结构是Browser/Server（浏览器/服务器）的简称，特点是客户端无需安装特定的软件，只需要安装一个浏览器就可以与系统进行交互。
RIA是“Rich Internet Applications”的缩写，意为“富客户端网络应用”；
基于B/S结构，只要有浏览器就可以使用，在浏览器里实现与客户端软件类似的体验；例如：可以局部刷新、可以拖拽等；
三十、什么是AJAX
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

三十一、AJAX优缺点
优点：
1.Web应用的多任务（异步提交而非同步提交）
2.只从服务端获取数据而非整个页面，减少传输量使多端开发更容易
3.无需刷新页面向服务器传输或读写数据，提升用户体验即时显示不间断的交互流程，用户体验极佳
4.接近桌面应用的直接、高可用、更丰富、更动态的Web用户界面
缺点：
1.前进、后退的功能被破坏，因为Ajax永远在当前页，不会记录前后页面（在学习框架时通过配置前端路由解决这个问题）；
2.搜索引擎的支持度不够，因为目前搜索引擎爬虫还不能理解JS引起变化数据的内容；

三十二、AJAX核心五步骤
1、创建AJAX核心对象：XMLHttpRequest。
2、指定响应处理事件onreadystatechange的回调函数
3、调用open方法与服务器建立请求连接。
4、调用send方法向服务器发送请求。
5、readystate属性值改变时触发onreadystatechange事件，调用绑定的回调函数（事件会触发多次）

三十三、什么是事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象。

三十四、style和size的区别
1、style返回的是字符串，如28px，offset返回的是数值，进行计算时，offsetLeft比较方便。
2、style是读写的，offset是只读的，所以要改变元素的尺寸和位置，
只能修改style。
3、在js中使用style只能取得行间样式的值，offsetLeft则可以取得行间及非行间样式。
4、取得图片的宽度和高度直接写.width或.height,取得的值不带px。

三十五、动态事件绑定，添加事件的方式有哪几种？
1.dom对象。事件名=回调方法
2.addEventListner(eventname,handle,usecapture)

三十六、什么是BOM/DOM
BOM：浏览器对象模型，主要控制与窗口交互。
DOM：文档对象模型，主要对标签增删改，控制属性，改变样式

三十七、innerText和innerHTML的区别
innerText:对标签内部文本进行直接渲染，不会解析html标签
innerHTML:对标签内部进行渲染，html标签可以被解析。。

三十八、 如何阻止事件冒泡
(1)return false；
(2)objEvent.cancleBubble=true;;

三十九.、如何阻止默认事件
(1)return false；
(2) ev.preventDefault();

四十、 什么是Json:
(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

Html常用标签及属性

中文 英文

    常用属性

换行

强调（斜体）
强调（加粗）
内联框架 width/height/name
标题
水平线

---

图像 src/width/heigth
无序列表

1. type:disc/circle/square
   有序列表
   • type:1/A.a/.i
     表格标题
     段落

     
     预格式

     
     
     表格                                width/height/border
     
     表格行/列             
     
     表格行合并           
     
     表格列合并           
     
     超链接               
     
     空格                   
     
     大于号                >
     
     小于号                <
     
     引号                  "
     
     版权符号              ©
     
     上脚标                
     
     下脚标                
     
     文本框                        placeholder
     
     密码框               
     
     单选钮                      value/id/checked
     
     复选框                  value/id/checked
     
     下拉列表             
     
     下拉列表选项         
     
     下拉列表选项组                       lable
     
     中文            英文        常用属性
     
     文本域                               cols/rows
     
     按钮                                   value
              
              
              
              
     
               
               
               
               
     
                
                
                
                
      
                 
                 
                 
                 
     
     
     表头/表格主体         
                
                
                
                
               
               
               
               
               
               
               
               
     
               
               
               
               
     
              
              
              
              

CSS标签部分

background—
背景附件。 background-attachment scorll
设置元素的背景颜色。 background-color
设置元素的背景图像 background-image
设置背景图像位置。 background-position
设置重复背景图像。 background-repeat norepeat/x/y
规定背景图片的尺寸。 background-size cover/100%

border—
设置四条边框的颜色。 border-color
设置所有的边框属性 border-top/bottom/left/right
设置边框的宽度。 border-width
设置四角圆角 border-radius
规定用作边框的图片。 border-image-source

font—
设置字体名称 font-family
设置字体大小 font-size
设置字体的粗细 font-weight 100-900/bold/…
设置字体横向拉伸变形 font-stretch

文本样式—
设置文本颜色 color
设置元素水平对齐方式 text-align center/lerf/right
设置元素垂直对齐方式 vertical-align center/top/middle/bottom
设置首行文本的缩进 text-indent

中文 英文 常用属性
设置文本的行高 line-height
设置文本的装饰 text-decoration none
设置文本的大小写 text-transform uppercase/lowercase
字母间隔 letter-spacing
文字间隔 word-spacing

鼠标样式—
链接 pointer
默认 default
等待 wait
帮助 help
文本 text
十字 crosshair

display—
块元素 block
内联元素 inline
不显示 none
内联块 inline-block
弹性布局 flex

overflow—
默认值,内容不会被修剪， visible
内容会被修剪 hidden
滚动条 scroll
自动设置 auto

outline—
轮廓线的颜色 outline-color
轮廓线的样式 outline-style
轮廓线的宽度 outline-width
轮廓边框的偏移位置 outline-offset

中文 英文 常用属性

弹性布局容器—
排列方式 flex-direction row/row-reverse/
column/colunm-reverse
换行方式 flex-wrap nowrap/wrap/wrap-reverse
主轴对齐方式 justify-content space-between/flex-strat
flex-end/center/space-around
交叉轴对齐方式 align-items
多轴对齐 align-content

弹性布局项目—
项目排列顺序 order
项目放大比例 flex-grow
项目缩小比例 flex-shrink
项目空间距离 flex-basis

CSS其他属性—
盒子阴影 box-shadow
渐变 linear-gradient / radial-gradient
文字阴影 text-shadow
背景图裁剪 background-clip
响应式布局 @media
内边距 padding
外边距 marging

transform—
平移 translate(x,y)
旋转 rotate(deg)
缩放 scale(x)
倾斜 skew(deg)

JS部分
中文 英文

基础性方法—
运算符能够获取一个变量的数据类型。 typeof
将字符串转换成整数。 parseInt()
非数字的意思 NaN

JS中数组属性操作
设置或返回数组中元素的数目 length
添加到一个数组的尾部 push()
添加到一个数组的头部 unshift()
移除数组中的最后一个元素 pop()
移除数组中的第一个元素 shift()
对数组排序 sort()
对数组进行反转 reverse()
新数组是由多个数组组合而成的 concat()
数组分隔成字符串 join( )
将一个字符串分割成一个数组 split()
对数组元素做删除、插入等 splice()
返回一个数组的片段 slice()
将JSON对象转换成字符串 var str = JSON.stringify(obj)
将字符串转换成JSON对象 var obj = eval("(" + str + “)”);

内置对象-String属性操作
字符串的长度 length
指定位置的单个字符 charAt(index)
字符串值在字符串中首次出现的位置 indexOf(substr,index)
从后往前查找 lastIndexOf(substr)
字符串分割为字符串数组 split(substr)
将数组元素按照参数指定字符连接 join(arr)
截取介于两个指定下标之间的字符 substring(begin,end)
从指定位置截取指定长度的字符串 substr(begin,length)
转换成大写字符 toUpperCase()
中文 英文

转换成小写字符 toLowerCase()
将与正则表达式匹配的字符串进行替换 replace(rgExp,str)
返回子字符串值在字符串中首次出现的位置 search(rgExp)
返回与正则表达式查找内容匹配的字符串 match(rgExp)

内置对象-Date属性操作
一个月中的每一天，其值介于1～31之间 getDate()
星期中的每一天，其值介于0～6之间 getDay()
小时数，其值介于0～23之间 getHours()
分钟数，其值介于0～59之间 getMinutes()
秒数，其值介于0～59之间 getSeconds()
月份，其值介于0～11之间 getMonth()
年份，其值为4位数 getFullYear()
自1970年1月1日以来的毫秒数(时间戳) getTime()

内置对象-Math属性操作
对数进行上舍入 ceil(x)
对数进行下舍入 floor(x)
把数四舍五入为最接近的数 round(x)
返回0~1之间的随机数 random(x)
返回数的绝对值 abs(x)
返回数的平方根 sqrt(x)
返回最大值 max(x,y)
返回最小值 min (x,y)

Canvas API
开始路径 a.beginPath();
结束路径 a.closrPath();
画的起始点 a.moveTo(x,y);
画直线到哪个点 a.lineTo(x,y);
画的线的宽度 a.lineWidth = 2
画的线的样式 a.strokeStyle=“black”
中文 英文
写了这个才能真正画上 a.stroke();
画一个矩形: a.fillRect(开始画的x坐标，开始画的y坐标，所画矩形的宽，所画矩形的高);

清除矩形 a.clearRect();
画一个圆 a.arc(圆心x坐标，圆心y坐标，圆径，圆起始弧度，圆总弧度 一般为2*Math.PI);
填充图形的样式 a.fillStyle
写个这个才能真正画上 a.fill();
添加文本 a.fillText(文本内容，添加X坐标，添加Y坐标)

BOM部分

window属性操作
弹框 alert( )
可提示用户输入的对话框 prompt( )
带有提示信息、确定和取消按钮的对话框 confirm( )
关闭浏览器窗口 close( )
打开一个新的浏览器窗口 open( )
延时 setTimeout( )
清除延时，取消定时器 clearTimeout( )
按照周期（以毫秒计）来调用函数或表达式 setInterval( )
清除周期 clearInterval( )
将字符串解析成javascript代码 eval()
获取浏览器相对于屏幕左上角的 x 坐标 screenLeft
获取浏览器相对于屏幕左上角的 y 坐标 screenTop

history属性操作
加载history列表中前一个URL。(后退) back( )
加载history列表中下一个URL。(前进) forward( )
加载history列表中某个具体的URL go( )
中文 英文
对于go的说明：
当前页面 go(0)
相当于back( ) go(-1)
相当于forward( ) go(1)

location属性操作
重新加载当前URL（刷新）。 reload( )
用新的URL替换当前URL。 replace( )
设置或返回完整的URL href

navigator属性操作
返回user-agent信息。 userAgent
返回当前浏览器名称。 appName
返回当前浏览器版本信息。 appVersion
返回当前操作系统信息。 platform

DOM部分

document属性操作
返回载入当前文档的文档的URL。 referrer
对拥有指定id的第一个对象的引用 getElementById()
带有指定名称的对象的集合 getElementsByName()
带有指定标签名的对象的集合 getElementsByTagName()
带有指定类样式名的对象的集合 getElementsByClassName()
输出 write()

JS事件部分
一个页面或一个元素加载完成后触发该事件 onload
当滚动条滚动时触发该事件 onscroll
当页面尺寸发生变化时触发该事件 onresize
鼠标单击时触发该事件 onclick
鼠标悬停 onmouseover
鼠标移出 onmouseout
中文 英文
鼠标移动，会触发多次 onmousemove
获得焦点 onfocus
失去焦点 onblur
当文本框或文本域中的文字被选中时触发该事件 onselect
当文本框或文本域中的文字被改变时触发该事件 onchange
当按下键盘上的按钮时触发该事件 onkeydown
当释放键盘上的按钮时触发该事件 onkeyup
鼠标右键菜单事件 oncontextmenu

event对象属性
获取相对于可视区域内鼠标的X/Y坐标。 clientX/clientY
获取相对于触发事件对象上鼠标的X/Y坐标 offsetX /offsetY
获取相对于屏幕内鼠标的X/Y坐标。 screenX/screenY
阻止事件冒泡 cancelBubble
阻止默认行为 preventDefault
获取用户按键值 keyCode
测试是否按下ctrl键 ctrlKey
测试是否按下shift键 shiftKey
测试是否按下alt键 altKey
当前事件对象 target

正则表达式
忽略大小写 i
全局匹配 g
多行匹配 m
查找方括号之间的任何字符。 [abc]
查找任何不在方括号之间的字符。 [^abc]
查找任何从 0 至 9 的数字。 [0-9]
查找任何从小写 a 到小写 z 的字符。 [a-z]
查找任何从大写 A 到大写 Z 的字符。 [A-Z]
查找任何从大写 A 到小写 z 的字符。 [A-z]
查找单词字符(英文、数字、下划线)。 \w
查找非单词字符 \W
中文 英文
查找数字 \d
查找非数字字符 \D
查找空白字符 \s
查找非空白字符 \S
查找换行符 \n
查找换页符 \f
查找回车符 \r
查找制表符 \t
行首：匹配字符串开始位置 ^
行尾：匹配字符串结束位置 $