牛客编程题零基础入门前端之73题（html，css，ES5，WebAPI）
Posted 小哈里
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了牛客编程题零基础入门前端之73题（html，css，ES5，WebAPI）相关的知识，希望对你有一定的参考价值。
【牛客编程题】零基础入门前端之73题
做题链接：https://www.nowcoder.com/exam/oj?page=1&tab=html%2FCSS&topicId=260
文章目录
- 01 HTML
- 02 CSS
- 03 ES5
- FED20 基本数据类型检测
- FED21 检测复杂数据类型
- FED22 数据类型转换
- FED23 阶乘
- FED24 绝对值
- FED25 幂
- FED26 平方根
- FED27 余数
- FED56 数组求和
- FED69 完全等同
- FED70 或运算
- FED71 且运算
- FED72 字符串字符统计
- FED28 返回星期数
- FED29 从大到小排序
- FED30 大写字符串
- FED31 对象属性键名
- FED32 对象数字
- FED33 对象字符串
- FED34 去除字符串两端空格
- FED35 输出日期
- FED36 数字取整
- FED37 数组反转
- FED38 数组转字符串
- FED39 数组最大值
- FED40 搜索数字
- FED41 头部插入元素
- FED42 尾部插入元素
- FED43 js-位置查找
- FED44 向下取整
- FED45 整数反转
- FED46 字符串搜索
- FED57 移除数组中的元素
- FED58 移除数组中的元素
- FED59 添加元素
- FED60 删除数组最后一个元素
- FED61 添加元素
- FED62 删除数组第一个元素
- FED63 数组合并
- FED64 添加元素
- FED65 求二次方
- FED66 查找元素位置
- FED68 正确的使用 parseInt
- FED47 函数——参数对象
- FED48 this指向
- 04 WebAPI
- 05 综合练习
01 HTML
FED1 表单类型
<form>
<!-- 补全代码 -->
<input type="password" value="nowcoder">
</input>
<input type="checkbox" checked>
</input>
</form>
FED2 表格结构
<table>
<!-- 补全代码 -->
<caption>nowcoder</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
FED3 图像标签属性
<!-- 补全代码 -->
<img src="路径" title="标题" alt="代替">
FED4 新窗口打开文档
<!-- 补全代码 -->
<a href="http://" target="_blank">标签</a>
FED5 自定义列表
<dl>
<!-- 补全代码 -->
<dt>nowcoder</dt>
<dd>nowcoder</dd>
</dl>
FED73 加粗文字
<p><strong>牛客网</strong>，程序员必备求职神器</p>
FED6 语义化标签
<!-- 补全代码 -->
<header>
<nav>导航</nav>
</header>
FED7 音频媒体标签属性
<!-- 补全代码 -->
<audio controls>
<source src="s.mp3" type="audio/mp3"/>
audio
</audio>
FED8 视频媒体标签属性
<!-- 补全代码 -->
<video controls onerror="a()"></video>
02 CSS
FED9 CSS选择器——标签、类、ID选择器
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div
font-size:20px
div:nth-child(1)
color:rgb(255, 0, 0)
.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>
FED10 CSS选择器——伪类选择器
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
li:nth-child(2n)
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>
FED11 CSS选择器——伪元素
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div::after
content: "";
width: 20px;
height: 20px;
background-color: rgb(255,0,0);
display: block;
</style>
</head>
<body>
<div></div>
</body>
</html>
FED12 按要求写一个圆
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
divborder-radius:50px; border:1px solid #000; width:100px;height:100px;
</style>
</head>
<body>
<div></div>
</body>
</html>
FED13 设置盒子宽高
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.box
width: 100px;
height: 100px;
margin: 10px;
padding: 20px
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
FED74 段落标识
<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>
FED75 设置文字颜色
p
color:red;
FED76 圣诞树
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
float:left;
margin:0 auto;
border:100px solid green;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
margin-left:100px;
.middleBranch
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border:200px solid green;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
.base
/*
* TODO: 树干效果
*/
width: 70px;
height: 200px;
background:gray;
margin-left:165px
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
FED14 浮动和清除浮动
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap
/*补全代码*/
overflow:hidden;
.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>
FED15 固定定位
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box
width: 100px;
height: 100px;
/*补全代码*/
position: fixed;
top: 0;
left: 0;
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
FED18 CSS单位（一）
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box
/*补全代码*/
height:100px;
width:100px
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
FED19 CSS单位（二）
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div
/*补全代码*/
height:100px;
width:100px
</style>
</head>
<body>
<div></div>
</body>
</html>
03 ES5
FED20 基本数据类型检测
function _typeof(value)
// 补全代码
return typeof(value);
FED21 检测复杂数据类型
function _instanceof(left,right)
// 补全代码
return (left instanceof right);
FED22 数据类型转换
function _splice(left,right)
// 补全代码
return String(left)+String(right)
FED23 阶乘
function _factorial(number)
// 补全代码
var sum = 1;
for(var i = 1; i <= number; i++)
sum *= i;
return sum
FED24 绝对值
function _abs(number)
// 补全代码
return number>0 ? number : -number
FED25 幂
function _pow(number,power)
// 补全代码
var sum = 1;
for(let i = 1; i <= power; i++)
sum *= number;
return sum;
FED26 平方根
function _sqrt(number)
// 补全代码
return Math.sqrt(number);
FED27 余数
function _remainder(value以上是关于牛客编程题零基础入门前端之73题（html，css，ES5，WebAPI）的主要内容，如果未能解决你的问题，请参考以下文章