web前端开发——开发环境和基本知识

今天我来针对web前端开发讲解一些开发环境基本知识

什么是前端

    前端通常指的是网站或者Web应用中用户可以直接与之交互的部分,包括网站的结构、设计、内容和功能。它是软件开发中的一个专业术语,特别是指Web开发领域。前端开发涉及的主要技术包括HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript(一种脚本语言)。

- HTML 是构建网页结构的骨架,它定义了网页内容的布局和结构。
- CSS 负责网页的表现样式,比如布局、颜色和字体等。
- JavaScript 则用于控制网页的行为,使得页面能够响应用户的操作,实现动态效果和交互功能。

前端开发者需要关注用户界面(UI)用户体验(UX)设计,确保网站或应用在不同的设备和浏览器上都能正常运行,同时还要优化网站的性能和交互体验。前端与后端(服务器端程序、数据库等)共同协作,构成了完整的Web应用。

常见前端页面

Web页面

PC端程序页面

移动端APP页面

什么是HTML页面

        HTML超文本标记语言

超文本:文本、声音、图片、视频、表格、链接

标记:是由许多的标签组成

HTML页面是试运行到浏览器上面的(建议chrome)

开发工具构建

Sublime,idea(商业版,社区版代码高亮,代码补全,代码缩进)

VScode(企业开发前端使用的工具)

三个常用插件

Auto Rename Tag  自动对齐头和尾

View-in-browaer  在VScode中直接打开浏览器

右键选择view in Brower(如下图)

Live server  自动刷新

右键选择open with live server(如下图)

编写第一个HTML页面

前提:记事本编写代码

