JavaScript-Basic WebAPIs Day4 Notes
1、关于常见日期对象方法的注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 获得日期对象
const date = new Date()
// 使用里面的方法
console.log(date.getFullYear())
console.log(date.getMonth() + 1) // 月份要 + 1
console.log(date.getDate())
console.log(date.getDay()) // 星期几是这个方法
</script>
</body>
</html>
2、如下这个cursor: pointer是什么意思？
.box1 { position: absolute; right: 20px; top: 10px; width: 20px; height: 20px; background-color: skyblue; text-align: center; line-height: 20px; font-size: 16px; cursor: pointer; }
const div = document.getElementById('example');
console.log(div.innerHTML); // 输出: <p>Hello, <strong>world!</strong></p>
div.innerHTML = "<p>Hi, <em>everyone!</em></p>"; // 替换内容为新HTML结构
innerText 操作：
const div = document.getElementById('example');
console.log(div.innerText); // 输出: Hello, world!
div.innerText = "Hi, everyone!"; // 只替换为纯文本内容
5. 图示说明：
innerHTML：- 操作结果：
<p>Hello, <strong>world!</strong></p>包含了标签。
- 操作结果：
innerText：- 操作结果：
Hello, world!只包含文本内容，忽略了标签。
- 操作结果：
你可以想象两种场景：
innerHTML显示的内容带有标签，保留 HTML 结构。innerText显示的是页面上可见的纯文本，不包含 HTML 标签。
4、swiper-pagination，pagination的含义是什么？在前端的含义又是什么？
在前端开发中，pagination 一般指的是分页功能。具体来说，它是用于将大量内容分成多个页面或部分展示的技术或工具。分页可以让用户方便地浏览大量内容，而不需要一次性加载和展示所有数据。
分页（Pagination）概念
-
一般含义：
pagination指的是通过导航按钮或数字链接，将数据或内容分成多个页面进行展示。常用于博客文章列表、搜索结果、商品列表等需要分页展示的场景。- 例如：如果有 100 条数据，每页显示 10 条，那么将生成 10 页，每页可以通过点击“上一页”、“下一页”或直接选择页码进行切换。
-
前端的含义：
- 在前端开发中，
pagination常常以插件或组件的形式存在，比如网页上的页码导航、左右箭头等。 - 例如：电商网站中的商品列表，当你滚动到页面底部时，可能会出现分页导航来展示下一页商品。
- 通过分页减少一次性加载的内容量，能提升用户体验并减轻服务器和网络压力。
- 在前端开发中，
swiper-pagination 的含义
swiper-pagination 是前端库 Swiper 中的一个组件，专门用于在轮播图中显示分页导航。
- Swiper 是一个流行的 JavaScript 库，用于实现触摸滑动的轮播图效果。
swiper-pagination具体指的是轮播图下方的分页导航点，每个点对应轮播图中的一张图片。
swiper-pagination 在 Swiper 中的功能：
- 作用：用来指示当前轮播到第几张图片，同时也可以作为用户点击导航的方式。
- 常见形式：通常显示为一系列小圆点，每个圆点代表一张幻灯片或一个页面，当前活动的页面或幻灯片用不同样式显示。
例如，在轮播图中，如果有 5 张图片，swiper-pagination 会显示 5 个小圆点，当前显示的图片对应的圆点会被高亮显示，用户也可以点击不同的圆点切换到相应的图片。
Swiper 中的 pagination 配置示例
var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable: true, }, });
el：指的是分页导航所在的 DOM 元素，通常选择器为.swiper-pagination。clickable：如果为true，用户可以点击分页圆点进行切换。
总结
pagination在前端中通常指分页功能，用于分割大量内容并让用户逐步浏览。swiper-pagination则是 Swiper 轮播图库中的分页导航，用于展示和控制轮播图的进度。
5、像这种rel参数到底是什么简写和含义？
<link rel="stylesheet" href="./css/swiper.min.css">
在 HTML 中，rel 是 relationship 的缩写，用于定义当前文档和外部资源（如样式表、网页或脚本）之间的关系。
rel 参数的作用和含义
<link> 标签通常用于在 HTML 文档中引入外部资源（比如 CSS 样式表），而 rel 属性则用于指定链接的资源与当前页面的关系。
常见的 rel 参数值及其含义：
-
stylesheet：- 表示当前文档与外部 CSS 样式表的关系。
- 例如：
<link rel="stylesheet" href="./css/swiper.min.css">
这里 rel="stylesheet" 告诉浏览器链接的是一个外部的 CSS 样式文件，并应用于当前 HTML 页面。
2.icon：
- 用于指定网页的图标（通常是网站的 favicon）。
- 例如：
<link rel="icon" href="/favicon.ico">
这表示该页面与 favicon 图标之间的关系。
3.alternate：
- 表示与页面相关的替代版本，通常用于多语言或不同格式的资源。
- 例如：
<link rel="alternate" href="https://example.com/es" hreflang="es">
4.canonical：
- 用于声明当前页面的标准版本，防止重复内容的 SEO 问题。
- 例如：
<link rel="canonical" href="https://example.com/page">
告诉搜索引擎当前页面的标准 URL 是 https://example.com/page。
5.preload / prefetch：
- 用于优化资源加载速度。
preload告诉浏览器提前加载某些资源（如脚本、样式），而prefetch则是为未来可能使用的资源做准备。 - 例如：
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
6.manifest：
- 用于指向应用程序清单文件，通常用于 Progressive Web App（PWA）。
- 例如：
<link rel="manifest" href="/manifest.json">
7.nofollow：
- 通常用于
<a>标签，表示搜索引擎不要跟踪该链接。 - 例如：
<a href="https://example.com" rel="nofollow">Link</a>
总结
rel是 relationship 的缩写，用于说明当前文档与外部资源之间的关系。- 在
<link>标签中，rel="stylesheet"表示该链接指向一个外部 CSS 文件。
6、在python中，装第三方库的方式一般是：pip install xxx 那么在JavaScript中，装第三方库的方式又对应是什么呢？
在 JavaScript 中，安装第三方库的常用方式是使用 npm（Node Package Manager）或 yarn。这两个工具类似于 Python 中的 pip，用于管理和安装项目所需的依赖包。
1. 使用 npm 安装第三方库
npm 是最常用的 JavaScript 包管理工具，默认与 Node.js 一起安装。常用的安装命令是：
npm install <package-name>
具体步骤：
-
首先，在项目目录下初始化一个
package.json文件（如果还没有）：
npm init -y
-
这会生成一个
package.json文件，用于管理项目的依赖和元数据。 -
然后，安装你需要的第三方库，比如安装
axios（一个常用的 HTTP 请求库）：
npm install axios
这将会把 axios 包安装到项目的 node_modules 文件夹中，并将其添加到 package.json 中的 dependencies 列表中。
其他常见 npm 命令：
-
全局安装（不局限于当前项目）：
npm install -g <package-name>
*移除库：
npm uninstall <package-name>
2. 使用 yarn 安装第三方库
yarn 是另一个流行的 JavaScript 包管理工具，提供类似于 npm 的功能，有时速度更快，依赖管理也更严谨。
yarn add <package-name>
具体步骤：
-
初始化
package.json（如果项目还没有）：
yarn init -y
安装库，比如 axios：
yarn add axios
其他常见 yarn 命令：
-
全局安装：
yarn global add <package-name>
* 移除库：
yarn remove <package-name>
总结
- 在 JavaScript 中，安装第三方库的常用方式是使用 npm 或 yarn。
- 对应于 Python 中的
pip install xxx，JavaScript 中的命令是npm install xxx或yarn add xxx。
7、为什么 html后面要写 逗号，再写 body呢？ 我看到有些地方就只是写空格，又并没有加上逗号。
html,
body {
position: relative;
height: 100%;
}
在你看到的这段代码中，HTML 和 body 后面的逗号实际上是在 CSS 中的 选择器组。它用于将多个元素选择器组合在一起，以便为这些元素应用相同的样式规则。
具体地说：
html,
body {
position: relative;
height: 100%;
}
逗号的作用
- 逗号 在 CSS 选择器中用于分隔多个选择器，表示将相同的样式应用于所有这些选择器对应的元素。它的意思是**"将这些选择器组合在一起，给它们统一的样式"**。
- 在这里，
html, body表示要对html标签和body标签同时应用{ position: relative; height: 100%; }这两条样式规则。
解释这段代码的作用
这段 CSS 规则对 html 和 body 元素同时进行了样式设置：
position: relative;表示将html和body的定位方式设置为 相对定位，这意味着它们的位置可以相对于其正常位置进行调整。height: 100%;表示将html和body的高度设置为 100%，让它们占满整个视口的高度。
不加逗号的情况
当不使用逗号时，每个选择器会单独应用规则。例如：
html { position: relative; height: 100%; } body { position: relative; height: 100%; }
这种写法虽然可以达到相同的效果，但代码会更冗长。使用逗号可以使代码更加简洁。
逗号和空格的区别
- 逗号：分隔多个选择器，使它们共享相同的样式。
- 空格：在 CSS 中，空格用来表示子代选择器或层级关系，意思是选择某个元素内部的子元素。例如：
div p { color: red; }
- 这表示选择每个
div标签内部的p标签，并将p的文本颜色设置为红色。
总结
- 逗号用于将多个选择器组合起来，使它们共享同样的样式规则。
- 空格表示层级关系，通常用于选择某个元素内部的子元素。
浙公网安备 33010602011771号