web前端1--基础

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

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.rhkb.cn/news/5212.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于tldextract提取URL里的子域名、主域名、顶级域

TLD是TopLevel Domain的缩写。‌tldextract‌ 是一个用于从URL中提取子域、主域名和顶级域&#xff08;TLD&#xff09;的Python库。它利用公共后缀列表&#xff08;Public Suffix List&#xff09;来确保即使是复杂或不常见的URL结构也能被正确解析。tldextract能够处理包括IC…

音频入门(一):音频基础知识与分类的基本流程

音频信号和图像信号在做分类时的基本流程类似&#xff0c;区别就在于预处理部分存在不同&#xff1b;本文简单介绍了下音频处理的方法&#xff0c;以及利用深度学习模型分类的基本流程。 目录 一、音频信号简介 1. 什么是音频信号 2. 音频信号长什么样 二、音频的深度学习分…

数据结构之堆排序

文章目录 堆排序版本一图文理解 版本二向下调整建堆向上调整建堆 排升/降序升序 堆排序 版本一 基于已有数组建堆取堆顶元素并删除堆顶元素重新建大根堆&#xff0c;完成排序版本。 图文理解 版本二 前提&#xff1a;必须提供有现成的数据结构堆 数组建堆&#xff0c;首尾…

小菜鸟系统学习Python第三天

1.优先级问题: 结论: 幂运算>正负号>加减乘除和整除>比较运算符>逻辑运算符 2.三元运算符 3.assert断言:抛出AssertionError异常 4.for循环 4. 5.break和continue

常用排序算法之插入排序

目录 前言 一、基本原理 1.算法步骤 2.动画演示 3.插入排序的实现代码 二、插入排序的时间复杂度 1. 时间复杂度 1.最优时间复杂度 2.最差时间复杂度 3.平均时间复杂度 2. 空间复杂度 三、插入排序的优缺点 1.优点 2.缺点 四、插入排序的改进与变种 五、插入排…

数据分析及应用:经营分析中的综合指标解析与应用

目录 1. 市场份额(Market Share) 2. 客户获取成本(Customer Acquisition Cost, CAC) 3. 客户生命周期价值(Customer Lifetime Value, CLV) 4. 客户留存率(Customer Retention Rate, CRR) 5. 净推荐值(Net Promoter Score, NPS) 6. 转化率(Conversion Rate) …

工业相机 SDK 二次开发-Halcon 插件

本文介绍了 Halcon 连接相机时插件的使用。通过本套插件可连接海康 的工业相机。 一. 环境配置 1. 拷贝动态库 在 用 户 安 装 MVS 目 录 下 按 照 如 下 路 径 Development\ThirdPartyPlatformAdapter 找到目录为 HalconHDevelop 的文 件夹&#xff0c;根据 Halcon 版本找到对…

【Vim Masterclass 笔记25】S10L45:Vim 多窗口的常用操作方法及相关注意事项

文章目录 S10L45 Working with Multiple Windows1 水平分割窗口2 在水平分割的新窗口中显示其它文件内容3 垂直分割窗口4 窗口的关闭5 在同一窗口水平拆分出多个窗口6 关闭其余窗口7 让四个文件呈田字形排列8 光标在多窗口中的定位9 调节子窗口的尺寸大小10 变换子窗口的位置11…

Linux TCP 之 RTT 采集与 RTO 计算

我们来看看 Linux TCP 采集 RTT 的函数 tcp_rtt_estimator&#xff0c;看注释&#xff0c;充满了胶着。 但在那个谨慎的年代&#xff0c;这些意味着什么&#xff1f; RTT 最初仅用于 RTO 的计算而不是用于调速&#xff0c;RTO 的计算存在两个问题&#xff0c;如果过估&#x…

如何使用CRM数据分析优化销售和客户关系?

