HTML前端开发面试题 (重要) 【实时更新：2022/08/29】

目录

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

二、行内元素有哪些？块级元素有哪些？CSS的盒模型？空(void)元素有哪些？

三、html元素的id跟class什么区别

四、html中form里action方法的get和post有什么区别？

五、html5 离线存储

六、CSS盒模型原理

七、CSS display:none和visibility:hidden的区别

八、jQuery是什么？

九、jquery与JavaScript的关系和区别

十、jQuery的基本语法如何解释？

十一、在jQuery中，"$"符号代表什么？

十二、CSS选择符有哪些？哪些属性可以继承？

十三、 display有哪些值？说明他们的作用

 十四、position的值relative和absolute定位原点是？

十五、 谈谈This对象的理解

十六、Vue中，v-if和v-show的区别

十七、js的基础数据类型

---

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

网页分成三个层次，即：结构层、表示层、行为层。

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

二、行内元素有哪些？块级元素有哪些？CSS的盒模型？空(void)元素有哪些？

• 行内元素有：a b span I em img input select strong
• 级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
• 盒模型：margin border padding width
• 常见的空元素：<br> <hr> <img> <input> <link> <meta>  <area> <base> <command> 

三、html元素的id跟class什么区别

id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有什么区别？

• 1、在css样式表中书写时，id选择符前缀应加"#"，class选择符前缀应加"."
• 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用
• 3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去
• 4、布局上的一般原则：id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上
• 5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id来控制元素时就会出错
• 6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。

四、html中form里action方法的get和post有什么区别？

• 1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
• 2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用"?"连接，而各个变量之间