当前位置： 首页 > news >正文

7天速成前端 ------学习日志 （继苍穹外卖之后）

news 2026/4/2 7:44:15

前端速成计划总结：   全26h课程，包含html，css，js，vue3，预计7天内学完。

起始日期：9.16                 预计截止：9.22                每日更新，学完为止。

学前计划

课程来源

B站---Java程序员用学前端么？java开发所需的前端技术全教程

课程安排

学习时长总计

html，css             P1-P4                  3节                            3h

JavaScript            P5-P58                 50节*10min              8h

Vue 3                       P104 - P163         60节*15min              15h

合计总时长：            26h

学习目标

计划学习时长

基础：  有后端学习的基础。之前也了解过一点点前端的东西，但了解的很浅。

计划：每天按4h视频内容来算，最多7天学完。

Day--1        9.16

HTML

介绍

超文本

就是超链接，可以把不同的网页联系起来。

标记

不同的标记，赋予标记里的内容不同的含义。也叫做标签。

标准的html代码

样例

 

<html>      <head>     <body>

快捷键

文档声明

三个感叹号：   ！！！

htnl的框架

一个感叹号：  ！

标签

只输入标签的名字即可：  img    p



常见元素

 Html由一系列的元素组成。感觉和标签差不多一个意思。

标签特性

1.元素之间可以嵌套。但标签不能交叉。

2.空元素，不包含内容的元素称为空元素。

、

通用属性

id  ：  用于区别相同标签

title : 

title 属性在 HTML 中主要用于提供额外的信息或描述，当鼠标悬停在某个元素上时，浏览器会显示该元素的 title 属性值作为工具提示（tooltip）。

示例效果

当你将鼠标悬停在上面的 <img> 标签、超链接或按钮上时，浏览器会在鼠标指针下方显示一个包含 title 属性值的小窗口。

实测有效，但没办法截图，因为需要鼠标悬停才会显示，截图时候，鼠标就消失了。

基础标签
<p>

段落标签。表示一个段落。

<br>

换行标签，会换行，页面内不可见。

<hr>

分割线标签，生成一个分割线

<h1>  <h2> .....  <h6>

1到6号标题，字体大小从大一次减小。

列表类标签

<li>

<ol>

<ul>

<a>  超链接
Anchor 标签

三种链接跳转方式

#的含义

表示，是在页面内跳转

多媒体标签

表单标签
介绍

基本用法

表单项

第一次前后端代码联调测试

表单提交测试

感慨

现在看起来，很简单啊哈哈，当时不了解的时候，可算是一头雾水。

有一些顿悟的意思了，原来前端提交的数据名称，可以在标签的属性里面指定，然后后端按属性名接收。

但目前他这个代码，返回数据以后，浏览器页面就直接刷新了，肯定后面还回学其他技术，来处理返回的数据，进行展示等等。



日期格式不一致  报错

错误原因： 前后端 日期的格式不一致

CSS

介绍

主要负责控制网页展现的样式。

Day--2        9.17

Day--3        9.18

Day--4        9.19

Day--5        9.20

Day--6        9.21

Day--7        9.22

相关文章：

7天速成前端 ------学习日志 （继苍穹外卖之后）

前端速成计划总结&#xff1a; 全26h课程&#xff0c;包含html&#xff0c;css&#xff0c;js&#xff0c;vue3&#xff0c;预计7天内学完。 起始日期&#xff1a;9.16 预计截止&#xff1a;9.22 每日更新&#xff0c;学完为止。 学前计划 课…...

编程日记 2024/9/17 23:20:42

讲课研判：基于教师上课视频文件的综合分析

在教育评估与改进的过程中&#xff0c;对教师上课视频文件进行详尽的研判是一项至关重要的工作。它不仅能够帮助教师自我反思、提升教学质量&#xff0c;还能为教育管理者提供决策依据&#xff0c;促进教育教学的整体优化。本文将从教学目标、教学内容、教学效果、教学能力、教…...

编程日记 2024/9/17 23:17:35

mac 如何开启指定端口供外部访问？

前言 需要 mac 上开放指定端口&#xff0c;指定 ip 访问 解决 在 macOS 上开放一个端口&#xff0c;并指定只能特定的 IP 访问&#xff0c;可以使用 macOS 内置的 pfctl(Packet Filter)工具来实现。 1、 编辑 pf 配置文件&#xff1a; 打开 /etc/pf.conf 文件进行编辑。 可以使…...

