html5css3选择题,前端测试题(HTML5CSS3)参考答案
前端测试题(HTML5/CSS3)参考答案
每题5分,共20题, 总分100
选做题, 做错不扣分, 做到+10分
快动⼿看看⾃⼰能考多少吧
1. HTML5部分
1.1 HTML5常⽤的结构标签有哪些,它替代了之前哪些标签
,,,, ,,
,
,
,...
1.2 HTML⽂档采⽤UTF-8编码集的优势是什么
utf-8:使⽤3个字节表⽰⼀个符号, 基本上可以覆盖世界上所有语⾔
与传统的gb2312,gbk相⽐,可识别的字符集更多, 也是⾏业界推荐
css选择器分为哪几类
1.3 标签中最常⽤的四⼤属性是什么
id, class, title, style
这四个属性,⼏乎每个html标签都会有, 需要特别关注
1.4 标签中的title与alt属性的区别是什么
title: 是标签的描述, 当⿏标移⼊时,稍等会出现这个描述信息
alt: ⽤在可置换元素上, 当外部资源⽆法正确加载时, 这个信息会显⽰在该占位符上
1.5 标签中的href 与 src属性有什么区别
⼆者都是对外部资源的引⽤
href: ⽤于超⽂本或样式,⽤在和标签上
src: ⽤在外部资源占位标签上,如,,
1.6 什么是置换元素和⾮置换元素,每种类型⾄少举出⼆个案例
置换元素的内容来⾃外部, 该元素仅是外部资源的占位符,如,,...
⾮置换元素内容来⾃当前⽂档,必须使⽤双标签,如
,
-
,
...
1.7 iframe标签主要功能是什么, 有什么优缺点
优点: 当前页⾯,直接加载其它页⾯, ⽽不必发⽣跳转
缺点: 框架中的内容不会被搜索引擎读取, 且会增加过多的HTTP请求,影响页⾯载⼊速度1.8
标签中的name属性与表单控件,如中的name有何不同
中的name属性, 与它的id是⼀样的,⽤来唯⼀标识该标签
表单控件中的name属性, 是提供给服务器端应⽤程序读到表单数据的变量名
1.9 表单中的按钮有⼏种, 常⽤的标签有哪⼏个
按钮有三种: 普通按钮, 提交按钮, 重置按钮
,,,
1.10 ⽆序列表与有序列表是否可以互相替代, 使⽤的属性是什么
type
1.11 表单数据的提交⽅式有⼏种, 分析使⽤场景(选做)
POST: 表单数据通过请求体发送
GET: 表单数据通过URL地址栏发送
2. CSS3部分
2.1 外部样式表,内部样式表,⾏内样式声明各⾃的使⽤场景是什么
外部样式表: 适于所有引⽤该CSS的HTML⽂档
内部样式表: 仅适⽤于当前HTML⽂档
⾏内样式表: 仅适⽤于当前HTML元素
2.1 @import指令有什么⽤处, 应该⽤在哪⾥, 有哪些限制
仅允许⽤在 CSS ⽂档中
必须位于 CSS ⽂档的⾸⾏
2.3 什么是块级元素, ⾏内元素, ⾏内块元素, 并举例
块级元素: 默认垂直排列,如
,
...
⾏内元素: 默认⽔平排列, 如,, ...
2.4 简单选择器有⼏种, 写出基本语法形式
元素: body {...}
ID: #active {...}
类: .red {...}
属性: [title]
组: h1,h2,h3 {...}
通配: div * {...}
2.5 结构(上下⽂)选择器有⼏种, 并举例说明
后代: main div {...}
⼦元素: section > span {...}
同级相邻: div + p {...}
同级所有: div ~ p {...}
2.6 :nth-child(n)和:nth-of-type(n)
:nth-child(n): 只与位置关联
:nth-of-type(n): 与位置和类型均关联
2.7 :nth-child(n)和:nth-of-type(n)中的参数n的使⽤规则
⽤在字⾯量中, 从1开始, 如: :nth-child(3)
⽤在表达式中, 从0开始, 如: :nth-child(2n+1)
允许负值
2.8 弹性盒⼦(FlexBox)解决CSS中的布局中的什么问题,最适合⽤在哪⾥解决了传统布局中的元素垂直对齐, 以及响应式布局的问题
主要⽤于跨设备的页⾯布局,特别适合响应式,如移动端
2.9 弹性元素flex属性的常⽤值,与对应的值组合有哪些,并⼀⼀说明initial,auto, content, 数值
默认值: flex: 0 1 auto
flex: flex-grow flex-shrink flex-basis
各种组合,如flex: 1 1 auto; 等价于: flex: auto,...
2.10 vh/vw单位,与auto, 100%有什么区别
vh/vw: 视⼝⼤⼩占⽐, 与设备相关
auto: 为默认值, 通常与设备⽆关
100%: ⾃知识⽗容器⼤⼩
2.11 (选做)为什么align-content只能⽤在多⾏弹性容器中
单⾏容器中, 交叉轴上可使⽤align-items属性设置。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。