这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
一、什么是前端！
前端工程师使用web技术栈（html + css + js）来解决多端（PC/移动浏览器，客户端/小程序，VR/AR等）图形用户界面下人机交互问题。
前端关注方面:功能，美观，无障碍，安全，性能，兼容，体验。
二、前端开发环境！
推荐使用Chrome，Visual Studio Code。
三、HTML基础！
1.什么是HTML
HTML(HyperText Markup Language，简称：HTML)并不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。它是由一系列的元素（elements）组成。一对标签（ tags ）可以为网页上一段文字或者一张图片添加超链接，可以将文字设置为斜体，粗体，添加下划线，改变字号等等。
2.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>
</body>
</html>
分析：
<!DOCTYPE html>: 声明为 HTML5 文档。之前的版本都很长，这是最短有效的文档声明。<html></html>: 是 HTML 页面的根元素。<head></head>:这个元素是一个容器，它包含了所有想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。<meta charset="utf-8">: 定义网页编码格式，设置了文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。<title></title>: 设置页面标题。<body></body>:包含了你访问页面时所有显示在页面上的内容。
Visual Studio Code生成骨架快捷键：Shift+! enter。
3.HTML语法
- 标签和熟悉不区分大小写，从一致性、可读性来说推荐小写
- 空标签可以不闭合，如input、meta
- 属性值双单括号都可，推荐使用双引号包裹（注意单引号和双引号不能在一个属性值里面混用，引号可以嵌套，例如：
<a href="http://www.example.com" title="你觉得'好玩吗'？">示例</a>）
- 某些属性值可以省略，如required、readonly
四、学习资料：
前端与 HTML - 掘金 (juejin.cn)
菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
使用 HTML 组织网站内容 - 学习 Web 开发 | MDN (mozilla.org)
HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)
学习路线参考：前端开发人员路线图 (roadmap.sh)
五、个人学习总结
巩固了HTML基础知识，加强了记忆，收获颇多。
