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>


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

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

我们下次再见喽!

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

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

相关文章

昇思25天学习打卡营第15天|linchenfengxue

Pix2Pix实现图像转换 Pix2Pix概述 Pix2Pix是基于条件生成对抗网络&#xff08;cGAN, Condition Generative Adversarial Networks &#xff09;实现的一种深度学习图像转换模型&#xff0c;该模型是由Phillip Isola等作者在2017年CVPR上提出的&#xff0c;可以实现语义/标签到…

Java常用算法集合扩容机制分析

基础篇 基础篇要点&#xff1a;算法、数据结构、基础设计模式 1. 二分查找 要求 能够用自己语言描述二分查找算法能够手写二分查找代码能够解答一些变化后的考法 算法描述 前提&#xff1a;有已排序数组 A&#xff08;假设已经做好&#xff09; 定义左边界 L、右边界 R&…

东芝TB6560AHQ/AFG步进电机驱动IC:解锁卓越的电机控制性能

作为一名工程师&#xff0c;一直在寻找可靠且高效的组件来应用于你的项目中。东芝的TB6560AHQ/AFG步进电机驱动IC能够提供精准且多功能的电机控制&#xff0c;完全符合现代应用的高要求&#xff0c;保证高性能和易用性。在这篇文章中&#xff0c;我们将探讨TB6560AHQ/AFG的主要…

硅纪元视角 | 国内首款鸿蒙人形机器人“夸父”开启应用新篇章

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

es6新语法

es6新语法 1 什么是ES6 JS语法分三块 ECMAScript : 基础语法BOM 浏览器对象 history location windowDOM 文档对象 document 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA&#xff08;一个类似W3C的标准组织&#xff09;参与进行标准化的语法规范。ECMAS…

医疗器械企业CRM系统推荐清单(2024版)

近年来&#xff0c;我国医疗器械行业在国家政策支持、医改深入、人口老龄化和消费能力提升等因素推动下&#xff0c;得到了快速发展&#xff0c;正日益成为创新能力增强、市场需求旺盛的朝阳产业。然而&#xff0c;行业也面临价格压力、市场份额重新分配、合规风险以及产品和服…

解决 MEX 文件 ‘xxx.mexw64‘ 无效: 找不到指定的模块。的问题

1.问题描述 在matlab R2021b中运行编译好后的gptoolbox工具箱中的函数[SVtemp,SFtemp,IF] selfintersect(V,F);报错如下 MEX 文件 E:\MATLAB_File\gptoolbox\mex\selfintersect.mexw64 无效: 找不到指定的模块。出错 offset_bunny (第 15 行) [SVtemp,SFtemp,IF] selfinter…

论文略读:Learning and Forgetting Unsafe Examples in Large Language Models

随着发布给公众的大语言模型&#xff08;LLMs&#xff09;数量的增加&#xff0c;迫切需要了解这些模型从第三方定制的微调数据中学习的安全性影响。论文研究了在包含不安全内容的噪声定制数据上微调的LLMs的行为&#xff0c;这些数据集包含偏见、毒性和有害性 发现虽然对齐的L…

3033. 修改矩阵 Easy

给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix &#xff0c;新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等&#xff0c;接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。 返回矩阵 answer 。 示例 1&#xff1a; 输入&#xff1a;…

查看电脑显卡(NVIDIA)应该匹配什么版本的CUDA Toolkit

被串行计算逼到要吐时&#xff0c;决定重拾CUDa了&#xff0c;想想那光速般的处理感觉&#xff08;夸张了&#xff09;不要太爽&#xff0c;记下我的闯关记录。正好我的电脑配了NVIDIA独显&#xff0c;GTX1650&#xff0c;有菜可以炒呀&#xff0c;没有英伟达的要绕道了。回到正…

【Linux】生物信息学常用命令

参考资料来自生信技能树 先输入echo export PS1"[\033]2;\h:\u \w\007\033[33;1m]\u \033[35;1m\t\033[0m [\033[36;1m]\w[\033[0m]\n[\e[32;1m]$ [\e[0m]" >> ~/.bashrc 再输入source ~/.bashrc就能够让命令字体带上颜色&#xff0c;同时命令将会在下一行开…

