前端每日习题解释版

1.什么是HTTP协议，列举你所知道的相关知识点

HTTP（超文本传输协议）是一种用于在计算机网络上进行传输的协议。
它是一种客户端-服务器协议，用于在Web浏览器和Web服务器之间传输数据和资源。

以下是HTTP协议的相关知识点：

HTTP采用请求-响应模型：客户端发送HTTP请求到服务器，服务器接收请求后返回HTTP响应给客户端，包含所请求的资源或执行的操作结果。
HTTP是无状态协议：每个HTTP请求和响应之间都是独立的，服务器不会保留客户端的任何状态信息。为了处理这种无状态性，引入了Cookie和Session来维护用户会话状态。
HTTP使用TCP/IP作为传输协议：HTTP使用底层的传输层协议TCP/IP来确保可靠的数据传输。
HTTP请求方法：常见的HTTP请求方法有GET、POST、PUT、DELETE等，用于指示请求的类型和执行的操作。
HTTP状态码：表示服务器对请求的响应状态，常见的状态码包括200（成功）、404（未找到）、500（服务器内部错误）等。
HTTP头部字段：HTTP请求和响应中包含一些头部字段，用于携带与请求或响应相关的元数据，如Content-Type、User-Agent等。
HTTPS：HTTPS是基于HTTP的加密协议，使用SSL/TLS协议对HTTP报文进行加密和身份验证，增强了数据传输的安全性。

2.列举你所知道的HTML标签

HTML（超文本标记语言）是用于创建网页结构和内容的标记语言。
HTML使用标签将内容包围起来，告诉浏览器如何显示这些内容。

以下是常见的HTML标签：

<html>：定义HTML文档的根元素。
<head>：定义文档头部信息，包括标题、样式表等。
<body>：定义文档的主体内容。
<h1> - <h6>：定义标题，表示重要性由高到低，<h1>为最高级标题。
<p>：定义段落。
<a>：定义超链接。
<img>：插入图像。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
<table>：定义表格。
<tr>：定义表格行。
<td>：定义表格单元格。
<form>：定义表单。
<input>：定义输入字段。

3.如何制作一个表格

在HTML中
- 您可以使用<table>元素来创建表格。
以下是一个简单的表格示例：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

在上述示例中
- <table>元素表示表格的开始和结束。
- <tr>表示表格的行
- 而<th>和<td>表示表格的标题单元格和数据单元格。
通过在<tr>中使用<th>
- 我们可以定义表格的表头行。
- 在示例中，"表头1"、"表头2"和"表头3"分别是表头单元格的内容。
之后的两个<tr>定义了表格中的数据行。
- 每一个<td>元素都代表数据单元格的内容。

4.写出form 表单常用标签及注意事项

在HTML中，常用的表单标签包括：

<form>：表示表单的开始和结束标记。
<input>：用于输入字段，如文本框、复选框、单选按钮等。
<textarea>：用于多行文本输入。
<select>：创建下拉菜单。
<option>：定义<select>下拉菜单中的选项。
<label>：为表单控件定义标签文本。
<button>：创建按钮。
<fieldset>：将相关表单元素分组。
<legend>：为<fieldset>元素定义标题。

在使用表单时，还应注意以下事项：

使用正确的表单标签类型：
- 根据需要选择适当的输入类型
  - 例如使用<input type="text">来接收文本输入
  - 使用<input type="checkbox">来创建复选框等。
使用<label>标签关联表单控件：
- 通过为每个表单控件添加<label>标签
- 并使用for属性将其与相应的表单控件关联起来
- 以提升可用性和可访问性。
使用必要的验证和限制：
- 通过使用required属性、正则表达式等来添加表单验证
- 以确保用户输入的准确性和完整性。
使用合适的按钮类型：
- 根据需要使用不同类型的按钮
  - 如提交按钮（<button type="submit">）和重置按钮（<button type="reset">）。
提供清晰的表单指示和错误提示：
- 使用合适的文本、样式和视觉反馈
- 为用户提供清晰的指示并及时显示错误提示信息。
考虑跨浏览器兼容性和响应式设计：
- 确保所使用的表单在不同浏览器和设备上都能良好显示和工作
- 并具有良好的响应式布局。

5.简述盒子模型

盒子模型是CSS中用于描述和布局HTML元素的一种模型。
- 它将每个HTML元素看作一个矩形的盒子
- 这个盒子由其内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

