这是我参与「第五届青训营 」笔记创作活动的第1天。
一、本堂课的重点内容
- 前端简介
- HTML及常见标签
- 语义化
二、详细知识点介绍
前端简介
狭义的前端一般指Web前端页面，而现在前端的概念已经比较宽泛了，从浏览器到移动小程序到VR/AR等，都属于前端范畴。前端最基础的技术栈由HTML、CSS、JavaScript和网络协议组成，其中HTML构建页面的内容，CSS确定组件的样式，JavaScript定义页面的行为；用户的操作与数据通过网络协议与后端服务器进行通信，其中最重要的协议是HTTP，还有WebSocket等协议。这部分属于非常基础的内容。
前端应该关注的方面属于之前未思考过的内容，作为前端开发者，同时要考虑功能、性能、美观、安全、兼容、用户体验和无障碍，特别是无障碍，在之前的前端学习中都未考虑过，通过本次课程我了解到开发通用的无障碍前端是非常有必要的。
在前端的边界部分，学到了一些通过JS开发后端或客户端以及图形化和本地化的技术栈，扩充了视野，包括Nodejs、electron、React Native、WebRTC、WebGL、WebASSEMBLY，希望以后有机会能够了解。
HTML及常见标签
空标签可以不闭合，比如<input><meta>
某些属性值为true或false，则属性值可以省略，如required、readonly
列表：ol（ordered list）有序列表、ul（unordered list）无序列表、dl（defination list），dt（defination title），dd（defination description）
audio、video标签的controls属性表示需要加播放控件
input的不同type的不同功能可以查文档
input快捷的输入方式
<input list="countries"/>
<datalist id="countries">
<option>Greece</option>
<option>UK</option>
</datalist>
cite作品名短引用，<q>内容上的短引用
内容划分，header、nav、main、article、aside、footer，其实跟div没区别，关键是语义。
语义化
这部分属于以前未曾深入思考过的，学习完课程有很大收获。
HTML中的元素、属性及属性值都有某些含义。
主要的意思是，开发者写的HTML标签有特定的语义，维护人员可能不一定是开发者，为方便维护应该写具有特定语义的标签，而不是一堆div。浏览器渲染页面时会根据语义化的标签实现特定功能。搜索引擎提取关键词、排序时也会用到特定语义的标签内容。
HTML的重要思想是传达内容，而不是样式，要用具有专门语义的标签。
如何做到语义化？了解每个标签和属性的含义、思考什么标签最适合描述这个内容、不使用可视化工具生成代码。
三、实践练习例子
主要练习了datalist的例子，其他的HTML标签之前也都了解了。
<input list="countries"/>
<datalist id="countries">
<option>Greece</option>
<option>UK</option>
</datalist>
四、课后个人总结
本次课程是青训营的第一课，对HTML进行了整体的归纳和回顾，不少内容之前都有了解，但还是学到了很多新知识。主要是了解到当前前端技术的发展情况，复习了常见HTML标签的用法。
本次课程让我收获最大的是语义化的描述，之前自己学习前端页面开发的时候也没有注重标签的语义化，往往就是一堆div定义了整个页面，导致后续维护的困难。使用语义化的标签让页面结构更加清晰，后续的维护也更加方便，之后的编程中要注意语义化的灵活运用。