嘿&#xff0c;大家好&#xff01;你有没有想过为什么有些公司在市场上如鱼得水&#xff0c;而另一些却在苦苦挣扎&#xff1f;答案可能就藏在他们的销售策略和客户关系管理&#xff08;CRM&#xff09;系统里。今天我们要聊的就是如何通过有效的 CRM 数据分析来提升你的销售额…

《Effective Java》学习笔记——第2部分 对象通用方法最佳实践

文章目录 第2部分 所有对象通用方法一、前言二、最佳实践内容1. equals()方法2. hashCode()方法3. toString() 方法4. clone() 方法5. finalize() 方法6. compareTo()方法&#xff08;实现 Comparable 接口&#xff09; 三、小结 第2部分 所有对象通用方法 一、前言 《Effect…

前沿技术趋势洞察:2024年技术的崭新篇章与未来走向!

引言 时光飞逝&#xff0c;2024年已经来临&#xff0c;回顾过去一年&#xff0c;科技的迅猛进步简直让人目不暇接。 在人工智能&#xff08;AI&#xff09;越来越强大的今天&#xff0c;我们不再停留在幻想阶段&#xff0c;量子计算的雏形开始展示它的无穷潜力&#xff0c;Web …

图的基本概念

一、图 二、顶点的度 三、图的同构 ​​​​​​​​​​​ 四、完全图 五、子图 六、补图

【游戏设计原理】75 - 最小最大化

一、理解与分析 最小/最大化的核心是玩家在角色扮演类游戏中使用的一种策略&#xff0c;旨在通过把角色的某些不利特性最小化、而有利特性最大化来增强角色在特定领域的优势。这种策略通常表现为以下几种形式&#xff1a; 角色单一化&#xff1a;玩家通过极端优化角色的某一项…

【K8S系列】K8s 领域深度剖析:年度技术、工具与实战总结

引言 Kubernetes作为容器编排领域的行业标准&#xff0c;在过去一年里持续进化&#xff0c;深刻推动着云原生应用开发与部署模式的革新。本文我将深入总结在使用K8s特定技术领域的进展&#xff0c;分享在过去一年中相关技术工具及平台的使用体会&#xff0c;并展示基于K8s的技术…

PyCharm+RobotFramework框架实现UDS自动化测试- (四)项目实战0x10

1.环境搭建 硬件环境&#xff1a;CANoe、待测设备&#xff08;包含UDS诊断模块&#xff09; 2.pythonPyCharm环境 pip install robotframework pip install robotframework-ride pip install openpyxl pip install udsoncan pip install python-can pip install can-isotp3…

mybatis(19/134)

大致了解了一下工具类&#xff0c;自己手敲了一边&#xff0c;java的封装还是真的省去了很多麻烦&#xff0c;封装成一个工具类就可以不用写很多重复的步骤&#xff0c;一个工厂对应一个数据库一个environment就好了。 mybatis中调用sql中的delete占位符里面需要有字符&#xf…

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证7)

本文验证基于请求头中传递token信息的认证方式&#xff0c;webapi项目的控制器类中新建如下函数&#xff0c;仅通过验证的客户端能调用&#xff0c;需要客户端请求在Header中添加’Authorization’: Bearer token’的键值对且通过token验证后才能调用。 [Authorize] [HttpGet]…

Linux:进程(三)

1. 进程创建补充 fork之后父子两个执行流分别执行&#xff0c;fork之后谁谁先执行由调度器来决定。 一般&#xff0c;父子代码共享。当父子不再写入时&#xff0c;数据也是共享的&#xff0c;但是当有一方要写入&#xff0c;就触发写时拷贝。 fork调用失败的原因 1. 系统中有…

一、vue智能Ai对话(高仿通义千问)普通版。

如需源码&#xff1a;请私信。 普通版视频地址&#xff1a;普通版视频 流式进阶版视频地址&#xff1a;流式进阶版视频 流式进阶版&#xff1a;流式进阶版源码 html结构和js方法&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta …