这是我参与「第五届青训营」笔记创作活动的第1天。在有了一些项目的开发经验后，我经常感到自己的三件套基本功还不够扎实，因此经常关注一些会在一些细节实现方面记录的博主，从中学习积累一些小的bug的解决方法，或者是某种网页效果的前端实现方式（比如国祭日时网页灰色遮罩）。在此将第一节课的笔记记录如下：
一、本堂课重点内容：
HTML是什么、HTML的语法、HTML语义化原则
二、详细知识点介绍：
老师首先介绍了前端应该关注的方面，我个人在此将优先级进行排序：功能为先，其后是安全、兼容、性能、美观、体验，最后有余力的话实现无障碍。
接着对HTML的含义进行复习：HTML(HyperText Markup Language)超文本标记语言：
一个完整的HTML文件的第一行 十分重要，它标记了HTML代码文件的HTML版本，使得浏览器应该以对应的渲染方式去渲染该HTML代码文件。一个HTML代码文件最终转化为的逻辑结构是一棵DOM树：
HTML的通用语法如下：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
下面介绍一些常见的HTML标签各自需要注意的点。标题h1-h6不必多说；
三类列表：有序列表ol(order list)、无序列表ul(unorder list)、自定义列表dl(defination list)。其中我对于dl认识不多，这里记录一下;
链接a标签需要注意的点很多，核心标签属性是href，常见的标签属性还有target用来指定超链接打开的方式，如 target = "_blank" 即在新的标签页打开。
然后是媒体标签系列，如img、audio、video。在我之前踩过的坑里，video标签还要注意视频源文件的视频编码方式，video标签并不是支持所有的视频编码方式，这点在对应的文档中有所体现，解决方式详见这篇博客：关于HTML5中Video标签无法播放mp4的解决办法
之后是输入input标签系列和textarea。这里随着经历过的项目越来越多，我也知道input标签随着type的不同，可以有很多类型，比如说最基本的type=text就是文本框，type=range就是比例拖动条，type=file就是文件上传（这个确实是没想到的），type=date就是日期选择（这个确实是习惯套用组件库，不识庐山真面目）……
此外，input标签还可以用于实现单选（radio）和多选（checkbox）。原生的下拉选择栏是select标签和option标签实现，不过出于美观度考虑，现在的组件库基本都是以div中含有ul和li的方式，配合JS实现。这里我踩过的坑是 原生的select会有z-index样式问题，CSDN上有相关的问题，检索即可获知，这里摘录最核心的部分：
接下来是段落标签、三种引用标签、代码code标签、强调（strong为加粗，em为斜体重读）标签等常见的其他标签：
HTML的标签多如牛毛，在开发中，我们应当遵循语义化原则，即：HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML。比如：有序列表用 ol；无序列表用 ul；lang 属性表示内容所使用的语言。
要记住，HTML的本质内容是传达内容而不是传达样式，思考什么标签最合适描述要传达的内容。
三、实践练习例子：
在“谁在使用我们写的HTML”一节中，我看到了最下面一行中写道：“屏幕阅读器-给盲人读页面内容”，这让我想到在B站一个盲人up主的评论区中有这样一条评论：“在我知道img标签的alt属性是以文字形式给盲人看后，我就再也没有省略过alt属性了”，这深深触动了我。一个好的开发习惯不仅有利于后续的维护，更能在意想不到的地方给他人带来便利。愿我们都能尽力向这一点靠拢。
四、课后个人总结：
本章的知识点基本都比较清晰易懂，个人感觉需要留心的就是input标签的各种type对应的属性和相关的和JS的配合。其他一些细碎的注意点和我踩过的坑已经在对应位置标注了。
五、引用参考：
我参考和引用的外部博客/笔记/文章在对应的地方均已经标注，这里就不赘述了。
