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 声明的关键帧让元素使用动画
![[每日一题]169：找出最大的可达成数字](http://pic.xiahunao.cn/[每日一题]169：找出最大的可达成数字)