具体来说，盒子模型由以下几个部分组成：

内容（Content）：
- 指的是元素的实际内容
- 例如文本、图片或其他嵌套的HTML元素。
内边距（Padding）：
- 位于内容和边框之间，用于控制内容与边框之间的距离。
- 可以为元素增加内边距，使内容离边框产生一定的间隔。
边框（Border）：
- 位于内边距之外，用于包围元素的内容和内边距。
- 边框可以设置宽度、样式和颜色等属性。
外边距（Margin）：
- 位于边框之外，用于控制元素与其他元素之间的距离。
- 可以为元素增加外边距，以调整元素与相邻元素之间的间隔。

盒子模型的总宽度计算方式为：

元素内容的宽度 + 左右内边距的宽度 + 左右边框的宽度 + 左右外边距的宽度。

总高度计算方式类似。

盒子模型在页面布局中起到了重要的作用
- 通过对盒子模型的控制，可以实现元素的定位、大小调整和页面布局的灵活性。

6.css选择器的优先级是怎么样的

在CSS中
- 选择器的优先级决定了当多个规则同时应用于同一个元素时，哪个规则会被最终应用。

CSS选择器的优先级是由以下几个因素决定的，按照优先级从高到低的顺序排列：

内联样式（Inline Styles）：
- 通过style属性直接写在HTML元素上的样式具有最高的优先级。
- 例如：
  Hello
ID选择器（ID Selectors）：
- 使用ID选择器选择元素，比如#myElement。
- ID选择器在页面中应该保持唯一性，它具有较高的优先级。
类别选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-Class Selectors）：
- 这些选择器通过类别、属性或者伪类来选择元素。
- 例如：.myClass、[type="text"]、:hover等。
元素选择器和伪元素选择器（Element Selectors and Pseudo-Element Selectors）：
- 通过HTML元素的标签名来选择元素
- 例如div、p等。以及通过伪元素来选择元素的特定部分
- 例如::before、::after等。
通用选择器和子选择器（Universal Selectors and Child Selectors）：
- 通用选择器（*）匹配所有元素，子选择器（>)选择某个元素的直接子元素。

如果两个选择器的优先级相同，则后面出现的规则会覆盖前面的规则。

在计算优先级时
- 可以根据以上规则将选择器转换为一个四位数的值
- 其中每一位代表一种选择器的数量。
- 优先级从左到右，依次是内联样式、ID选择器、类别、属性和伪类选择器、元素和伪元素选择器。

例如，如果有以下三个规则：

h1 {...}                  /* 元素选择器（0-001） */
#myElement {...}          /* ID选择器（0-010） */
div .myClass:hover {...}  /* 元素选择器 + 类别选择器 + 伪类选择器（0-111） */

那么在应用于某个元素时
- 选择器div .myClass:hover具有最高的优先级
- 其次是ID选择器#myElement
- 再次是元素选择器h1。

7.display属性的用法

display属性用于定义HTML元素的显示方式。
- 它可以控制元素在页面中如何布局和呈现。
display属性有多个可选值
- 每个值都对应不同的显示方式，下面是常见的display属性值及其作用：

block：将元素显示为块级元素，即每个元素都会独占一行，宽度默认是父元素的宽度的100%。可以设置宽度、高度、内边距和外边距等属性。
inline：将元素显示为内联元素，即元素在同一行内显示，宽度根据内容自动调整。不能设置宽度、高度、上下内边距和外边距等属性。
inline-block：将元素显示为内联块级元素，即元素在同一行内显示，可以设置宽度、高度、内边距和外边距等属性。
none：隐藏元素，元素不会在页面中显示，并且不占用页面空间。
table：将元素显示为表格，类似于table元素。通常用于实现复杂的表格布局。
flex：使用弹性盒模型布局，可以通过设置flex-direction、justify-content、align-items等属性来控制元素的排列和对齐方式。
grid：使用网格布局，可以通过设置grid-template-columns、grid-template-rows、grid-gap等属性来控制元素的排列和对齐方式。
inline-flex和inline-grid：类似于inline-block，但是采用了弹性盒模型或网格布局。

display属性的默认值根据不同的元素类型而有所不同。
- 比如div元素的默认display值是block，span元素的默认display值是inline。

8.背景属性相关的有哪些

