html

基本标签

1、表单类型

请依次写出以下类型的输入框。

类型为密码，默认值为"nowcoder"
类型为复选框，且状态为已勾选

<form>
    <!-- 补全代码 -->
    <input type="password" value="nowcoder">
    <br>
    <input type="checkbox" checked>
    
</form>

2、表格结构

请写出具有表格标题为"nowcoder"的2行3列表格结构。

<table>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

3、图像标签属性

请写出具有标题属性和代替文本属性的图片标签。

<img src="地址" title="标题属性" alt="代替文本属性">

4、新窗口打开文档

请写出可以在新窗口打开文档的a标签。

<a href="#" target="_blank"></a>

5、自定义列表

请写出列表项为"nowcoder"且列表项内容也为"nowcoder"的自定义列表。

自定义列表的结构为dl包裹dt包裹dd

dl是自定义列表的整体，用于包裹dt和dd

dt是表示自定义列表的主题，（也就是列表项）

dd是表示针对自定义列表主题的每一项内容，（也就是列表项内容）

<dl>
    <!-- 补全代码 -->
    <dl>
        <dt>nowcoder</dt>
        <dd>nowcoder</dd>
    </dl>
    
</dl>

5、加粗文字

使用一个标签将“牛客网”三个字加粗显示

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
</head>

<body>
    <!-- 填写标签 -->
    <p><strong>牛客网</strong>，程序员必备求职神器</p>
    <script type="text/javascript">
        // 填写JavaScript
    </script>
</body>

</html>

另一种方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <p>牛客网，程序员必备求职神器</p>
    <script type="text/javascript">
        // 填写JavaScript
        (function(w,d){
        let p = document.querySelector('p');
        p.innerHTML = `<strong>牛客网</strong>${p.innerText.replace(/牛客网/,'')}`})(window,document)
    </script>
</body>

2、语义化标签

请使用语义化标签创建头部标签且包含导航标签。
注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。

header头部标签，nav导航标签

<html>
    <header>
        <nav></nav>
    </header>
</html>

3 媒体标签

1、音频媒体标签属性

请写出具有控件功能的音频媒体标签。

<audio controls="controls"></audio>

audio标签常见的属性

属性	值	描述
autoplay	autoplay	音频在就绪后，马上播放
controls	controls	具有控件功能，如播放按钮
loop	loop	当音频结束时，重新开始播放
src	url	音频的url

2、video视频媒体标签属性

请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。

<video onerror="myError()"></video>

video常见的属性值

属性	值	描述
autoplay	autoplay	视频在就绪后，马上播放
controls	controls	具有控件功能，如播放按钮
width	pixels	设置播放器的宽度
heigth	pixels	设置播放器的高度
loop	loop	当音频结束时，重新开始播放
preload	auto（预先加载视频）,none（不应加载视频）	规定是否预加载视频（如果有了autoplay就忽略该属性）
src	url	音频的url
poster	ImgUrl	加载等待的画面图片
muted	muted	静音播放
video标签支持HTML 中的事件属性。
属性	值	描述
---	---	---
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	CSS一旦页面已下载时触发（或者浏览器窗口已被关闭）。

CSS

1 选择器

1、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>

选择器的优先级：优先级 - CSS：层叠样式表 | MDN (mozilla.org)

ID 选择器>类选择器、属性选择器>类型选择器

2、CSS选择器——伪类选择器

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

在css中可以通过伪类选择器:nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

<style>
	li:nth-child(even){
		background:rgb(255, 0, 0);
	}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

或者

li:nth-child(2){
		background:rgb(255, 0, 0);
	}
	li:nth-child(4){
		background:rgb(255, 0, 0);
	}

3、CSS选择器——伪元素

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

<style>
    div::after{
        content:"";
        width:20px;
        height:20px;
        background-color:rgb(255,0,0);
        display:block;
    }
</style>

2 样式设置

1、按要求写一个圆

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：

圆角属性仅设置一个值
圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

