前端测试题 (HTML5/CSS3) 参考答案
每题 5 分, 共 20 题, 总分 100
选做题, 做错不扣分, 做到 +10 分
快入手看看本人能考多少吧
- 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> 和标签上
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 地址栏发送
- CSS3 局部
2.1 内部样式表, 外部样式表, 行内款式申明各自的应用场景是什么
内部样式表: 适于所有援用该 CSS 的 HTML 文档
外部样式表: 仅实用于以后 HTML 文档
行内样式表: 仅实用于以后 HTML 元素
2.1 @import 指令有什么用途, 应该用在哪里, 有哪些限度
仅容许用在 CSS 文档中
必须位于 CSS 文档的首行
2.3 什么是块级元素, 行内元素, 行内块元素, 并举例
块级元素: 默认垂直排列, 如 <div>,<table>,<ul>…
行内元素: 默认程度排列, 如 <span>,, <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 属性设置。