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

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.lryc.cn/news/524235.html

相关文章:

  • .Net Core微服务入门全纪录(五)——Ocelot-API网关(下)
  • 2024嵌入式系统的未来发展与技术洞察分享
  • python-44-嵌入式数据库SQLite和DuckDB
  • 1.2.神经网络基础
  • 算法题目总结-双指针
  • 人形机器人将制造iPhone!
  • redis 各个模式的安装
  • 《王者荣耀》皮肤爬虫源码
  • 学习ASP.NET Core的身份认证(基于JwtBearer的身份认证8)
  • PyTorch使用教程(6)一文讲清楚torch.nn和torch.nn.functional的区别
  • React的应用级框架推荐——Next、Modern、Blitz等,快速搭建React项目
  • 基于GRU实现股价多变量时间序列预测(PyTorch版)
  • Java创建对象有几种方式?
  • Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件
  • 基于Python机器学习的双色球数据分析与预测
  • 微软Win10 RP 19045.5435(KB5050081)预览版发布!
  • 使用 Parcel 和 NPM 脚本进行打包
  • HTML<center>标签
  • LatentSync本地部署教程:基于音频精准生成唇形高度同步视频
  • ES使用笔记,聚合分组后再分页,探索性能优化问题
  • VUE3 vite下的axios跨域
  • Mac下安装ADB环境的三种方式
  • 在Vue中,<img> 标签的 src 值
  • Kotlin基础知识学习(三)
  • 渗透测试之XEE[外部实体注入]漏洞 原理 攻击手法 xml语言结构 防御手法
  • 店铺营业状态设置(day05)
  • 游戏引擎学习第84天
  • 快手SDK接入错误处理经验总结(WebGL方案)
  • C语言 for 循环:解谜数学,玩转生活!
  • Node.js 与 JavaScript 是什么关系