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

news2024/10/5 10:22:40

今天我来针对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>


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

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

我们下次再见喽!

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

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

相关文章

C++语言相关的常见面试题目(一)

1. const关键字的作用 答&#xff1a; 省流&#xff1a;&#xff08;1&#xff09;定义变量&#xff0c;主要为了防止修改 (2) 修饰函数参数&#xff1a;防止在函数内被改变 &#xff08;3&#xff09;修饰函数的返回值 &#xff08;4&#xff09;修饰类中的成员函数 2. Sta…

Windows远程桌面实现之十五:投射浏览器摄像头到xdisp_virt以及再次模拟摄像头(一)

by fanxiushu 2024-07-01 转载或引用请注明原始作者。 本文还是围绕xdisp_virt这个软件展开&#xff0c; 再次模拟成摄像头这个比较好理解&#xff0c;早在很久前&#xff0c;其实xdisp_virt项目中就有摄像头功能&#xff0c; 只是当时是分开的&#xff0c;使用起来…

centos docker 安装mysql:8.0.21 天坑记录

docker pull mysql:8.0.21 安装的mysql 8.0.21 版本&#xff0c;当创建表时只要创建表的字段大于10&#xff0c;就会报错 > 2013 - Lost connection to MySQL server during query 当删除一个字段&#xff0c;刚好9个字段时就可以创建成功&#xff0c;打印等于10个&#…

时间处理的未来:Java 8全新日期与时间API完全解析

文章目录 一、改进背景二、本地日期时间三、时区日期时间四、格式化 一、改进背景 Java 8针对时间处理进行了全面的改进&#xff0c;重新设计了所有日期时间、日历及时区相关的 API。并把它们都统一放置在 java.time 包和子包下。 Java5的不足之处&#xff1a; 非线程安全&…

Nginx auth 的权限验证

基本流程 整个流程为&#xff1b;以用户视角访问API开始&#xff0c;进入 Nginx 的 auth 认证模块&#xff0c;调用 SpringBoot 提供的认证服务。根据认证结果调用重定向到对应的 API 接口或者 404 页面。 查看版本保证有 Nginx auth 模块 由于 OpenAI 或者本身自己训练的一套…

实现多数相加,但是传的参不固定

一、情景 一般实现的加法和减法等简单的相加减函数的话。一般都是写好固定传的参数。比如&#xff1a; function add(a,b) {return a b;} 这是固定的传入俩个&#xff0c;如果是三个呢&#xff0c;有人说当然好办&#xff01; 这样写不就行了&#xff01; function add(a…

前端JS特效第22波:jQuery滑动手风琴内容切换特效

jQuery滑动手风琴内容切换特效&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm…

Day4 用 rustlings 练习 Rust 语言

大家好 今天 完成 2024年自动驾驶OS开发训练营-初阶营第四期-导学 Day4用 rustlings 练习 Rust 语言 欢迎加入国家智能网联汽车创新中心OS开发训练营大家庭。&#x1f680; 导学阶段启动 在正式开营之前&#xff0c;我们特别设置了导学阶段&#xff0c;旨在帮助大家更好地迎接颇…

万和day01代码分析

将了数据库的多表之间的操作&#xff0c;实际应用到JDBC中去。 一共五张表&#xff0c; info存储的是具体的信息&#xff0c;edu job role 和info都是多对一的关系。 采用的是Java FX&#xff0c;界面采用xml去编写。 项目理解一 在JavaFX中&#xff0c;ObservableList 是一个…

SSL/CA 证书及其相关证书文件解析

在当今数字化的时代&#xff0c;网络安全变得至关重要。SSL&#xff08;Secure Socket Layer&#xff09;证书和CA&#xff08;Certificate Authority&#xff09;证书作为保护网络通信安全的重要工具&#xff0c;发挥着关键作用。 一、SSL证书 SSL证书是数字证书的一种&…

汉诺塔与青蛙跳台阶

