整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

网页js吸顶特效出现抖动的解决

网页js吸顶特效出现抖动的解决

在的网站越来越流行吸顶特效，或者某个版块滚动到顶部后固定到顶部的一个特效！如下：（高手请飘过）

在线报名版块吸顶效果

该吸顶特效代码：

var oDiv=document.getElementById('bm'); //获取当前div

var divT=oDiv.offsetTop; //距离顶部距离

// console.log(divT);

window.onscroll=function() { // 获取当前页面的滚动条纵坐标位置 （依次为火狐谷歌、safari、IE678）

var scrollT=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

// console.log(scrollT);

if (scrollT >=divT) {

if (window.navigator.userAgent.indexOf('MSIE 6.0') !=-1) { // 兼容IE6代码

oDiv.style.position='relative';

oDiv.style.top=scrollT + 'px';

} else { // 正常浏览器代码

oDiv.style.position='fixed';

oDiv.style.top='80px'; //吸顶位置距离顶部80px

}

} else {

oDiv.style.position='';

oDiv.style.top=0;

}

}

吸顶效果一般都是通过修改对应css的属性，有原来的relative改成fixed，但是当一个css的属性改成fixed的时候，整个版块就会脱离文档流，这样在临界点时候就会产生抖动！比如下拉500px之后，产生吸顶效果，此时整个文档的高度为：500px+当前版块高度，也就是至少下拉到501px的时候才满足吸顶条件！一旦吸顶后，版块有relative变成了fixed属性，脱离文档流，这时候整个文档的高度又变成了500px，此时已经不满足系统条件，版块的fixed又变成relative，而后又满足了吸顶条件....这样就产生了吸顶抖动，让人难受的情况！

解决吸顶效果就是提前利用占位符，把当前的版块位置占了，这样就是变成fixed时候，整个版块的高度仍然不变，我一般用两种方法：

（1）创建一个父DIV

创建一个父div，并且给div一个固定的高度！这样只是子div发生了变化，不影响整个版块高度！

注意：空的div对于是不是占位有一点的不兼容，所以有条件可以加个做左侧悬浮，加上块属性

float:left; display:block;

(2)通过js动态添加或者去除margin-top属性！

通过margin-top占去版块本身的位置，当不满足吸顶时候，再释放margin-top，

相关代码案例：

$(window).bind('scroll', function () {

if ($(window).scrollTop() > 0) {

$('.navbar').addClass('is-fixed');//给navbar增加is-fixed属性

$(".main2").css("margin-top","40px");//给紧邻的div添加margin，防止抖动

} else {

$('.navbar').removeClass('is-fixed');

$(".main2").css("margin-top","0px");//还原

}

});

这种问题对于高手来说可能是小意思了，对于初学js者可能多多稍稍都会碰到这种问题，总结一下，或许你会用到！


. 前言

在互联网时代，网络应用的性能对于用户体验、市场竞争力和公司声誉至关重要。随着Web技术的不断发展，用户对网页加载速度和响应速度的期望不断提高。因此客观、标准地衡量页面性能对于优化页面具有关键性的指导作用。通过准确地评估性能瓶颈和问题所在，我们可以更有效地调整和优化页面，从而改善用户体验，提高市场竞争力。


2. 关键指标



2.1

FCP (First Contentful Paint)

首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素,是用户感知加载速度的一个重要指标。

2.2

LCP (Largest Contentful Paint)

最大内容绘制时间，计算从页面开始加载到用户与页面发生交互（点击，滚动）这段时间内，最大元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变。

2.3

LCP (Largest Contentful Paint)

累计布局偏移。测量在页面的整个页面生命周期内发生的所有意外布局偏移中累计的布局偏移分数。

更多的页面指标不在重复解释，感兴趣可以查看https://web.dev/metrics/


3. 衡量指标

性能指标一般通过以下两种方式来进行测量：

  • 在实验场景中：使用工具在稳定、受控的环境中模拟页面加载

1、Chrome 开发者工具

2、lighthouse

3、WebPageTest

  • 在实际场景中：基于真实用户的实际页面加载与页面交互

1、ftwo 之家基于web-vitals包装的前端性能采集工具

2、Chrome User Experience Report 是google的性能检测工具，通过引入google提供的脚本，将我们的客户端数据上报google，从而统计你的网页的性能报告和评估

如何衡量线上页面站点性能，推荐使用之家的ftwo前端线上采集工具，基于真实用户实际浏览过程中收集相关指标，坏体验的UV指标参照如下，坏UV占比控制在25%以下


4. 优化措施

4.1

网络层面


? 开启Gzip压缩

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE 等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率。


?使用 HTTP 2

HTTP2.0 大幅度的提高了 web 性能，在 HTTP1.1 完全语义兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。


? 使用CDN

