前端与HTML | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天

7月24日是青训营基础班第一天开课的日子,韩老师的课程为我们讲述了前端与HTML

什么是前端？

用于解决人图形界面下的人机交互问题使用Web技术栈解决多端用户图形交互

前端技术

HTML(结构和内容)、CSS(样式)、JavaScript(行为),通过网络协议,与服务器端产生联系

前端应该关注哪些方面？

功能，美观，无障碍，安全，性能，兼容性，这几方面，从而提高用户体验。

前端边界

图片内就是对于学习前端的我们来说的一些好帮手，在前端领域，技术在不断的更迭，我们就需要不停的学习，提高自己的技术,以及对知识的了解程度。
开发环境：浏览器 IE/Edge Chrome Firefox Safari
编辑器： VSCode Vim WebStorm

HTML是什么？

HTML为HyperText Markup Language(超文本标记语言)
<!doctype html>标记了当前使用的html文件使用了什么版本，浏览器会通过此来决定如何进行页面的渲染
浏览器会对html解析，解析出一个dom树

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合
属性值推荐用双引号包裹
某些属性值可以省略

在本次课程中，韩老师介绍了许多常用的标签，有些是以前用过的，有些是没有用过的，用过的标签进行复习，没用过的标签进行学习记录
定义列表以key-value的形式进行编写，<dl>用来定义列表，在<dl>中的<dt>定义标题，<dt>中<dd>写出标题对应的值 input也可以用来让用户选择一个范围
<input type=“range”>通过显示滑块，来选择范围 <input list ="countries">指定用户可以选择的内容提示选项，快捷输入 <datalist id="countries">在<option>中写入选项名称

语义化是什么？

html中的元素属性及属性值都拥有某些含义，开发者应该遵循语义来编写html。lang属性表示内容所使用的语言。

如何做到语义化？

了解每个标签和属性的含义，思考什么标签最适合描述当前内容，不使用可视化工具生成代码。

总结

今天是参加青训营的第一节课，学到了许多之前不曾了解到的知识，发觉自己之前的学习有所遗漏，通过学习课程，对自己之前的学习进行反思总结。