web前端1--基础

news2025/1/22 11:07:45

(时隔数月我又来写笔记啦~)

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都写在这里面(重点)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2280326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

麦田物语学习笔记:保存和加载场景中的物品

目录 基本流程 1.代码思路 2.代码实现 最终效果 补充知识点 1.序列化 2.委托 基本流程 现在在切换场景后,场景中的物品即使被拾取了,也还是会被重新加载出来,所以本篇文章的任务是在切换场景前后能保留当前场景的数据 1.代码思路 (1)为了保留处在地上的物品数据,就需要…

51c~SLAM~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12327374 #GSLAM 自动驾驶相关~~~ 一个通用的SLAM架构和基准 GSLAM&#xff1a;A General SLAM Framework and Benchmark 开源代码&#xff1a;https://github.com/zdzhaoyong/GSLAM SLAM技术最近取得了许多成功&am…

QT调用OpenSceneGraph

OSG和osgQt编译教程&#xff0c;实测通过 一、下载OpenSceneGraph OpenSceneGraphhttps://github.com/openscenegraph/OpenSceneGraph 二、使用CMAKE编译OpenSceneGraph 1.打开cmake&#xff0c;配置源代码目录 2. CMAKE_INSTALL_PREFIX设置为install文件夹&#xff0c;生…

Git 详细安装教程以及gitlab添加SSH密钥

目录 一、下载安装 二、gitlab添加SSH密钥 一、下载安装 &#xff08;1&#xff09;去官网下载 找到下载的安装包双击进行安装。 &#xff08;2&#xff09;使用许可声明 双击下载后的 Git-2.47.1.2-64-bit.exe&#xff0c;开始安装&#xff0c;这个界面主要展示了 GPL 第…

【优选算法】4----盛最多水的容器

开始有点上强度了铁子们&#xff0c;这道算法题也是可以说很难理解的~ 想了好久才想明白~ ---------------------------------------begin--------------------------------------- 题目解析&#xff1a; 这一道题刚看题目&#xff0c;根本不知道在讲啥&#xff0c;但看到体积…

今天也是记录小程序进展的一天(破晓时8)

嗨嗨嗨朋友们&#xff0c;今天又来记录一下小程序的进展啦&#xff01;真是太激动了&#xff0c;项目又迈出了重要的一步&#xff0c;231啦&#xff01;感觉每一步的努力都在积累&#xff0c;功能逐渐完善&#xff0c;离最终上线的目标越来越近了。大家一直支持着这个项目&…

Python保留字与标识符及常变量

1、保留字 保留字&#xff1b;严格区分大小写 不可以把保留字作为变量、函数、类、模块和其他对象的名称来使用 import keyword print(keyword.kwlist) # 输出所有的保留字 print(len(keyword.kwlist)) # 获取保留字的个数 true 真 # True 真 #属于保留字&#xff0c;会…

若依报错:无法访问com.ruoyi.common.annotation

无法访问com.ruoyi.common.annotation 若依的父工程的pom文件中设置了jdk为1.8&#xff0c;将idea的jdk也改为1.8即可。

2008-2020年各省城镇登记失业率数据

2008-2020年各省城镇登记失业率数据 1、时间&#xff1a;2008-2020年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、城镇登记失业率 4、范围&#xff1a;31省 5、指标说明&#xff1a;城镇登记失业率是指在一定时期内&…

Linux——入门基本指令汇总

目录 1. ls指令2. pwd3. whoami指令4. cd指令5. clear指令6. touch指令7. mkdir指令8. rm指令9. man指令10. cp指令11. mv指令12. cat指令13. tac指令14. more指令15. less指令16. head指令17. tail指令18. date指令19. cal指令20. find指令21. which指令22. alias指令23. grep…

【知识分享】PCIe5.0 TxRx 电气设计参数汇总

