Python 实战 · 从 0 到 1 搭建直播视频平台
Barry
某上市公司技术研发总监
3717 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
Python 实战 · 从 0 到 1 搭建直播视频平台
15
15
1.0x
00:00/00:00
登录|注册

03|初识Web:学习Web最好的方式是什么?

你好,我是 Barry。
我们每个人都浏览过无数个 Web 网页,只要打开浏览器里面就有无数网站,每一个网站又由很多个网页组成。
网页的起源要追溯到 1989 年,CERN(欧洲粒子物理研究所)的一个小组提交了一个针对 Internet 的新协议和一个使用该协议的文档系统,该小组将这个新系统命名为 World Wide Web,它的目的是让全球的科学家能够利用 Internet 交流自己的工作文档。
这个新系统允许 Internet 上任意一个用户,从众多文档服务计算机的数据库中搜索和获取文档。1990 年末,这个新系统的基本框架已经在 CERN 的一台计算机上开发实现了。1991 年,这个系统移植到了其他计算机平台并正式发布。
经历了几十年的发展,网页的功能越来越丰富和强大,对于互联网企业来说,网页更是必不可少的。像企业的官网、网页端项目、公司内部管理系统都是常见的网页项目。
想要学习网页前端开发,就需要学习一些前端相关的技术和知识。前端必知必会的核心技术大致可以分为五大块,分别是:
HTML
CSS
JavaScript
框架:Vue、React 等
打包工具:Webpack、Vite 等

前端核心技术模块

1. HTML
网页最核心的技术就是 HTML 了。我们看到的网页其实就是由 HTML 这种编程语言描述出来的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了学习前端开发的核心技术和模块,包括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
收起评论
显示
设置
留言
10
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部