1.XML和HTML有什么不同

一、基础语言不同
1、XHTML是基于可扩展标记语言（XML）。

2、HTML是基于标准通用标记语言（SGML）。
（HTML最大的特点是简单性和跨平台性）
二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。

2.什么是盒子模型？与低版本IE的盒子模型有什么不同

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型
标准w3c盒子模型：
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
IE 盒子模型：
包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素(内联元素)：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div ul ol li dl dt dd h1-h6 p
空元素：br hr img input link meta

块级元素，特点：
（1）每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
　（2）元素的高度、宽度、行高和顶底边距都是可以设置的。　　
　（3）元素的宽度如果不设置的话，默认为父元素的宽度。

行级元素，特点:
特点：1.可以和其他元素处于一行，不用必须另起一行。
　　　2.元素的高度、宽度及顶部和底部边距不可设置。
　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

4.DOCTYPE 的作用是什么？

声明文档类型，告知浏览器的解析器，用什么文档类型规范来解析这个文档

5.你是如何理解语义化的？

定义：语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。
优点：
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

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

1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

7.CSS选择器有哪些？分别包括什么？

1.标签选择器
2.类选择器
3.id选择器
4.通用选择器
5.组合选择器（后代选择器，子元素选择器，相邻兄弟选择器）
6.伪类选择器 a:hover
7.伪元素选择器 a::before

8.CSS选择器优先级及计算方法

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算方法：
计算选择器中ID选择器的数量（= A）
计算选择器中的类选择器，属性选择器和伪类的数量（= B）
计算类型选择器和选择器中的伪元素的数量（= C）
忽略通用选择器
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
特殊的 有！import存在则优先级最高

9.前端页面有哪三层构成，分别是什么，作用是什么？

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

10.​​​​​​​Html5离线存储

【最近在找实习ing，持续更新一些前端面试题（超详细解析），部分内容有转载，侵立删！】

标签：面试题,标签,元素,HTML,XHTML,选择器,CSS
来源： https://blog.csdn.net/qq_43440751/article/details/115097662