1. 列举图像标签的常用属性及其含义。
图像标签
<img>
常用属性：
src
图像路径（必选）
alt
图像的替代文字
title
鼠标悬停提示文字
width
图像宽度
height
图像高度
2. 列举常用的行内元素和块元素并简述各自的显示特点。
行内元素：
<span>
<strong> <em>
<a>
显示特点：
1
）在页面中不独占一行，可以与其他行内元素共入一行。如果一行不能容纳下的行内元素，
会在下一行继续从左到右排。
2
）宽度和高度默认由内容撑开
3
）无法通过
CSS
设置宽高
块元素：
<p> <h1>~<h6>
<div> <ul> <li>
显示特点：
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
声明的关键帧让元素使用动画
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
