HTML入门教程.docx
《HTML入门教程.docx》由会员分享，可在线阅读，更多相关《HTML入门教程.docx（17页珍藏版）》请在冰豆网上搜索。
HTML入门教程
HTML语言入门教程
第一课HTML语言基础
当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML（HyperTextMarkupLanguage）语言所构成。
HTML（超文件标记语言）是一种建立网页文件的语言，透过标记式的指令（Tag），将影像、声音、图片、文字等连结显示出来。
HTML标记是由<和>所括住的指令，主要分为:
单标记指令、双标记指令（由<起始标记>，所构成）。
HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后（以.htm或.html为文件后缀保存）将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
HTML文件基本架构
文件开始
标头区开始
...标题区
标头区结束
本文区开始
本文区内容
本文区结束
文件结束
网页文件格式。
标头区:
记录文件基本资料，如作者、编写时间。
标题区:</p><p>文件标题须使用在标头区内，可以在浏览器最上面看到标题。</p><p><BODY>本文区:</p><p>文件资料，即在浏览器上看到的网站内容。</p><p> 注意事项</p><p> 通常一份HTML网页文件包含二个部份:</p><p><HEAD>...</HEAD>标头区、<BODY>...</BODY>本文区。</p><p>而<HTML>和</HTML>代表网页文件格式。</p><p> 习惯上一个网站的首页名称通常订为index.htm或index.html这样只要浏览网站，浏览器便会自动的找出index.htm文件。</p><p>第二课字体设置</p><p> 我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型...等变化，适当的应用可以增加页面的美观！</p><p> 常用字体标记</p><p><Hn>...</Hn>标题，设定标题字体大小，n=1（大）~6（小）会自动跳下一行。</p><p>通常用在如章节、段落等标题上。</p><p>如:</p><p><H2>标题</H2></p><p>标题</p><p>如:</p><p><H3ALIGN=CENTER>标题</H3>（标题置中）</p><p>标题</p><p><B>...</B>粗体字。</p><p>如:</p><p><B>粗体字</B></p><p>粗体字</p><p><I>...</I>斜体字。</p><p>如:</p><p><I>斜体字</I></p><p>斜体字</p><p><U>...</U>加底线。</p><p>如:</p><p><U>加底线</U></p><p>加底线</p><p><DEL>...</DEL>横线（表示删除）。</p><p>如:</p><p><DEL>横线</DEL></p><p><TT>...</TT>打字体（固定宽度文字）。</p><p>如:</p><p><TT>打字体</TT></p><p>打字体</p><p><SUP>...</SUP>上标字。</p><p>如:</p><p>字体<SUP>上标字</SUP></p><p>字体上标字</p><p><SUB>...</SUB>下标字。</p><p>如:</p><p>字体<SUB>下标字</SUB></p><p>字体下标字</p><p><!</p><p>...>注解（不会显示在浏览器上），可以多行。</p><p>如:</p><p><!</p><p>更新日期:</p><p>2000/1/1></p><p> 设定字体大小、颜色、字型</p><p> 有关设定文字的方法共有以下几种:</p><p> 1.设定HTML文件主体文字颜色。</p><p><BODY>...</BODY>标记。</p><p> 如:</p><p><BODYTEXT=RED>...</BODY>或</p><p> <BODYTEXT=#FF0000>...</BODY></p><p> 2.设定基本字体大小、颜色、字型。</p><p><BASEFONT>...</BASEFONT>标记。</p><p> 3.设定字体大小、颜色、字型。</p><p><FONT>...</FONT>标记。</p><p><BASEFONT>...</BASEFONT>设定基本字体，SIZE=1~7，1（最小）7（最大）。</p><p>如:</p><p><BASEFONTSIZE=4>基本字体大小为4</BASEFONT></p><p>基本字体大小为4</p><p>如:</p><p><BASEFONTCOLOR=#FF0000>设定颜色</BASEFONT></p><p>设定颜色</p><p>如:</p><p><BASEFONTFACE=标楷体,细明体>设定字型</BASEFONT></p><p>设定字型</p><p><BIG>...</BIG>基本字体加大。</p><p>如:</p><p><BASEFONTSIZE=4>基本字体大小为4，</BASEFONT></p><p><BIG>加大为5</BIG></p><p>基本字体大小为4，加大为5</p><p><SMALL>...</SMALL>基本字体减小。</p><p>如:</p><p><BASEFONTSIZE=4>基本字体大小为4，</BASEFONT></p><p><SMALL>减小为3</SMALL></p><p>基本字体大小为4，减小为3</p><p><FONT>...</FONT>设定字体大小、颜色、字型，SIZE=1~7，1（最小）7（最大）。</p><p>如:</p><p><FONTSIZE=4>字体大小为4</FONT></p><p>字体大小为4</p><p>如:</p><p><BASEFONTSIZE=4>基本字体大小为4</p><p><FONTSIZE=+1>+1字体大小为5</FONT></p><p><FONTSIZE=-2>-2字体大小为2</FONT>...</BASEFONT></p><p> 基本字体大小为4</p><p> +1字体大小为5</p><p> -2字体大小为2</p><p>如:</p><p><FONTCOLOR=#FF0000>设定颜色</FONT></p><p>设定颜色</p><p>如:</p><p><FONTFACE=标楷体,细明体>设定字型</FONT></p><p>设定字型</p><p> 注意事项</p><p> 1.设定字体的大小分:</p><p>绝对SIZE如:</p><p><FONTSIZE=4></p><p>和相对SIZE如:</p><p><FONTSIZE=+1>（以BASEFONT设定的字体大小做加减）。</p><p> 2.设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度（00暗~FF亮）。</p><p>#RRGGBB所代表的是红、绿、蓝三原色，每一色由两位十六进制的数值表示（即十进制0~255）。</p><p>十六进制:</p><p>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。</p><p> 3.设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示</p><p>第三课表格</p><p> 表格是HTML的一项非常重要功能，利用其多种属性能够设计出多样化的表格。</p><p>使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。</p><p> 常用表格标记</p><p><TABLE>...</TABLE>表格指令。</p><p>相关属性:</p><p>·ALIGN调整</p><p>·BGCOLOR背景颜色</p><p>·BORDER边框</p><p>·HEIGHT高度</p><p>·WIDTH宽度</p><p><CAPTION>...</CAPTION>表格标题。</p><p>相关属性:</p><p>·ALIGN调整</p><p><TR>...</TR>表格列（</TR>可省略）。</p><p>相关属性:</p><p>·ALIGN调整</p><p><TH>...</TH>表格栏标题（表头）粗体字（</TH>可省略）。</p><p>相关属性:</p><p>·ALIGN调整</p><p>·COLSPAN栏宽</p><p>·ROWSPAN栏高</p><p><TD>...</TD>表格栏资料（储存格）（</TD>可省略）。</p><p>相关属性:</p><p>·ALIGN调整</p><p>·BGCOLOR背景颜色</p><p>·HEIGHT高度</p><p>·WIDTH宽度</p><p>·COLSPAN栏宽</p><p>·ROWSPAN栏高</p><p> 举例</p><p>如:</p><p>（基础型）</p><p><TABLEBORDER=1ALIGN=CENTER></p><p><TR><TD>太平洋网络学院<TD>太平洋网络学院</p><p><TR><TD>太平洋网络学院<TD>太平洋网络学院</p><p></TABLE></p><p>太平洋网络学院</p><p>太平洋网络学院</p><p>太平洋网络学院</p><p>太平洋网络学院</p><p>如:</p><p>（加强型）增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。</p><p><TABLEBORDER=1ALIGN=CENTERBGCOLOR=#CCCCFF></p><p><CAPTION>表格标题</CAPTION></p><p><TR><TD><THCOLSPAN=2>行标题1<THCOLSPAN=2>行标题2</p><p><TR><THROWSPAN=2>列标题1<TD>A<TD>A<TD>A<TD>A</p><p><TR><TD>B<TD>B<TD>B<TD>B</p><p><TR><THROWSPAN=2>列标题2<TD>C<TD>C<TD>C<TD>C</p><p><TR><TD>D<TD>D<TD>D<TD>D</p><p></TABLE></p><p>表格标题</p><p>行标题1</p><p>行标题2</p><p>列标题1</p><p>A</p><p>A</p><p>A</p><p>A</p><p>B</p><p>B</p><p>B</p><p>B</p><p>列标题2</p><p>C</p><p>C</p><p>C</p><p>C</p><p>D</p><p>D</p><p>D</p><p>D</p><p> 看了以上的例子，应该了解表格的基本写法吧！</p><p>第四课标示</p><p> </p><p> HTML提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！</p><p> 常用标示标记</p><p><LI>标示项目。</p><p>如:</p><p><OL></p><p><LI>第一项</p><p><LI>第二项</p><p></OL></p><p>1.第一项</p><p>2.第二项</p><p><OL>...</OL>编号标示，可标示数字或英文、罗马字母。</p><p>如:</p><p><OLTYPE=I></p><p><LI>第一项</p><p><LI>第二项</p><p></OL></p><p>I.第一项</p><p>II.第二项</p><p><UL>...</UL>符号标示，可标示数字或英文、罗马字母。</p><p>如:</p><p><UL></p><p><LI>第一项</p><p><LI>第二项</p><p></UL></p><p>∙第一项</p><p>∙第二项</p><p><DT>定义项目。</p><p><DD>定义资料。</p><p><DL>...</DL>定义标示。</p><p>如:</p><p><DL></p><p><DT>十进制:</p><p><DD>0、1、2、3、4、5、6、7、8、9</p><p><DT>十六进制:</p><p><DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F</p><p></DL></p><p>十进制:</p><p>0、1、2、3、4、5、6、7、8、9</p><p>十六进制:</p><p>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F</p><p> 巢状式标示</p><p>如:</p><p><OL></p><p><LI>第一章</p><p><OLTYPE=i></p><p><LI>第一节</p><p><UL></p><p><LI>第一段</p><p><LI>第二段</p><p></UL></p><p><LI>第二节</p><p></OL></p><p><LI>第二章</p><p><LI>第三章</p><p></OL></p><p>1.第一章</p><p>i.第一节</p><p>▪第一段</p><p>▪第二段</p><p>ii.第二节</p><p>2.第二章</p><p>3.第三章</p><p> 其他标示标记</p><p><DIR>...</DIR>目录式标示（自动加圆点）。</p><p>如:</p><p>网络学院:</p><p><DIR></p><p><LI>新手上路</p><p><LI>软件教室</p><p><LI>设计教室</p><p><LI>开发教室</p><p></DIR></p><p>网络学院:</p><p>新手上路</p><p>软件教室</p><p>设计教室</p><p>开发教室</p><p> 注意事项</p><p> 标示项目符号也可以用<FONT>...</FONT>标记，以符号字元（○、◆、◎、★、■...等）标示。</p><p> 如:</p><p><FONTCOLOR=#FF0000>●</FONT></p><p> 特殊符号:</p><p> 在HTML文件中，有些符号是代表特定的意义的。</p><p>所以当我们要使用这些特殊符号时，便要用替代指令。</p><p>符号</p><p>替代指令</p><p>"</p><p>"或"</p><p>&</p><p>&或&</p><p><</p><p><或<</p><p>></p><p>>或></p><p>不可分空格</p><p> </p><p>第五课区段标记</p><p> 一个网站不仅要内容丰富外，也要有美观简洁的版面。</p><p>HTML所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。</p><p> 常用区段标记</p><p><HR>产生水平线。</p><p>如:</p><p><HRALING=CERTENWIDTH=90%></p><p><BR>跳下一行。</p><p>如:</p><p>太平洋网络学院，<BR>网上学电脑的好去处。</p><p>太平洋网络学院，</p><p>网上学电脑的好去处。</p><p><P>...</P>段落，跳下一行并加一行空白。</p><p>（</P>可省略）</p><p>如:</p><p>太平洋网络学院，<P>网上学电脑的好去处。</p><p>太平洋网络学院，</p><p>网上学电脑的好去处。</p><p><CENTER>...</CENTER>置中。</p><p>如:</p><p><CENTER>置中</CENTER></p><p>置中</p><p><NOBR>...</NOBR>不跳下一行。</p><p>如:</p><p><NOBR>太平洋网络学院，</NOBR>网上学电脑的好去处。</p><p>太平洋网络学院，网上学电脑的好去处。</p><p><PRE>...</PRE>以文件原始格式显示。</p><p>如:</p><p><PRE>原始格式:</p><p>文件</PRE></p><p>原始格式:</p><p>文件</p><p>第六课链接</p><p> </p><p>链接可说是HTML中最重要的功能！</p><p>因为HTML拥有链接的功能，使你能接上INTERNET、WWW……享受多姿多彩的网络世界。</p><p>基本上链接分成:</p><p>外部链接——链接至网络的某个URL网址或文件，可参考考网络链接方式。</p><p>内部链接——链接HTML文件的某个区段。</p><p>网络链接方式</p><p>网络链接方式:</p><p>//主机名称/路径/文件名称</p><p>网址如:</p><p>http:</p><p>//</p><p>文件传输如:</p><p>ftp:</p><p>//</p><p>GROPHER传输如:</p><p>gropher:</p><p>//</p><p>远端登入如:</p><p>telnet:</p><p>//</p><p>文件下载如:</p><p>file:</p><p>//data/html/file.zip</p><p>NETNEWS传输如:</p><p>news:</p><p>E-Mail如:</p><p>mailto:</p><p>pcedu@</p><p>常用链接标记</p><p><BASE>设定基本URL位置或路径，以後只要设定文件名称即会自动加上位置或路径。</p><p>相关属性:</p><p>·HREF链接的URL位址或文件</p><p>·TARGET指定链接到的URL位址或文件显示于那一个视窗（可和<FRAME>视窗标记配合使用或开新的视窗）</p><p>如:</p><p><BASEHREF="http:</p><p>//</p><p><AHREF="kk.htm">■</A></p><p><BASEHREF="http:</p><p>//TARGET=frame1></p><p><A>...</A>链接指令。</p><p>相关属性:</p><p>·HREF链接的URL位址或文件</p><p>·NAME名称</p><p>·TARGET指定链接到的URL位址或文件显示于那一个视窗（可和<FRAME>视窗标记配合使用或开新的视窗）</p><p>如:</p><p>外部链接</p><p><AHREF="http:</p><p>//</p><p><AHREF="http:</p><p>//TARGET=frame1>■</A></p><p>内部链接</p><p>·CH1.HTM文件</p><p><AHREF=#A>■</A>（欲链接至HTML文件A点）</p><p><ANAME=A>■</A>（HTML文件A点）</p><p>·CH2.HTM文件</p><p><AHREF=CH1.HTM#A>■</A>（欲链接至CH1.HTM文件A点）</p><p>"■"表示链接点，可以是文字或图案。</p><p>（即游标移到时，会变成手指形状的地方）</p><p><LINK>链接指令（用于HEAD区，设定CSS文件）。</p><p><META>储存应用资讯，可设定时间载入网页（用于HEAD区）。</p><p>相关属性:</p><p>·CHARSET设定</p><p>·CONTENT回应表头资料内容,若是数字表示秒数</p><p>·HTTP-EQUIV回应表头,若设定为REFRESH载入URL设定</p><p>·URLHTML位置</p><p>如:</p><p>·设定中文自动跳行。</p><p><METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb2312"></p><p>·设定十秒回到首页。</p><p>（若不设定HTML文件位置则再载入原HTML文件）</p><p><METAHTTP-EQUIV="REFRESH"CONTENT=10URL=index.htm></p><p>设定链接、未链接部份颜色</p><p>设定链接、未链接部份颜色，用<BODY>...</BODY>标记。</p><p>相关属性:</p><p>·ALINK按下链接部份未放开时颜色</p><p>·LINK未看过的链接部份颜色</p><p>·VLINK已看过的链接部份颜色</p><p>如:</p><p><BODYLINK=#0000FFALINK=#FF0000VLINK=#00FF00></p><p>第七课框架</p><p> </p><p> 框架架构的标记，主要是分割窗口和插入浮动窗口的功能。</p><p>如果能有效的运用将有助于浏览网页的效率！</p><p> 常用窗口标记</p><p><FRAMESET>...</FRAMESET>定义分割窗口。</p><p>相关属性:</p><p>·BORDER边框</p><p>·COLS行,设定分割左右窗口宽度（用『,』分隔，可设百分比%;『*』表示剩余部份）</p><p>·FRAMEBORDER显示边框</p><p>·ROWS列,设定分割上下窗口高度（用『,』分隔，可设百分比%;『*』表示剩余部份）</p><p><FRAME>定义窗口。</p><p>相关属性:</p><p>·FRAMEBORDER显示边框</p><p>·NAME名称</p><p>·NORESIZE设定是否可以调整窗口大小</p><p>·SRC文件或URL位址</p><p>·SCROLLING设定是否可以卷动</p><p><NOFRAMES>...</NOFRAMES>无支援分割窗口浏览器显示文字。</p><p><IFRAME>...</IFRAME>插入浮动窗口。</p><p>相关属性:</p><p>·BORDER边框</p><p>·FRAMEBORDER显示边框</p><p>·NORESIZE设定是否可以调整窗口大小</p><p>·SRC文件或URL位址</p><p>·SCROLLING设定是否可以卷动</p><p> 举例</p><p>如:</p><p>本站窗口架构。</p><p>（先分割成上下窗口，再于窗口各分割成左右窗口。</p><p>）</p><p><FRAMESETROWS=74,*COLS=140,*FRAMEBORDER=NOBORDER=0></p><p><FRAMESRC=rad.htmNAME=RADNORESIZESCROLLING=NO></p><p><FRAMESRC=a-1.htmNAME=FRAME1NORESIZESCROLLING=NO></p><p><FRAMESRC=b-1.htmNAME=FRAME2NORESIZESCROLLING=AUTO></p><p><FRAMESRC=c-1.htmNAME=FRAME3NORESIZESCROLLING=AUTO></p><p></FRAMESET></p><p>如:</p><p>浮动窗口</p><p><CENTER></p><p><IFRAMEFRAMEBORDER=YESSCROLLING=YESSRC=c1-01.htm></p><p></IFRAME></p><p></CENTER></p><p> 注意</p><p> 窗口基本架构的文件，通常放在HTML文件的第一页，如:</p><p>index.htm。</p><p>此HTML文件的基本架构并不需要本文区（BODY），只需定义窗口架构，而其他HTML文件可用连结方式（AHREF=...连结标记TARGET属性）显示于指定的窗口中。</p><p>第八课设置图片</p><p> </p><p> 现在的网站没有用图片的，几乎很少了吧！</p><p>图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率喔！</p><p> 有关设定图片的方法共有以下几种:</p><p>1.设定HTML文件背景图片、背景颜色。</p><p><BODY>...</BODY>标记。</p><p>2.如:</p><p><BODYBACKGROUND=A.GIF>...</BODY>或</p><p>3.<BODYBGCOLOR=#000000>...</BODY></p><p>4.设定图片。</p><p><IMG>标记。</p><p>5.设定地图。</p><p><MAP>...</MAP>标记。</p><p> 常用图片标记</p><p><IMG>指令</p><p>相关属性:</p><p>·ALIGN调整</p><p>·ALT提示字</p><p>·BORDER边框</p><p>·HEIGHT高度</p><p>·SRC文件或URL位址</p><p>·USEMAP地图名称</p><p>·WIDTH宽度</p><p>如:</p><p>可插入图片（GIF、JPG格式）、AVI电影</p><p><CENTER></p><p><IMGSRC="../../../images/pcedu_lo.gif"ALT="太平洋网络学院"ALIGN=TOPBORDER=1></p><p></CENTER></p><p><MAP>...</MAP>地图</p><p>相关属性:</p><p>·NAME名称</p><p><AREA>设定地图动作区域</p><p>相关属性:</p><p>·COORDS设定动作区域座标（左上角座标:</p><p>X1,Y1;右下角座标:</p><p>X2,Y2）</p><p>·HREF动作区域连结点（可载入位址或文件）</p><p>·NOHREF动作区域连结点不动作</p><p>·SHAPE外型</p><p> 举例</p><p>设定地图</p><p><IMGBORDER=0SRC=A.GIFUSEMAP=#A></p><p><MAPNAME=A></p><p><AREASHAPE=RECTCOORDS=0,0,200,100HREF=1.HTM></p><p><AREASHAPE=RECTCOORDS=0,100,200,200NOHREF></p><p><AREASHAPE=RECTCOORDS=0,200,200,300HREF=3.HTM></p><p></MAP></p><p>第九课加入声音</p><p> </p><p>HTML不仅能插入图片，也可以载入MIDI音乐、WAV音效喔！</p><p>常用音乐标记</p><p><BGSOUND>背景音乐、音效。</p><p>相关属性:</p><p>·LOOP循环,背景音乐播放次数</p><p>·SRC文件或URL位址（可为WAV、MIDI格式）</p><p>如:</p><p><BGSOUNDSRC=m-1.midLOOP=True></p><p>内嵌音乐插件</p><p><EMBED>...</EMBED>内嵌插件。</p><p>相关属性:</p><p>·HEIGHT高度</p><p>·WIDTH宽度（可设百分比%）</p><p>·SRC设定内嵌物件的URL位址</p><p>·LOOP循环,背景音乐播放次数</p><p>·AUTOSTART自动播放</p><p>如:</p><p><EMBEDSRC=m-1.midWIDTH=145HEIGHT=60AUTOSTART=TrueLOOP=True></EMBED></p><p>第十课滚动条</p><p> </p><p>这是由IE提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！</p><p>【文字卷动标记】</p><p><MARQUEE>...</MARQUEE>文字卷动（滚动条）。</p><p>【相关属性】</p><p>·BEHAVIOR=设定卷动方式</p><p>--ALTERNATE交替来回卷动</p><p>--SCROLL卷动（预设）</p><p>--SLIDE滑动</p><p>·BGCOLOR=color背景颜色</p><p>·DIRECTION=设定卷动方向</p><p>·HEIGHT=n高度</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "5444201";
var total_page = "17";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/5444201.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2022-12/16/a2a3d763-d8c7-496c-b911-0005bf6c712c/a2a3d763-d8c7-496c-b911-0005bf6c712c";
var freepage = parseInt('17');
var total_c = parseInt('17');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"HTML入门教程.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873325.html" title="【精品】口语交际：有趣的动物 (共17张PPT)【完美版.ppt">【精品】口语交际：有趣的动物 (共17张PPT)【完美版.ppt</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873223.html" title="管理运筹学(第四版)PPT全套课件..pptx">管理运筹学(第四版)PPT全套课件..pptx</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873087.html" title="化学品安全技术说明书大全(MSDS).doc">化学品安全技术说明书大全(MSDS).doc</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873026.html" title="感温电缆试验表.docx">感温电缆试验表.docx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872808.html" title="《ERCP术的护理》PPT课件.ppt">《ERCP术的护理》PPT课件.ppt</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872600.html" title="城市综合体施工组织设计范例.doc">城市综合体施工组织设计范例.doc</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872323.html" title="《少年维特之烦恼》..ppt">《少年维特之烦恼》..ppt</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872283.html" title="露天煤矿边坡稳定性分析及评价设计报告书模板.doc">露天煤矿边坡稳定性分析及评价设计报告书模板.doc</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30871506.html" title="风湿性多肌痛护理查房ppt课件.pptx">风湿性多肌痛护理查房ppt课件.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30871464.html" title="工业特种设备安全 蒋军成 第六章 电梯新.pptx">工业特种设备安全 蒋军成 第六章 电梯新.pptx</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882245.html" target="_parent" title="企业最高管理者的检查1法人.docx">企业最高管理者的检查1法人.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882246.html" target="_parent" title="精编完整版3000亩无公害蔬菜基地建设项目可研报告.docx">精编完整版3000亩无公害蔬菜基地建设项目可研报告.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882247.html" target="_parent" title="电镀废水处理装置操作规程.docx">电镀废水处理装置操作规程.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882248.html" target="_parent" title="电动吊篮结构及工作原理.docx">电动吊篮结构及工作原理.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882249.html" target="_parent" title="第二十七章MM27报废流程.docx">第二十七章MM27报废流程.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882250.html" target="_parent" title="10《软件应用综合实践》课程标准已审核.docx">10《软件应用综合实践》课程标准已审核.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882251.html" target="_parent" title="花卉矮化栽培六项技术.docx">花卉矮化栽培六项技术.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882252.html" target="_parent" title="届高三语文高考二轮复习综合训练考场作文如何扣题.docx">届高三语文高考二轮复习综合训练考场作文如何扣题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/2882253.html" target="_parent" title="精品互联网+新建二手车交易市场项目投资立项申请报告范文精编.docx">精品互联网+新建二手车交易市场项目投资立项申请报告范文精编.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=HTML">HTML</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%85%a5%e9%97%a8%e6%95%99%e7%a8%8b">入门教程</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00007.html">工程科技</a><span> > </span><a href="https://m.bdocx.com/booklist-0000700013.html">纺织轻工业</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=r4OE6TuN04g%3d&parto=mZcGu%2falpgTV%2fInaHIp%2bdPYfUAtUHwMh1%2fj3R4tM51dqSjBxQrjm8afUj76Z5%2bYw1B7pqI%2bLZ1MGQGwUwSPG5h%2fpbY%2fcFwDivvz90kD1xDP4PlvivB8A16TofQZkZZGquVZ%2foj%2f7YC2Mps7PbBujsDOujzSYyzsD6u6J2fXbOqPbgo6qxlhCBPfoF%2boWghjXZucZi3W89%2f4sWqwdA21gjQRwjPTYT48U" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/5444201.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730840921', // 必填，生成签名的时间戳
nonceStr: 'A9A6653E48976138166DE32772B1BF40', // 必填，生成签名的随机串
signature: '44ffce90d2dc1c62e246248f8b2016746bd5fdbc',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/5444201.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730840921', // 必填，生成签名的时间戳
nonceStr: 'A9A6653E48976138166DE32772B1BF40', // 必填，生成签名的随机串
signature: '44ffce90d2dc1c62e246248f8b2016746bd5fdbc',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>