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

前端？前端！

一、什么是前端

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

二、前端技术栈

三、前端边界是什么

node.js 是一个让JavaScript 运行在服务端的开发平台。
Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。
React Native(简称RN)是开源的跨平台移动应用开发框架，支持iOS和安卓两大平台。
WebRTC (Web Real-Time Communications) 是一项实时通讯技术。
WebGL（全写Web Graphics Library）是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染，帮助展示3D场景和模型，还能创建复杂的导航和数据视觉化。

四、开发环境

浏览器+编辑器

Web的基石——HTML

一、什么是HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的基石。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

二、HTML语法

三、DOM树

DOM 将 HTML 表示为标签的树形结构。

vscode中输入html/html:5/!+Enter自动生成html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>阿巴阿巴阿巴~</p>
</body>
</html>

四、HTML内容分化

五、HTML语义化

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析,使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

更便于开发 — 如上所述，你可以使 HTML 更易于理解，并且可以毫不费力的获得一些功能。
更适配移动端 — 语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发。
更便于 SEO 优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>

<h2>My 2nd subheading</h2>

<p>This is the second subsection of my content. I think is more interesting than the last one.</p>

今日小结

第一次记笔记，有许多不熟练的地方，所记内容也有许多不全面的地方，明天继续改进。

ps：快从HTML开启前端奇妙旅行吧~

从HTML开启前端奇妙旅行 | 青训营笔记