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

web前端1--基础

news 2025/6/8 19:56:33

（时隔数月我又来写笔记啦~）

1、下载vscode

1、官网下载：Visual Studio Code - Code Editing. Redefined

2、步骤：

1、点击同意 一直下一步 勾一个创建桌面快捷方式 在一直下一步

2、在桌面新建文件夹 拖到vscode图标上 打开vscode

3、安装两个插件 在vscode左边找到扩展

4、搜索chinese中文 点击instell 点击 change language and restart

5、open in browser 作用执行html文件

2、新建html文件

1、方式：鼠标右击新建文件 文件名.html 注：后缀一定要是html

2、Ctrl+s保存 注：写了不保存 没有效果

3、打开 右击 点击 Open In Default Browser

4、快捷键 Ctrl+1运行

3、web前端 什么是前端

1、利用html css js node 等web技术 创造出能在浏览器上运行而且可见的界面

2、可写网站 手机应用程序 游戏 小程序 pc端等界面

3、可见区域全部归属于前端内容 

4、html

（ HyperText Markup Language 超文本标记语言)

        构成网页基本元素 ,超文本 超越文本  html不仅仅包含文本 包含 图片 表格 列表 链接 按钮等.
        通过标签来描述网页结构和内容  图片标签 标题标签 不同标签不同功能 

5、js

全称JavaScript

作用：负责页面交互行为 用户触发了什么行为 网页展示不同的效果 能让用户去使用

6、node

让js运行在服务端的开发平台 把js当后端语言去使用，使得js 和java python c++ 等服务器端语言 平起平坐
作用：操作数据库 写后端

浏览器 是一种访问和浏览网络上页面的应用程序
通过解析 html css js等将其转换用户直接可以观看的页面 

7、数据库

前后端交互 存数据 增删查改
网站 注册成功之后 后端将账号密码 存入数据库 
登录 输入之后 和数据库中账号密码  后端进行匹配 如果正确成功

8、标签

不同的标签不同功能 
不区分大小写 推荐用小写

单标签 <meta charset="UTF-8"> 没有结束标签
双标签 <body></body>开始标签和结束标签(前面有/)

charset="UTF-8" 标签属性  添加额外设置 让浏览器去处理
属性和标签 要空格隔开 
属性和属性值用等号连接 属性值要引号包裹

9、写html文件

新建完 啥也没有 英文 ！+ tab 生成 模板

<!DOCTYPE html>
告诉浏览器这是一个html5文档

<html lang="en">
<html>标签是HTML文档的根元素。
lang="en"属性指定了文档的语言是英文

<head> 网页头部 包裹信息发送给浏览器

<meta charset="UTF-8">:
这个<meta>标签指定了文档使用的字符编码是UTF-8。UTF-8编码支持多种语言的字符，是Web上最常用的字符编码。

<meta name="viewport" content="width=device-width, initial-scale=1.0">:
另一个<meta>标签，用于控制网页在移动设备上的布局。它告诉浏览器将页面的宽度设置为设备的宽度，并且初始缩放比例为1.0（即页面在加载时不会缩放）。

<title>Document</title> 定义文档标题

<body>用户可见的内容区 html都写在这里面（重点）

相关文章：

web前端1--基础

&#xff08;时隔数月我又来写笔记啦~&#xff09; 1、下载vscode 1、官网下载&#xff1a;Visual Studio Code - Code Editing. Redefined 2、步骤&#xff1a; 1、点击同意 一直下一步 勾一个创建桌面快捷方式 在一直下一步 2、在桌面新建文件夹 拖到vscode图标上 打开v…...

编程日记 2025/1/22 4:23:29

.Net Core微服务入门全纪录（五）——Ocelot-API网关（下）

系列文章目录 1、.Net Core微服务入门系列&#xff08;一&#xff09;——项目搭建 2、.Net Core微服务入门全纪录&#xff08;二&#xff09;——Consul-服务注册与发现&#xff08;上&#xff09; 3、.Net Core微服务入门全纪录&#xff08;三&#xff09;——Consul-服务注…...