编程日记 2024/9/17 23:16:34

Weblogic部署

要安装weblogic&#xff0c;首先要有java环境&#xff0c;因此需要先安装jdk。 这里需要注意&#xff0c;weblogic版本不同&#xff0c;对应的jdk版本也不同&#xff0c;我在这里就踩了很多坑&#xff0c;我这里下载的是fmw_12.2.1.4.0_wls_lite_generic.jar对应的是jdk-8u333…...

编程日记 2024/9/17 23:13:45

面向对象设计的五大原则（SOLID 原则）

面向对象设计的五大原则&#xff08;SOLID 原则&#xff09;是指导我们设计可维护、灵活且易扩展的面向对象系统的核心准则。这些原则帮助开发者避免常见的设计陷阱&#xff0c;使代码更具可读性和可维护性。 0.设计原则和设计模式的关系 设计原则&#xff08;Design Princip…...

编程日记 2024/9/17 23:10:41

Python和MATLAB及C++信噪比导图(算法模型)

&#x1f3af;要点 视频图像修复模数转换中混合信号链噪音测量频谱计算和量化周期性视觉刺激脑电图高斯噪声的矩形脉冲 总谐波失真 周期图功率谱密度各种心率失常检测算法胶体悬浮液跟踪检测计算交通监控摄像头图像噪音计算 Python信噪比 信噪比是科学和工程中使用的一种测…...

编程日记 2024/9/17 23:06:37

App及web反编译方案

APP反编译代码的工具下载&#xff1a; 下载地址&#xff1a;APK逆向三件套apktool-2.9.3.jar&#xff0c;dex2jar-2.0.zip&#xff0c;jd-gui-windows-1.6.6资源-CSDN文库 》dex2jar: 把dex文件转成jar文件 》 jd-gui: 这个工具用于将jar文件转换成java代码 》APKTool: 首先把…...

编程日记 2024/9/17 23:05:36

学成在线练习（HTML+CSS)

准备工作 项目目录 内部包含当前网站的所有素材&#xff0c;包含 HTML、CSS、图片、JavaScript等等 1.由于元素具有一些默认样式&#xff0c;可能是我们写网页过程中根本不需要的&#xff0c;所有我们可以在写代码之前就将其清除 base.css /* 基础公共样式&#xff1a;清除…...

编程日记 2024/9/17 23:01:32

istio中使用serviceentry结合egressgateway实现多版本路由

假设有一个外部服务&#xff0c;外部服务ip为&#xff1a;10.10.102.90&#xff0c;其中32033为v1版本&#xff0c;32034为v2版本。 现在需要把这个服务引入到istio中&#xff0c;使用egressgateway转发访问该服务的流量&#xff0c;并且需要实现多版本路由&#xff0c;使得he…...

编程日记 2024/9/17 23:00:31

Java项目——苍穹外卖（二）

Redis 简介 Redis是一个基于内存的key-value结构数据库 基于内存存储&#xff0c;读写性能高适合存储热点数据&#xff08;热点商品、资讯、新闻&#xff09;企业应用广泛 基础操作 启动 在redis安装目录中打开cmd&#xff0c;输入如上图指令即可启动&#xff0c;按下crtl…...

编程日记 2024/9/17 22:58:29

【Python日志功能】三.日志记录方法与多模块日志

文章目录 相关链接第三篇&#xff1a;日志记录方法与多模块日志1 基本日志记录方法2 在多个模块中使用日志3 文章总结 相关链接 【Python日志功能】一.日志基础与基本配置【Python日志功能】二.高级配置与日志处理器【Python日志功能】三.日志记录方法与多模块日志官方文档&am…...

编程日记 2024/9/17 22:57:27

在pycharm终端中运行pip命令安装模块时，出现了“你要如何打开这个文件”弹出窗口，是什么状况？

这种情况发生在Windows系统上&#xff0c;当在PyCharm终端中运行pip命令安装模块时&#xff0c;如果系统无法确定要使用哪个程序打开该文件&#xff0c;就会出现“你要如何打开这个文件”弹出窗口。 解决方法是&#xff1a; 选择“查找一个应用于此文件”的选项。在弹出的窗口…...