使用内容分发网络（CDN）是一种优化页面性能的有效方法，它能够缩短网络加载时间，为用户提供更快的访问速度。CDN 将网站的静态资源（如文档、图片、样式表、脚本等）复制到分布在各地的服务器上，使用户能够从离他们较近的服务器上加载资源，从而减少网络延迟。


为了从 CDN 中获得最佳性能，应针对文档、资源和接口分别设置合适的缓存时长。以下是一些建议：

1. 文档：对于 HTML 文档，建议设置较短的缓存时长（如几分钟到几小时），以便在内容发生更改时，用户能够尽快获取到更新后的内容。

2. 资源：对于 CSS、JavaScript 等静态资源，可以设置较长的缓存时长（如一周到一个月），因为这些资源的更新频率通常较低。但务必确保资源具有唯一的版本号或哈希值，以便在更新时使缓存失效。

3. 接口：对于 API 接口，缓存时长的设置要根据数据更新频率进行调整。如果数据经常发生变化，建议使用较短的缓存时长；如果数据变化不大，可以使用较长的缓存时长。同时要注意合理设置缓存策略，如 Cache-Control 头部，以确保数据的实时性和准确性。


通过使用 CDN 并合理设置缓存时长，我们可以显著提高页面加载速度，优化用户体验，并节省服务器带宽和资源。


4.2

图片优化

图片往往是一个 h5 页面的重要组成部分，然而图片占用的资源往往也是很大的，因此图片优化在性能优化中占据很重要的地位。下面来看几种优化图片的方式。

  • 图片懒加载：当图片出现在可视区域或者即将出现在可视区域时再加载图片，避免一次性加载全部图片，会对用户体验造成很大影响。
  • 降低图片质量：一些图片适当降低图片质量时，通常是看不出来区别的，尤其是作为背景图片时，可以使用dis命令进行图片压缩。
  • 尽量使用CSS代替图片：一些简单的图片效果如果可以通过 CSS 效果实现则进行用 CSS 来实现，可以减小请求次数或者打包体积大小。
  • 图片指定尺寸：图片裁剪成合适尺寸大小,img元素固定宽高，避免因网络加载导致页面抖动。
  • 使用webp图片：WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。


4.3

代码优化

? 第三方插件、库按需引入

在项目中经常会使用到第三方的插件，比如在模板页中引入或是全局注册，会导致项目首屏资源体积增加，改成组件内局部注册或是动态引入lib的地址


? 动态组件，按需引入

场景一: 在我们营销专题页中弹窗种类很多，但是实际在用户端弹出使用时刻，只会是一两个弹窗。因此统一所有弹窗的入口，在通过动态组件只弹窗某一个弹窗。


场景二: 长页面，板块很多，而且都是城市维度的动态数据，

非首屏的板块，提前预热计算板块是否存在，通过动态组件和板块的高度，当滑动可视窗口才开始下载资源和渲染。



? 动态组件有序显示

通过指令和组件完成状态，实现组件有序显示，避免出现页面CLS偏移。


（1）自定义指令v-module-status，绑定两个参数一个版块的顺序，一个版块的执行完成状态。

（2）定义一个全局组件状态存储对象，存储页面使用了v-module-status指令的组件状态数据。

（3）指令中检查当前组件的执行完成状态是否完成，若完成，则遍历全局组件状态存储对象，查找出当前组件之前的所有组件，查看是否之前的所有组件已经完成接口请求，如果完成则把当前组件的display：none移除，反之设置成display:none，同时当前之后的所有组件也进行更新是否显示的状态。

（4）使用指令的组件内部需要配合设置一个接口请求完成状态的标识，传递给指令，能保证指令可以拿到当前组件的接口请求状态。


? 去掉页面端重定向

广告位投放中间页，根据一定条件，跳转不同的落地页，影响页面的重定向时长。


? 去掉页面端自动锚点

带车系投递（高意向度）滚动锚点至猜你喜欢板块，不带车系通投（低意向度）锚点到SKU板块；猜你喜欢、SKU板块中间存在N个动态的板块，自动锚点时，页面会不断跳动，给用户带来不友好的体验。

定

指定车系投放

通

无车系通投

为了改善用户体验，建议采取以下措施之一：

1. 去掉自动锚点功能，让用户自主地浏览页面和板块，避免页面频繁跳动。

2. 优化自动锚点逻辑，在用户关闭半屏开屏弹窗后再进行锚点跳转。这样一来，用户可以先关注弹窗内容，并在关闭后再被引导至相应板块，从而减少页面跳动现象。


? vue 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

