前端测试题(HTML5/CSS3)参考答案
每题5分,共20题, 总分100
选做题, 做错不扣分, 做到+10分
快动手看看自己能考多少吧
1. HTML5部分
1.1 HTML5常用的结构标签有哪些,它替代了之前哪些标签
<header>
,<nav>
,<main>
,<article>
,<aside>
,<footer>
,<section>
<div class="header">
,<div class="nav">
,<div class="main">
,...
1.2 HTML文档采用UTF-8编码集的优势是什么
utf-8
:使用3个字节表示一个符号, 基本上可以覆盖世界上所有语言与传统的
gb2312
,gbk
相比,可识别的字符集更多, 也是行业界推荐
1.3 标签中最常用的四大属性是什么
id
,class
,title
,style
这四个属性,几乎每个html标签都会有, 需要特别关注
1.4 标签中的title与alt属性的区别是什么
title
: 是标签的描述, 当鼠标移入时,稍等会出现这个描述信息alt
: 用在可置换元素上, 当外部资源无法正确加载时, 这个信息会显示在该占位符上
1.5 标签中的href
与 src
属性有什么区别
二者都是对外部资源的引用
href
: 用于超文本或样式,用在<link>
和<a>
标签上src
: 用在外部资源占位标签上,如<img>
,<iframe>
,<script>
,<video>
...
1.6 什么是置换元素和非置换元素,每种类型至少举出二个案例
置换元素的内容来自外部, 该元素仅是外部资源的占位符,如
<img>
,<video>
,<audio>
...非置换元素内容来自当前文档,必须使用双标签,如
<p>
,<h1> - <h6>
,<ul>
...
1.7 iframe标签主要功能是什么, 有什么优缺点
优点: 当前页面,直接加载其它页面, 而不必发生跳转
缺点: 框架中的内容不会被搜索引擎读取, 且会增加过多的HTTP请求,影响页面载入速度
1.8 <form>
标签中的name
属性与表单控件,如<input>
中的name
有何不同
<form>
中的name
属性, 与它的id
是一样的,用来唯一标识该标签表单控件中的
name
属性, 是提供给服务器端应用程序读到表单数据的变量名
1.9 表单中的按钮有几种, 常用的标签有哪几个
按钮有三种: 普通按钮, 提交按钮, 重置按钮
<input type="button">
,<input type="submit">
,<input type="rest">
,<button>
1.10 无序列表与有序列表是否可以互相替代, 使用的属性是什么
type
1.11 表单数据的提交方式有几种, 分析使用场景(选做)
POST: 表单数据通过请求体发送
GET: 表单数据通过URL地址栏发送
2. CSS3部分
2.1 外部样式表,内部样式表,行内样式声明各自的使用场景是什么
外部样式表: 适于所有引用该CSS的HTML文档
内部样式表: 仅适用于当前HTML文档
行内样式表: 仅适用于当前HTML元素
2.1 @import指令有什么用处, 应该用在哪里, 有哪些限制
仅允许用在 CSS 文档中
必须位于 CSS 文档的首行
2.3 什么是块级元素, 行内元素, 行内块元素, 并举例
块级元素: 默认垂直排列,如
<div>
,<table>
,<ul>
...行内元素: 默认水平排列, 如
<span>
,<a>
,<input>
...
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
属性设置
更多前端开发知识,请查阅 HTML中文网 !!
以上就是php中文网线上班前端(HTML5/CSS3)测试题的详细内容,更多请关注0133技术站其它相关文章!