HTML骨架与大项目————前端监控系统|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
第一个问题————什么是前端？？
前端打开的是一个浏览器的前台页面，这个页面是可视化的，前端工程师使用web技术栈解决图形界面下的人机交互问题，其中web技术栈有HTML，CSS，JavaScript等等。其中HTML为页面的内容部分，可以把把表现在页面上的内容都具体的表现出来；CSS用来设置页面的样式，可以把内容区修改样式，进行美化；JavaScript就是页面的行为，可以是页面运动起来，不再是一个静态页面。这些代码通过http协议发送服务器，再由服务器渲染为我们可以看到的页面效果。
HTML骨架
第一天知识回顾了解到了HTML框架。其中文本标题有
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><p>段落内容</p>
框架结构
<!doctype html>表明HTML版本，方便浏览器渲染
<html>根标签
<head>头标签，里面存放编码utf-8和页面标题
<body>存放呈现给用户的内容
HTML语法
- 标签和属性不区分大小写
- 空标签可以不闭合
- 属性值推荐引用“双引号”
- 某些属性值可以省略
有序列表，无序列表
<ol>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ol>
实例有序列表：
- html
- css
- JavaScript
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
实例无序列表：
- html
- css
- JavaScript
<a href=""></a>实现链接跳转
<img src=""/>添加图片
<audio src="" controls></audio>添加音频
<video src="" controls></video>添加视频
<input placeholder="">文本框输入
<input type="range">滑动块
<input type="number">数字
<input type="date">日期
<textarea></textarea>多行文本文字
大项目————前端监控系统
通过学习，了解了前端监控系统，前端监控就是监控页面发生的一系列异常和错误以及性能指标，方便了管理员了解系统稳定性和不同情况下的性能表现，然后对系统进行调整。其中了解到
- FP（First Paint）：首次绘制包括了任何用户自定义背景绘制，是将第一个像素点绘制到屏幕的时刻
- FCP（First Content Paint）：首次内容绘制是浏览器将第一个DOM元素（可以是文本、图像、SVG等）渲染到屏幕的时间
- TTFB(Time To First Byte)：首字节时间是指浏览器发起第一个请求到数据返回第一个字节所需要的时间（这个时间包括了网络请求时间）
- DOM Ready：DOM Ready时间是指第一个DOM开始渲染到 DOMContentLoaded事件被触发之间的时间
