前端测试题(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>和标签上

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地址栏发送

  1. 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属性设置。