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

相关推荐
江湖行骗老中医12 分钟前
Pinia 是 Vue 的专属状态管理库
前端·javascript·vue.js
用户693717500138412 分钟前
Android 开发,别只钻技术一亩三分地,也该学点“广度”了
android·前端·后端
郑鱼咚14 分钟前
别再神化Spec了,它可能只是AI Coding的临时补丁
前端
张元清18 分钟前
React 鼠标追踪与交互效果实战
前端·javascript·面试
gogogo出发喽18 分钟前
使用Pear Admin Flask
后端·python·flask
MinterFusion18 分钟前
HTML DOM元素的定位问题
前端·css·html
与虾牵手23 分钟前
Python asyncio 踩了一周坑,我把能犯的错全犯了一遍
python
飞Link27 分钟前
LangGraph 核心架构解析:节点 (Nodes) 与边 (Edges) 的工作机制及实战指南
java·开发语言·python·算法·架构
落魄江湖行31 分钟前
入门篇六 Nuxt4错误处理:给应用装个安全气囊
前端·typescript·nuxt4
薛定猫AI34 分钟前
【技术干货】用 design.md 驯服 AI 生成前端:从 Awesome Design 到工程化落地实践
前端·人工智能