jq 日化项目前端知识点以及消息冒泡数-优快云博客

本文链接：https://blog.youkuaiyun.com/u014177484/article/details/102627929

本文深入解析HTML中的元标签，包括X-UA-Compatible、viewport、format-detection等，探讨它们的作用及如何影响网页在不同设备上的显示效果，同时提供了一个前端消息冒泡数的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础知识点

<meta http-equiv="X-UA-Compatible" content="IE=7" /> X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的

<meta name="apple-mobile-web-app-capable" content="yes">：移动终端浏览器默认设置视口的宽度和初始规模
<meta name="apple-mobile-web-app-status-bar-style" content="black">：作用是控制状态栏显示样式
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。

<meta name="format-detection" content="telephone=no, address=no, email=no">

format-detection —— 格式检测，用来检测html里的一些格式，主要有以下几个设置：

meta name=”format-detection” content=”telephone=no”

meta name=”format-detection” content=”email=no”

meta name=”format-detection” content=”adress=no”

telephone
主要作用是是否设置自动将你的数字转化为拨号连接
telephone=no 禁止把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接，默认开启

email
告诉设备不识别邮箱，点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启把文字默认为邮箱地址，默认情况开启

adress
adress=no 禁止跳转至地图
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启

前端消息冒泡数

在这里插入图片描述
css代码如下

.badg {
    width: 22px;
    height: 22px;
    line-height: 24px;
    background: #e52435;
    border-radius: 50%;
    font-size: 10px;
    color: #fff;
    position: absolute;
    right: -15px;
    top: -12px;
    font-weight: 100;
    font-size: 12px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

html关键代码

<a href="#" id="noticeCenter" moduleid="17" str="消息列表" css="ico_32"><i class="ico ico_32" id="noticeNum">
<b class="badg">1</b></i></a>

点击的时候数量会变少

function UpdateN() { 
    var dom = window.top.document.getElementById("noticeNum").children[0].innerHTML;
    if ((dom - 1) == 0) {
      //数量为0时，去掉css
        window.top.document.getElementById("noticeNum").children[0].remove();
    }
    else {
        window.top.document.getElementById("noticeNum").children[0].innerHTML = dom - 1;
    }
}