字节青训营学习笔记（前端与HTML）
今天是青训营打卡学习的第一天，接下来是关于今天学习内容的笔记，萌新上路，请多多指教呀！如有错误请批评指正！谢谢！
- 什么是前端:利用web技术栈解决多端GUI人机交互问题
- 前端技术栈分为：JavaScript(行为）,CSS（样式）,HTML（内容），即我们所说的前端三件套
- JS：主要定义页面的行为，例如用户点击页面的按钮，JS设置页面的响应方式
- CSS：设置页面的样式，获得更加多样化的页面格式
- HTML：负责页面的内容和结构，是页面开发的基础
- 前端关注的几个方面：功能（最核心），美观，无障碍，兼容，性能，安全
HTML
- HTML是什么呢？
HTML全称HyperText Markup Language HyperText意为超文本，即超越普通文本格式，主要为图片，表格，链接 Markup Language意为标记语言，通常可以使用开始标签和结束标签表示： <h1>文章标题<h1>
- 我们也可以在标签上设置一些属性，例如我们用到一张图片，设置图片属性为src:
<img src = "photo.jpg"/>
dom树，将HTML代码转化为一个对应的树形结构
HTML语法主要分为以下几点：
- 标签和属性不区分大小写，但是推荐原生标签使用小写，一些框架的组件可以使用大写
- 空标签可以不用闭合
- 属性值推荐使用双引号来包裹
- 某些属性值可以省略，例如required，readonly
HTML标签详解
- 标题标签：h1~h6主要为标题标签，h1表示一级标题，h2表示二级标题，依此类推
- 列表标签：
- 有序列表ol：在ol中使用li标签可以实现1~n的数字排序
- 无序列表ul：在ul中使用li标签可以实现.的项目符号排序
- 定义列表dl：在dl中使用dt（标题）、dd（标题具体描述的值），其关系为多对多
- 链接标签：a主要使用href属性进行跳转页面链接
- 图片标签img：alt属性是替代性文本，当图片由于某种原因无法显示时，显示该文字
- 音频标签audio+属性值
- 视频标签video+属性值
- 输入输入标签input+属性值
- 选项标签p：
- 多选标签：在p标签中使用label和input定义type属性为checkbox实现多项选择
- 单选标签：在p标签中使用label和input定义type属性为radio和name实现单项选择，是通过比较多个radio之间如果name相同，则只可以从name相同的选项中选择，属于互斥关系
- 下拉选择：在p标签中通过使用select和option来实现
- 自定义输入标签：在p标签中使用input和datalist实现，同时可以使用option为用户输入内容给出提示
- 快捷引用标签blockquote：表示长引用，通常表示直接引用其他文章的一段，使用cite表明文章的来源
- 短引用标签cite：引用较短的文段，类似q标签
- 代码引用标签code：引用代码，代码可长可短
- 强调文本标签strong/em：表示强调内容十分紧急/主要表示语气上的重音
今日小结
- 语义化是什么？
在从HTML到HTML5的过程中语言更新迭代，删除很多也再增加了许多标签，我们在使用这些标签的时候要去考虑元素、属性以及属性值代表的意义是什么
- 语义化的意义？
首先明确代码语义化带来的好处，提高我们代码的可读性，提升维护人员对代码的维护性，提高无障碍性，搜索引擎优化，做到传达内容而不是传达样式，培养自己作为前端工程师的专业修养。
- 如何做到语义化
了解每个标签的属性和含义，并且同时多进行思考和选择合理的标签，减少使用可视化工具生成代码的行为，养成一个良好的自我控制代码标签的习惯