背景属性可用于定义HTML元素的背景样式。以下是一些常见的背景属性及其作用：

background-color：设置元素的背景颜色。
background-image：设置元素的背景图像，可以使用图片的URL。
background-repeat：指定背景图像在元素中的平铺方式，可选值有repeat（默认，图像会在水平和垂直方向上重复平铺）、repeat-x（图像只在水平方向上重复平铺）、repeat-y（图像只在垂直方向上重复平铺）和no-repeat（图像不平铺，只显示一次）。
background-position：设置背景图像的起始位置，可以使用关键字（如top、bottom、center、left、right）或百分比/像素值来定位。
background-size：控制背景图像的尺寸大小，可选值有auto（保持原始尺寸）、contain（将图像缩放到适应容器大小，且保持原始高宽比）、cover（将图像缩放到填满容器，可能裁剪部分图像）或具体的像素/百分比值。
background-attachment：指定背景图像的滚动行为，可选值有scroll（默认，背景图像会随页面滚动）和fixed（背景图像固定在视窗中，不随页面滚动）。
background-origin：指定背景图像的起始位置相对于元素的盒模型边界（包含content、padding或border），可选值有padding-box（默认，以padding边界为基准）和border-box（以border边界为基准）。
background-clip：指定背景图像的绘制区域相对于元素的盒模型边界（包含content、padding或border），可选值有border-box（默认，将背景绘制到边框区域以内）和padding-box（将背景绘制到padding区域以内）。

9.Js的数据类型有哪些?

基本类型（原始类型）：

数值类型（Number）：表示数字，包括整数和浮点数。
字符串类型（String）：表示文本数据，用于存储和操作字符序列。
布尔类型（Boolean）：表示真值，只能取两个值，即true（真）和false（假）。
null类型：表示一个特殊的空值对象。
undefined类型：表示未定义的值。
符号类型（Symbol，ES6新增）：表示唯一的标识符。

引用类型（对象类型）：

对象类型（Object）：表示复杂数据和引用类型的值，可以存储多个键值对。
数组类型（Array）：是一种特殊的对象，用于存储按顺序排列的一组值。
函数类型（Function）：是一种特殊的对象，用于执行特定的任务。

需要注意的是，JavaScript的数据类型是动态的，变量的数据类型可以在运行时改变。

此外，JavaScript还有一种称为原始包装类型的特殊类型，用于临时包装基本类型的值，以便使用其方法和属性。

例如，字符串有一个字符串对象包装器（String对象），可以访问字符串的方法。

10.字符串的内置方法有哪些，写出几个来

length：

返回字符串的长度。

const str = "Hello World";
console.log(str.length); // 输出：11

charAt(index)：

返回指定位置（索引）的字符。

const str = "Hello";
console.log(str.charAt(0)); // 输出：H

concat(str1, str2, ...)：

连接两个或多个字符串。

const str1 = "Hello";
const str2 = "World";
console.log(str1.concat(" ", str2)); // 输出：Hello World

indexOf(searchValue[, fromIndex])：

返回指定值第一次出现的索引，从前向后搜索。

const str = "Hello World";
console.log(str.indexOf("o")); // 输出：4

lastIndexOf(searchValue[, fromIndex])：

返回指定值最后一次出现的索引，从后向前搜索。

const str = "Hello World";
console.log(str.lastIndexOf("o")); // 输出：7

11.数组的内置方法有哪些，写出几个来

push(element1, element2, ...)：

向数组的末尾添加一个或多个元素，并返回数组的新长度。

const arr = [1, 2, 3];
console.log(arr.push(4)); // 输出：4
console.log(arr); // 输出：[1, 2, 3, 4]

pop()：

删除并返回数组的最后一个元素。

const arr = [1, 2, 3];
console.log(arr.pop()); // 输出：3
console.log(arr); // 输出：[1, 2]

shift()：

删除并返回数组的第一个元素。

const arr = [1, 2, 3];
console.log(arr.shift()); // 输出：1
console.log(arr); // 输出：[2, 3]

unshift(element1, element2, ...)：

向数组的开头添加一个或多个元素，并返回数组的新长度。

const arr = [2, 3];
console.log(arr.unshift(1)); // 输出：3
console.log(arr); // 输出：[1, 2, 3]

indexOf(searchElement[, fromIndex])：

返回指定元素在数组中第一次出现的索引，从前向后搜索。

const arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 输出：1

lastIndexOf(searchElement[, fromIndex])：

返回指定元素在数组中最后一次出现的索引，从后向前搜索。

const arr = [1, 2, 3, 2];
console.log(arr.lastIndexOf(2)); // 输出：3

12.js中如何序列化和反序列化

在JavaScript中，序列化和反序列化通常用于将对象转换为字符串以便存储或传输，并在需要时将其还原回对象的形式。
下面是关于如何在JavaScript中进行序列化和反序列化的方法示例：

序列化（将对象转换为字符串）：

可以使用以下方法对JavaScript对象进行序列化：

使用JSON.stringify()方法：该方法将JavaScript对象转换为JSON字符串。

let obj = { name: "John", age: 30 };
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"name":"John","age":30}'

反序列化（将字符串转换为对象）：

可以使用以下方法对字符串进行反序列化并将其转换回JavaScript对象：

使用JSON.parse()方法：该方法将JSON字符串解析为JavaScript对象。

let jsonString = '{"name":"John","age":30}';
let obj = JSON.parse(jsonString);
console.log(obj); // 输出: { name: "John", age: 30 }

这些方法使您能够在JavaScript中轻松地进行对象的序列化和反序列化操作。请注意，只有包含有效JSON格式的数据才能正确进行序列化和反序列化。

13.js中如何跳转一个新的页面和刷新当前页面

在JavaScript中，您可以使用不同的方法来实现跳转到新页面和刷新当前页面的操作。下面是相关的示例代码：

跳转到新的页面：

可以使用以下方法在JavaScript中跳转到新的页面：

使用window.location.href属性：将要跳转的URL分配给window.location.href属性即可。
```
// 跳转到新页面
window.location.href = "https://www.example.com";
```
使用window.location.replace()方法：该方法用于替换当前页面的URL为指定的URL，并跳转到新的页面。
```
// 跳转到新页面
window.location.replace("https://www.example.com");
```

刷新当前页面：

可以使用以下方法在JavaScript中刷新当前页面：

使用location.reload()方法：该方法重新加载当前页面，以达到刷新页面的效果。
```
// 刷新当前页面
location.reload();
```

请注意，跳转到新的页面会导致浏览器加载新页面并丢失当前页面的状态。而刷新当前页面会重新加载当前页面，并重新执行页面上的所有脚本。根据您的需求，请选择适合的方法来跳转到新的页面或刷新当前页面。

14.js中如何使用定时器

在JavaScript中，您可以使用定时器来执行一段代码或函数，并在特定的时间间隔后重复执行或只执行一次。以下是使用定时器的两种方法：

使用`setTimeout()`函数：

setTimeout()函数用于在指定的时间之后执行一段代码或函数。它接受两个参数：要执行的代码或函数，以及延迟的毫秒数。

单次执行示例：

// 单次执行一段代码
setTimeout(function() {
  // 在此处编写要执行的代码
}, 1000); // 1000毫秒（1秒）后执行

// 单次执行一个函数
function myFunction() {
  // 在此处编写要执行的代码
}
setTimeout(myFunction, 1000); // 1000毫秒（1秒）后执行

使用`setInterval()`函数：

setInterval()函数用于在指定的时间间隔后重复执行一段代码或函数。它也接受两个参数：要执行的代码或函数，以及时间间隔的毫秒数。

重复执行示例：

// 每隔一段时间重复执行一段代码
setInterval(function() {
  // 在此处编写要重复执行的代码
}, 2000); // 每隔2000毫秒（2秒）执行一次

// 每隔一段时间重复执行一个函数
function myFunction() {
  // 在此处编写要重复执行的代码
}
setInterval(myFunction, 2000); // 每隔2000毫秒（2秒）执行一次

请注意，在使用定时器时，通过clearTimeout()或clearInterval()函数可以取消待执行的定时任务。这样可以确保在需要时停止计时器的执行。

15.如何使用jq操作标签属性

在使用jq（jQuery）操作标签属性之前
首先确保你已经引入了 jQuery 库。
以下是使用 jq 操作标签属性的一般步骤：

选择元素：

使用 jQuery 的选择器来选中你要操作的元素。
例如，如果你要操作一个具有特定 id 的元素，可以使用 $("#elementId") 来选择该元素。

获取或设置属性值：

