元素分类
虽然平时不怎么会注意这一点,但是元素会按他们的功能和语义进行一定的分类。下面列举一下基本的分类。
划重点:使用标签的关注点不是他们的默认样式,而是语义!不要一股脑全用div!!
- 根元素:html,所有元素的祖先元素
- 文档元数据:定义了渲染方式
- 内容分区:分割了页面区域
- 分组元素:组织body中的内容,标示元素结构
- 文本级语义:为局部文本赋予意义
- 嵌入内容:多媒体内容
- 表格元素
- 表单元素
- 脚本
文档标题
在浏览器顶端的tab中我们旺旺可以看到这个页面的标题。这个标题依赖于<head>
,中的<title>
小细节
一个文档只有一个title
,title中的内容一概当做纯文本处理
有的时候,我们的文档是由代码片拼接而成,title可能出错。我们可以通过脚本来设置title
document.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"/>
下一篇写各种元数据