likes
comments
collection
share

后端程序员快速入门前端01

作者站长头像
站长
· 阅读数 47

前言

之前在学校的时候就有一点前端基础，但也只有一点点，勉强能写HTML的程度。之前的前端水平只能在页面加个按钮，改个描述之类的，而且通常还要gpt帮忙。

最近因为工作需要，接触前端比较多，所以打算从0开始好好学习前端，路线大概为HTML -> CSS -> JS -> jQuery -> CSS3 -> HTML 5 -> Vue.js，这些博客大部分内容出自莫振杰老师的《Web前端开发精品课》 ，因为我不太喜欢视频学习，感觉知识密度有点低，这本书对初学者来说还是比较友好的，就是有点太小白了（比如会花一些篇幅介绍一些很基本的概念，例如函数、闭包等），如果是有一定开发经验，可以尝试其他书籍。

前端技术非常多，但最核心的还是HTML、CSS和JavaScript。我们可能还需要学习一些前端构建工具的使用，例如webpack、gulp、babel、express等。学完之后才算一位真正意义上的前端工程师。

我是如何学新技术的：

  • 找一个快速入门的学习教程，官方文档或者一本精华的书，以这个教程为主体进行学习
  • 对每一小节进行检验，比如自己想几个小练习
  • 通过产出倒逼自己学习和熟悉，比如做一个小项目

感觉这样学效率还是比较高的，最重要的是把技术当成技能，而不是知识，就像游泳一样，学会游泳最快的方式一定是先下水游起来，在编程领域，写东西就相当于“下水游泳”，一定要通过产出倒逼自己。

HTML

HTML需要学什么？

HTML的学习，最重要的是记住各种标签，以便搭建网页的骨架和理解一些封装好的前端框架，在开发中我们基本上很少手搓HTML，而是使用Vue、React这些成熟的前端开发框架，但是这些框架虽然语法和HTML差别很大，但是本质上还是封装的各种各样的工具，最后的结果还是一个HTML页面。所以HTML的学习还是很有必要的。

HTML是从HTML4.01升级到HTML5的。其中我们常说的HTML指的是HTML4.01，而HTML5一般指的是相对于HTML4.01“新增加的内容”，并不是说HTML4.01被淘汰了。

准确来说，你要学的HTML其实等于HTML4.01加上HTML5。HTML5带来了许多新特性和改进，一些主要的新增内容包括：

  1. 语义化标签：HTML5引入了一系列新的语义化标签，如<header>、<footer>、<nav>、<article>、<section>等，使得页面结构更清晰明了，对搜索引擎和开发者都更友好。
  2. 多媒体支持：HTML5 提供了 <audio> 和 <video> 标签，允许开发者直接在网页中嵌入音频和视频内容，而无需使用第三方插件（如 Flash）。
  3. Canvas绘图：HTML5中的<canvas>元素允许开发者使用JavaScript动态绘制图形、动画和图像，为游戏和数据可视化等应用提供了更多可能性。
  4. 本地存储：HTML5带来了本地存储能力，包括localStorage和sessionStorage，使得网页能够在客户端存储数据，提高了性能和用户体验。
  5. 表单增强：HTML5引入了一系列新的表单输入类型和属性，如<input type="date">、<input type="email">、<input type="url">等，使得表单更易于验证和操作。
  6. Web Workers：HTML5引入了Web Workers API，允许JavaScript在后台运行，提高了网页的响应性能和并发处理能力。
  7. WebSocket：HTML5中的WebSocket API使得浏览器和服务器之间可以建立持久的双向通信连接，实现了实时的数据交换，适用于聊天应用、实时游戏等场景。
  8. 地理位置：HTML5中的地理位置API允许网页获取用户的地理位置信息，用于提供基于位置的服务和个性化内容。
  9. 拖放功能：HTML5提供了原生支持拖放操作的API，使得开发者可以更轻松地实现拖放功能，如拖放文件上传等。

HTML基本骨架

<!DOCTYPE HTML> // 文档声明，说明这是一个HTML页面
<html>	// html主体，整个html页面从这里开始，到</html>结束
  <head> 	// 网页的头部，用于定义一些特殊内容，一般不会展示出来
  </head>
  <body> // 网页的身体，也是我们开发的主体部分
  </body>
</html>

虽然HTML结构在各大IDE都能自动生成，但是作为初学者，默写出HTML骨架是第一个任务。

HEAD

只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的。

在HTML中，一般来说，只有6个标签能放在head标签内。

  • title标签：定义网页标题
  • meta标签：定义页面特殊信息，例如页面关键字，页面描述，本页作者，版权声明等等<meta name="keywords" content="someinfo"/>，<meta name="description content="someotherinfo"/>，这些信息不是给人看的，页面也看不到，而是给爬虫看的。 还能够通过http-equiv属性定义网页使用的编码，以及自动刷新跳转。比如我们很常用的<meta charset="utf-8"/>其实就是<meta http-equiv="Content-Type" content="text/html; charset=utf-8"的缩写。
  • link标签：导入外部CSS文件，通常这么写<link type="text/css" rel="stylesheet" href="absolute_path/relative_path">
  • style标签：定义元素的CSS样式
  • script标签：定义页面的JS代码，也可以引入外部JS文件
  • base标签：设定基准URL，基本上用不到

练习

1.回顾前端学习路线

2.回顾HEAD相关标签

3.默写HTML骨架 + 注释每部分有什么作用

转载自:https://juejin.cn/post/7366203409189699636
评论
请登录