这是我参与 「第五届青训营」 伴学笔记创作活动的第 1 天
1. 前端所解决的问题
前端是为了解决图形界面下人机交互的相关问题
2. 前端技术栈
基础的前端技术栈主要包括HMTL（负责页面内容），CSS（负责内容样式），JavaScript（负责内容行为）以及与后端进行数据交互的网络协议
3. HTML
HTML的全称是 HyperText Markup Language
其中HyperText指的是超文本（图片，标题，链接，表格...）
而Markup Language指的是标记语言，例如
<h1>文章标题</h1> <img src="..." />
如果标签内容不包含内容，就像<img src="..." />则可以不写结束标签，直接以斜杠 / 表示便签结束。
4. <!doctype html> 的作用
<!doctype html>标记了当前使用的HTML文件是什么HTML版本，最终浏览器会根据这个去决定采用哪种渲染模式，如果不写，会以怪异模式展示。
5. DOM树
把HTML代码转换为树型结构，根节点为document对象
6. 单选框
<input type="radio" name="sport"/> 🏀 <input type="radio" name="sport"/> ⚽
控制单选框的方式是通过name，name相同的单选框只能选择一个。
7. 文字相关的标签
① <blockquote>
长/块级引用-直接引用别人的一段话
cite属性用来表示引用的文字来源于哪
<blockquote cite="...."><p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种</p></blockquote>
②
<cite>
短引用-通常在引用作品或者章节时使用
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
可以看出小王子这三个字是斜体的，说明 <cite> 标签用斜体来表示引用
③ <q>
通常表示引用一段话
<p>我们讲过<q>字符串是不可变量</q></p>
可以看出"字符串是不可变量"这三个字是斜体的，说明 <cite> 标签用斜体来表示引用
④ <code>
代码格式
<pre><code> const add = (a,b) => a+b; const multiply = (a,b) => a*b;</code></pre>
⑤ <strong>和<em>
<strong>和<em>都表示强调，<strong>表示含义上的重要和紧急（加粗），<em>表示语气上的重要和紧急（斜体）。
8. 布局相关的标签
通过标签进行内容划分
9. 语义化的好处
①代码可读性
②可维护性
③搜索引擎优化
④提升无障碍性
其他要点：html编写应该注重传达内容，而不是样式（使用合适的标签去显示内容，而不是执着用通过样式去修改）
