html笔试题与答案,HTML阶段笔试题-附答案(示例代码)

问题：请分别写出HTML中块标签、行标签以及行块标签的特点。(10分)

本题目的：清晰掌握行标签、块标签、行块标签的区别

答案：

块级元素：

(1)独占父级元素一行(0.75分)

(2)默认宽度为父级元素宽度的100%(0.75分)

(3)默认高度由内容撑开(0.75分)

(4)可以设置宽高(0.75分)

(5)可以任意嵌套(p标签不能嵌套块标签)(0.75分)

行级元素：

(1)可在一行显示，一行显示不下时，自动切换到下一行(0.75分)

(2)不可以设置宽度和高度(input和img除外)(0.75分)

(3)宽度和高度由内容撑开(0.75分)

(4)设置上下外边距无效(0.75分)

(5)不能嵌套块标签，其中a标签不能嵌套a标签(0.75分)

行块级元素：

(1)在一行显示(0.5分)

(2)默认宽度和高度由内容撑开(0.5分)

(3)可以设置宽度和高度(0.5分)

(4)换行被解析为空格(0.5分)

问题：说出学过的选择器有哪些？并举例说明。(10分，少答一个扣2分，全答对满分)

本题目的：对学过的选择器，有清晰的了解

答案：

(1)标签名选择器,例：div{}

(2)id选择器,例：#div{}

(3)类选择器,例：.div{}

(4)后代选择器,例：div a{}

(5)群组选择器,例：div,a{}

(6)通配符选择器,例：*{}

问题：关于背景都有哪些样式？写出样式并说明该样式的意思和可设置的值类型，至少写出五个；(10分,写出一个样式得1分，样式的意思0.5分,可设置的值类型0.5分)

本题目的：掌握背景样式

答案：

(1)background-color：背景颜色，可设置的值有英文颜色单词、十六进制颜色码、rgb值和rgba值。

(2)background-image：背景图片，可设置的值为url().括号内为图片的路径。

(3)background-size：背景尺寸，可设置的值有px、百分比

(4)background-position：背景位置，可设置的值有px、百分比、具体方位(right、left、center、top、bottom)

(5)background-repeat：背景平铺方式，可设置的值有no-repeat不平铺、repeat-x横向平铺、repeat-y纵向平铺

(6)background-attachment：背景是否跟随页面移动，可设置的值有scroll默认值跟随、fixed不跟随

问题：关于文本都有哪些样式？写出样式并说明该样式的意思和可设置的值类型至少写出五个;(10分,写出一个样式得1分，样式的意思0.5分,可设置的值类型0.5分)

本题目的：掌握文本样式

答案：

(1)text-decoration：文本修饰，可设置的值有underline下划线、overline上划线、linethrough删除线、none无文本修饰。

(2)text-align：文本横向对齐方式，可设置的值有left左对齐、center中间对齐、right右对齐

(3)text-indent：文本缩进，可设置的值有px、em、百分比

(4)line-height：文本行间距，可设置的值为px、em、百分比

问题：关于字体都有哪些样式？写出样式并说明该样式的意思和可设置的值类型。(10分,写出一个样式得1分，样式的意思0.5分,可设置的值类型0.5分)

本题目的：掌握字体样式

答案：

(1)font-size：字体尺寸，可设置的值有px、em

(2)font-family：设置字体，可设置的值为字体名字

(3)font-style：字体风格，可设置的值有italic斜体、oblique倾斜

(4)font-weight：字体粗细，可设置的值为bold加粗、bolder更粗、lighter更细、100-900的粗细范围

(5)color：字体颜色，可设置的值有英文代码、十六进制颜色码、rgb值和rgba值

问题：什么是盒模型？说出盒模型的组成及内外边距使用场景(10分)

本题目的：考察盒模型结构掌握，以及宽高的计算

答案：

CSS盒子模型就是在网页设计中，把所有的页面元素都看作盒子。(2分)

它包括：外边距(Margin)(1分)，边框(border)(1分)，内边距(padding)(1分)，和实际内容(content)(1分)

使用场景：

(1)兄弟元素之间的距离用外边距margin(2分)

(2)父子之间的距离用内边距padding(2分)

浮动元素的特点以及应用场景。(10分)

本题目的：掌握浮动元素的特点，明确浮动元素与其他元素的区别

答案：

