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

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

相关推荐
我要吐泡泡了哦13 分钟前
GAMES104:15 游戏引擎的玩法系统基础-学习笔记
笔记·学习·游戏引擎
骑鱼过海的猫12313 分钟前
【tomcat】tomcat学习笔记
笔记·学习·tomcat
编程零零七1 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
贾saisai2 小时前
Xilinx系FPGA学习笔记(九)DDR3学习
笔记·学习·fpga开发
北岛寒沫2 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
(⊙o⊙)~哦3 小时前
JavaScript substring() 方法
前端
无心使然云中漫步4 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者4 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
铁匠匠匠4 小时前
从零开始学数据结构系列之第六章《排序简介》
c语言·数据结构·经验分享·笔记·学习·开源·课程设计
xnian_4 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js