前端知识重构

目录

HTML

对于前端开发开发者来说，不管是对初学者还是已经独挡一面的资深前端开发者，HTML都是最基础的内容。

HTML 的职责在于告知浏览器如何组织页面，以及搭建页面的基本结构；
CSS 用来装饰 HTML，让我们的页面更好看；
JavaScript 则可以丰富页面功能，使静态页面动起来。

<html> 
  <head></head>
  <body></body>
</html

meta标签

这种方法在某些Markdown下会有神奇的效果
代码会在 5s 之后自动跳转到同域下的 page2.html 页面

<meta http-equiv="Refresh" content ="5; URL=page2.html">

每隔一分钟就需要刷新页面的大屏幕监控

<meta http-equiv="Refresh" content="60">

title
在HTML5 出现之前 浏览器没有开放图标闪烁、弹出系统消息之类的接口，只能借助一些 Hack 的手段，比如修改 title 标签来达到类似的效果（HTML5 下可使用 Web Notifications API 弹出系统消息）

let msgNum =1  // 消息条数
let cnt = 0  // 计数器
const inerval = setInterval (()=>{
cnt = (cnt +1) %2
if (msgNum === 0){
// 通过DOM修改title
document.title += `聊天页面`
clearInterval(interval)
return 
}
const perfix = cnt % 2 ? `新消息(${msgNum})`:''
  document.title = `${prefix}聊天页面`
}, 1000)

通过模拟消息闪烁，可以让用户在浏览其他页面的时候，及时得知服务端返回的消息。

定时修改 title 标签内容，除了用来实现闪烁效果之外，还可以制作其他动画效果，比如文字滚动，但需要注意浏览器会对 title 标签文本进行去空格操作。

动态修改 title 标签的用途不仅在于消息提醒，你还可以将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。

JavaScript

CSS

posted @ 2022-05-25 15:46  李老师家的狗  阅读(36)  评论(0)    收藏  举报