这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端
解决图形界面的交互问题
无论面对的是什么应用场景，如：web 浏览器、小程序甚至于 VR 设备，前端工程师使用的都是 HTML、CSS、JS 和 HTTP 网络协议来解决人机交互的问题
前端技术栈
HTML 作为网页的内容，css 定义了网页的样式而 JavaScript 定义了网页的行为。这些都运行在浏览器中，而浏览器通过网络协议如 HTTP 协议与服务器进行通讯。
前端应该关注的方面
第一：产品的功能
第二：产品的外观设计
第三：无障碍设计（access ability）
第四：安全性
第五：性能
第六：兼容性
（最为重要的）第七：体验
前端的边界
前端能做到的已经不仅限制于浏览器页面开发，如 node.js 开发服务器端、RN 和 electron 开发客户端应用、WEB RTC 实现 P2P 的在线传输还可以通过 WebGL 开发 3D 游戏。
开发环境
浏览器
Edge、Chrome、Firefox、Safari
IDE
VScode、Vim、WebStorm
什么是 HTML
HyperText Markup Language （HTML） 超文本标记语言
标记指 HTML 标签 超文本指以文本为基础的图片、表格、链接、标题等
对于标签我们可以设置一些属性：src 来表示图片的 URL。 属性的设置格式为：属性名=“属性值”
在标签中不需要嵌套其他内容时可以使用自闭合标签，如：
<img src="URL" />
标记 HTML 版本使用：
<!doctype html>
根标签：
<html>
头标签：放置页面元数据
<head>
body 标签：呈现给用户的内容
<body>
浏览器会解析 HTML 形成一个 DOM 树，DOM 树的每一个节点我们称之为 DOM 节点而 DOM 树的根节点为 document。
HTML 的语法
标签和属性不区分大小写，但推荐小写。
空标签可不闭合
属性值推荐使用双引号包裹
某些属性值可以被忽略
HTML 标签
从 h1 到 h6 不设置样式的情况下默认的标题样式
ol 表示有序列表，li 表示列表中的每一个项
ul 表示无序列表，li 表示列表中的每一个项
dl 表示带有属性的列表，dt 表示属性名而 dd 代表属性值
a 表示链接，href 属性代表超链接指向地址 target 属性代表跳转页面的方式（新窗口打开还是替换本标签页）
多媒体标签：
img、audio、video 使用 src 属性代表引用的 url alt 属性可以在无法加载时显示一些文字 controls 属性代表调整控件
输入标签：
input 标签 placeholder 属性表示未输入时的占位符 type 属性表示输入数据的属性 在想让用户选择时可以使用 type 属性的 radio 和 checkbox，checkbox 代表多选，radio 代表单选 countries 属性表示输入提示，输入提示可以在 input 标签内部的 datalist 标签内的 option
select 标签代表下拉选择，选项写在 select 标签内部的 option 标签内部
text area 标签表示文本域
文本类标签内容：
blockquote 块引用标签：表示长串内容的引用，直接引用别人的一段话。cite属性表示引用来源
cite标签：短引用标签：表示某句话或者某些内容的引用，被引用的内容放在cite标签内部
q标签：表示对已经讲过的话进行引用，被引用的内容放在q标签内部
code标签：表示代码，代码用code包裹，多行代码在最外层使用pre标签进行包裹
strong标签以及em标签：表示对包裹的内容的强调。strong表示粗体强调，em表示斜体
标签语义化
HTML中元素、属性以及属性值都有其特殊含义 开发者应当遵循语义编写HTML
HTML的使用者
开发者：修改维护页面 浏览器：展示页面 搜索引擎：提取关键字、排序 屏幕阅读器：给盲人阅读页面内容