浮动元素的特点：(8分)

(1)元素之间没有间隙

(2)元素脱离文档流

(3)文字会环绕浮动元素

(4)可以设置宽高

应用场景：(2分)

(1)块标签在一行显示(2)左右布局(3)文字包围图片

问题：说出清除浮动的方式有哪些？(10分)

本题目的：对清除浮动方式的掌握，并了解为什么要清除浮动

答案：

1.给连续浮动元素后添加一个兄弟标签,只设置样式clear:both

2.给父级div定义overflow不为visible，可以是hidden、scroll、auto

3.给父级div定义display：inline-block;

4.给父级div定义position不为relative，可以是absolute、fixed

5.给父级div定义float

问题：定位都有哪些？并说明定位基准、特点及应用场景。(10分)

本题目的：对定位的掌握，并了解为什么要用定位

答案：

1.position:fixed;固定定位，永远根据浏览器进行定位。

特点：(1)不在文本流(2)内容撑开宽高(3)可以设置宽高和纵向外边距

应用场景：广告、侧边栏、导航栏等固定布局

(3.5分)

2.position:absolute;绝对定位，根据祖辈级上一个定位元素，进行定位,如果祖辈级没有定位元素，则根据浏览器进行定位

特点：(1)不在文本流(2)内容撑开宽高(3)可以设置宽高和纵向外边距

应用场景：重叠布局

(3.5分)

3.position:relative;相对定位，根据自身定位。

特点：(1)在文本流(2)属性特点不变

应用场景：(1)给绝对定位做定位基准(2)微调

(3分)

问题：css3变换的属性是什么？变换有哪些方式，并写出实现代码？(10分)

本题目的：掌握变换的属性和方式

答案：

变换属性： transform变换(2分)

变换方式：translate移动(1分)、rotate旋转(1分)、scale缩放(1分)、skew倾斜(1分)

实现代码：

transform：translate(x,y);(1分)

transform：rotate(deg);(1分)

transform：scale(缩放比例);(1分)

transform：skew(deg);(1分)

问题：设置元素进行3d变换的准备工作是什么？(10分)

本题目的：掌握开3D和景深

答案：

transform-style属性，值为preserve-3d(5分)

perspective属性，值为像素值(5分)

问题：动画分别有哪些样式？都是什么意思？并说出默认值(10分)

本题目的：掌握引入方式，明确了解优缺点后，根据情况，开始中使用不同的引入方式

答案：

1.动画名字：animation-name；默认值：无

2.动画运行时间：animation-duration；默认值：0s

3.动画的时间函数：animation-timing-function；默认值：ease

4.动画的延迟时间：animation-delay；默认值：0s

5.动画播放次数：animation-iteration-count；默认值：1

6.动画播放顺序：animation-direction；默认值：alternate-reverse

7.动画结束状态：animation-fill-mode；默认值：backwards

8.动画播放状态：animation-play-state；默认值：running

问题：box-shadow：3px 4px 5px 5px red; 和text-shadow：3px 4px 5px black; 分别代表什么意思？(10分)

本题目的：掌握阴影复合样式属性的顺序和代表的含义

答案：

盒子阴影：阴影横向偏移3像素 阴影纵向偏移4像素 阴影模糊距离5像素 阴影在盒子本身增加的尺寸 红色阴影(5分)

文字阴影：阴影横向偏移3像素 阴影纵向偏移4像素 阴影模糊距离5像素 黑色阴影(5分)

问题：弹性布局学过哪些样式？分别什么意思？可以设置的值有哪些(10分)

本题目的：掌握弹性布局

答案：

(1)主轴的方向：flex-direction；可设置的值：row、column、row-reverse、column-reverse;

(2)主轴放不下是否换行：flex-wrap；可设置的值：wrap、nowrap、wrap-reverse；

(3)主轴对齐方式：justify-content；可设置的值：flex-start、flex-end、center、space-around、space-between；

(4)交叉轴对齐方式：align-items；可设置的值：flex-start、flex-end、center、stretch；

(5)多根主轴时，交叉轴的对齐方式：align-content；可设置的值：flex-start、flex-end、center、stretch；

(6)定义元素的显示顺序：order；可设置的值：数字用来定义子集

(7)让单个子元素有不同的对齐方式：align-self；可设置的值：flex-start、flex-end、center、stretch、baseline、auto；