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

发布于:2023-01-04 ⋅ 阅读:(267) ⋅ 点赞:(0)

目录

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

二、行内元素有哪些?块级元素有哪些?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后面,并且两者使用"?"连接,而各个变量之间使用"&"连接。Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。
  • 3、Get是不安全的,因为在传输过程,数据被放在请求的URL中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
  • 4、Get传输的数据量小,这主要是因为受URL长度限制。而Post可以传输大量的数据,所以在上传文件只能使用Post(当然还有一个原因,将在后面的提到)。
  • 5、Get限制Form表单的数据集的值必须为ASCII字符。而Post支持整个ISO10646字符集。
  • 6、Get是Form的默认方法。

五、html5 离线存储

Html5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作。

Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中管理manifest文件,那么静态文件服务器是个不错的选择。

六、CSS盒模型原理

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
  • 1、W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
  • 2、IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。 

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

  • visibility:hidden隐藏,但在浏览时保留位置
  • display:none视为不存在,且不加载

八、jQuery是什么?

jQuery是javascript编写一个可重用的JavaScript库。

不使用jQuery设置UI文本的JavaScript代码如下:

document.getElementById("txt1").value = "hello"; 

用jQuery类库后的的JavaScript代码如下:

$("#txt1").val("Hello"); 

可见,在使用jQuery类库后的JavaScript代码明显简洁了很多,也更符合IT行业特点:短、平、快。

九、jquery与JavaScript的关系和区别

关系:

  • JavaScript:是一门Web最流行的脚本语言。
  • jQuery: 是一个优秀的Javascript框架。它是轻量级的js库

区别:    

  •  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
  •  JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

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

jQuery的语法结构可以分为四部分:

  • 1、默认情况下,所有Jquery的命令开始以一个"$"符号。
  • 2、其次是HTML元素的选择。例如下面是我们通过ID"txt1"选择一个HTML文本框。
  • 3、接着由点(.)分隔。这个操作者将分离的元素和该元素的动作(函数)。
  • 4、最后什么样的函数(动作)。

十一、在jQuery中,"$"符号代表什么?

在jQuery中,"$"符号是一个jQuery的别名,默认的jQuery类库以$开头

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

    1.id选择器( # myid)
    2.类选择器(.myclassname)
    3.标签选择器(div, h1, p)
    4.相邻选择器(h1 + p)
    5.子选择器(ul > li)
    6.后代选择器(li a)
    7.通配符选择器( * )
    8.属性选择器(a[rel = "external"])
    9.伪类选择器(a:hover, li:nth-child)

   可继承的样式: font-size font-family color, UL LI DL DD DT;

  不可继承的样式:border padding margin width height ;

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

  block         像块类型元素一样显示。
  none          此元素不会被显示。
  inline-block  像行内元素一样显示,但其内容像块类型元素一样显示。
  list-item     像块类型元素一样显示,并添加样式列表标记。
  table         此元素会作为块级表格来显示
  inherit       规定应该从父元素继承 display 属性的值

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

 absolute
    生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位。
 fixed (老IE不支持)
    生成绝对定位的元素,相对于浏览器窗口进行定位。
 relative
    生成相对定位的元素,相对于其正常位置进行定位。
 static
    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
  inherit
    规定从父元素继承 position 属性的值

十五、 谈谈This对象的理解

  • this总是指向函数的直接调用者(而非间接调用者);
  • 如果有new关键字,this指向new出来的那个对象;
  • 在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window;

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

       v-showv-if指令的共同点和不同点

  • 相同点:都可以控制dom元素的显示和隐藏

  • 不同点:v-show只是改变display属性,dom元素并未消失,切换时不需要重新渲染页面

  • v-if直接将dom元素从页面删除,再次切换需要重新渲染页面

十七、js的基础数据类型

  • js中有5种数据类型:Undefined、Null、Boolean、Number和String。 

网站公告

今日签到

点亮在社区的每一天
去签到