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

news/2024/9/19 6:49:23/ 标签: 前端, 学习

前端速成计划总结:   全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


http://www.ppmy.cn/news/1527083.html

相关文章

keep-alive缓存不了iframe

最近做了个项目&#xff0c;其中有个页面是由 iframe 嵌套了一个另外的页面&#xff0c;在运行的过程中发现 KeepAlive 并不生效&#xff0c;每次切换路由都会触发 iframe 页面的重新渲染&#xff0c;代码如下&#xff1a; <router-view v-slot"{ Component }">…

Blender渲染太慢怎么办?blender云渲染已开启

动画行业蓬勃发展&#xff0c;动画制作软件亦持续推陈出新&#xff0c;当制作平台日益丰富&#xff0c;创作难度降低&#xff0c;创作效率提升&#xff0c;如何高效完成复杂动画的渲染就成了从业者更关心的问题。 云渲染技术的出现&#xff0c;无疑为动画制作者提供了前所未有…

Python 入门教程(4)数据类型 | 4.2、数据类型转换

文章目录 一、数据类型转换1、 整数&#xff08;int&#xff09;与浮点数&#xff08;float&#xff09;之间的转换2、字符串&#xff08;str&#xff09;与整数/浮点数之间的转换3、列表&#xff08;list&#xff09;与字符串之间的转换4、注意事项 一、数据类型转换 在Python…

Cpp快速入门语法(下)(2)

文章目录 前言一、函数重载概念与使用C为何支持函数重载&#xff1f; 二、引用概念语法特性权限(常引用)使用场景与指针的区别 三、内联函数四、auto关键字(C11)五、基于范围的for循环(C11)六、指针空值nullptr(C11)总结 前言 承前启后&#xff0c;正文开始&#xff01; 一、函…

Java网络编程 TCP通信(Socket 与 ServerSocket)

1.TCP通信原理 TCP通信涉及两个端点&#xff1a;客户端和服务器。服务器端使用 ServerSocket 监听特定端口&#xff0c;等待客户端的连接请求。客户端使用 Socket 连接到服务器的IP地址和端口。一旦连接建立&#xff0c;双方就可以通过输入输出流进行数据交换. ServerSocket是…

详细分析Uniapp中的轮播图基本知识(附Demo)

目录 前言1. 基本知识2. Demo2.1 基本2.2 自定义分页2.3 自定义动画 3. 扩展 前言 先看代码示例&#xff1a; 实现了一个带有分页指示器的轮播图组件 <template><view class"work-container"><!-- 轮播图 --><uni-swiper-dot class"uni…

【电脑组装】✈️从配置拼装到安装系统组装自己的台式电脑

目录 &#x1f378;前言 &#x1f37b;一、台式电脑基本组成 &#x1f37a;二、组装 &#x1f379;三、安装系统 &#x1f44b;四、系统设置 &#x1f440;五、章末 &#x1f378;前言 小伙伴们大家好&#xff0c;上篇文章分享了在平时开发的时候遇到的一种项目整合情况&…

TCP/IP网络编程概念及Java实现TCP/IP通讯Demo

背景 在当今数字化的世界中&#xff0c;网络通信是连接各种设备和系统的关键。TCP/IP协议作为互联网通信的基石&#xff0c;被广泛应用于各种网络场景。了解TCP/IP网络编程的概念&#xff0c;并掌握如何在Java中实现TCP/IP通讯&#xff0c;对于开发人员来说是非常重要的。 TC…

webpack打包原理

目录 1、搭建结构&#xff0c;读取配置参数2、配置参数对象初始化 Compiler&#xff08;new Compiler(webpackOptions)&#xff09;3、挂载配置文件中的插件&#xff0c;4、执行Compiler 中的 run 方法进行编译5、根据配置文件中的entry 配置项找到所有的入口6、从入口文件出发…

JavaScript 基础 - 第16天_AJAX入门

