HTML+CSS+JavaScript从头开始快速掌握前端开发教程。本文将着重于三个部分。
html1.1 HTML的结构
nbsp； ； ；&书信电报；头部>
nbsp； ； ； ； ； ； ； ； ；&书信电报；标题><；/标题>
nbsp； ； ；<；/头部>
nbsp； ； ；&书信电报；正文><；/正文>
文档结构简介：
文档声明：用于声明当前HTML版本，<！DOCTYPE html>它是HTML5的声明
Html根标记：除了文档声明之外，所有其他内容都放在根标记Html中
文档头配置：head标签，即当前页面的配置信息，以及外部导入的文件
文档显示内容：body标签，其中的内容将显示在浏览器页面上
1.2 HTML语法规范
扩展名为html或htm
Html标记不区分大小写
1.3常用HTML标记
1.3.1排版标签
字体标签
标题标签
<；h1>
段落标签
<；/p＞
粗体标签
<；/b>
斜体标签
<；/我>
下划线标签
自动换行标签
1.3.2图片标签
1.3.3无序列表标签
书信电报；li>约旦</li>
书信电报；li>詹姆斯</li>
1.3.4带有序列表的标签
书信电报；li>约旦</li>
书信电报；li>詹姆斯</li>
1.3.5超链接标签
1.3.6表格标签
单元格可以包含文本、图片、列表、段落、表单、横线和表格
<；/标题></p>
<p></head></p>
<p><body></p>
<p><table border=“1px”width=“600px”cellspacing=“0px”cellpadding=“10px”bgcolor=“navajowhite”>；</p>
<p>＜caption＞表格标题</caption＞</p>
<p><tr></p>
<p><th>名称</th></p>
<p><th>性别</th></p>
<p><th>地址<；th></p>
<p></tr></p>
<p><tr></p>
<p><td rowspan=“2”>；11</td></p>
<p><td>12</td></p>
<p><td>13</td></p>
<p><img src="https://image.unisoft.cn/bench_picture/2023/07/16/c36a470d5642b990a64683892a539d67.limit.jpeg" /></p>
<p></tr></p>
<p><tr></p>
<p><td>22</td></p>
<p><td>23</td></p>
<p></tr></p>
<p><tr></p>
<p><td>31</td></p>
<p><td colspan=“2”>；32</td></p>
<p></tr></p>
<p></table></p>
<p></body></p>
<p></html></p>
<p class="bold">小心：</p>
<p>即使只有一行一列，也不能缺少td标记</p>
<p>合并之前，每行中的列数应相同</p>
<p>Tr在表中定义，td在Tr中定义，内容存储在td中</p>
<h4>1.4表单标签</h4>
<h4>1.4.1概述</h4>
<p>表单用于收集不同类型的用户输入。</p>
<p>它包含一个＜form＞标签定义，其中有不同的表单控件（表单项）</p>
<p><form action=“提交路径。默认为当前页面”method=“常用的提交方法是get和post。默认为get"；</p>
<p></form></p>
<p>常用表单控件（表单项）：输入类型＜input＞、选择菜单＜Select＞、文本字段＜textarea＞</p>
<h4>1.4.2 get和post的区别</h4>
<p>数据承载位置：get承载在地址栏后面，post承载在http协议的请求体中</p>
<p>携带的数据类型：get只能携带字符串，post可以携带任何类型的数据</p>
<p>携带数据大小：get携带的数据大小一般不超过4kb，post携带的数据不受限制</p>
<p>安全：发布比获取更安全</p>
<h4>1.4.3输入</h4>
<p><input-type=“xxx”/>；</p>
<p>文本（默认）文本框</p>
<p>密码密码框</p>
<p>无线电广播箱：同一组无线电广播箱的名称属性相同</p>
<p>复选框复选框：同一组多个复选框的名称属性相同</p>
<p>文件文件选择框</p>
<p>日期日期选择框</p>
<p>隐藏域：将数据提交到服务器，但不在页面上显示</p>
<p><img src="https://image.unisoft.cn/bench_picture/2023/07/16/bd09f60560065373a3e3101cb68c915a.limit.jpeg" /></p>
<p>提交按钮：内置表单提交功能</p>
<p>正常按钮：无需内置功能</p></div>
</div>
</div>
</div>
<div class="card">
<h5 class="card-title">相关资讯</h5>
<div class="card-body row gap-y gap-3">
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/2bde2c25fc9457a4.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/07/20/a3d047dc1369727460c4d08ddcdb9ba5.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">统软云进入高校，定制前端开发暑期培训课程</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/fa047182bcd31c31.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/05/24/a502ad324cc006ddf68ac5a159fc5ba7.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">在堆栈外的h5打开App，或跳到商城下载</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/2c0ef27b577fdd6a.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/10/12/66d89c3e595df91ae4322f1ddc3e3b21.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">前端开发教程：设备像素和CSS像素</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/d46f631163827652.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2024/07/24/4dd1cba6b7352e9143ec5d1ebe7f3830.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">人工智能场景的价值——如何实现可视化人工智能技术（II）</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/26e35b2660e31e32.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/03/28/e09651fe978e7392c04979d13b48773d.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">企业发展公众号的优势是什么？</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/3f9597f927244a26.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2022/11/26/f1f4e9fb6a2e67e4f53f3716af8e9606.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">APP、小程序和H5开发的优缺点是什么</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/253b74abdec06bad.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2024/04/15/0893634d2eb6e38c5003e84d02f92b2c.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">Web前端开发详细信息</h4>
</a>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/frontend/226441b24732b39b.html" target="_blank">
<div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/08/10/ca0b6833370eed667d8d815f1fce9e89.thumb.jpeg"></div>
<h4 class="text-truncate m-2 fs-16">如何开发和制作微信小程序？</h4>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 col-xl-3 mt-200">
<h5>频道：</h5>
<div class="card">
<a class="media media-bordered shadow-2" href="/service/frontend/" target="_blank">
<img class="avatar avatar-square avatar-lg" src="https://static-src.unisoft.cn/img/icon/service/frontend.png" />
<div class="media-body">
<h3 class="title text-truncate">前端开发</h3>
<div class="fs-12 mt-1 lh-15">H5定制、H5模板、H5游戏、H5动画设计</div>
</div>
</a>
</div>
<div class="card">
<h5 class="card-title">相关城市</h5>
<div class="card-body">
<ul class="nav nav-pills text-center">
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gd_guangzhou">广州技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=zj_hangzhou">杭州技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gd_shenzhen">深圳技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=ah_hefei">合肥技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=shanghai_city">上海技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=hn_zhengzhou">郑州技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=beijing_city">北京技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gs_lanzhoushi">兰州技术资讯</a></li>
<li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=sc_chengdu">成都技术资讯</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var KNOWLEDGE_ID = 12053;
</script>
<script type="text/javascript">
var article_detail = new function () {
var that = this;
this.container = $('#article-detail');
this.detail = this.container.find('.detail-content');
this.filter = { category: 0, is_my: 0 };
this.is_editing = false;
this.do_filter = function (forced) {
this.container.data('disabled', false);
//this.filter.level = $('select[name="level"]').selectpicker('val');
this.filter.is_my = $('input[name="is_my"]').prop('checked') ? 1 : 0;
forced ? this.filter.page = 1 : delete(this.filter.page);
//this.container.find('[type="checkbox"][value="0"]').prop('checked', false);
this.container.data('filter', this.filter);
this.container.trigger('update');
};
this.initial = function () {
$('.form-filter nav,.form-filter input').change(function () {
if ($(this).is('[name="q"]') || $(this).is('[name="timespan"]')) return;
that.do_filter(1);
});
this.container.find('[data-toggle="tab"]').on('click', function (e) {
that.container.find('.back-btn').toggleClass('hide', $(this).attr('data-type') !== "unaudit")
that.filter['type'] = $(this).data('type');
that.do_filter(1);
});
this.bind();
}
this.bind = function () {
this.detail.data({
onChoose: function (evt) {
article_category.detail.find('#nav-all').hide();
},
onUnchoose: function (evt) {
article_category.detail.find('#nav-all').show();
},
onRemove: function (evt) {
//that.detail.masonry('reloadItems').masonry('layout');
},
onEnd: function (evt) {
article_category.detail.find('.nav-item').removeClass('choosen');
}
});
function toggle_toolbar(card, s) {
var controls = card.find('.card-controls');
if (s) {
controls.find('[data-oper="time"]').hide().siblings().remove();
$(that.template.remove).appendTo(controls);
$(that.template.tag).appendTo(controls);
$(that.template.edit).appendTo(controls);
} else {
controls.find('[data-oper="time"]').show().siblings().remove();
}
}
this.detail.on('mouseenter', '.card-header', function (e) {
if (that.is_editing || e.target.tagName == 'I' || e.target.tagName == 'A') return;
toggle_toolbar($(this).closest('.card'), true);
}).on('mouseleave', '.card-header', function (e) {
if (that.is_editing) return;
toggle_toolbar($(this).closest('.card'), false);
});
//操作
this.detail.on('click', '[data-oper]', function () {
var ID = $(this).closest('tr[data-id]').data('id');
var member_id = $(this).closest('tr[data-member-id]').data('member-id');
var _this = $(this);
switch (_this.data('oper')) {
//确认预约
case 'enable':
$.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'enable' }, function (ret) {
if (ret.code == 200) {
setTimeout(function () {
that.container.trigger('update');
}, 200);
app.toast(ret.msg, 'success');
}
else {
app.toast(ret.msg, 'danger');
}
});
break;
//完成
case 'finish':
$.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'finish' }, function (ret) {
if (ret.code == 200) {
var d = dialog({
padding: 0,
content: $('#tmpl_finish_alert').html(),
ok: function () {
location.href = STORE_URL + 'order/publish/?service_id=' + ID + '&member_id=' + member_id;
},
cancel: function () {
setTimeout(function () {
that.container.trigger('update');
}, 200);
app.toast(ret.msg, 'success');
}
}).showModal();
}
else {
app.toast(ret.msg, 'danger');
}
});
break;
case 'cancel':
var d = dialog({
padding: 0,
content: $('#tmpl_cancel_alert').html(),
ok: function () {
$.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'cancel' }, function (ret) {
if (ret.code == 200) {
setTimeout(function () {
that.container.trigger('update');
}, 200);
app.toast(ret.msg, 'success');
}
else {
app.toast(ret.msg, 'danger');
}
});
},
cancel: function () { }
}).showModal(this);
break;
default: ;
}
});
this.detail.on('click', '.btn-picker', function () {
var _this = $(this), id = $(this).closest('.card').data('id');
var d = dialog({
padding: 20,
content: $('#tmpl_article_theme').html(),
quickClose: true,
onshow: function () {
$('.color-selector').data('id', id);
$(document).on('change', 'input[name="theme"]', function () {
d.remove();
});
},
onclose: function () {
d.remove();
}
}).showModal(this);
});
this.container.on('load', function (a, b, ret) {
that.detail.find('[data-max-height]').each(function (i, ele) {
var _this = $(ele).css('height', 'auto'), _mh = parseInt(_this.data('max-height'));
if (_this.height() / _mh > 1.5) {
_this.css('overflow', 'hidden').outerHeight(_mh * 1.5);
var sa = $('<div class="more"><a href="#"><i class="ti-angle-down"></i></a></div>').insertAfter(ele);
sa.click(function () {
sa.find('a').toggleClass('expand');
if (_this.css('overflow') == 'hidden') {
_this.css('overflow', 'auto').css('height', 'auto');
sa.find('i').attr('class', 'ti-angle-up');
} else {
_this.css('overflow', 'hidden').outerHeight(_mh);
sa.find('i').attr('class', 'ti-angle-down');
}
});
}
});
if (ret.total) {
$('.total').text('共 ' + ret.page_count + ' 页，' + ret.total + ' 条');
} else {
$('.total').text('');
}
});
}
};
</script>
<script>
appready.push(function () {
article_detail.initial();
});
</script> <!-- Footer -->
<footer class="site-footer pt-50 pb-20">
<div class="container">
<div class="row gap-y">
<div class="col-lg-3">
<img class="w-90px" src="https://static-src.unisoft.cn/img/logo.svg?v=20260907v1" alt="统软云">
<p class="my-20">专业的企业应用服务PaaS平台<br />产品及服务咨询：<span class="text-num fs-13 ls-1">028-8625 0886</span></p>
<div class="gap-items-2 mb-50">
<div class="btn-group btn-group-sm dropup">
<button class="btn btn-sm btn-float no-shadow" type="button" data-toggle="hover" style="border-radius:50%"><i class="fa fa-wechat fs-18"></i></button>
<div class="dropdown-menu dropdown-menu-up">
<img src="https://static-src.unisoft.cn/img/qrcode/wechat.258.jpg" />
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-6 col-sm-4 col-md-3 d-lg-block d-none col-lg-2"></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<h5 class="text-uppercase fs-14 ls-1">快速入口</h5>
<ul class="nav flex-column mb-20">
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/bench/join/">查找工作台</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/feedback/">意见反馈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://business.unisoft.cn/company/" target="_blank">企业黄页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://business.unisoft.cn/service/" target="_blank">商务服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/service/lead/">提交需求</a>
</li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<h5 class="text-uppercase fs-14 ls-1">应用开发</h5>
<ul class="nav flex-column mb-20">
<li class="nav-item">
<a href="/solution/social_applications/" class="nav-link">社交类应用</a>
</li>
<li class="nav-item">
<a href="/solution/e_commerce_applications/" class="nav-link">电商类应用</a>
</li>
<li class="nav-item">
<a href="/solution/tool_applications/" class="nav-link">工具类应用</a>
</li>
<li class="nav-item">
<a href="/solution/educational_applications/" class="nav-link">教育类应用</a>
</li>
<li class="nav-item">
<a href="/solution/o2o_platform/" class="nav-link">O2O平台</a>
</li>
<li class="nav-item">
<a href="/solution/live_platform/" class="nav-link">直播平台</a>
</li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<h5 class="text-uppercase fs-14 ls-1">解决方案</h5>
<ul class="nav flex-column mb-20">
<li class="nav-item">
<a href="/solution/iot_platform_private/" class="nav-link">物联网云平台私有化</a>
</li>
<li class="nav-item">
<a href="/solution/hardware_customize/" class="nav-link">智能硬件设计/开发</a>
</li>
<li class="nav-item">
<a href="/solution/iot_client/" class="nav-link">物联网客户端</a>
</li>
<li class="nav-item">
<a href="/solution/data_crawler/" class="nav-link">数据爬虫/采集</a>
</li>
<li class="nav-item">
<a href="/solution/data_processing/" class="nav-link">数据处理</a>
</li>
<li class="nav-item">
<a href="/solution/analysis_and_visualization/" class="nav-link">数据分析与可视化</a>
</li>
<li class="nav-item">
<a href="/solution/public_opinion_monitoring/" class="nav-link">舆情监测</a>
</li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<h5 class="text-uppercase fs-14 ls-1">支持与服务</h5>
<ul class="nav flex-column mb-20">
<li class="nav-item">
<a class="nav-link" href="https://help.unisoft.cn" target="_blank">帮助中心</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://developer.unisoft.cn" target="_blank">开发者社区</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/feedback/">意见反馈</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-4 col-lg-2">
<h5 class="text-uppercase fs-14 ls-1">公司</h5>
<ul class="nav flex-column mb-20">
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/about/">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/contact/">联络方式</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/career/">工作机会</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/article/">行业资讯</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/partner/">合作伙伴</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr> <div class="row">
<div class="col-md-4">
<div class="text-center text-md-left">Copyrights © 2026 <a href="https://www.unisoft.cn/">Unisoft</a>. All rights reserved.</div>
</div>
<div class="col-md-8">
<ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end">
<li class="nav-item hide">
<a class="nav-link" href="https://www.unisoft.cn/">统软云</a>
</li>
<li class="nav-item hide">
<a class="nav-link" href="https://www.thingboot.com/">芯步</a>
</li>
<li class="nav-item hide">
<a class="nav-link" href="https://www.yoyoiot.cn/">友友物联</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/page/disclaimer/" rel="nofollow">版权声明</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/page/privacy/" rel="nofollow">隐私保护</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备17041052号-9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.unisoft.cn/page/icp/" rel="nofollow">川B2-20180511</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002003206" target="_blank" rel="nofollow"><img style="width:15px;margin-top:-5px" src="https://static-src.unisoft.cn/img/icon/ghs.png" /> 川公网安备51019002003206号</a>
</li>
</ul>
</div>
</div> </div>
</footer>
<!-- END Footer -->
</main>
<!-- END Main container -->
<div class="site-floor">
<div class="container d-none">
<div class="service">
<img src="https://static-src.unisoft.cn/img/widget/floor-service3.png">
</div>
<div class="poster">
<p class="remark">留下联系方式，工程师会及时与您取得联系 <small class="pl-1 text-lighter">或致电：<a class="text-num" href="tel:028-86250886">028 - 8625 0886</a>、<a class="text-num" href="tel:18500860080">185 0086 0080</a></small></p>
<form id="form_consult" data-provide="form" data-reset="true" method="post" action="/service/lead/post/">
<div class="input-group input-group-round">
<div class="input-group-prepend"><span class="input-group-text w-10"><i class="ti-headphone-alt"></i></span></div>
<input type="text" class="form-control w-30 fs-16 bold" name="appellation" autocomplete="off" placeholder="怎么称呼您">
<input type="text" id="form_mobile" class="form-control w-30 fs-16 bold text-num ls-1" data-mask="mobile" autocomplete="off" placeholder="请输入手机号">
<input type="hidden" name="mobile">
<span class="input-group-append w-20"><button class="btn btn-block btn-danger px-0" type="submit"><i class="fa fa-paper-plane"></i> 发送</button></span>
</div>
</form>
</div>
<div class="qrcode">
<img class="b-2 border-dark w-120px h-120px" src="https://static-src.unisoft.cn/img/qrcode/unisoft-tyan.jpg">
<br /><small class="text-white">扫码联系售前工程师</small>
</div>
</div>
<button type="button" class="btn-close"></button>
<button type="button" class="btn btn-float btn-primary btn-open w-50px h-50px d-none"><i class="ti-notepad"></i></button>
</div>
<script>
var site_floor = $('.site-floor');
function _show_site_floor(s) {
G.state('site_floor', s);
site_floor.find('>.btn-open').toggleClass('d-none', s);
$(document.body).css('padding-bottom', s ? site_floor.height() : 0);
site_floor.find('>.container').toggleClass('d-none', !s);
}
function _scroll_site_floor(s) {
if (site_floor.is('.popup')) return;
if (G.state('site_floor') === false) {
site_floor.find('>.btn-open').toggleClass('d-none', s);
} else {
$(document.body).css('padding-bottom', s ? 0 : site_floor.height());
site_floor.find('>.container').toggleClass('d-none', s);
}
}
$(document).on('click', '.btn-open-consult', function () {
site_floor.addClass('popup');
_show_site_floor(true);
});
$(document).scroll(function () {
if ($(document.body).height() - $(window).height() < 200) {
_scroll_site_floor(true);
} else {
var s = $(document).scrollTop() < 200;
_scroll_site_floor(s);
}
});
site_floor.on('click', '>.btn-open', function () {
_show_site_floor(true);
});
site_floor.on('click', '>.btn-close', function () {
if (site_floor.is('.popup')) {
site_floor.removeClass('popup');
$(document).scroll();
return;
}
_show_site_floor(false);
});
site_floor.find('form').data('after', function () {
app.toast('提交成功，工程师将很快与您联系');
site_floor.find('form').get(0).reset();
});
site_floor.find('form').on('keyup', '#form_mobile', function () {
$(this).next().val($(this).val().replaceAll('1', '*'));
});
$(document).scroll();
</script>
<!-- Scripts -->
<script src="https://static-src.unisoft.cn/js/app.js?v=20260907v1"></script>
<script src="https://static-src.unisoft.cn/js/script.js?v=20260907v1" id="sys-script"></script>
<!-- DO NOT REMOVE -->
<!-- JavaScripts initializations and stuff -->
<div style="display:none;" id="__crond">
<script type="text/javascript">
(function () {
var uim = document.createElement("script");
uim.src = "https://im.unisoft.cn/im.js?rnajroSqeal_dXLZhnyjlbB9rGOLs29z";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(uim, s);
})();
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?4ccfca52b547be4e89c7a4f6dec34d03e201a75d1578d363742d466cce1c241cfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<script>
$.get('/api/seo/?url=https://www.unisoft.cn/service/frontend/66dbda4d8e14fb59.html');
</script>
</div>
<div style="display:none">
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5734180a8c8a34f836f2f52609525315";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div> <!-- Escape time: 0.15330386161804 --> <!-- / DO NOT REMOVE -->
</body>
</html>
