知识点梳理
前端的边界
前端已经远远超出了简单的页面开发范畴：
- Node.js来开发服务器端的应用
- Electron或React Native来开发客户端应用
- WebRTC技术实现点对点的在线会议
- WebGL创建流畅的3D游戏
- WebAssembly能够将使用诸如C++和Rust等语言编写的代码编译成可在浏览器中运行的形式。
HTML基础概念
- HTML是什么？
-
HTML是四个英文单词的缩写，代表着“超文本标记语言”（HyperText Markup Language）。
-
超文本即不仅包含纯文本，还能够嵌入图片、链接、标题、表格等更丰富的格式。
- 超文本是什么？
-
超文本指的是内容中存在超链接，可以跳转到其他页面或资源的文本。
-
超文本可以包含图像、链接、标题、表格等多种格式的内容。
- 标记语言是什么？
-
标记语言（Markup Language）是一种用开始标签和结束标签表示内容和格式的方法。
-
例如，要表示一级标题，可以使用开始标签
<h1>和结束标签</h1>，中间放置标题内容。
- 标签与属性：
-
HTML使用标签来描述文档中的元素，例如使用
<img>标签表示图像。 -
标签可以带有属性，属性提供了关于元素的更多信息。
-
例如，使用
<img src="image.jpg">来表示图像，其中src是属性名，"image.jpg"是属性值。
- 自封闭标签：
-
有些标签不需要包含嵌套内容，如
<img>标签。 -
在这种情况下，可以使用自封闭形式，例如
<img src="image.jpg"/>。 -
也可以省略结束标签，直接在开始标签后加一个斜杠，如
<img src="image.jpg">。
代码示例
<!-- 这是一个完整的HTML代码示例 -->
<!-- 文档类型声明，定义当前HTML文件的版本 -->
<!DOCTYPE html>
<!-- HTML根元素 -->
<html>
<head>
<!-- head部分，包含页面的元数据 -->
<title>这是页面的标题</title>
<!-- 在这里可以添加更多的元数据，如编码、样式链接等 -->
<meta charset = "UTF-8">
</head>
<body>
<!-- body部分，包含向用户呈现的真实内容 -->
<h1>这是一个一级标题</h1>
<p>这是一个段落。</p>
<!-- 可以添加文字、图片、链接等等 -->
<img src="image.jpg">
</body>
</html>
理解感受
前端领域在互联网行业中发展迅速，技术不断更新。因此，我们需要持续学习，以跟上基础发展的步伐。前端入门虽然是简单的，它易于上手。我们可以只需要选择一个编辑器，比如VS Code，在其中编写一些HTML和CSS代码，然后保存文件，在浏览器中打开，就能看到效果。这一过程非常简单，只要有浏览器和编辑器，就可以迅速入门。但入门之后，如何真正写好前端代码却需要持续的深耕学习。