一旦选中了元素，你可以使用 .attr() 方法来获取或设置其属性值。具体使用方式如下：

获取属性值：
- 使用 .attr("attributeName") 方法来获取指定属性的值。
- 例如，$("#elementId").attr("src") 可以获取元素的 src 属性值。
设置属性值：
- 使用 .attr("attributeName", "value") 方法来设置指定属性的值。
- 例如，$("#elementId").attr("src", "newSrc.jpg") 可以将元素的 src 属性值设置为 "newSrc.jpg"。

示例代码：

以下是一个简单的示例代码
- 展示了如何使用 jq 操作标签属性：

<!DOCTYPE html>
<html>
<head>
  <title>使用 jQuery 操作标签属性</title>
  <script src="jquery.min.js"></script> <!-- 引入 jQuery 库 -->
</head>
<body>
  <img id="myImage" src="oldSrc.jpg">
  
  <script>
    // 获取并输出图片的 src 属性值
    var src = $("#myImage").attr("src");
    console.log("图片的 src 属性值为：" + src);
    
    // 将图片的 src 属性值设置为新的地址
    $("#myImage").attr("src", "newSrc.jpg");
  </script>
</body>
</html>

以上就是使用 jq 操作标签属性的基本步骤和示例代码。
按照这个思路，你可以根据具体需求灵活运用 jq 操作各种元素的属性。

16.写出jq的常用选择器，筛选器等

选择器：

元素选择器：
- $("element")
- 选取所有匹配指定元素名称的元素。
类选择器：
- $(".class")
- 选取所有具有指定 class 名称的元素。
ID选择器：
- $("#id")
- 选取具有指定 id 名称的元素。
属性选择器：
- $("[attribute=value]")
- 选取具有指定属性及属性值的元素。
后代选择器：
- $("parent descendant")
- 选取指定父元素下的所有后代元素。

筛选器：

:first 筛选器：
- $("selector:first")
- 选取匹配选择器的第一个元素。
:last 筛选器：
- $("selector:last")
- 选取匹配选择器的最后一个元素。
:even 筛选器：
- $("selector:even")
- 选取匹配选择器的偶数索引位置的元素。
:odd 筛选器：
- $("selector:odd")
- 选取匹配选择器的奇数索引位置的元素。
:eq(n) 筛选器：
- $("selector:eq(n)")
- 选取匹配选择器中指定索引位置的元素（索引从0开始）。
:not(selector) 筛选器：
- $("selector:not(selector)")
- 选取不匹配指定选择器的元素。
除了上述常用的选择器和筛选器之外，jQuery 还提供了许多其他强大的选择器和筛选器，
例如：parent、children、siblings、next、prev、filter、has 等
可以根据具体需求来选择和筛选需要操作的元素。

posted @ 2023-07-26 10:36 Chimengmeng 阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

前端每日习题解释版

前端每日习题解释版

1.什么是HTTP协议，列举你所知道的相关知识点

2.列举你所知道的HTML标签

3.如何制作一个表格

4.写出form 表单常用标签及注意事项

在HTML中，常用的表单标签包括：

在使用表单时，还应注意以下事项：

5.简述盒子模型

6.css选择器的优先级是怎么样的

7.display属性的用法

8.背景属性相关的有哪些

9.Js的数据类型有哪些?

基本类型（原始类型）：

引用类型（对象类型）：

10.字符串的内置方法有哪些，写出几个来

length：

charAt(index)：

concat(str1, str2, ...)：

indexOf(searchValue[, fromIndex])：

lastIndexOf(searchValue[, fromIndex])：

11.数组的内置方法有哪些，写出几个来

push(element1, element2, ...)：

pop()：

shift()：

unshift(element1, element2, ...)：

indexOf(searchElement[, fromIndex])：

lastIndexOf(searchElement[, fromIndex])：

12.js中如何序列化和反序列化

序列化（将对象转换为字符串）：

反序列化（将字符串转换为对象）：

13.js中如何跳转一个新的页面和刷新当前页面

跳转到新的页面：

刷新当前页面：

14.js中如何使用定时器

使用setTimeout()函数：

使用setInterval()函数：

15.如何使用jq操作标签属性

选择元素：

获取或设置属性值：

示例代码：

16.写出jq的常用选择器，筛选器等

选择器：

筛选器：

公告

使用`setTimeout()`函数：

使用`setInterval()`函数：