软件设计之Java入门视频(12)

软件设计之Java入门视频(12) 视频教程来自B站尚硅谷&#xff1a; 尚硅谷Java入门视频教程&#xff0c;宋红康java基础视频 相关文件资料&#xff08;百度网盘&#xff09; 提取密码&#xff1a;8op3 idea 下载可以关注 软件管家 公众号 学习内容&#xff1a; 该视频共分为1-7…

每日一题~ (判断是否是合法的出栈序列)

大概的题意&#xff1a; 将 1-n 按照顺序进栈&#xff0c;问 输入的序列是否是合法的出栈序列。 遍历序列&#xff0c;如果当前这个值a小于 栈顶的值&#xff0c;说明它还未进栈&#xff08;因为我们是按照顺序进栈的&#xff09;&#xff0c;所以我们将 一些元素进栈&#xff…

nacos源码 nacos注册中心1.4.x 源码 spring cloud alibaba 的discovery做了什么 nacos客户端是如何启动的(二)

spring-cloud-alibaba-nacos-discovery 老版本中如何调用nacos的 1. 整体结构&#xff1a; 2. 思考: 如果你来做&#xff0c;如何做client 向server注册服务&#xff1a; 1.2.1 读yml&#xff0c;或本地文件找到服务器地址&#xff0c;以及其他配置 1.2.2 向server注册服务 1.2…

6800和8080单片机读写时序和液晶屏接口

前言&#xff1a; 随着单片机发展&#xff0c;集成度越来越高&#xff0c;因此目前单片机较少使用RD和WR信号操作外设&#xff0c;因此很多时候&#xff0c;变成了6800和8080单片机读写液晶屏了。早期的读写本质上是对一个地址进行即时的操作&#xff0c;现在可能是等数据送到…

网易游戏员工怒怼丁磊上热搜:每天员工陪你演戏点赞有意思吗

【头部财经】近日&#xff0c;网易游戏一员工在内部群怒怼丁磊的聊天记录曝光&#xff0c;引发网友关注。据头部财经了解&#xff0c;该员工名叫石佳煊&#xff0c;是网易游戏的游戏开发工程师&#xff0c;毕业于华盛顿大学&#xff0c;已在网易工作四年多。 截图显示&#xf…

【国产开源可视化引擎Meta2d.js】铅笔

铅笔 铅笔是可以任意涂鸦的绘图小工具 在线体验&#xff1a; 乐吾乐2D可视化 示例&#xff1a; // 开始铅笔绘画 meta2d.drawingPencil();// 鼠标抬起结束// 停止铅笔绘画&#xff08;关闭铅笔绘画状态&#xff09; meta2d.stopPencil(); 国产开源 乐吾乐潜心研发&#xff…

基于星火大模型的群聊对话分角色要素提取挑战赛

赛事任务与数据 2024 iFLYTEK A.I.开发者大赛-讯飞开放平台 (xfyun.cn) 从给定的<客服>与<客户>的群聊对话中, 提取出指定的字段信息&#xff0c;待提取的全部字段见下数据说明。 赛题方提供了184条真实场景的群聊对话数据以及人工标注后的字段提取结果&#xf…

AIGC专栏12——EasyAnimateV3发布详解 支持图文生视频 最大支持960x960x144帧视频生成

AIGC专栏12——EasyAnimateV3发布详解 支持图&文生视频 最大支持960x960x144帧视频生成 学习前言项目特点生成效果相关地址汇总项目主页Huggingface体验地址Modelscope体验地址源码下载地址 EasyAnimate V3详解技术储备Diffusion Transformer (DiT)Hybrid Motion ModuleU-V…

XXL-JOB中断信号感知

目录 背景 思路 实现逻辑 总结 背景 在使用xxl-job框架时&#xff0c;由于系统是由线程池去做异步逻辑&#xff0c;然后主线程等待&#xff0c;在控制台手动停止时&#xff0c;会出现异步线程不感知信号中断的场景&#xff0c;如下场景 而此时如果人工在控制台停止xxl-job执…