wbe口试高频题

1. 列举图像标签的常用属性及其含义。

图像标签 <img>

常用属性：

src 图像路径（必选）

alt 图像的替代文字

title

鼠标悬停提示文字

width 图像宽度

height

图像高度

2. 列举常用的行内元素和块元素并简述各自的显示特点。

行内元素： <span>

<a>

显示特点：

1 ）在页面中不独占一行，可以与其他行内元素共入一行。如果一行不能容纳下的行内元素，

会在下一行继续从左到右排。

2 ）宽度和高度默认由内容撑开

3 ）无法通过 CSS 设置宽高

块元素： <p> <h1>~<h6>

显示特点：

1 ）在页面中独占一行，不会与任何元素共用一行，从上到下排列。

2 ）宽度默认是父元素的宽度，高度默认由内容撑开。

3 ）可以通过 CSS 设置宽高。

3. 简述列表的分类及其使用场景。

HTML 列表分为有序列表 <ol> 和无序列表 <ul> ，列表项使用 <li> 标签。

有序列表 <ol> 适用于有序的信息，如排行榜、条款、步骤、试卷、问卷选项等，常用于显示

有序编号的内容。

无序列表 <ul> 适用于不分顺序的信息，如新闻列表、导航链接、提供相关信息等，常用于显

示带有项目符号的内容。

自定义列表 <dl><dt><dd> 适用于对术语或名词进行解释和描述，如图文混排、页面底部导

航等，常用于一个标题下有一个或者多个列表项的情况。

4. 简述表单的使用场景及组成。

表单是 HTML5 的重要部分，主要用于采集和提交用户输入的信息，然后将表单数据返回服

务器，主要用于登录或查询，实现 Web 搜索、注册、登录等功能。

表单由表单域 <form> 和表单元素 <input> 、 <select> 、 <textarea> 等组成。

5. 列举在 HTML 中引入 CSS 的几种方式，说明各自的特点。

1 ）行内样式：在标签中使用 style 属性引入 CSS 样式

优点

优先级较高

缺点

样式与结构冗余

2 ）内部样式： CSS 代码写在 <head> 内的 <style> 标签中

优点

样式与结构部分分离，方便在同页面中修改样式

缺点

不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 3 ）外部样式：将样式表编写到外部的 CSS 文件中，然后通过 <link> 标签将外部文件引入

优点

样式与结构彻底分离，方便在多页面间共享复用代码及维护（推荐使用）

6. CSS 基本选择器有哪几种，并举例说明

标签选择器：通过标签名，找到页面中所有这类标签，设置样式。

类选择器：通过绑定 HTML 元素上已设置的 class 标签进行设置对应的 CSS 样式。（常用）

id 选择器：通过绑定 HTML 元素上已设置的唯一 id 标签设置对应的 CSS 样式。（唯一）

交集选择器：找到页面中既能被选择器 1 选中，又能被选择器 2 选中的标签设置样式。（紧

挨着）

并集选择器：找到选择器 1 和选择器 2 选中的标签，设置样式。（逗号）

后代选择器：选中某个父级下对应的所有子级，并针对子级设置 CSS 样式。（空格）

通配符选择器：可以选中所有的 HTML 标签（星号 * ）

7. CSS 的高级选择器有哪几种，并说明各自的特点

属性选择器：选中在 HTML 中满足指定属性的元素（）

关系选择器：根据 HTML 标签的嵌套关系选择满足条件的元素

结构伪类选择器：根据元素在 HTML 中的结构关系查找元素，能够减少对 HTML 中类的依赖。

链接伪类选择器：选中超链接的不同状态设置 CSS 样式。（顺序： LVHA ）

伪元素选择器：使用伪元素在网页中创建内容，一般页面中非主体内容可以使用伪元素。

8. 简述盒子模型的概念及常用属性

盒子模型是一个用于描述 HTML 和 CSS 中元素布局的概念。在 Web 开发中 , 每个 HTML 元素

