HTML语言学习教程HTML语言剖析.docx
《HTML语言学习教程HTML语言剖析.docx》由会员分享，可在线阅读，更多相关《HTML语言学习教程HTML语言剖析.docx（53页珍藏版）》请在冰豆网上搜索。
HTML语言学习教程HTML语言剖析
目录
1、HTML语言剖析之Html简介
2、HTML语言剖析之HTML标记一览
3、HTML语言剖析之文件标记
4、HTML语言剖析之排版标记
5、HTML语言剖析之字体标记
6、HTML语言剖析之清单标记
7、HTML语言剖析之表格标记
8、HTML语言剖析之表单标记
9、HTML语言剖析之图形标记
10、HTML语言剖析之链接标记
11、HTML语言剖析之多媒体标记
12、HTML语言剖析之其他标记
13、HTML语言剖析之特殊字符
14、HTML语言剖析之调色原理
1、HTML语言剖析之Html简介
全写：
HyperTextMark-upLanguage
译名：
超文件注标式语言（译名之一）
简释：
一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。
HTML是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个应用程式，HTML不是程式语言，如C++和Java之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了HTML，HTML的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ASCII纯文字格式即可，当然以专业的网页编辑软件为佳。
■阅读须知：
这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按W3C的HTML分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其余可任意选择。
这一篇不会提及任何网页编辑软件，只要掌握了HTML，任何网页编辑工具都可以变成一把利器。
■标记写法：
任何标记皆由"<"及">"所围住，如
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数，某些则不必。
如Hello
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记，如
标记字母大小写皆可。
■围堵标记与空标记：
标记按型态分为围堵标记与空标记
围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如HTMLSource：
CreationofWebpageismyfavourite.
显示成：
CreationofWebpageismyfavourite.
其中便称为围堵标记。
它以起始标记及终结标记标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。
空标记
是指标记单独出现，只有起始标记没有终结标记。
例如HTMLSource：
IloveCreationofWebpage.
It'sawonderfulplace.
显示成：
IloveCreationofWebpage.
It'sawonderfulplace.
其中换行标记
便属空标记。
它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。
2、HTML语言剖析之HTML标记一览
标记类型译名或意义作用备注
文件标记
●文件声明让浏览器知道这是HTML文件
●开头提供文件整体资讯
●标题定义文件标题，将显示于浏览顶端 </p><p><BODY>●本文设计文件格式及内文所在 </p><p>排版标记</p><p><!</p><p>--注解-->○说明标记为文件加上说明，但不被显示 </p><p><P>○段落标记为字、画、表格等之间留一空白行 </p><p><BR>○换行标记令字、画、表格等显示于下一行 </p><p><HR>○水平线插入一条水平线 </p><p><CENTER>●居中令字、画、表格等显示于中间反对</p><p><PRE>●预设格式令文件按照原始码的排列方式显示 </p><p><DIV>●区隔标记设定字、画、表格等的摆放位置 </p><p><NOBR>●不折行令文字不因太长而绕行 </p><p><WBR>●建议折行预设折行部位 </p><p>字体标记</p><p><STRONG>●加重语气产生字体加粗Bold的效果 </p><p><B>●粗体标记产生字体加粗的效果 </p><p><EM>●强调标记字体出现斜体效果 </p><p><I>●斜体标记字体出现斜体效果 </p><p><TT>●打字字体Courier字体，字母宽度相同 </p><p><U>●加上底线加上底线反对</p><p><H1>●一级标题标记变粗变大加宽，程度与级数反比 </p><p><H2>●二级标题标记将字体变粗变大加宽 </p><p><H3>●三级标题标记将字体变粗变大加宽 </p><p><H4>●四级标题标记将字体变粗变大加宽 </p><p><H5>●五级标题标记将字体变粗变大加宽 </p><p><H6>●六级标题标记将字体变粗变大加宽 </p><p><FONT>●字形标记设定字形、大小、颜色反对</p><p><BASEFONT>○基准字形标记设定所有字形、大小、颜色反对</p><p><BIG>●字体加大令字体稍为加大 </p><p><SMALL>●字体缩细令字体稍为缩细 </p><p><STRIKE>●画线删除为字体加一删除线反对</p><p><CODE>●程式码字体稍为加宽如<TT> </p><p><KBD>●键盘字字体稍为加宽，单一空白 </p><p><SAMP>●范例字体稍为加宽如<TT> </p><p><VAR>●变数斜体效果 </p><p><CITE>●传记引述斜体效果 </p><p><BLOCKQUOTE>●引述文字区块缩排字体 </p><p><DFN>●述语定义斜体效果 </p><p><ADDRESS>●地址标记斜体效果 </p><p><SUB>●下标字下标字 </p><p><SUP>●上标字指数（平方、立方等） </p><p>清单标记</p><p><OL>●顺序清单清单项目将以数字、字母顺序排列 </p><p><UL>●无序清单清单项目将以圆点排列 </p><p><LI>○清单项目每一标记标示一项清单项目 </p><p><MENU>●选单清单清单项目将以圆点排列，如<UL>反对</p><p><DIR>●目录清单清单项目将以圆点排列，如<UL>反对</p><p><DL>●定义清单清单分两层出现 </p><p><DT>○定义条目标示该项定义的标题 </p><p><DD>○定义内容标示定义内容 </p><p>表格标记</p><p><TABLE>●表格标记设定该表格的各项参数 </p><p><CAPTION>●表格标题做成一打通列以填入表格标题 </p><p><TR>●表格列设定该表格的列 </p><p><TD>●表格栏设定该表格的栏 </p><p><TH>●表格标头相等于<TD>，但其内之字体会变粗 </p><p>表单标记</p><p><FORM>●表单标记决定单一表单的运作模式 </p><p><TEXTAREA>●文字区块提供文字方盒以输入较大量文字 </p><p><INPUT>○输入标记决定输入形式 </p><p><SELECT>●选择标记建立pop-up卷动清单 </p><p><OPTION>○选项每一标记标示一个选项 </p><p>图形标记</p><p><IMG>○图形标记用以插入图形及设定图形属性 </p><p>连结标记</p><p><A>●连结标记加入连结 </p><p><BASE>○基准标记可将相对URL转绝对及指定连结目标 </p><p>框架标记</p><p><FRAMESET>●框架设定设定框架 </p><p><FRAME>○框窗设定设定框窗 </p><p><IFRAME>○页内框架于网页中间插入框架IE</p><p><NOFRAMES>●不支援框架设定当浏览器不支援框架时的提示 </p><p>影像地图</p><p><MAP>●影像地图名称设定影像地图名称 </p><p><AREA>○连结区域设定各连结区域 </p><p>多媒体</p><p><BGSOUND>○背景声音于背景播放声音或音乐IE</p><p><EMBED>○多媒体加入声音、音乐或影像 </p><p>其他标记</p><p><MARQUEE>●走动文字令文字左右走动IE</p><p><BLINK>●闪烁文字闪烁文字NC</p><p><ISINDEX>○页内寻找器可输入关键字寻找于该一页反对</p><p><META>○开头定义让浏览器知道这是HTML文件 </p><p><LINK>○关系定义定义该文件与其他URL的关系 </p><p>StyleSheet</p><p><STYLE>●样式表控制网页版面 </p><p><span>●自订标记独立使用或与样式表同用 </p><p>注：</p><p>●表示该标记属围堵标记，即需要关闭标记如</标记>。</p><p>○表示该标记属空标记，即不需要关闭标记。</p><p>IE表示该标记只适用于InternetExplorer。</p><p>NC表示该标记只适用于NetscapeCommunicator。</p><p>反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，只是HTML标准中有其它同功能或更好的选择。</p><p>弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。</p><p>新表示该标记是HTML4.0中新增的。</p><p> </p><p>3、HTML语言剖析之文件标记</p><p><HTML>；<HEAD>；<TITLE>；<BODY></p><p>欲明白本篇【HTML剖析】之标记分类请看【标记一览】。</p><p>亦请先明白围堵标记与空标记的分别请看【HTML概念】。</p><p>■HTML基本架构：</p><p>以下HTMLSourceCode便是一份HTML文件的基本架构：</p><p><HTML></p><p><HEAD></p><p><TITLE>网页的标题网页的内容，很多标记都作用于此
特点解说：
整份文件处于标记与之间。
用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。
文件分两部分，由
至称为开头，至称本文。
基本上两者各有适用的标记，如
只可出现于开头部分。</p><p>开头部分用以存载重要资讯，而只有本文部分会被显示。</p><p>所以大部分标记会运用于本文部分。</p><p><TITLE>所标示的是文件的标题。</p><p>会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标题是需要的。</p><p>上述标记中只有<BODY>具参数设定。</p><p>■<BODY>之参数设定：</p><p>例子：</p><p><BODYtext="#000000"link="#0000FF"alink="#FF0000"vlink="#0000FF"background="bg1.gif"bgcolor="#FFFFFF"leftmargin=2topmargin=2bgproperties="fixed"></p><p>text="#000000"</p><p>用以设定文字颜色。</p><p>#000000代表黑色，亦可以采用颜色的名称，即text="black"。</p><p>各种颜色的值及名称可参考【调色原理】一节。</p><p>link="#0000FF"</p><p>设定一般文字连结颜色。</p><p>alink="#FF0000"</p><p>设定刚按下时文字连结颜色。</p><p>vlink="#0000FF"</p><p>设定连结后的颜色。</p><p>（被按过）。</p><p>background="bg1.gif"</p><p>设定背景墙纸。</p><p>GIF或JPEG皆可，可以是绝对途径或相对途径。</p><p>bgcolor="#FFFFFF"</p><p>设定背景颜色。</p><p>当己设定背景墙纸时会失去作用，除非墙纸有透明部分。</p><p>leftmargin=2</p><p>设定整份文件显示画面的左方边沿空间，单位为像素。</p><p>『只适用于IE』</p><p>topmargin=2</p><p>设定整份文件显示画面的上方边沿空间。</p><p>『只适用于IE』</p><p>bgproperties="fixed"</p><p>固定背景墙纸，当卷动文字时墙纸不会跟著卷动。</p><p>『只适用于IE』</p><p>标记及参数之字母大小都可以。</p><p> </p><p>4、HTML语言剖析之排版标记</p><p><!</p><p>--注解-->；<P>；<BR>；<HR>；<CENTER>；<PRE>；<DIV>；<NOBR>；<WBR>； </p><p>■<!</p><p>--注解-->：</p><p>▲Top</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>--本文版权为1998,CreationofWebpage所拥有，未经许，请勿抄摘--></p><p>■<P>：</p><p>▲Top</p><p><P>称为段落标记。</p><p>作用：</p><p>为字、画、表格等之间留一空白行。</p><p>本来<P>是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要</P>作结尾。</p><p><P>的常用参数：</p><p>如：</p><p><palign="center"></p><p>align="center"</p><p>可选值：</p><p>right,left,center。</p><p>内定值：</p><p>align="left"</p><p>例子：</p><p>原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,</p><p>howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.</p><p>ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.</p><p><P>Here'sthenextparagraph. </p><p>显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.</p><p>Here'sthenextparagraph.</p><p>■<BR>：</p><p>▲Top</p><p><BR>称为换行标记。</p><p>作用：</p><p>令字、画、表格等显示于下一行。</p><p>由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之一。</p><p>因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。</p><p>错误示范：</p><p>（邮局可不会接受一行过的地址）原始码566EBostonPostRD</p><p>MamaroneckNY10543-9982</p><p>UnitedStatesofAmerica </p><p>结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica </p><p>正确例子：</p><p>原始码566EBostonPostRD</p><p><BR>MamaroneckNY10543-9982</p><p><BR>UnitedStatesofAmerica </p><p>结果566EBostonPostRD</p><p>MamaroneckNY10543-9982</p><p>UnitedStatesofAmerica </p><p>■<HR>：</p><p>▲Top</p><p><HR>称为水平线。</p><p>作用：</p><p>插入一条水平线。</p><p><HR>之参数修改：</p><p>以：</p><p><HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>为例。</p><p>align="LEFT"</p><p>设定线条置放位置，可选择：</p><p>left；right；center三种设定值。</p><p>size="2"</p><p>设定线条厚度，以像素作单位，内定为2。</p><p>width="70%"</p><p>设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。</p><p>color="#0000FF"『只适用于IE』</p><p>设定线条颜色，内定为黑色。</p><p>#0000FF代表蓝色，亦可以采用颜色的名称，即text="blue"。</p><p>noshade</p><p>设定线条为平面显示，若删去则具阴影或立体，这是内定值。</p><p>例子：</p><p>原始码<HR></p><p><HRalign="LEFT"size="4"></p><p><HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade></p><p><HRalign="LEFT"size="4"width="70"color="#008000"> </p><p>显示结果</p><p>--------------------------------------------------------------------------------</p><p>--------------------------------------------------------------------------------</p><p>--------------------------------------------------------------------------------</p><p>--------------------------------------------------------------------------------</p><p>■<CENTER>：</p><p>▲Top</p><p><CENTER>称为居中标记。</p><p>作用：</p><p>令字、画、表格等显示于中间。</p><p>这标记原先是Netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有align="CENTER"的参数，<CENTER>似乎多馀了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align="CENTER"参数的<TABLE>标记亦要不厌其烦地加上居中标记，因有狻多浏览器不支持<TABLE>标记中的align="CENTER"参数。</p><p>例子：</p><p>原始码<CENTER>Chris'sFirstHomepage</CENTER></p><p><CENTER>What'snew</CENTER></p><p><CENTER>Myprofile</CENTER> </p><p>结果Chris'sFirstHomepage</p><p>What'snew</p><p>Myprofile </p><p>■<PRE>：</p><p>▲Top</p><p><PRE>称为预设格式标记。</p><p>作用：</p><p>令文件按照原始码的排列方式显示。</p><p>这标记允许保留你于原始码中输入的空白及Return。</p><p>细看以下例子你便可体会到此标记的威力。</p><p>除了运用一大堆表格标记之外你只有采用这标记才能有此效果。</p><p>能以<PRE>标记产生对 效果，或产生多于一行的空白才算上乘！</p><p>例子：</p><p>原始码 <pre> CreationofWebpageLogAnalysisI</p><p> ComposerLearning 459407480522547586673</p><p> HTMLAdvanced 200268296358385453506</pre></p><p>显示结果 CreationofWebpageLogAnalysisI </p><p> ComposerLearning 459407480522547586673</p><p> HTMLAdvanced 200268296358385453506</p><p>■<DIV>：</p><p>▲Top</p><p><DIV>称为区隔标记。</p><p>作用：</p><p>设定字、画、表格等的摆放位置。</p><p><DIV>应用于StyleSheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有Class;Style;title;ID等属性，将会于【StyleSheet】一节才作详述，这处只介绍一个属性设定。</p><p>以<DIValign="center">为例：</p><p>align="center"</p><p>可选值：</p><p>center;left;right。</p><p>决定字、画、表格等居中、靠左或靠右。</p><p><DIValign="center">的作用和居中标记<CENTER>一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。</p><p>例子：</p><p>原始码<DIValign="center">Chris'sFirstHomepage</p><p><br>What'snew</p><p><br>Myprofile</DIV> </p><p>结果Chris'sFirstHomepage</p><p>What'snew</p><p>Myprofile</p><p>■<NOBR>：</p><p>▲Top</p><p><NOBR>称为不折行标记。</p><p>作用：</p><p>令某些文字不因太长而绕行，一 显示于同一行或下一行。</p><p>它对住址、数学算式、一行数字、程式码等尤为有用。</p><p>例子：</p><p>（其中Chris'sCreationofWebpage将不被分开而显示于同一行。</p><p>）码Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmiss<NOBR>Chris'sCreationofWebpage</NOBR>whichwillhelpyoualot. </p><p>结果Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmissChris'sCreationofWebpagewhichwillhelpyoualot. </p><p>■<WBR>：</p><p>▲Top</p><p><WBR>称为建议折行标记。</p><p>作用：</p><p>预设折行部位。</p><p>它没有侵犯到<BR>的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。</p><p>例子：</p><p>（若不加<WBR>标记，整个网址会显示于下一行。</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 = "28931545";
var total_page = "53";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/28931545.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-7/15/46c4a8ba-83c6-463c-b174-2e05f35c57b8/46c4a8ba-83c6-463c-b174-2e05f35c57b8";
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语言学习教程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="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/6686271.html" title="HTML语言代码范例.docx">HTML语言代码范例.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/28293136.html" title="HTML语言全代码.docx">HTML语言全代码.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/23003212.html" title="HTML语言代码范例.docx">HTML语言代码范例.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/9301280.html" title="HTML语言源代码实例.docx">HTML语言源代码实例.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/6217255.html" title="HTML语言源代码实例.docx">HTML语言源代码实例.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/19703314.html" title="HTML语言代码范例文档格式.docx">HTML语言代码范例文档格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/19222491.html" title="HTML语言源代码实例Word格式文档下载.docx">HTML语言源代码实例Word格式文档下载.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/22437357.html" title="HTML语言源代码实例Word文档下载推荐.docx">HTML语言源代码实例Word文档下载推荐.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/12390236.html" title="Html代码.docx">Html代码.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/9057213.html" title="html代码.docx">html代码.docx</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/3243614.html" target="_parent" title="精品范文高三家长学校工作总结doc.docx">精品范文高三家长学校工作总结doc.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243615.html" target="_parent" title="精品文档宾馆KTV隔墙轻质砖隔墙专业施工安装26页.docx">精品文档宾馆KTV隔墙轻质砖隔墙专业施工安装26页.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243616.html" target="_parent" title="精选人教版学年高二地理文上学期期中试题2地理知识点总结.docx">精选人教版学年高二地理文上学期期中试题2地理知识点总结.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243617.html" target="_parent" title="四年级品德与社会 塑料与我们的生活教案.docx">四年级品德与社会 塑料与我们的生活教案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243618.html" target="_parent" title="四篇原著思考题.docx">四篇原著思考题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243619.html" target="_parent" title="上半年江苏省事业单位真题及答案解析.docx">上半年江苏省事业单位真题及答案解析.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243620.html" target="_parent" title="暑假打工社会实践心得.docx">暑假打工社会实践心得.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243621.html" target="_parent" title="太原市可接收到的广播电台频率及节目表.docx">太原市可接收到的广播电台频率及节目表.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3243622.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=%e8%af%ad%e8%a8%80">语言</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%ad%a6%e4%b9%a0">学习</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e6%95%99%e7%a8%8b">教程</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%89%96%e6%9e%90">剖析</a></li> </ul>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; 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 class="tag tag0" href="https://m.bdocx.com/mark/htmlyuyandaima.html" >HTML语言代码</a></li>
</ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00004.html">自然科学</a><span> > </span><a href="https://m.bdocx.com/booklist-0000400001.html">物理</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=ayjSEwUh9gR7rchbUlQhuQ%3d%3d&parto=9s3GaBBEkcjiOHhj4Ab3pMo9Ju1nXJjHAAjKNPCVmHkSH3tOniHA43aJKWtyJh0sMR%2bYhAWazv9vCD%2b%2bXht1WHYL1kihYHYJIKzTH2fLwdyctBxgedatEXpuU%2fan8oxlr3smgl4ysq1ZVbcsCuKtI0EYTtweAjOa3vUf9HdMpBnDOzi9hm4XypR3sOiuyi8PGPFpvZASDv0NxudatMUZ5Wh9WOu%2bjXHH" 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/28931545.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1721522797', // 必填，生成签名的时间戳
nonceStr: '1FF1DE774005F8DA13F42943881C655F', // 必填，生成签名的随机串
signature: 'c0f24858baf4adc4c72f35683d9516ce2d48fc44',// 必填，签名，见附录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/28931545.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1721522797', // 必填，生成签名的时间戳
nonceStr: '1FF1DE774005F8DA13F42943881C655F', // 必填，生成签名的随机串
signature: 'c0f24858baf4adc4c72f35683d9516ce2d48fc44',// 必填，签名，见附录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>