这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
一、前端工作的定义
前端就是工程师用web技术栈解决跨终端和GUI人机交互的问题。
二、前端技术栈拆解与分析
前端应该关注以下方面：
功能、美观、无障碍（适合所有人使用）、安全（用户数据安全）、性能（动画流畅与用户体验）、兼容（在不同设备）、体验
三、HTML作用解析
HTML是什么？
举一个简单的HTML的例子：
行一：doctype html标记了当前html文件采用什么html版本，如果不写这一行，浏览器将会默认采用老旧的渲染模式
行二：根标签，与配套出现，所有标签都是写在html标签里
行三：与配套出现，放一些源数据，一些页面需要信息但是又不需要呈现给用户的，例如页面标题页面编码
行七：与配套出现，真正呈现给客户的，比如一段文字或者标题图片
浏览器会把html解析成dom树，html为根节点，每一个节点都称作dom节点
html一些语法规范：第一点中，一些react和vue自定义的组件用大写，而html的标签用小写
HTML具体语法：
- 标题标签h1~h6：h1标题大小最大，依次往下
- 列表标签：
第一类是有序列表ol，即order list，展示出来的效果就是在页面中会有123排序；
第二类是无序列表ul，即unorder list，在页面的展示效果就是会在前面有小黑点；
第三类是定义列表，属性名+属性值的列表，即definition list，dt表示属性名，dd表示属性值，dt和dd是多对多的关系
- 链接标签：
采用a标签，其最重要的属性是href超链接地址，属性值是点击了后需要跳转的页面，若写上target="_blank"则是指以新窗口打开页面而不是替换当前页面
- 多媒体标签：
img标签表示图片，其属性值src表示图片的地址，alt表示当这张图片因某些原因不被加载出来时会以alt属性值的文字替代，width表示图片要展示多宽
audio标签表示音频，其属性值src表示音频的地址，controls属性表示需要浏览器默认显示播放音频的控件
video标签表示视频，同上
- 表单类控件标签：
input标签是文本输入框，
- 属性placeholder表示占位符，用户不输入时浏览器默认显示的；
- 属性type="range"可以让用户输入一个范围，在浏览器中的展示效果是如图拖动条；
- type="number"可以让用户输入一个值，指定最大max最小min；
- type="date"表示选择日期，在浏览器上展示效果是如图可选择日期；
textarea表示较大文本框，可以输入多行内容
type="checkbox"表示用户可以多选，type="radio"表示用户单选，用属性name的值来标记互斥关系，name值相同当中选一个
当选项较多时用label较为臃肿，则可以采用下拉列表select,把下拉的列表选项写在option中
有时候下拉列表中可以允许用户输入值，浏览器可以给用户提示，辅助快速输入，option中是提示的选项
- 文本引用标签
块级引用blockquote：表示一种长文本的引用，一般是引用别人的一段话，属性cite表示这一段文字的引用来源于哪
短引用cite：一般表示引用了别人的书名或者章节类似的短语
短引用q：与cite的区别是表示具体的内容的短引用
代码引用code：如引用多行，则用pre将其包裹
strong和em标签表示强调
内容页面划分
header页头标签：页面关于头部的信息，与head不一样，header放的是呈现给用户的内容，比如导航或者logo，而导航放在nav标签中
main页面主体标签：一般一个页面只有一个主体，文章正文可以放在article标签，也可以没有article
aside标签：与页面相关，比如与页面相关的广告或者热点推荐
footer页尾标签：放页面参考信息或者备案信息之类
四、HTML语义化
HTML的元素、属性、属性值都有它的语义，开发者应该遵循它的语义来开发
语义化的实现，提升了代码的可读性、可维护性、无障碍性，且搜索引擎优化
我们要做到语义化，就得了解标签和属性的含义，思考用什么标签来描述这个内容最合适，同时不使用可视化工具生成代码。
