基础知识
网页组成
HTML 文件的基本骨架
html
<!-- 文档声明：告诉浏览器，你按HTML5标准来解析此网页 -->
<!DOCTYPE html>
<!-- html是网页的根标签 -->
<!-- lang="zh-CN" lang是语言的意思 zh-CN表示HTML网页的语言是中文 en表示英文 -->
<html lang="zh-CN">
<!-- 在head中可以对网页进行设置 -->
<head>
<!-- title表示网页的小标题 -->
<title>我的第2个网页</title>
<!-- meta是设置网页的元信息 -->
<!-- utf-8 基本上涵盖了世界上所有的文字，如果不写，在有的浏览器中可能会乱码 -->
<meta charset="utf-8" />
</head>
<!-- 表示网页的主体内容 -->
<body></body>
</html>标题
html
<!-- 方法1： -->
<input type="checkbox" id="agreementCheckbox" />
<label for="agreementCheckbox">同意协议</label>
<!-- 方法2： -->
<label>同意协议:<input type="checkbox" /></label>锚
html
<a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>网站图标
html
<link href="favicon.ico" />Meta
html
<meta charset="UTF-8" />//文档的编码类型
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>//设置视口 <meta name="keywords" content="html" /> //为搜索引擎定义关键词
<meta name="description" content="免费" />//描述内容
<meta http-equiv="refresh" content="30" />//每三十秒刷新页面标签语义
| 标签 | 说明 |
|---|---|
| h1~h6 | 内容标题（页面中最好只有一个 h1 标签） |
| p | 段落 |
| header | 页眉 |
| footer | 页脚 |
| nav | 导航 |
| main | 主体内容（页面中最好只出现一次） |
| article | 独立的内容容器 |
| section | 一组相似内容 如：商品卡片 |
| aside | 侧边栏或小部件 |
| time | 时间 |
| address | 地址 |
| abbr | 缩写 |
| small | 描述声明提示 如：限购 |
| mark | 标记 |
| cite | 小段引用 |
| blockquote | 大段引用 |
| strong | 加粗 |
| em | 倾斜 |
| del | 删除线 如：原价 |
| ins | 下划线 如：现价 |
字符实体
Emmet 语法
参考 https://docs.emmet.io/cheat-sheet/
计算⽩屏时间和⾸屏加载时间
javascript
//FP
console.log(
`⽩屏时间: ${
performance.timing.domLoading - performance.timing.navigationStart
}ms`
);
//FCP
console.log(
`⾸屏时间: ${
performance.timing.domInteractive - performance.timing.navigationStart
}ms`
);