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

一、前端概述

1、什么是前端？

解决图形界面下的人机交互问题
跨终端、兼容性（PC/移动浏览器、客户端/小程序、VR/AR等）
Web技术栈（HTML、CSS、JavaScript、HTTP等）

总结：前端工程师使用Web技术栈来解决多端图形用户界面交互问题。

2、前端技术栈

图片1.png

3、前端应关注哪些方面？

功能（核心问题）
性能
美观
兼容性
安全
无障碍
...

注：前端对于用户的体验来说，是非常重要的！

4、前端边界简介

node.js——开发服务器端的应用
electron、react native——开发客户端应用
Web RTC——在线传输、实现多人会议
Web GL——游戏开发
WEBASSEMBLY...
...

5、开发环境

浏览器+编辑器即可实现代码编辑及实现效果的查看，开发门槛较低

二、HTML简介

1、网站与网页

网站：指在因特网上根据一定规则，使用HTML等制作的、用于展示特定内容的网页集合；

网页：网站中的“一页”，通常是html格式的文件，通过浏览器来阅读。

网页是构成网站的基本元素，它是由图片、链接、文字、音频等元素组成。

2、HTML

都说HTML，那么HTML到底是个什么东西？

答：HTML全称：Hyper Text Markup Language,即超文本标记语言，一种用来描述网页的语言（非编程语言，是一种标记语言）。

所谓超文本，它有两层含义：

它可以加入图片、声音、动画、多媒体等内容，超越了文本的限制
它可以从一个文件跳转到另一个文件，与世界各地的其他主机的文件夹相连接，即超级链接文本。

3、用VS Code创建第一个HTML

使用VS Code创建第一个html文件，输入！+tab键快捷生成页面骨架结构，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<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>My first Web</title>
</head>
<body>
    This is my first html file!
</body>
</html>

代码第一行，文档类型声明标签，位于文档的最前面，作用是告诉浏览器应使用哪个html版本来显示网页；

代码第二行，定义文档当前显示的语言，“zh-CN”表示中文网页；

代码第四行，规定文档字符集，“UTF-8”又称作万国符，基本包含全世界所有国家所需的字符。

4、语义化

何为标签语义化？即指在选择html的标签时，注意不要过分注重文本的样式，而是应该注意文本所需传达的内容。

如何做到语义化？首先我们得了解每个标签及其对应属性的含义，再思考什么标签最适合去描述当前文本所需表达的内容，最后，我们应避免直接使用可视化开发工具，而不去了解其背后所蕴含的底层逻辑。

三、今日小节

今天是入营学习第一天，发现基础知识还是很重要的，仍需巩固。望在后面学习中，可以边加固已有的知识，边学到新的东西。

愿与诸位共勉！

前端与HTML概述 ｜ 青训营笔记

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