编程日记 2025/1/22 4:21:27

2024嵌入式系统的未来发展与技术洞察分享

时间如白驹过隙&#xff0c;不知不觉又是一年&#xff0c;这一年收获满满。接下来&#xff0c;将本年度对技术的感悟和洞察分析如下&#xff0c;希望对大家有所帮助。 在过去几十年里&#xff0c;嵌入式系统技术迅速发展&#xff0c;成为现代电子设备和智能硬件的核心组成部分。…...

编程日记 2025/1/22 4:20:26

python-44-嵌入式数据库SQLite和DuckDB

文章目录 1 SQLite1.1 世界上最流行的数据库1.1 SQLite简介1.2 插入语句1.3 查询数据1.4 更新数据1.5 删除数据2 DuckDB2.1 DuckDB简介2.2 DuckDB与Python结合使用2.2.1 创建表2.2.2 分析语句2.2.3 导出为parquet文件2.3 Windows中使用DuckDB3 参考附录1 SQLite Python的一个特…...

编程日记 2025/1/22 4:17:23

1.2.神经网络基础

目录 1.2.神经网络基础 1.2.1.Logistic回归 1.2.2 梯度下降算法 1.2.3 导数 1.2.4 向量化编程 1.2.5 正向传播与反向传播 1.2.6.练习 1.2.神经网络基础 1.2.1.Logistic回归 1.2.1.1.Logistic回归 逻辑回归是一个主要用于二分分类类的算法。那么逻辑回归是给定一个x ,…...

编程日记 2025/1/22 4:15:21

算法题目总结-双指针

