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.mzph.cn/pingmian/67658.shtml

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

相关文章

MySQL面试题2025 每日20道【其一】

1、MySQL 中的数据排序是怎么实现的&#xff1f; 简单 在 MySQL 中&#xff0c;数据排序是通过 ORDER BY 子句来实现的。当你执行一个查询语句时&#xff0c;可以在 SELECT 语句的末尾添加 ORDER BY 来指定按照哪个列进行排序&#xff0c;以及升序&#xff08;ASC&#xff09;…

vue 学习笔记 - 创建第一个项目 idea

1、安装Vue CLI 查看npm版本号 &#xff08;可跳过&#xff09; % npm -v 11.0.0安装Vue CLI % npm install -g vue/cli2、创建项目 进入工程文件目录 % cd /Users/ruizhifeng/work/aina-client查看vue 版本号 &#xff08;可跳过&#xff09; % vue --version vue/cli 5…

网络安全---CMS指纹信息实战

CMS简介 CMS&#xff08;Content Management System&#xff09;指的是内容管理系统&#xff0c;如WordPress、Joomla等。CMS系统非常常见&#xff0c;几乎所有大型网站都使用CMS来管理其网站的内容。由于常见CMS的漏洞较多&#xff0c;因此黑客将不断尝试利用这些漏洞攻击CMS…

基于SSM的自助购药小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

anaconda安装和环境配置

文章目录 一、Anaconda下载1.从官网直接下载&#xff1a;2.从镜像站中下载&#xff1a; 二、Anaconda安装三、检测是否有Anaconda配置anaconda环境 四、 Anaconda创建多个python环境&#xff08;方便管理项目环境&#xff09;1.查看conda有哪些环境2.创建python3.6的环境3.激活…

DDD - 如何设计支持快速交付的DDD技术中台

文章目录 Pre概述打造快速交付团队烟囱式的开发团队(BAD)大前端技术中台(GOOD) 技术中台的特征简单易用的技术中台建设总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对象的两种设计思路…

Agent AI: 强化学习,模仿学习,大型语言模型和VLMs在智能体中的应用

Agent AI: 强化学习,模仿学习,大型语言模型和VLMs在智能体中的应用 “Agent AI: Surveying the Horizons of Multimodal Interaction”主要探讨了 Agent AI 技术,包括其在多模态交互中的应用、面临的问题及解决方案。Agent AI 是一种能在不同环境中感知和行动的智能体系统,…

二、模型训练与优化(5):验证优化后的模型

目录 一、在 PC 上使用 TFLite Python Interpreter 进行推理 1. 安装 TFLite Python Interpreter 2. 编写推理验证脚本 脚本说明&#xff1a; 3. 性能测试&#xff08;可选&#xff09; 二、在嵌入式平台&#xff08;STM32Cube.AI&#xff09;上验证 在嵌入式平台上对比…

【Golang 面试题】每日 3 题(三十六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

【C++】结构体(下)

4、结构体指针 作用&#xff1a;通过指针访问结构体中的成员 利用操作符“----->”可以通过结构体指针访问结构体成员。 示例&#xff1a; #include<iostream> #include<string> using namespace std; struct student {//姓名string name;//年龄int age;//分数…

LLMs之Dataset:中文互联网基础语料2.0的简介、下载和使用方法、案例应用之详细攻略

LLMs之Dataset&#xff1a;中文互联网基础语料2.0的简介、下载和使用方法、案例应用之详细攻略 目录 中文互联网基础语料2.0的简介 1、特点 中文互联网基础语料2.0的下载和使用方法 中文互联网基础语料2.0的案例应用 中文互联网基础语料2.0的简介 2025年1月发布&#xff0…

Android Studio:Linux环境下安装与配置

更多内容&#xff1a;XiaoJ的知识星球 Android Studio&#xff1a;Linux环境下安装与配置 1.安装JDK2.安装Android Studio2.1 获取安装包2.2 安装&#xff08;1&#xff09;配置环境变量&#xff1a;&#xff08;2&#xff09;运行安装&#xff1a;&#xff08;3&#xff09;配…

道格拉斯-普克算法(DP)轮廓点精简(Python)

1、介绍 道格拉斯-普克算法由David H. Douglas和Thomas K. Peucker于1973年提出&#xff0c;主要用于简化曲线或折线。而实际中&#xff0c;激光点云的边缘点非常粗糙&#xff0c;如果直接将点进行连接&#xff0c;锯齿问题严重。经过DP算法处理后&#xff0c;数据显示会比较光…

【机器学习实战入门项目】使用深度学习创建您自己的表情符号

深度学习项目入门——让你更接近数据科学的梦想 表情符号或头像是表示非语言暗示的方式。这些暗示已成为在线聊天、产品评论、品牌情感等的重要组成部分。这也促使数据科学领域越来越多的研究致力于表情驱动的故事讲述。 随着计算机视觉和深度学习的进步&#xff0c;现在可以…

【unity进阶篇】不同Unity版本对应的C# 版本和API 兼容级别(Api Compatibility Level)选择

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…

线段树优化dp,abc389F - Rated Range

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 F - Rated Range 二、解题报告 1、思路分析 考虑定义 f(i, j) 为 初始分…

MySQL 主从复制原理及其工作过程的配置

一、MySQL主从复制原理 MySQL 主从同步是一种数据库复制技术&#xff0c;它通过将主服务器上的数据更改复制到一个或多个从服务器&#xff0c;实现数据的自动同步。 主从同步的核心原理是将主服务器上的二进制日志复制到从服务器&#xff0c;并在从服务器上执行这些日志中的操作…

Linux——线程条件变量(同步)

Linux——多线程的控制-CSDN博客 文章目录 目录 文章目录 前言 一、条件变量是什么&#xff1f; 1、死锁的必要条件 1. 互斥条件&#xff08;Mutual Exclusion&#xff09; 2. 请求和保持条件&#xff08;Hold and Wait&#xff09; 3. 不可剥夺条件&#xff08;No Preemption&…

# [Unity] 【游戏开发】获取物体和组件的脚本方法

在Unity开发中,获取游戏物体(GameObject)及其组件(Component)是脚本编程的核心技能。本文将详细介绍如何在脚本中访问游戏物体及其组件,深入讲解常用的获取方法及优化策略,以帮助开发者高效编写Unity脚本。 1. 理解游戏物体与组件的关系 游戏物体(GameObject):Unity场…

【Android】蓝牙电话HFP连接源码分析

一、概述 在Android系统中&#xff0c;HF&#xff08;Hands-Free Profile&#xff09;客户端与AG&#xff08;Audio Gateway&#xff09;端之间的HFP&#xff08;Hands-Free Profile&#xff09;连接是蓝牙音频通信的重要组成部分。这一过程涉及多个层次和组件的协同工作&…