今天我来针对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>
少年没有乌托邦,心向远方自明朗!
如果这个博客对你有帮助,给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞,收藏和关注哦❤
如果有疑问或有不同见解,欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关前端的内容和示例
点赞加关注,学习不迷路,好,本次的学习就到这里啦!!!
我们下次再见喽!