<html>
    <head>
        <style>
            div{
                width:100px;
                height:100px;
                border:1px solid black;
                border-radius:50px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

2、设置盒子宽高

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

<style>
    .box{
        width:100px;
        height:100px;
        padding:20px;
        margin:10px;
    }
</style>

3、段落标识

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。” （1）dom元素操作：

let te = document.querySelector('body');
te.innerHTML = '<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>'

（2）dom节点操作：

//创建元素节点
        let d = document.createElement('p');
        //创建文本节点
        let t = document.createTextNode('牛客网是一个专注于程序员的学习和成长的专业平台。');
        //给元素p添加文本节点
        d.appendChild(t);
        //将p元素节点追加为body元素的子节点
        document.body.appendChild(d);

4、设置文字颜色

请使用嵌入样式将所有p标签设置为红色文字

p{
        color:red;
       }

另一种方法

（1）document.head返回当前文档中的 <head> 元素。如果有多个 <head> 元素，则返回第一个。

（2）Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

（3）Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

（4）Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

let h = document.head;
let style = document.createElement('style');
style.type = "text/css";
style.innerHTML = "p{color:rgb(255,0,0);}";
h.appendChild(style);

5、圣诞树

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：

"topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
"middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
"base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
上枝叶、树干的居中都是通过左外边距实现的
没有显示的边框，其属性都是透明（属性）
仅通过border属性完成边框的所有属性设置
效果如下：

<style type="text/css">
    .topbranch {
        width: 0px;
        height: 0px;
        border-bottom:100px solid green;
        border-top:100px solid transparent;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
        float:left;
        /*
        * TODO: 上枝叶效果
        */

    }
    .middleBranch {
        width: 0px;
        height: 0px;
        border-bottom:200px solid green;
        border-top:200px solid transparent;
        border-left:200px solid transparent;
        border-right:200px solid transparent;
        float:left;
        /*
        * TODO: 中枝叶效果
        */

    }
    .base {
        /*
        * TODO: 树干效果
        */
        width:70px;
        height:200px;
        background:gray;
        float:left;
        margin-left: 165px;

    }
</style>

3 布局

1、浮动和清除浮动

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。

利用BFC清除浮动 .清除浮动与BFC

<style>
	.wrap{
		overflow: hidden;
	}
	.left{
		width: 100px;
		height: 100px;
		float:left;
	}
	.right{
		width:100px;
		height:100px;
		float:left;
	}
</style>

<div class='wrap'>
	<div class='left'></div>
	<div

2、固定定位

请将html模块类为"box"的div元素固定在视口的左上角。

固定定位是元素固定于浏览器可视区的位置。（认死理型）主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

2.固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）完全脱标—— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；

跟父元素没有任何关系；单独使用的不随滚动条滚动。

<style>
    .box{
        width:100px;
        height:100px;
        position:fixed;
        left:0px;
        top:0px;
    }
</style>
<div class='box'></div>

4 CSS单位1

1、CSS单位1

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

<style>
    .box{
        width:4em;
        height:4em;
    }
</style>

2、CSS单位2

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。

<style>
    div{
        width:4rem;
        height:4rem;
    }
</style>

3 ES5

1 数据类型

1、基本数据类型检测

请补全JavaScript函数，要求以字符串的形式返回参数的类型。
注意：只需检测基本数据类型。

typeof(value)得到的是字符串

function _typeof(value) {
    // 补全代码
    return typeof(value)
}

2、检测复杂数据类型

请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

function _instanceof(left,right) {
    // 补全代码
    return Boolean(left instanceof right)
}

3、数据类型转换

请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
示例：

_splice(223,233) -> "223233"
_splice(-223,-233) -> "-223-233"

function _splice(left,right) {
    // 补全代码
    // return left + String(right) ;
    return left+''+right;
}

2 运算符

1、阶乘

请补全JavaScript函数，要求返回数字参数的阶乘。
注意：参数为大于等于0的整数。

function _factorial(number) {
    // 补全代码
    if(number===1)
    {
        return 1
    }
    else{
        return number*_factorial(number-1)
    }
}

2、绝对值

请补全JavaScript函数，要求返回数字参数的绝对值。

function _abs(number) {
    // 补全代码
    return number>=0?number:-number;
}

3、幂

要求返回底数为第一个参数，幂为第二个参数的数值。

function _pow(number,power) {
    // 补全代码
    return Math.pow(number,power);
}

4、平方根

要求返回数字参数的平方根。

function _sqrt(number) {
    // 补全代码
    return Math.sqrt(number);
}

5、余数

要求返回数字参数除以2的余数。

function _remainder(value) {
    // 补全代码
    return value%2;
}

3 流程控制

1、返回星期数

请补全JavaScript函数，要求以字符串的形式返回数字参数所对应的星期。
示例：

_getday(1) -> "星期一"
_getday(7) -> "星期天"

function _getday(value) {
    // 补全代码
    switch(value){
        case 1:
            return '星期一'
        case 2:
            return '星期二'
        case 3:
            return '星期三'
        case 4:
            return '星期四'
        case 5:
            return '星期五'
        case 6:
            return '星期六'
        case 7:
            return '星期天'
    }
}

4 内置对象

1、从大到小排序

要求将数组参数中的数字从大到小进行排序并返回。

function _sort(array) {
    // 补全代码
    return array.sort((pre,now)=>{
        return now-pre;
    });
}

2、大写字符串

要求将字符串参数转换为大写字符串并返回。

function _touppercase(string) {
    // 补全代码
    return string.toUpperCase()
}

3、对象属性键名

要求以数组的形式输出对象各个属性的键名。
示例：

_keys({name:'nowcoder',age:7}) -> ['name','age']
注意：只需考虑对象属性均为原始数据类型的情况。

Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组

function _keys(object) {
    // 补全代码
    return Object.keys(object)
}

4、对象数字

要求将数字参数转换为对象的形式返回。
示例：

typeof number === 'number' -> typeof _numbertoobject(number) === 'object'

当 Number 作为构造函数调用（使用 new）时，它创建一个 Number 对象，并不是原始值。当 Number 作为普通函数调用时，它将参数强制转换为数值原始值。BigInt 被转换为数值。如果值不能转换，则返回 NaN。

function _numbertoobject(number) {
    // 补全代码
    if(typeof number==='number')
    {
        return new Number(number);
    }
}

5、对象字符串

要求将字符串参数转换为对象的形式返回。
示例：

typeof string === 'string' -> typeof _stringtoobject(string) === 'object'

function _stringtoobject(string) {
    // 补全代码
    if(typeof string==='string')
    {
        return new String(string)
    }
}

6、去除字符串两端空格

要求去除参数字符串两端的空格并返回。

^ 表示字符串必须以后面的规则开头 \s 表示空格， * 表示有0个或多个

(^\s*) 的意思就是：以0个空格或者多个空格开头

|表示或的意思 $ 表示字符串必须以前面的规则结尾

(\s*$) 的意思就是：以0个空格或者多个空格结尾

/…/g 是正则表达式的属性, 表示全文匹配, 而不是找到一个就停止

function _trim(string) {
    // 补全代码
    return string.replace(/^\s*|\s*$/g,'');
}

另一种方法

String 的 trim() 方法会从字符串的两端移除空白字符，并返回一个新的字符串，而不会修改原始字符串。要返回一个仅从一端修剪空白字符的新字符串，请使用 trimStart() 或 trimEnd()。

function _trim(string) {
    // 补全代码
    // return string.replace(/^\s*|\s*$/g,'');
    return string.trim()
}

7、输出日期

要求以字符串的形式输出时间戳参数所对应的"年-月-日"。
示例：

_date(1631159776311) -> '2021-9-9'

function _date(number) {
    // 补全代码
    let date = new Date(number);
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    // return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
}

8、数字取整

要求返回数字参数的整数部分。

function _int(value) {
    // 补全代码
    //写法一： parseInt()函数解析字符串并返回整数。
    return parseInt(value)
    //写法二：Math.floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
    // return Math.floor(value)
    //写法三：~ 是按位取反运算符，两个 ~ 就是按位取反后再取反，这里相当于 Math.floor()，效率会要高一点
    // return ~~value;
}

9、数组反转

要求将参数数组反转之后返回。

function _reverse(array) {
    // 补全代码
    return array.reverse();
}

10、数组转字符串

要求将参数数组转换为字符串输出。
示例：

_join([1,'2',3]) -> "123"
注意：只需考虑一维数组且数据类型为原始数据类型。

function _join(array) {
    // 补全代码
    // return array.join('')
    return array.toString().replace(/,/g,'')
}

11、数组最大值

要求找到数组参数中的最大值并返回。注意：数组中只包含数字。

function _max(array) {
    // 补全代码
    return Math.max(...array);
}

12、搜索数字

要求以boolean的形式返回字符串参数中是否包含数字。

\D:类似[^0-9] 非数字
/g：全局

/表达式内容/参数

function _search(string) {
    // 补全代码
    // return /\d/g.test(string)
    // for(var i=0;i<10;i++)
    // {
    //     if(string.indexOf(i)!=-1){
    //         return true
    //     }
    // }
    // return false
    for(let i=0;i<string.length;i++)
    {
        if(typeof(Number(string[i]))==='number')
        {
            return true
        }
    }
    return false
}

13、头部插入元素

要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回。

function _unshift(array,value) {
    // 补全代码
    // array.unshift(value);

    // array.reverse().push(value);
    // return array.reverse();

    let len = array.length;
    array.len += 1;
    for(let i in array)
    {
        array[len - i] = array[len - i - 1];
    }
    array[0] = value;
    return array;
}

14、尾部插入元素

要求将第二个参数插入第一个参数数组的尾部，并且以数组的形式返回。

function _push(array,value) {
    // 补全代码
    // array.push(value);
    // return array;

    // return [...array,value]

    let temp = [...array,value];
    array.length = 0;
    temp.forEach(item=>{
        array.push(item)
    })
    return array;    
}

15、js-位置查找

要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。
注意：如果数组中不存在目标值，则返回-1。

function _indexof(array,value) {
    // 补全代码
    // 1
    // for(let i in array)
    // {
    //     if(array[i]===value)
    //     {
    //         return +i;
    //     }
    // }
    // return -1;

    // 2
    return array.indexOf(value);
}

16、向下取整

要求以数字的形式返回数字参数向下取整的结果。

Math.floor() 函数总是返回小于等于一个给定数字的最大整数。 Math.trunc() 方法会将数字的小数部分去掉，只保留整数部分。

function _floor(number) {
    // 补全代码
    // 1 floor()
    // return Math.floor(number);

    // 2
    // return Math.trunc(number);

    // 3
    let arr = number.toString().split(".");
    return +arr[0];
}

17、整数反转

请补全JavaScript函数，要求将整数参数反转之后输出。
示例：

_reverse(0) -> 0
_reverse(233) -> 332
_reverse(-223) -> -322

function _reverse(number) {
    // 补全代码
    let tempt = (number+'').split('');
    return number<0?(-1)*parseInt(tempt.reverse().join('')):parseInt(tempt.reverse().join(''))
}

18、

牛客刷题——前端基础

html

基本标签

1、表单类型

2、表格结构

3、图像标签属性

4、新窗口打开文档

5、自定义列表

5、加粗文字

2、语义化标签

3 媒体标签

1、音频媒体标签属性

2、video视频媒体标签属性

CSS

1 选择器

1、CSS选择器——标签、类、ID选择器

2、CSS选择器——伪类选择器

3、CSS选择器——伪元素

2 样式设置

1、按要求写一个圆

2、设置盒子宽高

3、段落标识

4、设置文字颜色

5、圣诞树

3 布局

1、浮动和清除浮动

2、固定定位

4 CSS单位1

1、CSS单位1

2、CSS单位2

3 ES5

1 数据类型

1、基本数据类型检测

2、检测复杂数据类型

3、数据类型转换

2 运算符

1、阶乘

2、绝对值

3、幂

4、平方根

5、余数

3 流程控制

1、返回星期数

4 内置对象

1、从大到小排序

2、大写字符串

3、对象属性键名

4、对象数字

5、对象字符串

6、去除字符串两端空格

7、输出日期

8、数字取整

9、数组反转

10、数组转字符串

11、数组最大值

12、搜索数字

13、头部插入元素

14、尾部插入元素

15、js-位置查找

16、向下取整

17、整数反转