网页制作HTML基础教程.docx

上传人:b****5 文档编号:7821545 上传时间:2023-01-26 格式:DOCX 页数:53 大小:65.78KB
下载 相关 举报
网页制作HTML基础教程.docx_第1页
第1页 / 共53页
网页制作HTML基础教程.docx_第2页
第2页 / 共53页
网页制作HTML基础教程.docx_第3页
第3页 / 共53页
网页制作HTML基础教程.docx_第4页
第4页 / 共53页
网页制作HTML基础教程.docx_第5页
第5页 / 共53页
点击查看更多>>
下载资源
资源描述

网页制作HTML基础教程.docx

《网页制作HTML基础教程.docx》由会员分享,可在线阅读,更多相关《网页制作HTML基础教程.docx(53页珍藏版)》请在冰豆网上搜索。

网页制作HTML基础教程.docx

网页制作HTML基础教程

网页制作基础教程

表单标签

表单以一个标签开始。

用户注册网站会员,投票等等都需要表单来实现。

当然了,仅仅依靠XHTML是无法处理这些表单的,如果你想处理这些表但你需要使用一些类似PHP和ASP的网页后台技术。

(顺便说一下,小菜鸟自己的后台目前还很菜。

表单内的

下面我们来介绍两个常见的表单组成元素:

1.文本框

姓名:


窗体顶端

窗体底端

姓名:

2.密码框

姓名:


窗体顶端

窗体底端

密码:

可以看到,这两个表单元素都用到了标签,但是密码框里填写的内容却是不可见的。

决定了他们类型不同的是标签的属性“type”的属性值。

例如text就是文本框,而password则是密码。

你应该注意到了,标签也是一个空标签。

他没有终止标签。

我们一定要记得在后面加上一个"/"以符合XHTML的要求。

常用的表单元素还有很多,比如单选和复选矿,不过既然我们现在无法处理表单,也就无法理解表单的含义。

所以这里就不介绍了,大家以后如果继续学习后台技术的话,自然就会理解form在建站中所起到的作用了。

框架结构标签

框架允许你在一个浏览器窗口内打开两个乃至多个页面。

你可以这样理解,其实就是一个大

,只不过整个页面是
的主体,而每一个单元格的内容都是一个独立的网页。

给框架结构分栏(”cols“和”rows“属性)

既然我们说框架结构可以被理解为一网页为单元格的表格,那么就一定要分栏了。

其中cols属性将页面分为几列,而rows属性则将页面分为几行。

下面来看一个例子。

其中"rows="25%,75%"表示该页面共分为两行,因为它有两个属性值,而他们的大小则分别为页面高度的25%和75%。

点击这里查看以上代码的显示效果。

框架标签

上面的实例中已经用到了标签,它的src属性就是这个框架里将要显示的内容。

在本实例中的两个框架是可以通过拖拽开改变大小比例的,如果你希望它们大小固定可以使用noresize="noresize"属性。

注意:

标签是空标签,需要加上一个"/"以符合XHTML的要求。

关于标签

该标签只有当浏览器不支持框架结构时才会起到作用,由于现在几乎所有网民的浏览器都支持框架结构,所以我们在这里就不介绍这个标签了。

如果你想了解相关内容,可以查阅网络上的HTML手册。

框架结构和DTD

框架页面的DTD与一般网页不同。

声明方法如下:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

表格是XHTML中处境尴尬的一个标签,本节只做了解即可.

关于表格

在CSS流行之前,table被广泛应用于定位。

在XHTML中,table不被推荐用来定位,W3C希望CSS可以取代

在定位方面的地位。

不过事实上由于利用CSS布局常常需要大量的手写代码工作(常用的网页设计软件如Dreamweaver并不能完美支持div的显示),

仍被许多网站用语首页布局,例如Google的Moreproducts页面就利用了table来定位。

不过我个人推荐您开始使用CSS来定位网页,因为这是Web发展的方向。

当然了,在初期用CSS取代table可能使您遇上很多的麻烦。

表格标签

在XHTML中,创建表格的标签是

,书写代码时,我们要先用标签将表格分成一行一行,再用,对应着下面的4个行。

而没个

(行)又有两个
标签把每行分成一格一格。

完全手写代码创建table是十分困难和低效的,而在网页制作软件中制作表格就如同Word一样简单,只需要选择行列之类的简单属性即可。

但是我们可能会遇到自动做出的表格不符合要求,而需要在代码模式调整的可能,因此我们还是要大概了解XHTML表格标签的具体写法。

表格的边框(border)属性

标签可以有border属性。

如果不设置border属性的值,在默认情况下,浏览器将不显示表格的边框。

表格练习

我们来建立一个四行两列的标签,代码如下:

一个格子一个格子
一个格子一个格子
一个格子一个格子
一个格子一个格子

显示结果如下:

注意上面的代码,一共有4对

单元格。

于是就成了一个4行2列的表格。

一个格子

一个格子

一个格子

一个格子

一个格子

一个格子

一个格子

一个格子

这样的表格用来列出数据之类的信息足够了,但是用来定位的表格通常要复杂一些。

再次强调我们不推荐用table来定位,所以这里仅仅简单地介绍了

为什么会出错?

在上一节中我们我们在检验我们的网页时得到了一段出错信息,但是我们在整个网页的制作过程中都是按照XHTML标准写的啊。

其实问题出在了网页的“头部”,下面我们就来解决这个问题。

部分

在之前的教程中除了标签之外我们修改的都是<body>之间的内容,也就是显示在页面里的内容。</p><p>那么XHTML中的<head>部分是做什么的呢?</p><p>其实在<head>部分我么可以加入许多浏览器可以“看得见”的信息。</p><p>下面我们就介绍一些head部分常用的标签。</p><p>注意:</p><p>本节的标签与属性大多数难于记忆,事实上在我们在使用网页制作软件创建网页的时候它们会自动生成。</p><p>本节的目的是能够了解这些标签的含义,以在必要的时候可以做一些手工的修改。</p><p>现在就打开我们的“index.html”,在<head></head>中间插入如下代码:</p><p>1.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/></p><p>这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码,没有该段<meta>信息正是上一次检验时出现问题的原因之一。</p><p>2.<metaname="keywords"content="小学生,欺负同学,寒暑假作业,家长"/></p><p>这段代码是为搜索引擎写的,content的内容就是index.html的关键词。</p><p>请注意,<meta>标签也是一个空标签,别忘记加上/。</p><p><meta>标签的作用还远不只这些,不过在缺少实际应用的情况下,很难了解<meta>标签的实际用处。</p><p>如果想了解更多<meta>标签的知识,可以到XX搜索相关知识。</p><p>关于<head>标签的说明</p><p>正如之前所说的,<head>部分的内容并不是为浏览者写的,而是为浏览器和搜索引擎写的。</p><p>因此<head>部分不应该含有任何在页面中可视的的内容。</p><p>DTD</p><p>如果现在再次检验我们的网页,仍然会得到出错信息,提示找不到DTD文件,那么什么是DTD文件呢?</p><p>简单的说它就是在任何人(多数情况下是类似浏览器的软件)想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。</p><p>以检验过程为例子,如果我们使用HTML4.01的DTD呢,效验器就会认为我们是使用的HTML4.01的规则编写的网页,然后按照相应的规则来一行一行的检验我们的代码,最终返回检验结果。</p><p>我们制作的网页是使用XHTML的规则,当然要使用XHTML的DTD。</p><p>不过正如我们前面提到的,XHTML的DTD也分为相对松散的过渡期DTD和要求相当严格的严格DTD。</p><p>本教程中我们将要在网页中声明严格的DTD,如果您想了解更多关于DTD的内容需要学习XML,本教程中不做过多讨论。</p><p>下面我们就为我们的网页声明DTD。</p><p>打开之前保存的"index.html",在第一行(<html>标签之前)输入如下代码:</p><p><!</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p><p>并且在<html>标签里添加如下属性:</p><p>xmlns="http:</p><p>//www.w3.org/1999/xhtml"。</p><p>这个叫做命名空间属性,属于XML范畴,我们这里仍然不做过多的讨论。</p><p>这段代码的作用就是声明我们的网页是使用的xhtml1-strict.dtd。</p><p>现在再将这个页面提交给W3的效验器,这次将返回一个“ThisPageIsValidXHTML1.0Strict!</p><p>”的信息。</p><p>这表示我们的代码中没有任何错误,完全符合XHTML1的strict(严格)标准。</p><p>当然了,实际工作中情况可能不总是如此,在实际的网页设计过程中,总会有各种原因造成我们写出不规范的代码。</p><p>这时效验器就会给出错误报告,我们只需要按照提示修改代码即可。</p><p>合理的添加图片可以使一个网页更加的美观。</p><p>图片标签<img></p><p><img>标签用于在网页里插入图片。</p><p><img>标签有一个重要的属性"src",它的属性值就是图片的地址。</p><p>下面我们就在我们的index.html里插入一个图片。</p><p>打开”index.html“文件,在</body>前加上如下代码:</p><p><p><imgsrc="alt="技术支持"/></p></p><p>保存后浏览网,请确认您的网页与该页面相同。</p><p>我们注意到<img>是一个空标签,需要在结尾加上一个"/"以符合XHTML的要求。</p><p>这里的例子除src外还有一个属性alt,我们把它叫做做替换属性,当图片由于某种原因而无法显示的时候,alt的属性值就会代替图片出现;而当图片正常显示时,只要把鼠标停在图片上就会看到alt属性的属性值。</p><p>用图片作为链接</p><p>我们在之前的教程中曾经学习过创建超级链接,下面我们打开“index.html”并且将刚插入的代码改为下面这段:</p><p><p><ahref="src="</p><p>保存后浏览网页,请再次确认您的网页与这个网页相同。</p><p>看看图片是不是变成了超级链接,点击一下图片就会进入菜鸟吧的主页了。</p><p>关于XHTML的效验</p><p>从本节开始我们就不再修改"index.html"这个网页的外观了,现在将我们制作的网页送交权威机构检验一下。</p><p>首先进入:</p><p>http:</p><p>//validator.w3.org/,该页面就是一个XHTML效验工具,它用来检验我们制作的网页是否符合XHTML的标准。</p><p>您可以选择用网址效验,也可以上传文件效验。</p><p>您可以选择文件上传效验,方法如下:</p><p>在”ValidatebyFileUpload“有“LocalFile”一栏,点击浏览,找到并选中之前保存的"index.html",然后点击“check”按钮。</p><p>您的结果应该与我们通过网址效验的结果一样。</p><p>返回如下错误信息:</p><p>Sorry,Iamunabletovalidatethisdocumentbecauseonline3,6-9,12-14,16-22itcontainedoneormorebytesthatIcannotinterpretasutf-8(inotherwords,thebytesfoundarenotvalidvaluesinthespecifiedCharacterEncoding).Pleasecheckboththecontentofthefileandthecharacterencodingindication.</p><p>列表用于罗列出来一系列相似或者相关的项目.</p><p>无序列表(项目列表)</p><p>无序列表的标签是<ul></ul>,而每一个列表项目则用<li>标签。</p><p>下面我们就用无序列表来改写我们的"index.html",打开之前保存的文件后,将"针对学生提供的服务"一段的代码修改为如下的无序列表代码:</p><p><h3>针对学生的服务</h3></p><p><ul></p><p><li>代写寒暑假作业(数学<b>不</b>保证没有错题,语文不保证没有错字,英语作业你找别人吧)</li></p><p><li>帮忙欺负<b>四年级</b>以下同学,<b>特体须加收费用</b>。</p><p></li></p><p><li>家长会帮忙<i>冒充家长</i>。</p><p></li></p><p></ul></p><p>保存后浏览网页,请确认您的网页和这个页面相同。</p><p>。</p><p>有序列表</p><p>有序列表的标签是<ol></ol>,列表项目仍然是<li>。</p><p>我们再用有序列表来改写"index.html"的”针对家长一段“,将刚刚修改的那段代码中的<ul></ul>改为<ol></ol>:</p><p><ol></p><p><li>代写寒暑假作业(数学<em>不</em>保证没有错题,语文<em>不</em>保证没有错字,<b>英语作业你找别人吧!</p><p></b>)。</p><p></li></p><p><li>帮忙欺负<strong>四年级以下</strong>同学,<strong>特体</strong>须加收费用。</p><p></li></p><p><li>家长会帮忙<i>冒充家长</i>。</p><p></li></p><p></ol></p><p>超级链接<a>标签</p><p>毫不夸张的说,是超级链接把整个互联网连接了起来。</p><p>超级链接几乎可以指向互联网上的任何资源,例如另外一个网页、一张图片、一首MP3歌曲等等。</p><p>而利用XHTML建立超级链接的语法却非常简单,只需要一对<a></a>标签即可:</p><p><ahref="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a></p><p>例如:</p><p><ahref="</p><p>将会在浏览器中显示为一个超级链接,点击它就将进入网页教学网(</p><p>网页教学网</p><p>其中<a>标签中的href属性就是这个超级链接所要指向的地址,她可以是一般的网址也可以是邮件的地址,在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。</p><p><a>和</a>之间的内容(元素)将被作为超级链接显示在网页上。</p><p>注意href属性值为一般网址(绝对路径)时,其"http:</p><p>//"是不可以省略的,否则浏览器将把它作为相对路径来识别。</p><p>绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内,如果你不了解可以到XX搜索相关的资料。</p><p>页内跳转超级链接(锚记)</p><p>您在浏览其他网站的时候可能注意到了,有一些超级链接可以让您回到页面的顶端或者是当前网页内任何一个位置。</p><p>就像下面这个链接:</p><p>回到标题</p><p>它的实现方法如下,首先在标题处加上如下代码。</p><p>:</p><p><h1>XHTML入门学习教程——XHTML超级链接<aid="biaoti"></a></h1></p><p>而超级链接本身的代码为:</p><p><ahref="#biaoti">回到标题</a></p><p>页面内的跳转在您的页面内有大量的内容时,可以让你的用户很快的找到所需要的信息。</p><p>通常情况下都是在一些说明性的网页内做目录使用。</p><p>链接练习</p><p>下面练习在之前的"index.html"中添加超级链接。</p><p>打开”index.html“,对代码做如下修改:</p><p><html></p><p>中间代码省略……</p><p><p><ahref="mailto:</p><p>xxx@">联系我</a></p><!</p><p>--注意要把邮箱地址改为你自己的--></p><p><p>Copyright©2005-2006XXX版权没有</p></p><p></body></p><p></html></p><p>保存之后浏览一下自己的网页,请确认您的网页与该页面相同。</p><p>点击一下新创建的链接,如果你安装了Outlook之类的邮件管理软件,就会打开一个给自己发送邮件的界面了。</p><p>本节介绍文字格式和特殊字符在XHTML中的实现方法。</p><p>文字格式标签</p><p>在之前的教程中我们曾经用过一次<b>标签,他使得包含在它之中的内容变成粗体显示。</p><p>例如“<b>菜鸟吧</b>”将显示为菜鸟吧。</p><p>我们把这种定义文字显示方式的标签叫做文字格式标签(文字样式标签……)。</p><p>与粗体标签<b>类似的还有斜体标签<i>和强调标签<em>等。</p><p>我们推荐您使用CSS定义网页的样式,而不是类似<b>的XHTML标签,这里介绍这些标签的目的是让您在阅读别人网页的源代码时不至于糊涂。</p><p>特殊字符(字符实体)</p><p>在XHTML中“<”和“>”是比较特殊的字符,因为它们被用于识别标签,而且在标签中的"<"和“>”并不会出现在页面上。</p><p>那么如果我们想让浏览器显示这些特殊字符时该怎么做呢?</p><p>这时我们就可以使用字符实体,例如小于号“<”在XHTML代码中写做“<”。</p><p>当然,在网页设计软件中,这项工作不需要我们手写代码来完成。</p><p>因此我们只要了解这些特殊字符的显示原理即可,而不需要记住每一个特殊字符的书写代码。</p><p>练习实例</p><p>用记事本打开之前创建的"index.html"文件。</p><p>对源文件做如下修改(红字提示),保存后看看之前之后有什么不同,请确认您的网页与这个页面相同。</p><p>代写寒暑假作业(数学<b>不</b>保证没有错题,语文不保证没有错字,英语作业你找别人吧)</p><p><br/>帮忙欺负<b>四年级</b>以下同学,<b>特体须加收费用</b>。</p><p><br/>家长会帮忙<i>冒充家长</i>。</p><!</p><p>--上面的内容是一个段落--></p><p>下面再来练习一下使用字符实体。</p><p>打开之前保存的“index.html”,在</body>标签前输入如下代码:</p><p><p>Copyright©2005-版权没有</p></p><p>保存修改并重新浏览网页就可以看到如下的内容了:</p><p>“Copyright©2005-2006XXX版权没有”。</p><p>我们注意到源代码中的“©”在浏览器中显示为“@”。</p><p>请再次确认您的网页与这个页面相同,完工。</p><p>关于标签的顺序</p><p>学完了文字格式标签你也许会想,如果我希望一个字同时以粗体和斜体显示该怎么做呢?</p><p>是不是简单的为它加上双层标签<b>和<i>呢?</p><p>没错。</p><p>请看下面的例子:</p><p><b><i>我被两个标签包围啦!</p><p></i></b></p><p>将在浏览器中显示为我被两个标签包围啦!</p><p>这里你唯一需要注意的是标签的顺序。</p><p>如果你将上面的标签顺序写成<b><i>我被两个标签包围啦!</p><p></b></i>,一般的浏览器将不产生任何错误。</p><p>但是这是不符合XHTML标准的写法。</p><p>请你一定要按顺序关闭标签。</p><p>就像一篇文章一样,我们的网页也要段落分明,也需要重要程度不同的标题。</p><p>本节就将介绍XHTML中实现标题、段落等功能的常用签..</p><p>标题标签<h1>到<h6></p><p>定义标题,我们可以使用从<h1>到<h6>这几个标签,它们对应的终止标签分别为</h1>到</h6>,其中<h1>到<h6>字号顺序减小,重要性也逐渐降低。</p><p>浏览器将在标题的上面和下面自动各空出一行。</p><p>段落标签<p>定义段落使用<p>和</p>,在<p>和</p>之间的内容会被识别为一个段落,它就类似我们通常所说的一个“自然段”。</p><p>与标题类似,浏览器也会在段落的开始之前和结束之后各加一行空白。</p><p>换行标签<br/>(<br>)</p><p>当我们在想另起一行书写文字却又不希望另起一个自然段的时候,我们就可以应用<br/>标签了。</p><p><br>标签也是一个空标签,需要加上一个"/"以符合XHTML的要求。</p><p>水平分割线标签<hr/>(<hr>)</p><p>实现水平分割线的标签是<hr/>。</p><p>和<br>标签一样,<hr>也是一个空标签,为了遵守XHTML的规则,需要加上一个"/"。</p><p>(下面就是一条分割线)</p><p>注释<!</p><p>-- --></p><p>合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰,而注释则可以使你在阅读自己的网页源代码时感觉层次清晰,不至于摸不着头脑。</p><p>在<!</p><p>--和-->之间的东西就是注释的内容,它们将不会在网页上显示。</p><p>看看我们如何在下面的练习实例中插入注释。</p><p>练习实例</p><p>现在打开我们在上一节保存的网页,练习一下本节学习的几个重要标签。</p><p>将<body></body>中的“这是我的第一个<b>网页</b>。</p><p>”去掉,输入以下内容:</p><p><h1>服务公告</h1><!</p><p>--练习标题的使用,看看字号是不是变大了?</p><p>--></p><p><hr/><!</p><p>--水平分割线,别忘了那个"/"--></p><p><h2>本人现面对全国的小学生及家长同志提供如下服务:</p><p></h2><!</p><p>--2号标题,看看字号是不是比1号标题小--></p><p><h3>针对学生的服务</h3></p><p><p>代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧)</p><p><br/>帮忙欺负四年级以下同学,特体须加收费用。</p><p><br/>家长会帮忙冒充家长。</p><!</p><p>--上面的内容是一个段落--></p><p><h3>VIP服务</h3></p><p><p>凡购买所有三项服务者即自动升级为VIP。</p><p>我们将免费为您制作个人主页,完全符合W3C的XHTML标准和ISO2009~。</p></p><p><!</p><p>--这里网页虽然层次还算比较分明,可是你是不是觉得界面实在是很难看和简陋呢?</p><p>比如说行与行之间没有空隙,一号标题</p><p>太大了。</p><p>关于定义网页外观的方法将在稍后的CSS教程中介绍。</p><p>忘了说主要内容了,注释不会出现在网页上,所以</p><p>我们可以在这里打许多废话。</p><p>不过在以后网页设计的过程中尽量写一些有提示作用的注释。</p><p>--></p><p>保存修改后浏览网页,确认一下你的网页和这个页面相同,完工。</p><p>XHTML标签简介</p><p>也许你在上一节就注意到了,XHTML文件与普通的纯文本文件的最大不同在于一些用“<>”包含的东西,例如<body>。</p><p>我们把他们叫做标签。</p><p>通常情况下XHTML标签都是成对出现的,例如<html></html>。</p><p>可以看到它们只相差一个“/”,我们把类似<html>的没有“/”的标签叫做起始标签,而它对应的有“/”的</html>则叫终止标签,终止标签与起始标签只相差一个"/"符号。</p><p>当然了,XHTML也有一些标签并不成对出现,它们没有终止标签,我们把这样的标签叫做“空标签”。</p><p>空标签的内容在稍后的教程中将会提到。</p><p>关于大小写</p><p>以前各个版本HTML标签并不区分大小写,例如标签<HTML>和标签<html>是等效的。</p><p>而在XHTML中,所有标签均使用小写。</p><p>为了使自己的网站能够符合XHTML标准,您应该养成良好的习惯,在制作网页的过程中所有标签一律使用小写。</p><p>XHTML标签的作用(元素)</p><p>打开上一节教程中保存的html文件。</p><p>将第六行的“这是我的第一个网页。</p><p>”改为“这是我的第一个<b>网页</b>。</p><p>”,然后保存修改后再次浏览网页。</p><p>你会发现网页两个字变成了粗体显示,效果如下:</p><p>  这是我的第一个网页。</p><p>区别很明显,网页两个字由于被“包”在了标签<b></b>中而变成了粗体。</p><p><b>标签的意思就是粗体显示,而它只会影响到被它包含的内容。</p><p>这就是XHTML标签的作用方式。</p><p>我们把被标签“包住”的内容叫做元素。</p><p>本例中“网页”两个字就</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 = "7821545"; var total_page = "53"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bdocx.com/down/7821545.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <script> var pre = "https://file1.bdocx.com/fileroot1/2023-1/26/c304885a-cd69-44c0-a679-c4fc0eaacb87/c304885a-cd69-44c0-a679-c4fc0eaacb87"; var freepage = parseInt('20'); var total_c = parseInt('53'); 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;17;18;19;"; 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="pdf"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873341.html" title="【漫画】图解5G信令流程:06 去注册流程.pdf">【漫画】图解5G信令流程:06 去注册流程.pdf</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872951.html" title="机械设计制造及自动化专业生产实习报告(通用5篇).docx">机械设计制造及自动化专业生产实习报告(通用5篇).docx</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872921.html" title="海洋遥感卫星与传感器海洋遥感介绍精品-PPT.pptx">海洋遥感卫星与传感器海洋遥感介绍精品-PPT.pptx</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872847.html" title="计算机网络基础教案.doc">计算机网络基础教案.doc</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872538.html" title="骨科体格检查.pptx">骨科体格检查.pptx</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872503.html" title="酥皮面包烘焙培训课件.pptx">酥皮面包烘焙培训课件.pptx</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872357.html" title="中医学习心得交流.ppt">中医学习心得交流.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872153.html" title="电力传输线路.ppt">电力传输线路.ppt</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872135.html" title="中国古乐器英文介绍Ancient-Chines.pptx">中国古乐器英文介绍Ancient-Chines.pptx</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30871972.html" title="幼儿园班级常规管理.ppt">幼儿园班级常规管理.ppt</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/3283623.html" target="_parent" title="大学生创业基础题目及标准答案.docx">大学生创业基础题目及标准答案.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283624.html" target="_parent" title="加工中心加工工艺.docx">加工中心加工工艺.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283625.html" target="_parent" title="基于LMTB的基站典型网元布配实训报告.docx">基于LMTB的基站典型网元布配实训报告.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283626.html" target="_parent" title="房地产经纪专业基础分类模拟4.docx">房地产经纪专业基础分类模拟4.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283627.html" target="_parent" title="服装纺织行业组织结构及岗位职责.docx">服装纺织行业组织结构及岗位职责.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283628.html" target="_parent" title="大学计算机基础课程网站需求分析.docx">大学计算机基础课程网站需求分析.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283629.html" target="_parent" title="初二作文之初二读书笔记怎么写.docx">初二作文之初二读书笔记怎么写.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283630.html" target="_parent" title="八年级英语下册第二单元导学案.docx">八年级英语下册第二单元导学案.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/3283631.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=%e7%bd%91%e9%a1%b5">网页</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%88%b6%e4%bd%9c">制作</a></li> <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%9f%ba%e7%a1%80%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-0000700001.html">能源化工</a> </div> <br /> <div class="cssnone"> <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=S1esQigsI4E%3d&parto=vcS2118w3PDd7lqf%2bwFsfjWIoaMkQO43xqUu3CDJm5y9DPNX686%2foHzyttBOloIYN7fE0cczSGeXcLQTrJsGTaeTyBnz9yO112kc0XHFDgaDYiLqasTJdYN0Q5ctwUoXfbIHI0ZGtsCrycFWHzQ0qRH9zWWu9JRno1rlhkODj6N4uCIRyS5LAH8hG6Sce7OsOLA3P4ohZ918fLi7CyBbXS4ZewLZjlyt" 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/7821545.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1730968713', // 必填,生成签名的时间戳 nonceStr: 'C042F4DB68F23406C6CECF84A7EBB0FE', // 必填,生成签名的随机串 signature: '13d6eaf5b7dd878f5b5b666c38b054cf35cf9433',// 必填,签名,见附录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/7821545.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1730968713', // 必填,生成签名的时间戳 nonceStr: 'C042F4DB68F23406C6CECF84A7EBB0FE', // 必填,生成签名的随机串 signature: '13d6eaf5b7dd878f5b5b666c38b054cf35cf9433',// 必填,签名,见附录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>