03|初识Web:学习Web最好的方式是什么?
前端核心技术模块
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了学习前端开发的核心技术和模块,包括HTML、CSS、JavaScript、框架(如Vue、React)以及打包工具(如Webpack、Vite)。HTML是网页的核心技术,通过标签描述网页内容;CSS用于美化网页;JavaScript则赋予网页动态效果;框架简化开发流程,提高效率;打包工具则优化开发体验。文章还通过实例演练了各个核心模块的使用,包括HTML标签的应用,如标题字号、段落、超链接、图片、表格、列表等,以及区块元素的划分。这些技术和实践将帮助读者快速了解前端开发的基础知识和应用,为进一步学习和实践打下基础。此外,还介绍了CSS对文本、超链接和区块的装饰,以及JavaScript实现动态效果和弹窗的方法。对于框架和打包工具,文章分别介绍了Vue、React以及Webpack、Vite的特点和应用。最后,给出了前端学习建议,包括多练习、阅读知名书籍和官方文档,以及参考优秀的代码和网站。整体而言,本文为读者提供了全面的前端学习指南和建议,帮助他们快速掌握前端开发的核心知识和技能。
《Python 实战 · 从 0 到 1 搭建直播视频平台》,新⼈⾸单¥59
全部留言(10)
- 最新
- 精选
- 一米思考题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动效小测试</title> </head> <body> <p>变化前-1</p> <button>文本变换</button> </body> <script> const but = document.querySelector('button'); const p1 = document.querySelector('p'); but.addEventListener('click', change); function change() { if (p1.textContent === "变化前-1") { p1.textContent = "变化前-2"; } else { p1.textContent = "变化前-1"; } } </script> </html>
作者回复: 代码准确无误,为你点赞
2023-04-28归属地:江苏2 - 银角大王<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动效小测试</title> </head> <body> <p id="text">变化前-1</p> <button onclick="changetext()">文本变换</button> </body> <script> var p1 = document.getElementById("text") function changetext(){ if (p1.textContent === "变化前-1") { p1.textContent = "变化前-2"; } else { p1.textContent = "变化前-1"; } } </script> </html>
作者回复: 完成的非常不错,为你点赞,继续保持,每节课的实操内容都要跟上!继续加油!
2023-12-20归属地:上海 - Geek_6c0b90老师,没有视频课程吗?
作者回复: 这个我们目前全部是文稿+语音,之后可以出一个视频教程版。
2023-12-07归属地:上海 - 不再是入门水平python的小宇<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本变换示例</title> </head> <body> <!-- p标签,显示默认的文本 --> <p id="text">变化前 - 1</p> <!-- 按钮,点击后触发文本变换 --> <button onclick="changeText()">文本变换</button> <!-- JavaScript代码,用于实现文本变换功能 --> <script> function changeText() { // 获取p标签元素 var textElement = document.getElementById('text'); // 更改p标签的文本内容 textElement.innerHTML = "变化后 - 2"; } </script> </body> </html>
作者回复: 完成的非常的不错,看到了你的执行力,希望你继续可以保持,也希望课程能够助力你有新的提升,我们一起加油!
2023-08-21归属地:上海 - coderHOW思考题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>动效小测试</title> </head> <body> <p>变换前 -1</p> <button id='btn'>文本变换</button> <script> let num = -1 p = document.querySelector('p') btn = document.querySelector("#btn") btn.onclick = function() { if (num == -1) { p.innerText = '变换后 -2' return num = -2 } if (num == -2) { p.innerText = '变换前 -1' return num = -1 } } </script> </body> </html>
作者回复: 写的非常用心,实现两次动效,我们一起努力,遇见更好的自己
2023-06-03归属地:广东 - camel请问前端开发应该用什么idea?可能会介绍前端开发环境的搭建吗?
作者回复: 你好,Idea 推荐使用Vscode比较轻量,对于开发环境课程中都会有,框架从0到到1都会涉及到。
2023-05-13归属地:浙江 - peter请教老师两个问题: Q1: PyCharm自身没有python解释器吗?我用PyCharm创建了一个工程,interpreter是本机上安装的Anaconda的python.exe。 Q2:前端开发IDE是用VSCode吗?
作者回复: Pycharm 需要进行解释器配置,也比较好操作,简称比较多,这个可以自己尝试来完成一下。前端开发是vscode 。
2023-05-02归属地:北京 - Geek_840593思考题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动效小测试</title> <script> function displayDate(){ document.getElementsByTagName("p")[0].innerHTML="变化后-2"; } </script> </head> <body> <p>变化前-1</p> <button type="button" onclick="displayDate()">文本变换</button> </body> </html>
作者回复: 完成得非常不错,我们一起加油。
2023-04-29归属地:重庆 - GAC·DU<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动效小测试</title> </head> <body> <p>变化前-1</p> <button>文本变换</button> <script> const btn = document.querySelector("button") const p = document.querySelector("p") btn.onclick = function () { p.innerText = "变化后-2" } </script> </body> </html>
作者回复: 完成的非常不错,实现效果的同时,还具备自己的一些想法来实现,你也可以尝试一下,有兴趣可以看看如何能实现,点击按钮实现如果当前文字是“变化后-2”,如何实现点击按钮再变回“变化前-1”。
2023-04-28归属地:北京2 - peter请教老师两个问题: Q1: PyCharm自身没有python解释器吗?我用PyCharm创建了一个工程,interpreter是本机上安装的Anaconda的python.exe。 Q2:前端开发IDE是用VSCode吗?2023-05-02归属地:北京1