1.汉诺塔 根据汉诺塔 - 维基百科 介绍 1.1 背景 最早发明这个问题的人是法国数学家爱德华卢卡斯。 传说越南河内某间寺院有三根银棒&#xff0c;上串 64 个金盘。寺院里的僧侣依照一个古老的预言&#xff0c;以上述规则移动这些盘子&#xff1b;预言说当这些盘子移动完毕&am…

使用Charles mock服务端响应数据

背景 服务端未提供接口/服务端接口返回结果有逻辑限制&#xff08;次数限制&#xff09;&#xff0c;不能通过原始接口返回多次模拟预期的返回结果&#xff0c;例如边界值情况 客户端受到接口响应数据的限制&#xff0c;无法继续开发或测试&#xff0c;会极大影响开发测试效率…

C# WPF 3D 数据孪生 系列六

数字孪生应用开发 应用开发中的布局需求 Grid基本使用 WPF 3D绘图 点云 系列五-CSDN博客 WPF UI 3D 多轴 机械臂 stl 模型UI交互-CSDN博客 WPF UI 3D 基本概念 点线三角面 相机对象 材质对象与贴图 3D地球 光源 变形处理 动作交互 辅助交互插件 系列三-CSDN博客 数字孪生 介…

550kg级大载重长航时无人机直升机技术详解

550kg级大载重长航时无人机直升机&#xff0c;作为一种高性能的无人机系统&#xff0c;具备了多项先进的技术特点&#xff0c;以满足高海拔、高寒等复杂环境下的应用需求。这些无人机直升机通常具备高载重、长航时、强适应性、高可靠性和良好的任务拓展性。 设备由无人直升机平…

刷题之移除元素(leetcode)

移除元素 这题简单题&#xff0c;但是前面思路是先找到左边第一个不是val的&#xff0c;和右边第一个不是val的&#xff0c;进行交换&#xff0c;边界条件没有处理好&#xff0c;导致报错&#xff08;水平真菜&#xff09; 也可以直接把left是val的与right进行交换&#xf…

个人视角,社会影响力:自媒体的魅力所在

随着数字化时代的到来&#xff0c;自媒体正成为信息传播领域的一场革命。个人视角与社会影响力的结合&#xff0c;赋予了自媒体独特的魅力。在传统媒体受限制的同时&#xff0c;自媒体为每个人提供了表达自己观点和思想的自由。个体的真实视角使得自媒体在信息传播中发挥着重要…

匠心筑智:探索AI智能问答系统的设计之道

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已悄然渗透到我们生活的方方面面&#xff0c;其中&#xff0c;AI智能问答系统作为人机交互的重要桥梁&#xff0c;正逐步改变着人们获取信息、解决问题的方式。本文将带您深入探索如何设计一个高效、智能且…

即时通讯平台项目测试(登录/注册页面)

http://8.130.98.211:8080/login.html项目访问地址&#xff1a;即时通讯平台http://8.130.98.211:8080/login.html 本篇文章进行登录和注册页面的测试。自动化脚本的依赖在文章末尾。 登录页面测试 UI测试 测试环境&#xff1a;Win11&#xff1b;IntelliJ IDEA 2023.2&#…

汇聚荣拼多多电商的技巧有哪些?

在电商平台上&#xff0c;汇聚荣拼多多以其独特的商业模式和创新的营销策略吸引了大量消费者。那么&#xff0c;如何在这样一个竞争激烈的平台上脱颖而出&#xff0c;成为销售佼佼者呢?本文将深入探讨汇聚荣拼多多电商的成功技巧。 一、精准定位目标客户群体 首先&#xff0c;…

CosyVoice多语言、音色和情感控制模型,one-shot零样本语音克隆模型本地部署(Win/Mac),通义实验室开源

近日&#xff0c;阿里通义实验室开源了CosyVoice语音模型&#xff0c;它支持自然语音生成&#xff0c;支持多语言、音色和情感控制&#xff0c;在多语言语音生成、零样本语音生成、跨语言声音合成和指令执行能力方面表现卓越。 CosyVoice采用了总共超15万小时的数据训练&#…