文章目录 Day01_Ajax入门目录学习目标01.AJAX 概念和 axios 使用目标讲解小结 02.认识 URL目标讲解小结 03.URL 查询参数目标讲解小结 04.案例-查询-地区列表目标讲解小结 05.常用请求方法和数据提交目标讲解小结 06.axios 错误处理目标讲解小结 07.HTTP 协议-请求报文目标讲解…

椋鸟C++笔记#7:标准模板库STL初识

文章目录 标准模板库&#xff08;Standard Template Library&#xff09;STL的版本P.J.版RW版SGI版 STL的组成部分 萌新的学习笔记&#xff0c;写错了恳请斧正。 标准模板库&#xff08;Standard Template Library&#xff09; 标准模板库STL&#xff0c;是C标准库的一个非常重…

Snowflake 如何通过 Apache Iceberg 和 Polaris 为大数据的未来提供动力

Snowflake 的使命是让每个组织都成为数据驱动型组织。凭借围绕 Apache Iceberg 的最新创新和 Polaris 的推出,这家数据云公司使开发人员、工程师和架构师能够比以往任何时候都更快、更轻松地利用大数据获得变革性的业务见解。 将开放标准引入数据云 Snowflake 战略的核心是采…

教师薪酬管理系统的设计与实现

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;老师信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

HarmonyOS4升级到Harmonyos Next(Api 11)系列教程

目前此教程基于HarmonyOS NEXT Developer Preview、OpenHarmony&#xff08;Api 11&#xff09;讲解&#xff0c;兼容Api 12&#xff0c;HarmonyOS 5&#xff08;HarmonyOS Next&#xff09;正式发布后新增的Api还会在第一时间更新。 HarmonyOS NEXT和HarmonyOS 4的基本语法都是…

文件批量添加水印和密码合并单元格完整版

这段代码是一个 Java 方法&#xff0c;用于向文件添加水印和密码。您解释一下&#xff1a; 首先&#xff0c;它接受一个 fileAddress 参数&#xff0c;表示文件的地址。 然后&#xff0c;它创建了一个线程安全的列表 fileDatas&#xff0c;用于存储文件数据。 接下来&#xff…

ZW3D二次开发_UI_非模板表单_设置表单显示位置

1.ZW3D弹出非模板表单时可以设置弹出位置&#xff08;居中、左下角、右上角等&#xff09; 2.假设已创建好非模板表单 3.在Form属性中添加form_pos属性 4.输入值 base,CTR,0.0 &#xff0c;如下图 也可以设置为其他值显示在不同的位置&#xff0c;如下 5.重新编译&#xff0c;…

使用Jenkins扩展钉钉消息通知

Jenkins借助钉钉插件&#xff0c;实现当构建失败时&#xff0c;自动触发钉钉预警。虽然插件允许自定义消息主体&#xff0c;支持使用 Jenkins环境变量&#xff0c;但是局限性依旧很大。当接收到钉钉通知后&#xff0c;若想进一步查看报错具体原因&#xff0c;仍完全依赖邮件通知…

docker-ce.repo源、kubernetes.repo源

一、docker-ce.repo源 [docker-ce-stable] nameDocker CE Stable - $basearch baseurlhttps://mirrors.aliyun.com/docker-ce/linux/centos/$releasever/$basearch/stable enabled1 gpgcheck1 gpgkeyhttps://mirrors.aliyun.com/docker-ce/linux/centos/gpg [docker-ce-stable-…

优购电商小程序的设计与实现+ssm(lw+演示+源码+运行)

优购电商小程序 摘 要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对…

VMware网络配置

在 VMware 中,网络配置至关重要,它决定了虚拟机与物理网络以及其他虚拟机之间的通信方式。VMware 提供了多种网络连接方式,适用于不同的应用场景。以下是 VMware 网络配置的常见类型及其配置方法: 1. VMware 网络类型 VMware 主要提供以下三种网络连接类型: 1.1 桥接网…