1、FED1 表单类型
请依次写出以下类型的输入框。
- 类型为密码，默认值为”nowcoder”
- 类型为复选框，且状态为已勾选
<input type="password" value="nowcoder"> <input type="checkbox" checked>
2、FED2 表格结构
请写出具有表格标题为”nowcoder”的2行3列表格结构。
<caption>nowcoder</caption> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr>
3、FED3 图像标签属性
请写出具有标题属性和代替文本属性的图片标签。
<img src="" alt="" title="">
4、FED4 新窗口打开文档
请写出可以在新窗口打开文档的a标签。
<a href="" target="_blank"></a>
5、FED5 自定义列表
请写出列表项为”nowcoder”且列表项内容也为”nowcoder”的自定义列表。
<dl> <dt>nowcoder</dt> <dd>nowcoder</dd> </dl>
6、FED6 语义化标签
请使用语义化标签创建头部标签且包含导航标签。 注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。
<header> <nav></nav> </header>
7、FED7 音频媒体标签属性
请写出具有控件功能的音频媒体标签。
<audio src="" controls></audio>
8、FED8 视频媒体标签属性
请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。
<video src="" controls onerror="errfunction()"> <source src="" type=""> </video>
9、FED9 CSS选择器——标签、类、ID选择器
请将html模块中字体内容是”红色”的字体颜色设置为”rgb(255, 0, 0)”，”绿色”设置为”rgb(0, 128, 0)”，”黑色”设置为”rgb(0, 0, 0)”，且字体大小都为20px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div {
color: rgb(255, 0, 0);
font-size: 20px;
}
.green {
color: rgb(0, 128, 0)
}
#black {
color: rgb(0, 0, 0)
}
</style>
</head>
<body>
<div>红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
10、FED10 CSS选择器——伪类选择器
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255, 0, 0)”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 填写样式 */
/* odds是奇数 even是偶数 */
li:nth-child(even) {
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
11、FED11 CSS选择器——伪元素
请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为”rgb(255, 0, 0)”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 填写样式 */
div::after {
content: '';
width: 20px;
height: 20px;
background-color: rgb(255, 0, 0);
display: block;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
12、FED12 按要求写一个圆
请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
- 圆角属性仅设置一个值
- 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 填写样式 */
div {
width: 100px;
height: 100px;
border: 1px solid #000000;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13、FED13 设置盒子宽高
请将html模块类为”box”的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 填写样式 */
.box {
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
14、FED14 浮动和清除浮动
请将类为”left”的div元素和类为”right”的div元素在同一行上向左浮动，且清除类为”wrap”的父级div元素内部的浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.wrap::after {
/*补全代码*/
content: '';
display: block;
clear: both;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float: left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float: left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
15、FED15 固定定位
请将html模块类为”box”的div元素固定在视口的左上角。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
/*补全代码*/
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
16、FED18 CSS单位（一）
请将html模块中类为”box”的div元素的宽度和高度设置为自身字体大小的4倍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box {
/*补全代码*/
height: 4em;
width: 4em;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
17、FED19 CSS单位（二）
请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box {
/*补全代码*/
height: 4rem;
width: 4rem;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
18、FED20 基本数据类型检测
请补全JavaScript函数，要求以字符串的形式返回参数的类型。
注意：只需检测基本数据类型。
<script type="text/javascript">
// 填写JavaScript
function _typeof(value) {
return typeof (value)
}
</script>
19、FED21 检测复杂数据类型
请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。
<script type="text/javascript">
// 填写JavaScript
function _instanceof(left, right) {
return right.prototype === left.__proto__
// return left instanceof right
}
</script>
20、FED22 数据类型转换
请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。 示例： 1. _splice(223,233) – “223233” 2. _splice(-223,-233) – “-223-233”
<script type="text/javascript">
// 填写JavaScript
function _splice(left, right) {
//方法1：
// return `${left}${right}`
//方法2：
//return String(left)+String(right);
//方法3：
//return left+String(right);
//方法4：
return left.toString() + right.toString();
//方法5：
//return left+''+right;
}
</script>
21、FED23 阶乘
请补全JavaScript函数，要求返回数字参数的阶乘。 注意：参数为大于等于0的整数。
<script type="text/javascript">
// 填写JavaScript
function _factorial(number) {
if (number == 1) { return 1 }
return number * _factorial(number - 1);
// if(typeof number !== 'number') return
// if(number < 0) return
// let sum = 1
// for(let i=number;i>0;i--) {
// sum = sum*i
// }
// return sum
}
</script>
22、FED24 绝对值
请补全JavaScript函数，要求返回数字参数的绝对值。
<script type="text/javascript">
// 填写JavaScript
function _abs(number) {
// return Math.abs(number)
return number >= 0 ? number : -number
}
</script>
23、FED25 幂
请补全JavaScript函数，要求返回底数为第一个参数，幂为第二个参数的数值。
<script type="text/javascript">
// 填写JavaScript
function _pow(number, power) {
return Math.pow(number, power)
}
</script>
24、FED26 平方根
/请补全JavaScript函数，要求返回数字参数的平方根。
<script type="text/javascript">
function _sqrt(number) {
// 填写JavaScript
return Math.sqrt(number)
}
</script>
25、FED27 余数
请补全JavaScript函数，要求返回数字参数除以2的余数。
<script type="text/javascript">
// 填写JavaScript
function _remainder(value) {
return value % 2
}
</script>