前端与HTML | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天本节课主要是介绍什么是前端、前端

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

本节课主要是介绍什么是前端、前端的技术栈和前端的发展方向，以及HTML的标签、DOM🌲和语义化的内容。

1. 什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端小程序
- VR/AR等
Web技术栈

1.1 前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

用户通过浏览器使用网络协议向服务器发送请求，服务器则通过网络协议给客户端进行响应

前端关注的方面：

美观、无障碍、安全、性能、兼容、体验

1.2 前端的方向

node
electron
react native
webRTC
webGL
WebAssembly

1.3 开发环境

浏览器（Edge/Chrome/Firefox/Safari）
编辑器(VsCode/Vim/WebStorm)

2. HTML

定义：HTML是一种用于创建网页的标准标记语言

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    /* meta标签 charset表示支持的字符编码*/
    <meta charset="UTF-8" />
    /* 是否支持移动端 */
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML</title>
  </head>
  <body>
    <div id="app">
    	<h1>一级标题</h1>
    </div>
    <script type="text/javascript">js代码</script>
  </body>
</html>

2.1 DOM树：

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。下面是创建DOM的代码：

<div id="app"> 
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var el = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    el.appendChild(node);
    var element = document.getElementById("app");
    element.appendChild(el);
</script>

2.2 语义化：用合适的标签做合适的事

常见的语义化标签：

header：定义文档的页眉（头部）
nav：定义导航链接的部分
footer：定义文档或节的页脚（底部）
article：定义文章内容
section：定义文档中的节（区段）
aside：定义其所处内容之外的内容（侧边）

总结，语义化的时候，我们得注意，什么时候该用哪个标签，而不是随意的拿来就用，同时一些基本功也得掌握，包括DOM🌲的创建过程。