编程日记 2024/9/17 22:56:26

Axure多人协调的方式

当系统有多个模块&#xff0c;又由不同的产品经理负责设计&#xff0c;如何进行协调&#xff1f; 尝试过的方法 1&#xff09;搭建Axure私服&#xff0c;用Axure的私服进行一个RP文件多人协同编辑&#xff1b; 2&#xff09;用SVN管理RP文件&#xff0c;每次都要合并。 以上…...

编程日记 2024/9/17 22:55:25

【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程

【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程前言模型转换--pytorch转on…...

编程日记 2024/9/17 22:54:24

React学习笔记（1.0）

在使用vite创建react时&#xff0c;有一个语言选项&#xff0c;就是typescript-SWC&#xff0c;这里介绍一下SWC。 SWC&#xff1a;可扩展的Rust的平台&#xff0c;用于下一代快速开发工具&#xff0c;SWC比Babel快20倍。 简单来说&#xff0c;就是用于格式转换的&#xff0c…...

编程日记 2024/9/17 22:51:19

Axure RP实战：打造高效图形旋转验证码

Axure RP实战&#xff1a;打造高效图形旋转验证码 在数字产品设计的海洋中&#xff0c;验证码环节往往是用户交互体验的细微之处&#xff0c;却承载着验证用户身份的重要任务。 传统的文本验证码虽然简单直接&#xff0c;但随着用户需求的提高和设计趋势的发展&#xff0c;它…...

编程日记 2024/9/17 22:48:16

101012分页属性

4k页面 P&#xff08;有效位&#xff09;&#xff1a;1有效&#xff0c;0无效 R/W&#xff08;读写位&#xff09;&#xff1a;1可读可写&#xff0c;0可读 U/S&#xff08;权限位&#xff09;&#xff1a;1(User)&#xff0c;0(System) A&#xff08;物理页访问位&#xff…...

编程日记 2024/9/17 22:47:15

从0-1 用AI做一个赚钱的小红书账号（不是广告不是广告）

大家好&#xff0c;我是胡广&#xff01;是不是被标题吸引过来的呢&#xff1f;是不是觉得自己天赋异禀&#xff0c;肯定是那万中无一的赚钱天才。哈哈哈&#xff0c;我告诉你&#xff0c;你我皆是牛马&#xff0c;不要老想着突然就成功了&#xff0c;一夜暴富了&#xff0c;瞬…...

编程日记 2024/9/17 22:45:09

【Kubernetes】常见面试题汇总（十七）

目录 51.简述 Kubernetes 网络策略&#xff1f; 52.简述 Kubernetes 网络策略原理&#xff1f; 53.简述 Kubernetes 中 flannel 的作用&#xff1f; 54.简述 Kubernetes Calico 网络组件实现原理&#xff1f; 51.简述 Kubernetes 网络策略&#xff1f; - 为实现细粒度的容器…...

编程日记 2024/9/17 22:41:49

Vue 3 中动态赋值 ref 的应用

引言 Vue 3 引入了许多新特性&#xff0c;其中之一便是 Composition API。Composition API 提供了一种新的编程范式&#xff0c;使开发者能够更灵活地组织和复用逻辑。其中 ref 是一个核心概念&#xff0c;它允许我们在组件内部声明响应式的状态。本文将探讨如何在 Vue 3 中使…...

编程日记 2024/9/17 22:39:47

ECDH算法避坑指南：OpenSSL和Node.js中的椭圆曲线参数选择

ECDH算法实战避坑指南&#xff1a;跨平台椭圆曲线参数选择与性能优化 在构建现代加密通信系统时&#xff0c;ECDH&#xff08;椭圆曲线迪菲-赫尔曼密钥交换&#xff09;算法因其高效性和安全性已成为TLS协议栈的核心组件。然而&#xff0c;当开发者需要在OpenSSL和Node.js等不同…...

编程新知 2026/4/2 6:12:26

HDMI接口没声音？手把手教你用InfoFrame调试音频流（附Audio InfoFrame解析）