效果:直接浏览器上输出hello world, (更改一下后缀即可,改为html

标签

带有<>的称之为标签,标签中含有反斜杠 / 的称之为双标签:有开始有结束

Html : html文件根标签

Head: 编写页面相关的属性

Title: 页面标题

Body: 页面内容展示信息

DOM树中

所有的标签都是html子标签

Head和body是兄弟标签

Head和title父子标签

Ps:可以通过缩进判断关系

每一个标签相当于一个对象,程序员可以通过拿到这些对象,拿到之后就可以对这些对象进行增删查改

VScode快速生成代码框架

!+ 回车

即可生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


少年没有乌托邦,心向远方自明朗!

如果这个博客对你有帮助,给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞,收藏关注哦❤
如果有疑问或有不同见解,欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关前端内容示例
点赞加关注,学习不迷路,好,本次的学习就到这里啦!!!

我们下次再见喽!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows ipconfig命令详解,Windows查看IP地址信息

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 ipconfig 1、基…

mac|Mac压缩与解压缩

1、系统自带的压缩软件。但是它能解压的格式很少 2、keka&#xff08;优点&#xff1a;体积小&#xff0c;没广告&#xff09; 支持压缩格式&#xff1a;7z&#xff0c;Zip&#xff0c;Tar&#xff0c;Gzip&#xff0c;Bzip2&#xff0c;DMG&#xff0c;ISO 支持的提取格式&…

计算机专业怎么选择电脑

现在高考录取结果基本已经全部出来了&#xff0c;很多同学都如愿以偿的进入到了计算机类专业&#xff0c;现在大部分同学都在为自己的大学生活做准备了&#xff0c;其中第一件事就是买电脑&#xff0c;那计算机类专业该怎么选择电脑呢&#xff1f; 计算机专业是个一类学科&…

golang线程池ants-实现架构

1、总体架构 ants协程池&#xff0c;在使用上有多种方式(使用方式参考这篇文章&#xff1a;golang线程池ants-四种使用方法)&#xff0c;但是在实现的核心就一个&#xff0c;如下架构图&#xff1a; 总的来说&#xff0c;就是三个数据结构&#xff1a; Pool、WorkerStack、goW…

性能测试相关理解(一)

根据学习全栈测试博主的课程做的笔记 一、说明 若未特别说明&#xff0c;涉及术语都是jmeter来说&#xff0c;线程数&#xff0c;就是jmeter线程组中的线程数 二、软件性能是什么 1、用户关注&#xff1a;响应时间 2、业务/产品关注&#xff1a;响应时间、支持多少并发数、…

Oracle 11.2.0.1升级到11.2.0.4并做rman备份异机恢复

下载好数据库升级包&#xff0c;想去Oracle官网下载的&#xff0c;提示没有授权 只能在csdn找付费的了&#xff0c;9块1个&#xff0c;下载了前2个。 注意&#xff0c;总共有7个包&#xff0c;如果Oracle是安装在linux服务器&#xff0c;且无图形界面管理的 只需要第一&#xf…

Java面试八股之如何提高MySQL的insert性能

如何提高MySQL的insert性能 提高MySQL的INSERT性能可以通过多种策略实现&#xff0c;以下是一些常见的优化技巧&#xff1a; 批量插入&#xff1a; 而不是逐条插入&#xff0c;可以使用单个INSERT语句插入多行数据。例如&#xff1a; INSERT INTO table_name (col1, col2) V…

C++笔试强训2

文章目录 一、选择题二、编程题 一、选择题 和笔试强训1的知识点考的一样&#xff0c;因为输出的是double类型所以后缀为f,m.n对其30个字符所以m是30&#xff0c;精度是4所以n是4&#xff0c;不加符号默认是右对齐&#xff0c;左对齐的话前面加-号&#xff0c;所以答案是-30.4f…

最新扣子(Coze)实战案例:使用扩图功能,让你的图任意变换,完全免费教程

&#x1f9d9;‍♂️ 大家好&#xff0c;我是斜杠君&#xff0c;手把手教你搭建扣子AI应用。 &#x1f4dc; 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》&#xff0c;完全免费学习。 &#x1f440; 微信关注公从号&#xff1a;斜杠君&#xff0c;可获取完整版教程。&a…

深入探索C语言中的结构体:定义、特性与应用

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 目录 结构体的介绍结构体定义结构成员的类型结构体变量的定义和初始化结构体成员的访问结构体传参 结构体的介绍 在C语言中&#xff0c;结构体是一种用户自定义的数据类型&#xff0c;它允许开发者将不同类型的变量组合在一起…

MySQL数据库树状结构查询

一、树状结构 MySQL数据库本身并不直接支持树状结构的存储&#xff0c;但它提供了足够的灵活性&#xff0c;允许我们通过不同的方法来模拟和实现树状数据结构。具体方法看下文。 数据库表结构&#xff1a; 实现效果 查询的结果像树一样 二、使用 以Catalog数据表&#xff0c…

lua入门(1) - 基本语法

本文参考自&#xff1a; Lua 基本语法 | 菜鸟教程 (runoob.com) 需要更加详细了解的还请参看lua 上方链接 交互式编程 Lua 提供了交互式编程模式。我们可以在命令行中输入程序并立即查看效果。 Lua 交互式编程模式可以通过命令 lua -i 或 lua 来启用&#xff1a; 如下图: 按…

深度解析Ubuntu版本升级:LTS版本升级指南

深度解析Ubuntu版本升级&#xff1a;Ubuntu版本生命周期及LTS版本升级指南 Ubuntu是全球最受欢迎的Linux发行版之一&#xff0c;其版本升级与维护策略直接影响了无数用户的开发和生产环境。Canonical公司为Ubuntu制定了明确的生命周期和发布节奏&#xff0c;使得社区、企业和开…

Micron近期发布了32Gb DDR5 DRAM

Micron Technology近期发布了一项内存技术的重大突破——一款32Gb DDR5 DRAM芯片&#xff0c;这项创新不仅将存储容量翻倍&#xff0c;还显著提升了针对人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、高性能计算&#xff08;HPC&#xff09;以及数…

Wireshark网络抓包工具入门指南

目录 引言 安装抓包工具 抓包基础概念 抓包步骤 流程 抓包工具头的分析 14.3 以太网的完整帧格式 粘包与拆包现象解析及解决方案 发生原因 解决方案 14.3.1以太网头 14.3.2 IP头 14.3.3 UDP头 14.3.4 TCP头 引言 Wireshark是一款功能强大的开源网络协议分析器&am…

SpringMVC:SpringMVC执行流程

文章目录 一、介绍二、什么是MVC 一、介绍 Spring MVC 是一种基于Java的Web框架&#xff0c;它采用了MVC&#xff08;Model - View - Controller&#xff09;设计模式&#xff0c;通过吧Model、View和Controller分离&#xff0c;将Web层进行职责解耦&#xff0c;把复杂的Web应…

C++|哈希应用->布隆过滤器

目录 一、概念 二、模拟实现 三、布隆过滤器扩展应用 上一篇章学习了位图的使用&#xff0c;但它只适用于整数&#xff0c;对于要查询字符串是否在不在&#xff0c;位图并不能解决。所以针对这一问题&#xff0c;布隆过滤器可以派上用场&#xff0c;至于布隆过滤器是什么&am…

G2.【C语言】EasyX绘制颜色窗口

1.窗口 窗口&#xff1a;宽度*高度&#xff08;单位都是像素&#xff09; #include <stdio.h> #include <easyx.h> int main() {initgraph(640, 480);getchar();return 0; } 640是宽&#xff0c;480是高 2.操作窗口的三个按钮 #include <stdio.h> #incl…

推荐Bulk Image Downloader插件下载网页中图片链接很好用

推荐&#xff1a;Bulk Image Downloader chome浏览器插件下载图片链接&#xff0c;很好用。 有个网页&#xff0c;上面放了数千的gif的电路图&#xff0c;手工下载会累瘫了不可。想找一个工具分析它的静态链接并下载&#xff0c;找了很多推荐的下载工具&#xff0c;都是不能分…

Github:git提交代码到github

创建 GitHub 仓库 a. 登录到您的 GitHub 账户。 b. 点击右上角的 "" 图标&#xff0c;选择 "New repository"。 c. 填写仓库名称&#xff08;例如 "Mitemer"&#xff09;。 d. 添加项目描述&#xff08;可选&#xff09;。 e. 选择仓库为 &…