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

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Eclipse折叠if、else、try catch的{}
  • leetcode01——27. 移除元素(双指针)、977. 有序数组的平方(双指针)、209. 长度最小的子数组(双指针/滑动窗口)
  • leetcode刷题day17|二叉树Part05(654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树)
  • MySQL:索引02——使用索引
  • React 嵌套类名样式不生效
  • 基于python+django+vue的家居全屋定制系统
  • Vue3.5+ 响应式 Props 解构
  • PDF扫描版文字识别OCR
  • C/C++实现植物大战僵尸(PVZ)(打地鼠版)
  • Android使用LiquidFun物理引擎实现果冻碰撞效果
  • 计算机网络-第二章【新】
  • 如何提高网站搜索排名
  • 编程基础:函数栈帧的创建和销毁
  • YOLOv8 人体姿态估计动作识别关键点检测(代码+教程)
  • 【我的 PWN 学习手札】Unsortedbin Attack
  • 网络传输文件的问题
  • [译]前端离线指南(上)
  • avalon2.2的VM生成过程
  • CSS中外联样式表代表的含义
  • HashMap剖析之内部结构
  • JavaScript 基本功--面试宝典
  • JavaScript创建对象的四种方式
  • laravel5.5 视图共享数据
  • Material Design
  • windows下使用nginx调试简介
  • 动态魔术使用DBMS_SQL
  • 分布式事物理论与实践
  • 如何利用MongoDB打造TOP榜小程序
  • 实现简单的正则表达式引擎
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • gunicorn工作原理
  • 阿里云服务器购买完整流程
  • #pragma once
  • (12)Hive调优——count distinct去重优化
  • (7) cmake 编译C++程序(二)
  • (十六)串口UART
  • (十三)Flink SQL
  • (四) 虚拟摄像头vivi体验
  • (算法二)滑动窗口
  • (一) springboot详细介绍
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)nsfocus-绿盟科技笔试题目
  • (转)详解PHP处理密码的几种方式
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .net dataexcel 脚本公式 函数源码
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .net 简单实现MD5
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .net的socket示例
  • .考试倒计时43天!来提分啦!
  • :O)修改linux硬件时间
  • ;号自动换行
  • [ 数据结构 - C++]红黑树RBTree
  • []我的函数库