HTML 30分钟入门教程
作者：deerchao 转载请注明来源
本文目标
30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。
什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
HTML是什么样的
简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。
下面是一个最简单的HTML文档：
第一个Html文档 欢迎访问!
所有的HTML文档都应该有一个标签，标签可以包含两个部分:
和。
标签用于包含整个文档的一般信息，比如文档的标题（
标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<body>标签里了。 </p><p>标签用于表示链接，在浏览器（如IE,Firefox等）中查看HTML文档时，点击标签括起来的内容时，通常会跳转到另一个页面。这个要跳转到的页面的地址由标签的href属性指定。上面的<p>href=\中，href属性的值就是http://deerchao.net。 </p><p>HTML文档可以包含的内容 </p><p>通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。 </p><p>文本 </p><p>HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。 链接 </p><p>链接用来指出内容与另一个页面或当前页面某个地方有关。 图片 </p><p>图片用于使页面更加美观，或提供更多的信息。 列表 </p><p>列表用于说明一系列条目是彼此相关的。 表格 </p><p>表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 表单 </p><p>表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。 框架 </p><p>框架使页面里能包含其它的页面。 </p><p>HTML文档格式详细说明 </p><p>前面介绍了HTML文档的基本格式，下面再做一个详细说明。 </p><p>HTML文档可以用任何文本编辑器（比如记事本，UltraEdit等）创建，编辑，因为它的内容在本质也只是一些文本。 </p><p>在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的）。 </p><p>标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img>（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，这些都是有规定的，知道了这里说的基本知识之后，学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。 </p><p>标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：<img src=\。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。 </p><p>某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同（哪些标签可以包含标签，可以包含哪些标签也是有规定的）。比如： </p><p> </p><p> 分类目录... </p><p> 当前分类内容列表... </p><p>在这种情况下，最后出现的标签应该最先结束。 </p><p>HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用 来代表空格。 </p><p>常用标签介绍 </p><p>文本 </p><p>最常用的标签可能是<font>了，它用于改变字体，字号，文字颜色。 <font size=\<font size=\</p><p><font color=\红色的5</font> <font face=\黑体\黑体的字</font> </p><p>加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示： </p><p><b>Bold</b> <i>italic</i> <u>underline</u> </p><p>还有一些标签，用来指出包含的文本有特殊的意义，比如（表示缩写），<em>（表示强调），<strong>（表示更强地强调）,<cite>（表示引用），（表示地址）等等。这些标签不是为了定义显示效果而存在的，所以从浏览器里看它们可能没有任何效果，也可能不同的浏览器对这些标签的显示效果完全不同。 </p><p>一篇很长的文章，如果有合适的小标题的话，就可以快速地对它的内容进行大致的了解。在HTML里，用来表示标题的标签有：</p><p><h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题... </p><p><h1>HTML 30分钟教程</h1> <h2>什么是HTML</h2> ... </p><p><h2>HTML是什么样的</h2> ... </p><p>图片 </p><p><hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。 <hr width=\</p><p><img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。 </p><p><img src=\图片简介\</p><p>链接 </p><p>超级链接用标签表示，href属性指定了链接到的地址。标签可以包含文本，也可以包含图片。 </p><p> <p>src=\验证HTML\</p><p>分段与换行 </p><p>由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。 <p>这是第一段。</p> <p>这是第二段。</p> </p><p>也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。 </p><p></p>
<a href="javascript:void(0);" class="hiddens">…… 此处隐藏：40字，全部文档内容请下载后查看。喜欢就下载吧 ……</a>
</div>
<div class="dede_pagess">
<ul class="pagelist">
<li><a>共13页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a>1</a></li><li><a href='591440_2.html'>2</a></li><li><a href='591440_3.html'>3</a></li><li><a href='591440_4.html'>4</a></li><li><a href='591440_5.html'>5</a></li><li><a href='591440_6.html'>6</a></li><li><a href='591440_7.html'>7</a></li><li><a href='591440_8.html'>8</a></li><li><a href='591440_9.html'>9</a></li><li><a href='591440_10.html'>10</a></li><li><a href='591440_11.html'>11</a></li><li><a href='591440_12.html'>12</a></li><li><a href='591440_13.html'>13</a></li><li><a href='591440_2.html'>下一页</a></li>
</ul>
</div>
<div class="down-word">
<div class="word-ico"></div>
<div class="word-tit">
<span class="docx">HTML 30分钟入门教程.doc</span>
<span>将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印</span>
<span></span>
</div>
<div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div>
</div>
<div class="show-url">本文链接：<a href="">https://www.jiaowen.net/wendang/591440.html</a>（转载请注明文章来源）
</div>
<div class="b_box6">上一篇：<a href='/wendang/591439.html'>2012年湖南省《中学教育学》</a> <br/>
下一篇：<a href='/wendang/591441.html'>拉斯维加斯旅游介绍 给你一个完美假期 - 图文</a>
</div>
<div class="b_box7">
<p> 相关推荐： </p>
<ul class="box">
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330228.html">MC9S12XS256RMV1 xs128芯片手册4</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330229.html">安东尼语录经典语录</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330230.html">e级gps控制测量技术设计书</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330231.html">苏教版2022-2022学年八年级下学期期末</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330232.html">装修公司推广 营销</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330233.html">家政服务合同(完整版)</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330234.html">湖北省2016届高三联考语文试题</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330235.html">爱立信无涯学习系统LTE题库1-LTE基础知</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330236.html">揭秘大众柴油车作弊软件原理</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330237.html">人才流失原因及对策分析</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330238.html">房屋建筑施工工程劳务分包合同</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330239.html">国际贸易实务试卷A卷09.6</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330240.html">校园废品回收活动计划方案书范文格</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330241.html">电大成本会计试题及答案</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330242.html">大学物理实验 华南理工出版社 绪论答案</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330243.html">爱丁堡产后抑郁量表</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330244.html">液压冲击的危害、产生原因与防止方法(</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330245.html">学生工作总结高一学生期中考试总结_020</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330246.html">人民医院医疗废物管理规章制度大全</a></li>
<li><em>[<a href='/xueqian/'>学前教育</a>]</em><a href="/wendang/330247.html">阳光维生素的巨大抗癌潜能阅读题答案.d</a></li>
</ul>
</div>
</div>
</div>
<div class="right_1">
<div class="g_box2 u_2">
<div class="t_1">学前教育</div>
<ul class="menu">
<li><a href='/xueqian/' class='on'>学前教育</a></li>
<li><a href='/jichu/'>基础教育</a></li>
<li><a href='/gaodeng/'>高等教育</a></li>
<li><a href='/kaoshi/'>资格考试</a></li>
<li><a href='/falv/'>法律文档</a></li>
<li><a href='/jianzhu/'>建筑文档</a></li>
<li><a href='/hulianwang/'>互联网资料</a></li>
<li><a href='/hangye/'>行业资料</a></li>
<li><a href='/zhengwu/'>政务民生</a></li>
<li><a href='/shuomingshu/'>说明书</a></li>
<li><a href='/moban/'>实用模板</a></li>
<li><a href='/zonghe/'>综合文档</a></li>
<div class="clear"> </div>
</ul>
</div>
<div class="g_box2 u_2">
<div class="t_1"> 热门排行 </div>
<ul class="b_box1">
<li><a href="/wendang/2328308.html">00Nkmhe_市场营销学工商管理_电子商务_</a></li>
<li><a href="/wendang/2328307.html">事业单位考试法律常识</a></li>
<li><a href="/wendang/2328306.html">诚信教育实施方案</a></li>
<li><a href="/wendang/2328304.html">吉大小天鹅食品安全检测箱方案(高中低</a></li>
<li><a href="/wendang/2328305.html">房地产销售培训资料</a></li>
<li><a href="/wendang/2328303.html">高一地理必修1复习提纲</a></li>
<li><a href="/wendang/2328302.html">新概念英语第二册lesson_1_练习题</a></li>
<li><a href="/wendang/2328301.html">证券公司内部培训资料</a></li>
<li><a href="/wendang/2328300.html">小学英语时间介词专项练习</a></li>
<li><a href="/wendang/2328299.html">新世纪英语专业综合教程(第二版)第1册U</a></li>
</ul>
</div>
<div class="g_box2 u_2">
<div class="t_1"> 最新推荐 </div>
<ul class="b_box3 u_1">
<li><a href="/wendang/599610.html">马云在云锋基金江苏论坛闭幕式的发言</a></li>
<li><a href="/wendang/599605.html">试论小学体育教育中的心理健康教育-教</a></li>
<li><a href="/wendang/599606.html">语文A版一年级下册《语文乐园一》教学</a></li>
<li><a href="/wendang/599607.html">2021四川大学物理化学考研真题经验参考</a></li>
<li><a href="/wendang/599608.html">[人教A版]2015-2016学年高中数学 第二</a></li>
<li><a href="/wendang/599609.html">终端网点销售返利协议书</a></li>
<li><a href="/wendang/599601.html">江苏省2015年眼科学主治医师青光眼考试</a></li>
<li><a href="/wendang/599602.html">2017年部编人教版八年级语文上册教案</a></li>
<li><a href="/wendang/599603.html">十一中学七年级英语上册Unit7Howmuchar</a></li>
<li><a href="/wendang/599604.html">以赛促教的创新性实验教学机制建设实践</a></li>
<li><a href="/wendang/599596.html">平凉市崆峒区2015七年级下生物期末试题</a></li>
<li><a href="/wendang/599597.html">琶洲（地块五）A、B塔楼1、2#塔吊基础</a></li>
<li><a href="/wendang/599598.html">一级医院工作制度与人员岗位职责</a></li>
<li><a href="/wendang/599599.html">2018北京西城区高三二模理科数学试题及</a></li>
<li><a href="/wendang/599600.html">炒股密码线技术 - 图文</a></li>
<li><a href="/wendang/599592.html">职高学生生涯发展辅导教案</a></li>
<li><a href="/wendang/599593.html">语文人教版四年级上册8 世界地图引出的</a></li>
<li><a href="/wendang/599594.html">最新最新人教版二年级上册全册数学教案</a></li>
<li><a href="/wendang/599595.html">2017高考英语全国2卷精彩试题（有问题</a></li>
<li><a href="/wendang/599591.html">普通心理学笔记</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="foot">Copyright © 2020-2025 教文网 版权所有<br/>
声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>
客服QQ：78024566 邮箱：78024566@qq.com<br/><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备19068818号-2</a>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?08167428cb1f9595d271fedcdca87afe";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<a href="#0" class="cd-top">Top</a>
<script type="text/javascript">
$(".right-tag a").each(function(){$(this).addClass("tags"+(Math.floor(Math.random()*9)+1));});
$(function(){var c=$("#FontSizeBtn i"),a=$(".art_body");c.click(function(){var b=$(this).index();0==b&&a.css("font-size","18px");1==b&&a.css("font-size","16px");2==b&&a.css("font-size","14px");c.removeClass("active");$(this).addClass("active")})});
</script>
<div class="sidebar word-pic"><a href="javascript:;" class="copy-fullpage"><span>一键复制全文</span></a><a href="javascript:;" class="sidedown dl-link"><span>下载文档</span></a></div>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript:;" title="关闭" class="close">×</a>
<b>游客快捷下载通道</b>（下载后可以自由复制和排版）
</div>
<div class="theme-popbod dform">
<div class="pay-inf">
<div class="guest">
<div class="pay-tit">单篇付费下载</div>
<div class="pay-price">限时特价：<b>7 元/份</b> <em>原价:20元</em></div>
<div class="pay-select"><span class="pay1"><img src="/style/images/wxpay.jpg" class="over"></span> <span class="pay2"><img src="/style/images/alipay.jpg"></span></div>
<div class="guest-pay">
<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>
<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a></div>
</div>
<div class="vip-pay">
<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>
<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a></div>
</div>
<div class="service"><a href="javascript:;">联系客服</a></div>
</div>
<div class="vip">
<div class="pay-tit">VIP包月下载</div>
<div class="pay-price">特价：<b>29 元/月</b> <em>原价:99元</em></div>
<div class="pay-viptip">低至<b> 0.3 元/份</b> 每月下载<b>150</b>份 <br>全站内容免费自由复制</div>
<div class="pay-vipto"><a href="/user/reg.php">注册开通VIP</a></div>
</div>
<div class="vip-up">
<div class="pay-tit">VIP包月下载</div>
<div class="pay-price">特价：<b>29 元/月</b> <em>原价:99元</em></div>
<div class="pay-viptip">低至<b> 0.3 元/份</b> 每月下载<b>150</b>份 <br>全站内容免费自由复制</div>
<div class="pay-vipto"><a href="/user/index.php">马上升级VIP</a></div>
</div>
<div class="pay-tips">注：下载文档有可能出现无法下载或内容有问题，请联系客服协助您处理。</div>
</div>
</div>
</div>
<div class="service-box">
<div class="service-tit">
<a href="javascript:;" title="关闭" class="close">×</a>
<b>常见问题</b>（客服时间：周一到周五 9:30-18:00）
</div>
<ul>
<li><div class="service-que">1、支付成功后，为何无法下载内容？</div><div class="service-ans">付费后下载不了，请核对下微信账单信息，确保付费成功；已付费成功了还是下载不了，有可能是电脑的浏览器兼容性问题或者手机机型不支持的问题。</div></li>
<li><div class="service-que">2、付费后能否更换浏览器或者清理浏览器缓存后进行下载操作？</div><div class="service-ans">更换浏览器或者清理浏览器缓存会导致下载不成功，请不要更换浏览器和清理浏览器缓存。</div></li>
<li><div class="service-que">3、如何联系客服？</div><div class="service-ans">打开微信扫描下方二维码，请及时联系客服解决。<br>QQ咨询：370150219 <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=370150219&site=qq&menu=yes"><img border="0" src="https://pub.idqqimg.com/qconn/wpa/button/button_111.gif" alt="点击这里给我发消息" title="点击这里给我发消息"></a>，请把【付款记录详情】截图给客服，同时把您购买的文章【网址】发给客服。客服会在24小时内把文档发送给您。<img src="https://www.jiaowen.net/style/images/wxkf.jpg" style="display: block;width:150px;margin:auto;"></div></li>
</ul>
</div>
<div class="service-mask"></div>
<div class="theme-popover-mask"></div>
<script type="text/javascript">
$(".pay1 img").click(function () {
$(".wxpay").css("display", "block");
$(".alipay").css("display", "none");
$(".pay1 img").addClass("over");
$(".pay2 img").removeClass("over");
});
$(".pay2 img").click(function () {
$(".wxpay").css("display", "none");
$(".alipay").css("display", "block");
$(".pay1 img").removeClass("over");
$(".pay2 img").addClass("over");
});
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$(".word-pic a").click(function () {
$(".theme-popover-mask").fadeIn(200);
$(".theme-popover").slideDown(200);
$.ajax({
type: "POST",
dataType: "json",
url: "/user/check_rank.php",
data: {"aid": "591440"},
async: false,
success: function (data, textStatus, jqXHR) {
if (data.code === "2") {
//游客
$(".vip-up").hide();
$(".vip-pay").hide();
var downid = "591440"
$(".wxpay a").click(function(){
var payurl = "/hupipay/payment_pay_tz.php?payway=wx&aid=";
payurl = payurl.replace("payment", "youke");
var gotourl = payurl + downid
location.href = gotourl;
});
$(".alipay a").click(function(){
var payurl = "/hupipay/payment_pay_tz.php?payway=ali&aid=";
payurl = payurl.replace('payment', 'youke');
var gotourl = payurl + downid
location.href = gotourl;
});
} else if (data.code === "3") {
$(".theme-popover .theme-poptit b").text("会员快捷下载通道");
//注册会员
$(".guest-pay").hide();
$(".vip").hide();
$(".vip-pay").show();
$(".vip-up").show();
var downid = "591440"
$(".wxpay a").click(function(){
var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=2&pid=";
payurl = payurl.replace("payment", "pay");
var gotourl = payurl + downid
location.href = gotourl;
});
$(".alipay a").click(function(){
var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=3&pid=";
payurl = payurl.replace("payment", "pay");
var gotourl = payurl + downid
location.href = gotourl;
});
} else if (data.code === "5") {
layer.alert("今日下载次数已用完！请明日再来！您可以升级会员增加下载次数！", {icon: 2});
} else if (data.code === "6") {
layer.alert("VIP会员已到期！请及时续费！", {icon: 2});
} else {
location.href = "/plus/d.php?id=591440";
}
}
});
})
$(".theme-poptit .close").click(function () {
$(".theme-popover-mask").fadeOut(200);
$(".theme-popover").slideUp(200);
})
})
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$.ajax({
type: "POST",
dataType: "json",
data: {"aid": ""},
url: "/user/check_level.php",
async: false,
success: function (data, textStatus, jqXHR) {
if (data.code === "2" || data.code === "3") {
$(document).keydown(function (e) {
if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) {
$(".theme-popover-mask").fadeIn(100);
$(".theme-popover").slideDown(200);
}
});
document.body.oncopy = function () {
$(".theme-popover-mask").fadeIn(200);
$(".theme-popover").slideDown(200);
return false;
}
}
}
})
})
</script>
<script type="text/javascript">
$(".service a").click(function () {
$(".service-mask").fadeIn(200);
$(".service-box").slideDown(200);
$(".theme-popover-mask").fadeOut(200);
$(".theme-popover").slideUp(200);
});
$(".service-tit .close").click(function () {
$(".service-mask").fadeOut(200);
$(".service-box").slideUp(200);
});
</script>
</body>
</html> 