这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
青训营的第一节课，复习了前端与HTML的基础知识，学会了前端要解决的基本问题和什么是html，老师总结的很好，给我之前的知识体系进行查漏补缺。
一、本堂课重点内容：
-
前端工作的定义
前端是为了解决图形界面下的人机交互问题
面向的终端包括：pc/移动端浏览器、客户端/小程序、VR/AR等
技术栈包括三大件+http协议
前端工程师是利用web技术栈，解决多端图形界面人机交互问题的工程师
-
前端技术栈拆解与分析
html负责内容，css负责样式，js负责行为
重点关注产品的功能、美观度、无障碍、安全性、性能、兼容性，前端对用户体验至关重要。
前端的边界不断更新：客户端、服务端、3D等
开发工具：浏览器+编辑器。
-
HTML 语法、作用解析
HTML = hypertext markup language
-
HTML 语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
使用html的人包括：（对象-作用-语义化的好处）
- 开发者-修改维护-代码可读性
- 浏览器-展示-可维护性
- 搜索引擎-提取关键词、排序-搜索引擎优化
- 屏幕阅读器（无障碍）-盲人阅读等-提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
二、详细知识点介绍：
-
DOM树
-
HTML语法查漏补缺：
!doctype html标记html版本，head不呈现给用户，body写内容，浏览器将html转化为DOM树html的语法：属性值用
双引号包裹, input等空标签可以不闭合， required可以简写有序列表ol-li、无序列表ul-li、定义列表dl-dt/dd（p-value形式）dt是标题，dd是值
控件input
<input type="range/number/date/checkbox/radio" list="countries"/>list可以有自动输入匹配值<input list="countries"/> <datalist id="countries"> <option>CHN</option> <option>UK</option> <option>US</option> </datalist>引用：blockquote、cite标题/章节、q引用内容、code是代码、strong/em强调（strong侧重含义上的重要性，em侧重语气/重读）
页面内容
三、实践练习例子：
- 引用
<blockquote cite="http://t. cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物，是由
可以使天才生长的民众产生、长育出来的，所以没有这
种民众，就没有天才。</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>. </p>
<p>在<cite>第一章</cite>, 我们讲过<q>字符串是
不可变量</q>. </p>
<p><code> const</code>声明创建-个只读的常量。
</p>
<pre><code>
const add=(a,b)=>a+b;
const multiply = (a, b) => a* b;
</code></pre>
四、课后个人总结：
本节课带我复习了html的基本语法，查漏补缺
-
本章有什么知识点不容易掌握？ 无
-
什么地方容易与其他内容混淆？
注意引用的标签
注意html重点传达内容而不是样式
五、引用参考：
- 课程地址前端与HTML
- MDN、W3C
