元素分类
虽然平时不怎么会注意这一点，但是元素会按他们的功能和语义进行一定的分类。下面列举一下基本的分类。
划重点：使用标签的关注点不是他们的默认样式，而是语义！不要一股脑全用div！！
- 根元素：html，所有元素的祖先元素
- 文档元数据：定义了渲染方式
- 内容分区：分割了页面区域
- 分组元素：组织body中的内容，标示元素结构
- 文本级语义：为局部文本赋予意义
- 嵌入内容：多媒体内容
- 表格元素
- 表单元素
- 脚本
文档标题
在浏览器顶端的tab中我们旺旺可以看到这个页面的标题。这个标题依赖于<head>，中的<title>
小细节
一个文档只有一个title，title中的内容一概当做纯文本处理
有的时候，我们的文档是由代码片拼接而成，title可能出错。我们可以通过脚本来设置title
document.title = "新的title"
应用场景
-
进度提示
在title上会有一个进度提示，一般用在有上传下载功能的网页。
有进度的title
简单实现
<script>
// 定义进度，title
let percent = 0;
let title = "demo1";
// 开启定时器
let timer = setInterval(()=>{
// 调用方法获得进度
let percnet = getPercent()
// 判断
if(percent>=100){
// 完成就直接显示标题
document.title = title;
clearInterval(timer);
}else{
// 没有完成就显示进度和标题
document.title = `[${percent}%]${title}`;
}
},1000);
</script>
- 怎么给title添加小图标
先用工具制作一个ico格式的小图标，然后在head中加入如下代码
<link rel=“icon" href="demo.ico" type="image/x-icon"/>
下一篇写各种元数据
网友评论