HTML、CSS、HTML5、CSS3面试题

1、XHTML与HTML的有何异同？

HTML是一种基于WEB的网络设计语言，XHTML是基于XML的置标语言，XHTML可以认为是XML版的HTML，所以它的语法比较严谨：元素必须关闭，嵌套必须正确，大小写区分，属性值必须用双引号，id属性代替name属性

2、介绍一下CSS的盒子模型？弹性盒子模型是什么？

盒子模型由content+padding+border+margin组成，分为标准盒子和IE盒子，标准盒子的width指content，IE盒子的width包括content，padding，border

3、Doctype的作用？标准模式与兼容模式各有什么区别?

声明在文档的第一行，位于html的前面，用于告知浏览器的解析器以什么样的文档标准来解析这个文档，如果没有声明文档就会以兼容模式呈现
标准模式的排版和JS都是以浏览器支持的最高的标准运行
兼容模式页面以宽松向后兼容的方式显示，模仿老式浏览器，防止站点无法工作

4、HTML5 为什么只需要写 ？

HTML不基于SGML，不用引用DTD

5、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 常见的空元素：br hr img input link meta

6、页面导入样式时，使用link和@import有什么区别？

link是XHTML的标签，不但可以引入CSS还可以引入RSS，定义REL属性等
@import是CSS2.1提出的，只能引入CSS
link在页面加载时同时加载，@import要等页面加载完才加载

7、介绍一下你对浏览器内核的理解？

浏览器内核分为渲染引擎和JS引擎

8、常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

9、HTML5有哪些新特性、移除了那些元素？

新特性：

• 画布canvas
• 用于媒介播放的video和audio
• 新的语义化标签：article，header，nav，section，footer
• 新的本地存储：localstorage，sessionstorage
• 新的表单控件：date，time，calendar，url
• 新的技术：websocket，web worker，geoloacation
  移除得元素：
• 可以用css代替的元素，font，fontbase，center，s，tt，u

10、简述一下你对HTML语义化的理解？

可以清晰的向浏览器和开发者描述其意义，为了在丢失css的情况下也能很好的显示页面的结构，利于seo，seo可以根据标签和上下文己算权重，方便其他设备解析，方便开发和维护，可读性高

11、iframe有那些缺点？

会有过多的http请求，影响性能，会阻塞主页面的onload事件，不利于seo，页面调试样式很麻烦，会出现很多滚动条，浏览器后退按钮会没有效果，小型移动设备兼容性不好，会显示不全

12、列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？

display：none，block，inline，inline-block，flex，grid，table，table-cell
position：static，relatice，absolute，fixed，sticky
relative定位原点是自己，absolute定位原点是离自己最近的父元素

13、一个满屏 品 字布局 如何设计?

14、常见兼容性问题？

https://blog.csdn.net/xustart7720/article/details/73604651?utm_source=blogxgwz0

15、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里面试题）

除了电竞显示器，一般显示器是60hz，所以最小间隔为1000/60 = 16.7ms

16、列举IE 与其他浏览器不一样的特性？

• IE支持currentStyle，FIrefox使用getComputStyle
• IE 使用innerText，Firefox使用textContent
• 滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
• 事件方面：IE：attachEvent：火狐是addEventListener
• 鼠标位置：IE是event.clientX；火狐是event.pageX
• IE使用event.srcElement；Firefox使用event.target
• IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
• CSS圆角：ie7以下不支持圆角

25、cssSprite是什么 ？有什么优缺点？

精灵图是一种网页图片的应用技术，它把背景图片都整合到一张图片上，再利用background-position进行图片定位，优点是有效的减少了http请求，减少了图片的字节，缺点是合成比较麻烦，需要精准定位

27、前端页面有哪三层构成？ 分别是什么？ 作用是什么？

结构层由HTML负责，负责搭建页面的结构
表示层由CSS负责，负责页面的样式
行为层由JavaScript负责，负责页面的交互

29、如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性

用hack选择器，根据不同的浏览器识别不同的hack选择器的原理，给每一种浏览器都单独设定width属性

30、在CSS中哪些属性可以同父元素继承。

visibility，cursor，font-size，color…

31、谈谈以前端的角度出发做好seo需要做什么

1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。
2、 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。
3、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。
5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。
6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。
7、 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。
8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

32、css选择符有哪些？优先级算法如何计算？

标签选择符，类选择符，ID选择符，伪类选择符，相邻选择符，子代选择符，后代选择符，通配符选择符，属性选择符
优先级：

• 就近原则，下面覆盖上面
• !important＞内联＞ID＞类＞标签

37、document load 和document ready 的区别

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

39、哪些浏览器支持html5？

现代的浏览器都支持，早期不支持的浏览器也可以让他支持

40、css 中的使用列布局是什么？ 为了实现列布局我们需要指定哪些内容？

可以帮助你分配文字为一个个列，需要指定列数和列之间的间隔

41、描述css reset的作用和用途？

每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset

42、写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？