都可以看作是一个矩形的盒子 , 这个盒子由内容区域、内边距、边框和外边距组成。

边框（

border ）内边距（

padding ）外边距（ margin ）宽度（ width ）高度（

height ）

9. 盒子模型的解析方式有几种，开发中最常使用的是哪种？

计算盒子大小的模型分为两种，标准盒模型（浏览器默认）和 IE 盒模型（推荐）。

标准盒子模型（

content-box ） : 内容是盒子的边界，元素的宽度 width= 内容宽度

IE 盒子模型（ border-box ）：边框是盒子边界，元素的宽度 width= 内容宽度 + 左右 padding+

左右 border

10. 使用什么方式可以设置元素的显示和隐藏？

方式一： display 属性

隐藏 display:none

显示 display:block

元素隐藏，同时也不占用任何位置，没有大小宽高

方式二： visibility 属性

隐藏 visibility:hidden 显示 visibility:show

元素隐藏，还占有原来的位置（元素的大小依然保持）

11. 简述浮动的定义及作用。

元素的浮动是指设置浮动 float 属性的元素会脱离标准文档流的控制，移动到其父元素中指

定位置的过程。它的作用就是让垂直布局的盒子变成水平布局。

12. 为什么需要清除浮动？

1 ）父盒子没高度

2 ）子盒子浮动了

3 ）影响下面的布局了

13. 解决父级元素坍塌的方法有哪些？简述各方法的优缺点。

1 ）设置父元素的高度

简单，元素固定高会降低扩展性

2 ）浮动元素后面加空 div

简单，空 div 会造成 HTML 代码冗余

3 ）父级添加 overflow 属性

简单，下拉列表框的场景不能用（因为无法显示溢出的部分）

4 ）父级添加 after 伪元素

没有添加额外标签，结构更简单，写法比上面稍微复杂一点，但是基本没有副作用（不

能兼容低版本浏览器），推荐使用。

14. 简述定位的作用以及定位的方式。

定位可以使元素自由摆放在网页的任意位置，一般用于盒子之间的层叠情况。

定位通过 position 属性来设置，其属性值包括 static( 静态定位 ) ，

relative( 相对定位 ) ，

absolute( 绝

对定位 ) ， fixed （固定定位）。

15. 简述实现定位的步骤。

1 ）设置定位方式，属性名： position

2 ）设置偏移值，偏移值设置分为两个方向，水平和垂直

16. 简述相对定位元素的特点。

1 ）相对于自己原来位置进行移动

2 ）设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

3 ）设置相对定位的盒子原来的位置会被保留下来，在网页中占位置

17. 简述绝对定位元素的特点。

1 ）使用了绝对定位的元素以它最近的一个“已经定位”（相对、绝对、固定）的“祖先元

素” 为基准进行偏移。如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

2 ）绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

3 ）元素位置发生偏移后，它原来的位置不会被保留下来，在网页中不占位置

18. 简述固定定位的特点

1 ）相对于浏览器可视区域进行移动

2 ）跟父元素没有任何关系

3 ）不随滚动条滚动

19. 简述子绝父相的含义

1 ）子级绝对定位，不会占有位置，可以放到父盒子里面的任何位置，不会影响其他的兄弟

盒子。 2 ）父盒子需要加定位限制子盒子在父盒子内显示。

3 ）父盒子布局时，需要占有位置，因此父元素只能是相对定位。

20. 不同布局方式以及不同定位元素之间的层级关系是怎样的?

· 不同布局方式元素的层级关系

标准流 < 浮动 < 定位

· 不同定位之间的层级关系

相对、绝对、固定定位的默认层级相同

HTML 中写在下面的元素层级越高，会覆盖上面的元素

21. animation 实现动画需要设置两个部分，分别是什么？

1 ）使用 @keyframes 定义关键帧（类似定义类选择器）

2 ）用 animation 调用 @keyframes 声明的关键帧让元素使用动画