目录 0 引言 1 参考时钟--Refclk 2 发射端通道设计 3 发送均衡技术 4 接收端通道设计 5 接收均衡技术 6 结语 7 参考文献 8 扩展阅读 0 引言 PCI Express Base Specification 5.0的电气规范中&#xff0c;关键技术要点如下&#xff1a; 1. 支持2.5、5.0、8.0、16.0和3…

npm install安装缓慢或卡住不动

起因 今天执行npm install eslint-plugin-cypresslatest --save-dev命令时进度条一直卡着不动&#xff0c;于是想着安装yarn来操作。 方案1 全局安装yarn&#xff08;Mac在npm前加sudo&#xff09;&#xff1a; npm install -g yarn yarn安装好之后安装依赖用&#xff1a; y…

SparkSQL函数综合实践

文章目录 1. 实战概述2. 实战步骤2.1 创建项目2.2 添加依赖2.3 设置源目录2.4 创建日志属性文件2.5 创建hive配置文件2.6 创建数据分析对象2.6.1 导入相关类2.6.2 创建获取Spark会话方法2.6.3 创建表方法2.6.4 准备数据文件2.6.5 创建加载数据方法2.6.6 创建薪水排行榜方法2.6.…

Linux第103步_了解I2C总线框架

了解Linux中的I2C总线框架为后面做I2C实验做准备&#xff0c;学驱动&#xff0c;就是学习框架&#xff0c;了解是必须的。 1、了解Linux下的I2C子系统中的相关数据结构 struct i2c_adapter { struct module *owner; unsigned int class; /* classes to allow probing for …

开关电源基础

文章目录 线性电源与开关电源选用 开关稳压器脉宽调制简化的降压开关电源 开关电源类型输出电压分拓扑分 控制器与稳压器效率与 V o u t V_{out} Vout​ 同步与非同步隔离与非隔离非隔离式拓扑结构隔离式拓扑结构 线性电源与开关电源 线性稳压器就是我们通常说的LDO: 传输元件…

1. 基于图像的三维重建

1. 基于图像的三维重建 核心概念三维重建中深度图、点云的区别&#xff1f;深度图点云总结 深度图到点云还需要什么步骤&#xff1f;1. **获取相机内参**2. **生成相应的像素坐标**3. **计算三维坐标**4. **构建点云**5. **处理颜色信息&#xff08;可选&#xff09;**6. **去除…

智慧脚下生根,智能井盖监测终端引领城市安全新革命

在繁忙的都市生活中&#xff0c;我们往往只关注地面的繁华与喧嚣&#xff0c;却忽略了隐藏在地面之下的基础设施——井盖。这些看似不起眼的井盖&#xff0c;实则承担着排水、通讯、电力等重要功能&#xff0c;是城市安全运转的重要一环。然而&#xff0c;传统的井盖管理面临着…

62,【2】 BUUCTF WEB [强网杯 2019]Upload1

进入靶场 此处考点不是SQL&#xff0c;就正常注册并登录进去 先随便传一个 进行目录扫描&#xff0c;我先用爆破代替 先随便后面写个文件名 为了提供payload位置 www.tar.gz真的存在 返回浏览器修改url就自动下载了 看到tp5,应该是ThinkPHP5框架 参考此博客的思路方法c[强网杯…

IDEA导入Maven工程不识别pom.xml

0 现象 把阿里 sentinel 项目下载本地后&#xff0c;IDEA 中却没显示 maven 工具栏。 1 右键Maven Projects 点击IDEA右侧边栏的Maven Projects&#xff0c;再点击&#xff1a; 在出现的选择框中选择指定的未被识别的pom.xml即可&#xff1a; 2 Add as maven project 右键p…

LDD3学习9--数据类型和定时器

这部分对应的是第七章和第十一章&#xff0c;因为内容也不是很多&#xff0c;就一起写了。里面的内容基本上就是一个个的点&#xff0c;所以也就一个个点简单总结一下。 1 数据类型 1.1 数据长度 不同操作系统类型长度可能不一样&#xff0c;看图的话最好用u8&#xff0c;u16&…