• float情况下有双边距的bug，使用display: inline解决
• 宽高为奇数时有bug，使用偶数
• min-height设置不了，加!important
• z-index问题，给父亲设置position：relative
• 设置高度小与10px左右的时候，实际高度高于设置高度，因为有默认行高，把行高也设置

44、什么是Web workers？为什么我们需要他？

一个运行在后台的JavaScript，有助于异步执行JavaScript，提高页面性能

46、写出至少三个CSS3中新添加的样式属性的名字及参数。

阴影，rgba，圆角

47、给一个元素添加CSS样式有哪几种方法说说他们的优先级。

引用css，内联样式，head里style标签内样式

48、多人项目中，你如何规划css文件样式命名。

写在一个文档里，大家按照文档命名

49、为了让网页更快的加载，你会如何处理你的css文件和js文件，以及图片文件，页面性能优化你还知道哪些方法。

51、HTML中div与span区别；

div是块级元素，独自占一行，宽度默认是占满父级的宽度，可以设置宽高
span是行内元素，排列在一行里，宽度是内容的宽度，不能设置宽高

52、HTML5 存储类型有哪些，以及与他们的区别；

cookies，localstorage，sessionstorage
cookies的存储容量比较小而且数量有限制，一般为4K左右，localstorage的可以高达5M以上
cookies在设置的时间之前有效，localstorage本地永久存储，sessionstorage在当前窗口有效
cookies每次http请求都会被携带，会造成带宽浪费，localstorage和sessionstorage是保存在本地

53、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实现水平居中

55、列举5种以上表单元素中input的type类型；

text，password，submit，button，checkbox，reset，radio，date，time，url，email

56、alt和title分别表示什么含义以及具体应用体现；

alt是代替图片的文字，图片不能显示时会显示alt，title是鼠标指上去时的解释文字

67、什么事css预处理器；

less和sass等等，可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。

68、css3中你最常用的有哪些？说明用法。

选择器：nth-child，first-child，last-child
自定义字体@font-face
rgba，阴影，圆角之类的
transition，transform
animation 先绑定后使用

69、document.write、innerHTML和innerText 的区别？

document.write会重写页面，之前的html会被覆盖，innerHTML包括标签以及标签里面的内容，innerText不包括标签，只指里面的文本

72、实现 class为test的div 在屏幕宽为400一下的宽度为200，屏幕宽为400~800的情况下宽 度为350；

@media screen and (max-width: 400) {
    .test {
        width: 200px;
    }
}
@media (min-width:400px) and (max-width:800px) {
    .test {
        width: 350px;
    }
}

73、实现当屏幕宽度大雨700,小于800是时引用外部样式style-7-9.css

74、HTML中input的6个新属性

time，date，url，email，search，calendar，number

76、对WEB标准以及W3C的理解与认识

WEB标准分为结构，表现和行为
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）。标签字母要小写
2）。标签要闭合
3）。标签不允许随意嵌套
2.对于css和js来说
1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

81、内联和important哪个优先 级高?

important

84、描述css reset的作用和用途

每个浏览器有自带的或者共用的默认样式，会造成布局的困扰，css reset就是重置这些默认样式

87、你如何对网站的文件和资源进行优化?期待的解决方案包括：
https://blog.csdn.net/qq593249106/article/details/83154210
88、清除浮动的几种方式，各自的优缺点
https://blog.csdn.net/qq593249106/article/details/83715356
89、CSS3有哪些新特性？

新选择器
阴影
圆角
自定义字体font-face
多列布局
渐变效果
transition
transform
animation

90、CSS中的class和id有什么区别。

在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

91、请说一下移动端常见的适配不同屏幕大小的方法。

meta标签使用viewport属性
用rem代替px
使用框架flexible.js

92、一个高宽未知的图片如何在一个比他大的容器内水平居中。

把图片设置为display: inline-block，父容器设置text-align: center
图片设置margin: 0 auto
父元素设置display: flex， justify-content: center

94、定义链接四种状态的伪类的正确书写顺序是？

love hate：
link -> visited -> hover -> active

97、Inline，inline-block和block的区别是。

inline(行内元素): 不能设置宽高，margin和padding只有左右，不会自动换行
inline-block(行内块元素): 可以设置宽高，不会自动换行
block(块级元素): 可以设置宽高，自动换行，宽度默认占满

99、CSS超过宽度的文字显示点点，必须要设置的属性。

.text {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

102、display：none与visibility:hidden的区别是什么？

display:none不占位置，visibility:hidden会占位置
display:none会引起重排，visibility:hidden只会引起重绘

103、超链接访问过后hover样式后会出现什么问题？如何解决。

失效，按照这个格式书写样式：
link -> visited -> hover -> active

116、css中position的属性值都有哪些？并描述其含义及具体解释；

absolute：绝对定位，参照离自己最近的有定位的父元素进行定位
relative：相对定位，参照自己进行定位
fixed：固定定位，参照浏览器进行定位
sticky，粘性定位，黏在浏览器上方

128、html5 中的应用缓存是什么？

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

130、简单介绍boostrap栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

133、get和post区别？

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

136、解释一下浮动和它的工作原理。

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。