HDMI音频调试实战&#xff1a;用Audio InfoFrame精准定位无声问题 当4K显示器亮起而音响沉默时&#xff0c;工程师的调试噩梦就开始了。上周在调试一块定制开发板时&#xff0c;HDMI视频输出完美&#xff0c;但音频系统始终沉默——这不是简单的"线材接触不良"能解释…...

编程新知 2026/4/2 5:58:03

Qwen2_5_VLForConditionalGeneration实战：如何用forward方法处理多模态输入（附避坑指南）

Qwen2.5_VL多模态实战&#xff1a;工业级forward方法优化与避坑指南 当文本遇到图像和视频&#xff0c;AI模型的认知能力便迈入了全新维度。Qwen2.5_VLForConditionalGeneration作为当前最先进的多模态生成模型之一&#xff0c;其forward方法的设计直接决定了模型处理图文视频混…...

编程新知 2026/4/2 5:50:01

网站关键词排名变化规律是什么_网站关键词排名优化对SEO的重要性是什么

网站关键词排名变化规律是什么_网站关键词排名优化对SEO的重要性是什么 在当今数字化时代&#xff0c;网站的SEO优化是一个至关重要的领域。其中&#xff0c;关键词排名的变化规律和关键词排名优化对SEO的重要性尤为关键。本文将详细探讨这两方面的内容&#xff0c;帮助你更好…...

编程新知 2026/4/2 5:45:59

XXL-SSO与Active Directory集成：企业级身份管理终极方案

XXL-SSO与Active Directory集成&#xff1a;企业级身份管理终极方案 XXL-SSO是一款分布式单点登录框架&#xff0c;能够帮助企业实现多系统统一身份认证与授权。本文将详细介绍如何将XXL-SSO与Active Directory集成&#xff0c;打造企业级身份管理解决方案&#xff0c;让用户认…...

编程新知 2026/4/2 5:37:50

MySQL高频面试题（2026最新版）：覆盖90%考点，小白也能直接背

很多开发者备考时&#xff0c;要么盲目刷题、记不住重点&#xff0c;要么只背答案、不懂原理&#xff0c;面试时被面试官追问一句就卡壳。其实MySQL面试没有那么复杂&#xff0c;核心考点就那么多&#xff0c;只要吃透高频题、理解底层逻辑&#xff0c;就能从容应对。本文整理了…...

编程新知 2026/4/2 5:33:49

OpenClaw替代方案：当Qwen3-4B不可用时降级策略

OpenClaw替代方案&#xff1a;当Qwen3-4B不可用时降级策略 1. 为什么需要降级策略 上周三凌晨3点&#xff0c;我的OpenClaw自动化脚本突然停止了工作。原本定时执行的周报生成任务卡在了模型调用环节——Qwen3-4B服务因网络波动暂时不可用。这次意外让我意识到&#xff1a;依…...

编程新知 2026/4/2 4:19:15

WzComparerR2：解锁冒险岛游戏数据洞察的专业工具

WzComparerR2&#xff1a;解锁冒险岛游戏数据洞察的专业工具 【免费下载链接】WzComparerR2 Maplestory online Extractor 项目地址: https://gitcode.com/gh_mirrors/wz/WzComparerR2 想要深入探索《冒险岛》这款经典游戏的数据世界吗&#xff1f;WzComparerR2是您的专…...

编程新知 2026/4/2 3:48:32

为什么钉钉、飞书、企微都在做 CLI？这个开源项目给出了最极致的答案

❝AI Agent 很聪明&#xff0c;但面对真实的专业软件&#xff0c;它就是个"睁眼瞎"。CLI-Anything 说&#xff1a;我来治。❞先说一个扎心的事实2026年了&#xff0c;AI Agent 能写代码、能做分析、能聊天能画画——但你让它打开 Blender 建个模&#xff1f;让它用 G…...

编程新知 2026/4/2 3:44:22

ai辅助部署openclaw：让快马智能适配ubuntu环境与反爬策略

AI辅助部署OpenClaw&#xff1a;让快马智能适配Ubuntu环境与反爬策略 最近在尝试用OpenClaw抓取一些动态加载的网站数据&#xff0c;发现直接部署基础版本根本行不通。目标网站不仅有动态渲染的内容&#xff0c;还设置了各种反爬机制。好在发现了InsCode(快马)平台的AI辅助开发…...

编程新知 2026/4/2 3:42:17