HTML语言简易入门教程

发布时间：2012-12-27 15:06:21 来源：文档文库

小中大

字号：

手机查看

第一课基础

Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名>标志名>来表示标志的开始和结束(例如标志对)，因此在Html文档中这样的标志对都必须是成对使用的。

当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。

HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >，< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。

　　HTML文件基本架构　　

文件开始
标头区开始
... 标题区
标头区结束

本文区开始

本文区内容
本文区结束

文件结束

网页文件格式。
标头区 : 记录文件基本资料，如作者、编写时间。
标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。<BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容。　　注意事项 　　通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。 　　习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。 第二课 字体 <hn>...</hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。 如 : <h2> 标题 </h2> 标题如 : <h3 align = center> 标题 </h3> ( 标题置中 ) 标题... 粗体字。 如 : 粗体字 粗体字 ... 斜体字。 如 : 斜体字 斜体字 <del>...</del> 横线 ( 表示删除 )。 如 : <del> 横线 </del> <tt>...</tt> 打字体 ( 固定宽度文字 )。 如 : <tt> 打字体 </tt>打字体 ... 上标字。 如 : 字体 上标字 字体上标字 ... 下标字。 如 : 字体 下标字 字体下标字 <!...> 注解 ( 不会显示在浏览器上 )，可以多行。 如 : <! 更新日期 : 2000/1/1> 第三课 表格 表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。 　　常用表格标记 <table>...</table> 表格指令。 相关属性 : ·align 调整·bgcolor 背景颜色·border 边框·height 高度·width 宽度 <caption>...</caption> 表格标题。 相关属性 : ·align 调整 <tr>...</tr> 表格列 ( </tr>可省略 ) 。 相关属性 : ·align 调整 <th>...</th> 表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 ) 。 相关属性 : ·align 调整·colspan 栏宽·rowspan 栏高 <td>...</td> 表格栏资料 ( 储存格 ) ( </td>可省略 ) 。 相关属性 : ·align 调整·bgcolor 背景颜色·height 高度·width 宽度·colspan 栏宽·rowspan 栏高 　　举例 如 : ( 基础型 ) <table border=1 align=center><tr><td>太平洋网络学院<td>太平洋网络学院<tr><td>太平洋网络学院<td>太平洋网络学院</table><table><tr></tr><tr></tr><tr></tr></table>如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 <table border=1 align=center bgcolor=#ccccff><caption>表格标题</caption><tr><td><th colspan=2>行标题 1 <th colspan=2>行标题 2<tr><th rowspan=2>列标题 1 <td>a <td>a <td>a <td>a<tr><td>b <td>b <td>b <td>b<tr><th rowspan=2>列标题 2 <td>c <td>c <td>c <td>c<tr><td>d <td>d <td>d <td>d</table> <table><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></table>第四课 标示html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！ 　　常用标示标记 <li> 标示项目。 如 : <ol><li>第一项<li>第二项</ol>1. 第一项 2. 第二项 <ol>...</ol> 编号标示，可标示数字或英文、罗马字母。 如 : <ol type=i><li>第一项<li>第二项</ol>i. 第一项 ii. 第二项 <ul>...</ul> 符号标示，可标示数字或英文、罗马字母。 如 : <ul><li>第一项<li>第二项</ul>∙ 第一项 ∙ 第二项 <dt> 定义项目。 <dd> 定义资料。 <dl>...</dl> 定义标示。 如 : <dl><dt>十进制 :<dd>0、1、2、3、4、5、6、7、8、9<dt>十六进制 :<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f</dl>十进制 : 0、1、2、3、4、5、6、7、8、9 十六进制 : 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 　　巢状式标示 巢状式标示 如 : <ol><li>第一章 <ol type=i> <li>第一节 <ul> <li>第一段 <li>第二段 </ul> <li>第二节</ol><li>第二章<li>第三章</ol>1. 第一章 i. 第一节 ▪ 第一段 ▪ 第二段 ii. 第二节 2. 第二章 3. 第三章 其他标示标记<dir>...</dir> 目录式标示 ( 自动加圆点 )。 如 : 网络学院 :<dir><li>新手上路<li>软件教室<li>设计教室<li>开发教室</dir> 网络学院 : 新手上路 软件教室 设计教室 开发教室 　注意事项　　标示项目符号也可以用... 标记，以符号字元 ( ○、◆、◎、★、■...等 ) 标示。　　如 : ● 　　特殊符号 :　　在html文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。 <table><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></table>第五课 区段标记　一个网站不仅要内容丰富外，也要有美观简洁的版面。html所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。 　　常用区段标记 <hr> 产生水平线。 如 : <hr aling=certen width=90%> 跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。 ... 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院， 网上学电脑的好去处。 <center>...</center> 置中。 如 : <center>置中</center>置中 ... 不跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。 <pre>...</pre> 以文件原始格式显示。 如 : <pre>原始格式: 文件</pre>原始格式: 文件第六课 链接　 链接可说是html中最重要的功能！因为html拥有链接的功能，使你能接上internet、www ……享受多姿多彩的网络世界。 基本上链接分成 : 外部链接——链接至网络的某个url网址或文件，可参考考网络链接方式。内部链接——链接html文件的某个区段。 网络链接方式 网络链接方式 : //主机名称 / 路径 / 文件名称 网址 如 : http : //www.pconline.com.cn/ 文件传输 如 : ftp : //ftp.pconline.com.cn/ gropher 传输 如 : gropher : //gropher.net.cn/ 远端登入 如 : telnet : //bbs.net.cn/ 文件下载 如 : file : //data/html/file.zip net news 传输 如 : news : talk.hinet.net.cn e-mail 如 : mailto : pcedu@pconline.com.cn 常用链接标记 <base> 设定基本url位置或路径，以後只要设定文件名称即会自动加上位置或路径。 相关属性 : ·href 链接的url位址或文件·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和 <frame> 视窗标记配合使用或开新的视窗 ) 如 : <base href="http : //www.pconline.com.cn/"><a href="kk.htm">■</a> <base href="http : //www.pconline.com.cn/" target=frame1> <a>...</a> 链接指令。 相关属性 : ·href 链接的url位址或文件·name 名称·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和 <frame> 视窗标记配合使用或开新的视窗 ) 如 : 外部链接<a href="http : //www.pconline.com.cn/">■</a> <a href="http : //www.pconline.com.cn/" target=frame1>■</a> 内部链接·ch1.htm 文件<a href=#a>■</a> ( 欲链接至html文件 a 点 ) <a name=a>■</a> ( html文件 a 点 ) ·ch2.htm文件<a href=ch1.htm#a>■</a> (欲链接至ch1.htm 文件 a 点 ) " ■ " 表示链接点，可以是文字或图案。( 即游标移到时，会变成手指形状的地方 ) <link> 链接指令 ( 用于head区，设定css文件 )。 <meta> 储存应用资讯，可设定时间载入网页 ( 用于head区 )。 相关属性 : ·charset 设定·content 回应表头资料内容 , 若是数字表示秒数·http-equiv 回应表头 , 若设定为refresh载入url设定·url html位置如 : ·设定中文自动跳行。<meta http-equiv="content-type" content="text/html;charset=gb2312"> ·设定十秒回到首页。 ( 若不设定html文件位置则再载入原html文件 )<meta http-equiv="refresh" content=10 url=index.htm> 设定链接、未链接部份颜色 设定链接、未链接部份颜色，用<body>...</body>标记。 相关属性 : ·alink按下链接部份未放开时颜色 ·link未看过的链接部份颜色 ·vlink已看过的链接部份颜色 如 : <body link=#0000ff alink=#ff0000 vlink=#00ff00> 第八课 设置图片 图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率 　　有关设定图片的方法共有以下几种 : 1. 设定html文件背景图片、背景颜色。<body>...</body>标记。如 : <body background=a.gif>...</body> 或<body bgcolor=#000000>...</body> 2. 设定图片。<img>标记。 3. 设定地图。<map>...</map>标记。 　　常用图片标记 <img> 指令 相关属性 : ·align 调整·alt 提示字·border 边框·height 高度·src 文件或url位址·usemap 地图名称·width 宽度 如 : 可插入图片 ( gif、jpg格式 )、avi电影<center><img src="../../../images/pcedu_lo.gif" alt="太平洋网络学院" align=top border=1></center><map>...</map> 地图 相关属性 : ·name 名称 <area> 设定地图动作区域 相关属性 : ·coords 设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 )·href 动作区域连结点 ( 可载入位址或文件 )·nohref 动作区域连结点不动作·shape 外型 举例设定地图<img border=0 src=a.gif usemap=#a><map name=a><area shape=rect coords=0,0,200,100 href=1.htm><area shape=rect coords=0,100,200,200 nohref><area shape=rect coords=0,200,200,300 href=3.htm></map> 第九课 加入声音　 html不仅能插入图片，也可以载入midi音乐、wav 音效喔！ 常用音乐标记 <bgsound> 背景音乐、音效。 相关属性 : ·loop 循环 , 背景音乐播放次数·src 文件或url位址 (可为wav、midi格式 ) 如 : <bgsound src=m-1.mid loop=true> 内嵌音乐插件 <embed>...</embed> 内嵌插件。 相关属性 : ·height 高度·width 宽度 ( 可设百分比% )·src 设定内嵌物件的 url 位址·loop 循环 , 背景音乐播放次数·autostart 自动播放 如 : <embed src=m-1.mid width=145 height=60 autostart=true loop=true></embed> 第十课 滚动条这是由ie提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！ 【文字卷动标记】 <marquee>...</marquee> 文字卷动 ( 滚动条 )。【相关属性】 ·behavior = 设定卷动方式-- alternate 交替来回卷动-- scroll 卷动 ( 预设 )-- slide 滑动 ·bgcolor = color 背景颜色 ·direction = 设定卷动方向 ·height = n 高度 ·loop = n 循环 , 卷动次数 ( 预设循环 )·scrollamount = n 设定卷动距离 ·scrolldelay = milliseconds 设定卷动时间 ·truespeed = milliseconds 设定卷动速度 ·width = n 宽度 ( 可设百分比% ) 【举例】 如 : <marquee bgcolor=red behavior=alternate direction=left scrollamout=10 scrolldelay=100> 太平洋网络学院</marquee>如 : <marquee bgcolor=green height=50 behavior=scroll direction=up scrollamout=10 scrolldelay=300> <center>太平洋网络学院</center></marquee>一 html的标签table，tbody,tr,td 称为html的标签，以双标签的形式出现，所谓双标签，也就是有一个<table>就有一个对应的</table>与之对应，同样适用于其他的双标签。一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达，属性可选择使用，不一定全部都用。在整个图片或帖子里双标签以首尾呼应的方式出现。<table align=center background="背景图片地址" border=0 cellpadding=0 cellspacing=0 bordercolor=#0000ff width="100%"><tbody><tr><td>这里是图片,文字或帖子内容.</td></tr></tbody></table><table> 的常用参数设定： <table width="400" border="1" cellspacing="2" cellpadding="2" align="center" valign="top" background="myweb.gif" bgcolor="#0000ff" bordercolor="#cf0000" bordercolorlight="#00ff00" bordercolordark="#00ffff"> width="400" 表格宽度，接受绝对值(如width=80)及相对值(width=80%)。border="1" 表格边框的厚度，不同浏览器有不同的内定值。 cellspacing="2" 表格格线的厚度align="center" 表格的摆放位置(水平)，可选值为： left(居左), right(居右), center(居中)valign="top". 表格内内容的对齐方式(垂直)，可选值为： top, middle, bottom。 　　background="myweb.gif" 表格的背景图片，与 bgcolor 不要同用。 bgcolor="#0000ff" 表格的背景颜色，与 background 不要同用bordercolor="#cf0000" 表格边框颜色bordercolorlight="#00ff00" 表格边框向光部分的颜色bordercolordark="#00ffff" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。播放器宽度width和高度height的值根据需要自定二 帖图格式帖图基本代码如下：<img src="图片连接url地址"><img> 称图形标记，主要用来插入图形标记。三 文字设制基本代码如下：隶书 size=5>插入文字 align=center　表示字体居中，可选值为居右（right）居左（left） color=颜色代码　face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等 size=字体大小，这里的最大值为7　取值越大文字就越大四 加入音乐<embed src="音乐文件地址">常用属性如下：src="your.mid" 设定 midi 档案及路径，可以是相对或绝对。 autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。 loop="true" 是否自动反复播放。loop=2 表示重复两次，true 是， false 否。 hidden="true" 是否完全隐藏控制画面，true 为是，no 为否 (内定)。 starttime="分:秒" 设定歌曲开始播放的时间。如 starttime="00:30" 表示从第30秒处开始播放。 volume="0-100" 设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定width="整数" 和 high="整数" 设定控制面板的高度和宽度。(若 hidden="no") align="center" 设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom controls="smallconsole" 设定控制面板的外观。预设值是 console。 console 一般正常面板 　　smallconsole 较小的面板 　　playbutton 只显示播放按钮 　　pausecutton 只显示暂停按钮 　　stopbutton 只显示停止按钮 　　volumelever 只显示音量调节按钮 贴音乐的完整语法如下:一: 隐藏播放器<embed src="音乐文件地址" hidden=true autostart=true loop=true>二: 不隐藏播放器<embed src="音乐文件地址" width="" height=""> 本文来源：<a href="https://www.2haoxitong.net/k/doc/b6dfa9e281c758f5f61f6717.html">https://www.2haoxitong.net/k/doc/b6dfa9e281c758f5f61f6717.html</a> </div> <a href="/wkdoc/index.html?url=/k/doc/b6dfa9e281c758f5f61f6717.html" target="_blank" class="download_card"> <img class="download_card_pic" src="/wkdoc/img/icon_word.png" alt=""> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">《HTML语言简易入门教程.doc》</div> <div class="download_card_tip">将本文的Word文档下载到电脑，方便收藏和打印</div> <div class="download_card_tj"> 推荐度： <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> </div> </div> <div class="download_card_btn"> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU2MjU5MTk0MTg2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY0MDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTQzMiAwaDE2MGMyNi42IDAgNDggMjEuNCA0OCA0OHYzMzZoMTc1LjRjMzUuNiAwIDUzLjQgNDMgMjguMiA2OC4yTDUzOS40IDc1Ni42Yy0xNSAxNS0zOS42IDE1LTU0LjYgMEwxODAuMiA0NTIuMmMtMjUuMi0yNS4yLTcuNC02OC4yIDI4LjItNjguMkgzODRWNDhjMC0yNi42IDIxLjQtNDggNDgtNDh6IG01OTIgNzUydjIyNGMwIDI2LjYtMjEuNCA0OC00OCA0OEg0OGMtMjYuNiAwLTQ4LTIxLjQtNDgtNDhWNzUyYzAtMjYuNiAyMS40LTQ4IDQ4LTQ4aDI5My40bDk4IDk4YzQwLjIgNDAuMiAxMDUgNDAuMiAxNDUuMiAwbDk4LTk4SDk3NmMyNi42IDAgNDggMjEuNCA0OCA0OHogbS0yNDggMTc2YzAtMjItMTgtNDAtNDAtNDBzLTQwIDE4LTQwIDQwIDE4IDQwIDQwIDQwIDQwLTE4IDQwLTQweiBtMTI4IDBjMC0yMi0xOC00MC00MC00MHMtNDAgMTgtNDAgNDAgMTggNDAgNDAgNDAgNDAtMTggNDAtNDB6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2NDA4Ij48L3BhdGg+PC9zdmc+" alt=""> <div class="downlod_btn_right"> <div>点击下载文档</div> 文档为doc格式 </div> </div> </a>  <div class="ad-box"> <script type="text/javascript"> s1(); </script> </div> <script type="text/javascript"> s2(); </script> <div class="casedetail-bottom clr"> <div class="casedetail-share flr"> 分享到: <div class="casedetail-share-main fl clearfix"> </div> </div> </div> </div> <script src="https://www.2haoxitong.net/statics/js/js_bh/share.js"> </script> <script type="text/javascript"> $(function() { var size = ['14px', '16px', '18px']; var el = $('.arti-content'); var chooseDom = $('.arti-head-sizewrap > span'); chooseDom.on('click', function() { var iNow = $(this).index(); $(this).addClass('arti-hs-list-act').siblings().removeClass('arti-hs-list-act'); el.css('fontSize', size[iNow]); }); $('.arti-hipl-right-title').html($('.arti-head > h2').html()); $('.share-weixin').on('click', function() { $('.arti-wxwrap').show(); }); $('.arti-wxwrap-close').on('click', function() { $('.arti-wxwrap').hide(); }); new Share({ dom: ['.share-qzone', '.share-sinaminiblog', '.share-qqmb'], contentDom: '.arti-head > h2' }); }); </script> <div class="relcase clearfix"> <div class="relcase-title fl"> <div class="relcase-title-word"> 相 </div> <div class="relcase-title-word"> 关 </div> <div class="relcase-title-word"> 案 </div> <div class="relcase-title-word"> 例 </div> </div> <div class="relcase-right fl"> <div class="relcase-right-main clearfix"> <ul class="relcase-part fl"> <li class="relcase-list clr"> <a href="/k/doc/b501514f443610661ed9ad51f01dc281e53a56d5.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/142c83cbf311f18583d049649b6648d7c0c708c0.html" class="fll relcase-list-link">安全验证</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/b0279c38930ef12d2af90242a8956bec0875a53d.html" class="fll relcase-list-link">安全验证</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/b93b3964ba4cf7ec4afe04a1b0717fd5360cb2f8.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/9adef3f56e85ec3a87c24028915f804d2a1687b9.html" class="fll relcase-list-link">安全验证</a> 2024-04-29 </li> </ul> <ul class="relcase-part fl"> <li class="relcase-list clr"> <a href="/k/doc/c50e9391a78da0116c175f0e7cd184254b351b3d.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/8d6dcd88fc4733687e21af45b307e87100f6f868.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/5724fff152e79b89680203d8ce2f0066f53364eb.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/c771374bf28583d049649b6648d7c1c708a10bf0.html" class="fll relcase-list-link">安全验证</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/78ce80fea56e58fafab069dc5022aaea988f4147.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> </ul> </div> </div> </div> <script type="text/javascript"> s3(); </script> </div> <div class="right fr"> <script type="text/javascript"> s7(); </script> <div class="hot-recom mb-10"> <h3 class="cm-right-title">相关推荐</h3> <ul class="hot-recom-main"> <li class="hot-recom-list clearfix"> <a href="/k/doc/f723118780c758f5f61fb7360b4c2e3f56272532.html" class="hot-recom-ls clearfix"> 1 亲子活动方案 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/a2d48f1a85868762caaedd3383c4bb4cf6ecb711.html" class="hot-recom-ls clearfix"> 2 祝福宝宝出生的话 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/3ff2b97bcd7931b765ce0508763231126edb77a4.html" class="hot-recom-ls clearfix"> 3 人教四年级语文上册第四单元单元检测卷及答案 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/2b0949b8a22d7375a417866fb84ae45c3b35c2e6.html" class="hot-recom-ls clearfix"> 4 材料范文之纪委工作汇报材料2015 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/e4efef58657d27284b73f242336c1eb91a373387.html" class="hot-recom-ls clearfix"> 5 [精品文档]母亲给女儿生日祝福语-推荐word版（5页） </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/a6e7148868eae009581b6bd97f1922791788beea.html" class="hot-recom-ls clearfix"> 6 初中八年级叙事习作范文：以青春之名 - 关于青春作文 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/4ae3e4f4f56527d3240c844769eae009581ba2c0.html" class="hot-recom-ls clearfix"> 7 描写人物的作文100字猜猜他是谁 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/e2c14b476ad97f192279168884868762cbaebb75.html" class="hot-recom-ls clearfix"> 8 有趣的童年游戏作文 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/22cb79c20e22590102020740be1e650e52eacf9c.html" class="hot-recom-ls clearfix"> 9 “文明就餐，节约粮食”倡议书 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/1a790fc802020740bf1e9b21.html" class="hot-recom-ls clearfix"> 10 论陆游的诗歌爱国主题及表现形式和特点 </a> </li> </ul> </div> <script type="text/javascript"> s8(); </script> <div class="hot-search"> <h3 class="cm-right-title">推荐内容</h3> <div class="hot-search-main clearfix"> <a href="/k/doc/23a134bbff4733687e21af45b307e87100f6f8e2.html" class="hot-search-word fl">四年级作文：我的画像作文450字</a> <a href="/k/doc/c7bb84304a35eefdc8d376eeaeaad1f34693112e.html" class="hot-search-word fl">环境卫生整治告知书- 副本</a> <a href="/k/doc/78a2fe1fdc88d0d233d4b14e852458fb770b3884.html" class="hot-search-word fl">（十三）电磁感应</a> <a href="/k/doc/1b32a240c281e53a5802ffc4.html" class="hot-search-word fl">厕所文化励志故事</a> <a href="/k/doc/59787e567e192279168884868762caaedd33baa3.html" class="hot-search-word fl">2018-民政局社会救助股的年度工作总结范文-word范文（5页）</a> <a href="/k/doc/e7c44e6fa45177232f60a2f3.html" class="hot-search-word fl">cad导入photoshop的方法</a> <a href="/k/doc/1e0843c488eb172ded630b1c59eef8c75fbf9577.html" class="hot-search-word fl">幼儿园后勤管理制度</a> <a href="/k/doc/4c509b7adc3383c4bb4cf7ec4afe04a1b171b056.html" class="hot-search-word fl">有趣的童年游戏作文</a> <a href="/k/doc/b7f1301e49d7c1c708a1284ac850ad02df80075f.html" class="hot-search-word fl">难忘的童年游戏作文6篇</a> <a href="/k/doc/1ea0530ff11dc281e53a580216fc700abb685286.html" class="hot-search-word fl">2017-2018学年苏教版小学五年级语文下册期末课内阅读复习资料</a> </div> </div> <div class="ad-sty"> <div class=" nav-position"> <script type="text/javascript"> s10(); </script> </div> </div> </div> </div> </div> <style type="text/css"> .footer-friendlink{max-height: 70px;overflow: hidden;} </style> <div class="wrap-b footer-b"> <div class="wrap footer-index"> <div class="footer-copy"> 网站内容来自网络，如有侵权请联系我们，立即删除！ Copyright © 范文写作网京ICP备16605803号 <script type="text/javascript">tj();</script> </div> </div> </div> <script src="https://www.2haoxitong.net/statics/js/js_bh/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"> </script> <script type="text/javascript"> $(function() { jQuery(".slideBox").slide({ mainCell: ".bd ul", effect: "leftLoop", autoPlay: true }); $('.hrt-head .hrt-head-list').on('mouseover', function() { $(this).addClass('hrt-head-list-hover').siblings().removeClass('hrt-head-list-hover'); $('.hrt-main .hrt-main-list').eq($(this).index()).addClass('hrt-main-list-show').siblings().removeClass('hrt-main-list-show'); }); $('.ma-nav .ma-nav-list').on('mouseover', function() { $(this).addClass('ma-nav-list-hover').siblings().removeClass('ma-nav-list-hover'); $('.ls-main .ls-mod').eq($(this).index()).addClass('ls-mod-act').siblings().removeClass('ls-mod-act'); $('.ls-main-addmore .ls-mod').eq($(this).index()).addClass('ls-mod-act').siblings().removeClass('ls-mod-act'); }); }); </script> <script> $(function() { function loadImg() { var cT = document.documentElement.clientHeight; var sT = $('html').scrollTop() || $('body').scrollTop(); $('img').each(function(index, el) { if (!$(this).attr('data-src')) { var curT = $(this).offset().top; if (curT < cT + sT) { $(this).attr('src', $(this).attr('data-src')) } } }); } loadImg(); window.onscroll = function() { loadImg(); }; }); </script> </body> </html>