let router=createSimpleRouter({
routes: [
{
path: `${URL_PREFIX}/index`,
name: "index",
component: ()=> import(/* webpackChunkName: "index" */ '../views/index/Index'),
meta: meta
},
{
path: `${URL_PREFIX}/cities`,
name: "cities",
component: ()=> import(/* webpackChunkName: "cities" */ '../views/cities/Index'),
meta: {
...meta,
subcategoryId: 11750,
}
},
{
path: `${URL_PREFIX}/success/:encryptedOrderId`,
name: "success",
component: ()=> import(/* webpackChunkName: "success" */ '../views/success/Index'),
meta: {
...meta,
subcategoryId: 14393,
}
}]
});

参考链接

https://web.dev/metrics/

https://www.infoq.cn/article/HVyqFtlxgDao4vq5Durp


作者简介

方林锋

■ 经销商技术部-营销活动团队

■ 2015年加入汽车之家，任职于经销商技术部-营销活动技术团队，目前负责专题、车展等相关开发。

来源:微信公众号:之家技术

出处:https://mp.weixin.qq.com/s/vY-tgd20BphaONOGbQw9IQ

TML配置

  • 文件应以“”首行顶格开始，推荐使用“”。
  • 必须申明文档的编码charset，并且使用UTF-8编码。
  • 移动端必须使用 viewport 适配
  • 页面title是极为重要的不可缺少的一项。

以下是一个标准的html结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- 页面标题不能为空 -->
    <title>京东商城:商家后台</title>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 样式文件 以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 页面主体 -->
    <div class="warp">
      <header>顶部内容区域，比如：菜单头</header>
      <div class="content">主内容区域</div>
      <footer>顶部页尾区域，比如：备案号</footer>
    </div>
     
    <!-- js文件 在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多个框架混合使用，在同一个工程里面要保持主框架的一致性，多框架同时使用会造成代码混乱，后期会变得越来越难维护。

Css开发规范

1、全局样式禁止使用!important

2、避免使用导入式引入css样式文件；

css复制代码<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

历史页面会有一些功能下线，在去除页面初始化的js语句的同时，也要将依赖的js文件删除，避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度

api接口中，无用字段占传输比例30%以上时，删除无用字段

在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng

HTML的标准结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索，不强制使用 -->
    <meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
    <meta name="Description" Content=”页面描述″>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推荐手动引入指定路径 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 样式文件必须以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 内联样式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 页面标题不能为空 -->
    <title>页面标题</title>
  </head>
  <body>
  <!-- 页面主体 -->
    <div class="warp">
    <header>顶部内容区域，比如：菜单头</header>
    <div class="content">主内容区域</div>
    <footer>顶部页尾区域，比如：备案号</footer>
    </div>
 
    <!-- JavaScript 文件在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>
  • 不同模块区域可使用简要备注标识模块内容
  • HTML 标签语义化使结构清晰，比如：
  • CSS 外链引入必须放在 中
  • JS 外链引入必须放在中
  • 省略图像、媒体文件、样式表和脚本等嵌入式资源 URL 协议头部声明 ( http:// , https:// )，用//代替。
  • favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：1。在 Web Server 根目录放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML标签使用守则

标签小写

原生 HTML 标签元素小写使用，自定义组件使用小驼峰命名（自定义标签避免和原生标签同名）

html复制代码<!-- 错误 ? -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正确 ? -->
<div></div>  
<p></p> 
 
<!-- 自定义组件 -->
<shareDialog><shareDialog/>

套用规则

禁止在行内元素中嵌套块级元素??

html复制代码<!-- 错误的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正确的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>

更多标签使用规则介绍请查看尾部附录

属性定义

定义属性赋值时，使用双引号，禁止单双引号混用

html复制代码<!-- 错误的定义 ? -->
<input id="formTitle" type='text' placeholder="请输入标题">   
 
<!-- 正确的定义 ? -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">

正确闭合

除自闭合标签外，所有标签都需正确的编写闭合标签

常用自闭合标签： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用规范

ID 和 Class 取通用且有意义的名字；

使用连字符 - 作为 ID、Class 名称界定符 ，不要驼峰命名法和下划线；

避免选择器嵌套层级过多，尽量少于 3 级；

使用命名空间防止命名冲突，利于维护；

css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
  • 避免选择器和 Class、ID 叠加使用
  • 声明顺序，相关属性应为一组，建议遵循： 定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性
  • 对于 JS 操作相关选择器 前面需加上 特殊应用标识前缀
css复制代码/* 标准的声明顺序 */
.declaration-order {
  /* 布局属性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型属性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本属性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 视觉属性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他属性 */
  cursor: pointer;
}

图片相关使用规范

<img/>标签守则

  • src 属性不能为空，需添加默认值（托底图片路径）
  • 为重要图片添加 alt 属性，当无法显示图像时，浏览器将显示替代文本，便于 SEO 及用户阅读
  • 为图片标签 增加 width 和 height 属性，避免图片加载从无到有，导致页面抖动
  • 大量图片流资源，使用懒加载技术按需加载
html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
 
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

图片资源守则

大小

尺寸 小于 50 ×?50 的请使用 字体图标（iconfont）或者 将多个图标合成一张大图使用（雪碧图） 尺寸大于 50 ×?50 的图片，引入前先使用 在线压缩 对其进行压缩 ，图片大小尽量控制在 300kb 以内

倍率

PC端、移动端 推荐使用 2倍图 (@2x），避免设备分辨率过高，图片显示失真模糊 如有兼容 iPad 场景等特殊场景，可使用 3倍图（@3x）

html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍图： 图片展示区域大小 : 图片实际尺寸=1 ：2

无论使用几倍图，图片大小都需遵守上条限制

如遇图片倍图问题，可咨询 @UI童鞋

性能守则

  • 避免不必要的 DOM 操作浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，来避免多次查询 DOM 树。
js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=ul.getElementsByTagName('li')
  • 异步加载第三方内容 当你无法保证嵌入第三方内容 比如 埋点、调研等资源正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。
  • 减少标签的数量 编写 HTML 代码时，尽量避免多余的标签嵌套，避免 DOM树的冗余
  • 控制静态资源数量

1个页面中建议CSS文件不要超过3个（1个组件库样式文件、1个项目公共样式、1个页面样式）； JS文件不要超过5个（1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件）。

编码建议

缩进使用 2个空格 样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义 使用 '' 单引号

其他建议

保持一定的代码洁癖，尤其在大型项目中

  • 代码逻辑应当直截了当，清晰易读，保持与业务逻辑与代码一一对应关系，减少逻辑错误的可能性，降低二次开发成本；
  • 删除过期无用代码，减少代码过大，造成不必要的维护成本
  • 代码尽量复用，拥有组件化思想
  • 代码命名合理化，即使不写注释情况下，也可以让其他开发人员一眼明白意思
  • 性能调至最优，降低耦合度，避免别人做不合理的优化时而造成的混乱
  • 整洁的模块边界，明确的划分模块之间的逻辑边界，尽量保证职责单一，避免功能交叉混杂
  • 让代码没有改进的余地，在开发时把各种情况都想到了，如果有人企图改进它，总是会回到原点

性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。

Chrome拓展程序 谷歌商店安装lighthouse后，在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。

命令行

js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help

检测结果

【附录】常用的标签规范

标签

语义

嵌套常见错误

常用属性

<a></a>

超链接/锚

a不可嵌套a

href,name,title,rel,target

<div></div>

块级容器



<p></p>

段落

不能嵌套块级元素


<span></span>

内联容器（行内元素）

不可嵌套块级容器


<form></form>

表单


action,target,method,name

<input />

输入框

不可嵌套元素

type,name,value,checked,disabled,maxlength,readonly,accesskey

<textarea></textarea>

多行文本输入控件


name,accesskey,disabled,readonly,rows,cols

<img />

图像

不可嵌套元素

alt,src,width,height

<label></label>

标签（常用input元素定义标注）

不可嵌套块级容器

for

<table></table>

表格

只可嵌套表格子元素

width,align,background,cellpadding,cellspacing,summary,border

<tbody></tbody>

表格主体

只能嵌套在table内


<thead></thead>

表头

只能嵌套在table内


<tr></tr>

表格行

嵌套于table或thead、tbody、tfoot


<td></td>

表格中的单元格

只用于tr

colspan,rowspan

<th></th>

表格中的标题单元格

只用于tr

colspan,rowspan

<tfoot></tfoot>

表格表尾

只用于table


<button></button>

按钮

不可嵌套表单、表格等块级元素

type,disabled

<select></select>

列表框或下拉框

只能嵌套option或optgroup

name,disabled,multiple

<option></option>

select中的一个选项

只能嵌套在select内

value,selected,disabled

<ol></ol>

有序列表

只能嵌套li


<ul></ul>

无序列表

只能嵌套li


<li></li>

无序列表项

只能嵌套在 ul 或 ol 内


<iframe></iframe>

内嵌一个网页


frameborder,width,height,src,scrolling,name

<br />

换行



<link />

引用样式或icon

不可嵌套任何元素

type,rel,href

<meta />

文档信息

只用于head内

content,http-equiv,name

<script></script>

引用脚本

不可嵌套任何元素

type,src

<style></style>

引用样式

不可嵌套任何元素

type,media

<title></title>

文档标题

只用于head内


点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。


作者：StriveToY
链接：https://juejin.cn/post/7262378982255394873


在线咨询
上一篇：css禁止文字被选中
下一篇：大数据编程入门：JavaScript字符串

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 乌鲁木齐县 渭滨区 渭城区 津市市 星子县 青铜峡市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服