JavaScript 导入方式常见导入方式1. 内联脚本
直接写在页面中的 <script> 标签里。
可以写在 head 中,也可以写在 body 中。
1234<script> console.log("Hello"); alert("Hello");</script>
2. 外部脚本
通过 <script src="..."></script> 引入外部 .js 文件。
适合项目开发和脚本复用。
1<script src="./js/myscript.js"></script>
课堂完整示例代码HTML 文件123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met ...
FTP定义:FTP(File Transfer Protocol,文件传输协议)是一种基于客户端-服务器模型的应用层协议,依赖于 TCP的双端口机制(控制连接21端口与数据连接20/随机端口)实现跨平台文件的可靠传输。
为什么要依赖于 TCP 而不是 UDP?FTP的核心目标是实现文件的完整、有序传输。TCP作为面向连接的协议,通过三次握手建立连接、序列号与确认机制、超时重传等特性,能够确保数据包按顺序到达且无丢失。例如,在传输大文件时,若某个数据包丢失,TCP会自动检测并重传,而UDP不具备此能力,可能导致文件损坏或不完整。
TFTP定义:TFTP(Trivial File Transfer Protocol,简单文件传输协议)是一种基于UDP协议的应用层协议,专为小文件传输设计,通过简化的命令交互(如读写请求、数据块确认)实现轻量级文件传输,常用于无盘工作站引导、嵌入式设备固件更新等对资源开销敏感的场景。
TFTP 为什么使用 UDP 协议作为应用层?TFTP选择UDP的核心原因可归纳为:轻量化设计适配资源受限环境、简单机制满足小文件传输需求,以及应用层补充实现基础 ...
JavaScript 简介什么是 JavaScript
JavaScript 简称 JS。
JavaScript 是一种轻量级、解释型、面向对象的脚本语言。
它主要用于在网页上实现动态效果,增强用户与网页的交互性。
作为一种客户端脚本语言,JavaScript 可以直接嵌入 HTML,并在浏览器中执行。
与 HTML 和 CSS 不同,JavaScript 可以让网页根据用户操作动态变化,而不是只停留在静态展示。
JavaScript 的作用
客户端脚本:在用户浏览器中执行,实现动态效果和用户交互。
网页开发:与 HTML 和 CSS 协同工作,让网页更有交互性和动态性。
后端开发:借助 Node.js,JavaScript 也可以运行在服务器端。
知识点总结
HTML 负责结构。
CSS 负责样式。
JavaScript 负责交互和动态逻辑。
JavaScript 不仅能做前端,也能做后端。
复习表达JavaScript 是前端开发中的核心脚本语言,主要用于实现网页交互和动态效果。它可以直接嵌入到 HTML 页面中,由浏览器解释执行。前端中通常是 HTML 负责结构、CSS 负 ...
JavaScript ??????
1-javascript??
2-javascript????
3-javascript????
4-javascript??
5-javascript??
6-javascript-dom
7-javascript-dom??????
????
?? JavaScript ????? JS ??????????
?? JavaScript ??????????????????
????????????????????????
???? DOM ???????????????????
????
JavaScript ???
JavaScript ???
JavaScript ????
JavaScript ????
JavaScript ??
JavaScript ??
JavaScript DOM
JavaScript DOM ??????
CSS 移动端适配进阶:移动端布局
移动端布局属于 CSS 的进阶内容。
常见目标是在不同设备宽度下,让页面仍然保持合适的显示效果。
响应式布局实现方法主流实现方案常见有两种:
通过 rem、vw/vh 等单位实现等比适配
通过媒体查询 @media,实现一套 HTML 配合多套 CSS
Viewport基本概念
viewport 可以理解为视口或视窗。
它表示浏览器用来显示网页内容的区域。
viewport 会直接影响网页在移动设备上的显示效果。
常见写法1<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
常见属性说明
width=device-width:让视口宽度等于设备宽度
initial-scale=1.0:初始缩放比例为 1
minimum-scale=1.0:最小缩放比例为 1
maximum-scale=1 ...
CSS 定位基本概念
定位布局可以实现更精确的元素位置控制。
但相比普通文档流和弹性布局,定位的灵活性通常更差。
常见定位方式相对定位 relative
相对于元素原本在文档流中的位置进行定位。
元素仍然占据原来的文档流位置。
123position: relative;left: 20px;top: 10px;
绝对定位 absolute
相对于最近的已定位祖先元素进行定位。
如果没有已定位祖先,一般相对于浏览器页面进行定位。
脱离文档流,不再占据原来的位置。
12position: absolute;left: 120px;
固定定位 fixed
相对于浏览器窗口进行定位。
脱离文档流。
固定在屏幕中的某个位置,不会随着页面滚动而移动。
123position: fixed;right: 100px;top: 20px;
课堂完整示例代码12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626 ...
CSS 浮动传统网页布局方式在学习浮动之前,先了解传统的网页布局方式。
常见网页布局方式有:
标准流,也叫普通流、文档流
浮动
定位
Flexbox
Grid
标准流
标准流是网页按照元素的书写顺序依次排列。
块级元素默认独占一行。
行内元素默认在一行内从左到右排列。
浮动基本概念
浮动会让元素脱离标准文档流。
元素会根据开发者设置向左或向右移动。
浮动通常是在父元素内部进行移动。
基本语法123选择器 { float: left;}
123选择器 { float: right;}
123选择器 { float: none;}
注意点
浮动是相对于父元素进行的。
浮动元素只会在父元素的内部移动。
浮动的三大特性
脱标:脱离标准流
一行显示,顶部对齐
具备行内块元素特性
知识点理解
脱离标准流后,后面的普通元素会受到影响。
多个浮动元素可以排在同一行。
浮动后的元素既可以同排显示,也能设置宽高。
清除浮动为什么要清除浮动
子元素浮动后,父元素有时无法自动撑开高度。
这会导致父元素高度塌陷,影响后续 ...
【备份和迁移hexo博客-哔哩哔哩】 https://b23.tv/8EKZnGL
上传脚本push.shscript
1234567891011121314151617##!/bin/sh#本脚本请在git bash中运行# 作者:Huanhao# 在终端输入 ./push.sh 即可打开脚本# 博客:https://blog.hellolei.xinecho -e "\033[32m正在为你备份博客中.........\033[0m"git add .echo -e "\033[32m正在为你备份博客中.........\033[0m"git commit -m "update"echo -e "\033[32m正在为你备份博客中.........\033[0m"git push origin main --forceif [ $? -ne 0 ]; then echo -e "\033[31m 备份失败!请检查网络情况! \033[0m"else echo -e &q ...
CSS 盒子模型基本概念
盒子模型是 CSS 中非常重要的知识点。
页面中的每一个元素都可以看成一个盒子。
一个盒子通常由 content、padding、border 和 margin 组成。
盒子模型的四部分1. 内容 content
内容区域是盒子里真正显示内容的部分。
比如文本、图片等都属于内容区域。
2. 内边距 padding
padding 是内容和边框之间的空间。
用来控制内容与边框的距离。
1padding: 50px;
3. 边框 border
border 位于内边距外侧,是盒子的边界。
可以设置边框粗细、样式和颜色。
1border: 2px solid yellowgreen;
4. 外边距 margin
margin 位于边框外侧。
用于控制盒子与其他元素之间的距离。
1margin: 40px;
相关属性示例width 和 height
width 设置内容宽度。
height 设置内容高度。
12width: 200px;height: 100px;
border-style
用于设置边框样式。
可以分别设置上、右、下、左四个方向。 ...
CSS 常用属性常见属性font 复合属性
font 可以把多个字体相关属性写在一起。
常见内容包括字重、字体大小、字体家族等。
1font: bolder 50px "kaiTi";
line-height
line-height 用来设置行高。
常用于调整文本上下间距和阅读舒适度。
1line-height: 30px;
background-color
background-color 用于设置背景颜色。
1background-color: aquamarine;
width 和 height
width 用于设置宽度。
height 用于设置高度。
通常对块元素和行内块元素有效,对普通行内元素直接设置宽高通常无效。
12width: 150px;height: 100px;
display
display 用于改变元素显示类型。
常见值有:
block:块级元素
inline:行内元素
inline-block:行内块元素
12display: inline;display: inline-block;
课堂完整示例代码1234567 ...