文章目录 1.滑动窗口类型1.长度最小的子数组1.答案2.思路 2.无重复字符的最长子串1.答案2.思路 2.双指针类型1.盛最多水的容器1.答案2.思路 2.三数之和1.答案2.思路 1.滑动窗口类型 1.长度最小的子数组 1.答案 package com.sunxiansheng.arithmetic.day10;/*** Description:…...

编程日记 2025/1/22 4:14:20

人形机器人将制造iPhone！

前言 优必选机器人和富士康通过一项突破性的合作伙伴关系&#xff0c;正在将先进的人形机器人&#xff08;如Walker S1及其升级版Walker S2&#xff09;整合到制造流程中&#xff0c;以改变iPhone的生产方式。这一合作旨在通过提升机器人能力、优化工作流程以及实现更智能的自动…...

编程日记 2025/1/22 4:10:14

redis 各个模式的安装

一、Redis单机安装 1、安装gcc依赖 Redis是C语言编写的&#xff0c;编译需要GCC。 Redis6.x.x版本支持了多线程&#xff0c;需要gcc的版本大于4.9&#xff0c;但是CentOS7的默认版本是4.8.5。 升级gcc版本&#xff1a; yum -y install centos-release-scl yum -y install d…...

编程日记 2025/1/22 4:06:09

《王者荣耀》皮肤爬虫源码

1.爬取网页 https://pvp.qq.com/web201605/herolist.shtml 2.python代码 import requests from bs4 import BeautifulSoup import os import threading from queue import Queuedef mul(x):if not os.path.exists(x):os.mkdir(x)print("目录创建成功")else:pass h…...

编程日记 2025/1/22 4:02:06

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证8）

为进一步测试通过请求头传递token进行身份验证&#xff0c;在main.htm中增加layui的数据表格组件&#xff0c;并调用后台服务分页显示数据&#xff0c;后台分页查询数据接口如下所示&#xff08;测试时&#xff0c;直接将数据写死到代码中&#xff0c;没有查询数据库&#xff0…...

编程日记 2025/1/22 4:01:04

PyTorch使用教程(6)一文讲清楚torch.nn和torch.nn.functional的区别

torch.nn 和 torch.nn.functional 在 PyTorch 中都是用于构建神经网络的重要组件&#xff0c;但它们在设计理念、使用方式和功能上存在一些显著的区别。以下是关于这两个模块的详细区别&#xff1a; 1. 继承方式与结构 torch.nn torch.nn 中的模块大多数是通过继承 torch.nn…...

编程日记 2025/1/22 3:57:59

React的应用级框架推荐——Next、Modern、Blitz等，快速搭建React项目

在 React 企业级应用开发中&#xff0c;Next.js、Modern.js 和 Blitz 是三个常见的框架&#xff0c;它们提供了不同的特性和功能&#xff0c;旨在简化开发流程并提高应用的性能和扩展性。以下是它们的详解与比较&#xff1a; Next、Modern、Blitz 1. Next.js Next.js 是由 Ve…...

编程日记 2025/1/22 3:56:57

基于GRU实现股价多变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习：算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域，讨论了各种复杂的深度神经网络思想，如卷积神经网络、循环神经网络、生成对抗网络、门控循环单元、长短期记…...

编程日记 2025/1/22 3:55:55

Java创建对象有几种方式？

大家好&#xff0c;我是锋哥。今天分享关于【Java创建对象有几种方式&#xff1f;】面试题。希望对大家有帮助&#xff1b; Java创建对象有几种方式&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在Java中&#xff0c;创建对象主要有以下几种方式&…...

编程日记 2025/1/22 3:52:48

Vue3初学之Element Plus Dialog对话框，Message组件,MessageBox组件

Dialog的使用&#xff1a; 控制弹窗的显示和隐藏 <template><div><el-button click"dialogVisible true">打开弹窗</el-button><el-dialogv-model"dialogVisible"title"提示"width"30%":before-close&qu…...

编程日记 2025/1/22 3:49:44

基于Python机器学习的双色球数据分析与预测

python统计分析2003-2024年所有的中奖记录,通过人工智能机器学习预测双色球,个人意见,仅供参考. 声明&#xff1a;双色球具有随机性&#xff0c;任何工具无法预测。本文章仅作为技术交流&#xff0c;提供学习参考。本文所涉及的代码均为python之机器学习的代码。双色球为公益事…...

编程日记 2025/1/22 3:46:41

微软Win10 RP 19045.5435(KB5050081)预览版发布!

系统之家1月20日最新报道&#xff0c;微软面向Release Preview频道的Windows Insider项目成员&#xff0c;发布了适用于Windows10 22H2版本的KB5050081更新&#xff0c;更新后系统版本号将升至19045.5435。本次更新增加了对GB18030-2022标准的支持&#xff0c;同时新版日历将为…...

编程日记 2025/1/22 3:45:40

使用 Parcel 和 NPM 脚本进行打包

使用 Parcel 和 NPM 脚本进行打包 Parcel Parcel 是一个零配置的网页应用程序打包工具&#xff0c;主要用于快速构建现代 JavaScript 应用。 我们可以使用npm直接安装它 npm install --save-dev parcel //这将把 Parcel 添加到 devDependencies 中&#xff0c;表明它是一个…...

编程日记 2025/1/22 3:42:36

HTML＜center＞标签

HTML5不支持。 <center>标签在HTML4中用于使文本居中对齐。 用什么来代替呢&#xff1f; 例子 居中对齐文本&#xff08;使用 CSS&#xff09;&#xff1a; <html> <head> <style> h1 {text-align: center;} p {text-align: center;} div {text-a…...

编程日记 2025/1/22 3:38:29

LatentSync本地部署教程：基于音频精准生成唇形高度同步视频

LatentSync 是字节跳动联合北京交通大学推出的一个端到端的唇形同步框架&#xff0c;以下是对其的详细介绍&#xff1a; 一、技术基础 LatentSync 基于音频条件的潜在扩散模型&#xff0c;无需任何中间的 3D 表示或 2D 特征点。它利用了 Stable Diffusion 的强大生成能力&…...

编程日记 2025/1/22 3:36:25

基于51单片机和8X8点阵屏、独立按键的填充消除类小游戏

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、8X8点阵屏2、独立按键3、定时器04、定时器1 四、主函数总结 系列文章目录 前言 使用的是普中A2开发板。 【单片机】STC89C52RC 【频率】12T11.0592MHz 【外设】8X8点阵屏、独立按键 效果查看/操作演示&#x…...

编程新知 2025/6/8 18:38:34

【iOS安全】iPhone X iOS 16.7.11 (20H360) WinRa1n 越狱教程

前言 越狱iPhone之后&#xff0c;一定记得安装一下用于屏蔽更新的描述文件&#xff08;可使用爱思助手&#xff09; 因为即便关闭了自动更新&#xff0c;iPhone仍会在某些时候自动更新系统&#xff0c;导致越狱失效&#xff1b;更为严重的是&#xff0c;更新后的iOS版本可能是…...

编程新知 2025/6/8 18:17:47

Docker镜像无法拉取问题解决办法

最近再学习RabbitMQ&#xff0c;需要从Docker镜像中拉取rabbitMQ&#xff0c;但是下拉失败 总的来说就是无法和docker镜像远程仓库建立连接 我又去尝试ping docker.io发现根本没有反应&#xff0c;还是无法连接找了许多办法还是没有办法解决&#xff0c;最后才发现是镜像问题&a…...

编程新知 2025/6/8 15:14:01

uniapp 对接腾讯云IM群公告功能

UniApp 实战&#xff1a;腾讯云IM群公告功能 一、前言 在即时通讯场景中&#xff0c;群公告是信息同步的重要渠道。本文将基于uniapp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群公告的发布、修改、历史记录查询等核心功能。 群公告的数据结构设计权限校…...

编程新知 2025/6/8 15:01:23

WaytoAGI东京大会开启AI全球化新对话：技术无国界，合作促创新

全球AI专家齐聚东京&#xff0c;一场关于技术无国界的对话正在进行。 2025年6月7日&#xff0c;一场备受瞩目的AI盛会——“WaytoAGI全球AI大会东京站”在日本东京樱美林大学新宿校区正式拉开帷幕。这场为期两天的会议&#xff08;6月7日至8日&#xff09;由国内最大的AI开源知…...

编程新知 2025/6/8 13:36:54

Python项目中添加环境配置文件

在Python项目中添加配置文件有多种方式&#xff0c;每种方式对应不同的依赖包和读取方法。以下是 7种主流配置管理方案&#xff0c;包含安装命令、配置示例和变量读取方法&#xff1a; 1. .env 文件&#xff08;推荐简单项目&#xff09; 依赖包: python-dotenv pip install …...

编程新知 2025/6/8 12:36:27

【高效开发工具系列】Blackmagic Disk Speed Test for Mac：专业硬盘测速工具

博客目录 一、Blackmagic Disk Speed Test 概述二、软件核心功能解析三、v3.3 版本的新特性与改进四、实际应用场景分析五、使用技巧与最佳实践六、与其他工具的比较及优势 一、Blackmagic Disk Speed Test 概述 Blackmagic Disk Speed Test 是 Mac 平台上广受专业人士青睐的一…...

编程新知 2025/6/8 6:10:28

1.3 古典概型和几何概型

文章目录 古典概型模型(等可能模型)几何概型 古典概型模型(等可能模型) 两个条件&#xff1a; 1) 有限个样本点 2) 等可能性 例题&#xff1a; 设有n个人&#xff0c;每个人都等可能地被分配到N个房间中的任一间(n≤N)&#xff0c; 求下列事件的概率: (1)某指定的n间房…...

编程新知 2025/6/8 2:00:30

【数据分析】基于adonis2与pairwise.adonis2的群组差异分析教程

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理adonis分析pairwise.adonis2分析总结系统信息介绍 本教程主要用于执行和分析基于距离矩阵的多样性和群落结构分析，特别是通过adonis2和pairwi…...

编程新知 2025/6/7 19:17:10

SpringBoot整合RocketMQ与客户端注意事项

SpringBoot整合RocketMQ 引入依赖&#xff08;5.3.0比较稳定&#xff09; <dependencies><dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.3.1</version&…...

编程新知 2025/6/7 17:43:31