web考试题目

10个月前更新

500

HTML标签

图片、音频、视频标签

<img>定义图片
<audio>定义音频，controls：显示播放控件
<video>定义视频

<img src="./images/a.png" width="300px">
<audio src="./b.mp3" controls></audio>
<video src="./c.mp4" controls width="400px" height="100px"></video>

表格标签

<table>定义表格
<th>定义表头单元格
<tr>定义行
<td>定义单元格

表单

GET与POST的区别

GET请求传参通过URL，而POST请求传参通过HTTP上行报文
POST请求的安全性比GET请求的高，GET请求的参数在URL中，是可见的，因此GET请求不安全
GET有请求缓存，而POST没有
GET用于取出数据，POST用于提交数据
GET传输的数据量有限制，而POST传输的数据量没有限制
GET请求对数据类型有限制，而POST请求没有限制

简要记忆

GET：请求的参数会在地址栏中显示、请求参数长度有限制、不安全
POST：请求参数不会在地址栏中显示，会封装在请求体中、请求参数的长度是没有限制，比较安全

表单标签

<form>定义表单
<input>定义表单项，通过type属性控制输入形式

type属性：

text默认值，定义单行的输入字段
password
radio
checkbox
file
submit
reset
button

<lable>
<select>
<option>
<textarea>

CSS定位

静态定位

默认值

相对定位

相对于它原来的位置来说的

特点：

1.参照自己原来的位置

2.原来在标准流中的位置保留，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

相对定位并没有脱标，它最典型的应用是给绝对定位当爹的（限制绝对定位的）

绝对定位

相对于祖先元素来说的

绝对定位的特点

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置

3.不占有原来的位置脱标（脱离标准流，飘起来，不占有位置比浮动更高）

固定定位

固定于浏览器的可视区

使用场景：可以在浏览器页面滚动时元素的位置不会改变

特点：

1.以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动

2.固定定位不占有原来的位置

块级元素区别

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。

一般不可以设置宽度，高度以及对齐等属性。

常见的行内元素有：<a >,<strong>,<b>,<em>,<del>,<span >等

默认的宽度就是它本身的宽度

块级元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度，宽度以及对齐等属性。

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等

行内块元素

块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元宽度和高度，也可以在一行中放置多个行内块级元素。

比如input、img就是行内块级元素，它可以设置高宽以及一行多个。

三者区别

块级元素的特点：

块级元素会独占一行

高度，行高，外边距和内边距都可以单独设置，宽度默认是容器的100%，可以容纳内联元素和其他的块级元素

行内元素的特点

和相邻的行内元素在一行上，高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效。默认的宽度就是它本身的宽度，行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

行内块级元素的特点

和其他行内或行内块级元素元素放置在同一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

如何将行内元素转为块级元素

display：block ，定义元素为块级元素 
display : inline ，定义元素为行内元素 
display：inline-block，定义元素为行

JS部分

冒泡排序

let arr = [23, 4, 38, 23, 17,3]
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        // 开始交换，第一个数大于第二个数才交换
        if (arr[j] > arr[j + 1]) {
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
document.write(arr)

插入排序

let arr = [98, 31, 5, 27, 2, 78]
for (let i = 1; i < arr.length; i++) {
   for (let j = i; j > 0; j--) {
     if (arr[j - 1] > arr[j]) {
        let temp = arr[j - 1]
        arr[j - 1] = arr[j]
        arr[j] = temp
      }
    }
}
console.log(arr);

判断2月份的天数

let year = parseInt(prompt("请输入年份"))
if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
   alert("29天");
}else{
   alert("28天");
}

打印金字塔

方法一：页面打印输出

for (let i = 0; i < 6; i++) {
      for (let k = 0; k < 6 - i - 1; k++) {
        document.write("&nbsp;");
      }
      for (let j = 0; j <= (2 * i - 1) + 1; j++) {
        document.write("*");
      }
      document.write("<br>");
    }

方法二：控制台打印输出

function getStar(n) {
      for (let i = 0; i < n; i++) {
        let str1 = ' '
        let str2 = str1.repeat(n - i)
        let str3 = '*'
        let str4 = str3.repeat(2 * (i + 1) - 1)
        console.log(str2 + str4)
      }
    }
    getStar(10)

前端

评分

欢迎为Ta评分