1、
网页编程之HTML语言学习基础大全
目 录
1、HTML语言剖析之Html简介 1
2、HTML语言剖析之HTML标记一览 2
3、HTML语言剖析之文件标记 5
4、HTML语言剖析之排版标记 7
5、HTML语言剖析之字体标记 11
6、HTML语言剖析之清单标记 14
7、HTML语言剖析之表格标记 17
8、HTML语言剖析之表单标记 23
1、HTML语言剖析之表单标记 -1 23
2、HTML语言剖析之表单标记-2 26
9、HTML语言剖析之图形标记 30
10、HTML语言剖析之链接标记 32
11、HTML语言剖析之多媒体标记 34
1
2、2、HTML语言剖析之其他标记 35
13、HTML语言剖析之特殊字符 37
14、HTML语言剖析之调色原理 39
1、HTML语言剖析之Html简介
全写： HyperText Mark-up Language
译名： 超文件注标式语言（译名之一）
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。
HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂
3、了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。
■ 阅读须知：
这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其 余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 HTML ，任何网页 编辑工具都可以变成一把利器。
■ 标记写法：
任何标记皆由"<"及">"所围住，如
标记名与小于号之间不能留有空白字符
4、
某些标记 要加上参数，某些则不必。如 Hello
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记，如
标记字母大小写皆可。
■ 围堵标记与空标记：
标记按型态分为围堵标记与空标记
围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如 HTML Source ： Creation of Webpage is my favourite.
显示成： Creation of Webpage is my favourite.
5、
其中 便称为围堵标记。
它以起始标记及终结标记标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage.
It's a wonderful place.
显示成：
I love Creation of Webpage.
It's a wonderful place.
其中换行标记
便属空标记。
它的作用便是将标记后所有东西
6、显示于下一行，可见终结标记于它是没意义的， 但有些人会为空标记加上终结标记，这是为方便记认而己，对 HTML 没有影响。
2、HTML语言剖析之HTML标记一览
标记 类型 译名或意义 作 用 备注
文件标记
● 文件声明 让浏览器知道这是 HTML 文件
● 开头 提供文件整体资讯
● 标题 定义文件标题，将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明，但不被显示
<P> ○ 段落标记 为字、画、表格等之间留一</p><p style='padding:5px 0px;'>7、空白行
<BR> ○ 换行标记 令字、画、表格等显示于下一行
<HR> ○ 水平线 插入一条水平线
<CENTER> ● 居中 令字、画、表格等显示于中间 反对
<PRE> ● 预设格式 令文件按照原始码的排列方式显示
<DIV> ● 区隔标记 设定字、画、表格等的摆放位置
<NOBR> ● 不折行 令文字不因太长而绕行
<WBR> ● 建议折行 预设折行部位
字体标记
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果</p><p style='padding:5px 0px;'>8、
<I> ● 斜体标记 字体出现斜体效果
<TT> ● 打字字体 Courier字体，字母宽度相同
<U> ● 加上底线 加上底线 反对
<H1> ● 一级标题标记 变粗变大加宽，程度与级数反比
<H2> ● 二级标题标记 将字体变粗变大加宽
<H3> ● 三级标题标记 将字体变粗变大加宽
<H4> ● 四级标题标记 将字体变粗变大加宽
<H5> ● 五级标题标记 将字体变粗变大加宽
<H6> ● 六级标题标记 将字体变粗变大加宽
<FONT> ● 字形标记 设定字形、大小、颜色 反对
<BASEFONT> ○ 基</p><p style='padding:5px 0px;'>9、准字形标记 设定所有字形、大小、颜色 反对
<BIG> ● 字体加大 令字体稍为加大
<SMALL> ● 字体缩细 令字体稍为缩细
<STRIKE> ● 画线删除 为字体加一删除线 反对
<CODE> ● 程式码 字体稍为加宽如<TT>
<KBD> ● 键盘字 字体稍为加宽，单一空白
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变数 斜体效果
<CITE> ● 传记引述 斜体效果
<BLOCKQUOTE> ● 引述文字区块 缩排字体
<DFN> ● 述语定义 斜体效果
<ADDRESS> ● 地</p><p style='padding:5px 0px;'>10、址标记 斜体效果
<SUB> ● 下标字 下标字
<SUP> ● 上标字 指数（平方、立方等）
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
<UL> ● 无序清单 清单项目将以圆点排列
<LI> ○ 清单项目 每一标记标示一项清单项目
<MENU> ● 选单清单 清单项目将以圆点排列，如<UL> 反对
<DIR> ● 目录清单 清单项目将以圆点排列，如<UL> 反对
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 标示该项定义的标题
<DD> ○ 定义内容 标示定义内容
表</p><p style='padding:5px 0px;'>11、格标记
<TABLE> ● 表格标记 设定该表格的各项参数
<CAPTION> ● 表格标题 做成一打通列以填入表格标题
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
<TH> ● 表格标头 相等于<TD>，但其内之字体会变粗
表单标记
<FORM> ● 表单标记 决定单一表单的运作模式
<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字
<INPUT> ○ 输入标记 决定输入形式
<SELECT> ● 选择标记 建立 pop-up 卷动清单
<OPTION> ○ 选项 </p><p style='padding:5px 0px;'>12、每一标记标示一个选项
图形标记
<IMG> ○ 图形标记 用以插入图形及设定图形属性
连结标记
<A> ● 连结标记 加入连结
<BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET> ● 框架设定 设定框架
<FRAME> ○ 框窗设定 设定框窗
<IFRAME> ○ 页内框架 于网页中间插入框架 IE
<NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示
影像地图
<MAP> ● 影像地图名称 设定影像地图名称
<AREA> ○ 连结区域 设定各连结</p><p style='padding:5px 0px;'>13、区域
多媒体
<BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE
<EMBED> ○ 多媒体 加入声音、音乐或影像
其他标记
<MARQUEE> ● 走动文字 令文字左右走动 IE
<BLINK> ● 闪烁文字 闪烁文字 NC
<ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对
<META> ○ 开头定义 让浏览器知道这是 HTML 文件
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
StyleSheet
<STYLE> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或</p><p style='padding:5px 0px;'>14、与样式表同用
注：
● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
○ 表示该标记属空标记，即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
新 表示该标记是 HTML 4.0 中</p><p style='padding:5px 0px;'>15、新增的。
3、HTML语言剖析之文件标记
<HTML> ； <HEAD> ； <TITLE> ； <BODY>
欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【HTML概念】。
■ HTML 基本架构：
以下 HTML Source Code 便是一份 HTML 文件的基本架构 ：
<HTML>
<HEAD>
<TITLE> 网页的标题
网页的内容，很多标记都作用于此
16、DY>
特点解说：
整份文件处于标记与之间。
用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
文件分两部分，由
至称为开头，至称本文。 基本上两者各有适用的标记，如
只可出现于开头部分。
开头部分用以存载重要资讯，而只有本文部分会被显示。 所以大部分标记会运用于本文部分。
<TITLE>所标示的是文件的标题。
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的</p><p style='padding:5px 0px;'>17、
上述标记中只有<BODY>具参数设定。
■ <BODY> 之参数设定：
例子：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
text="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。
</p><p style='padding:5px 0px;'>18、
link="#0000FF"
设定一般文字连结颜色。
alink="#FF0000"
设定刚按下时文字连结颜色。
vlink="#0000FF"
设定连结后的颜色。（被按过）。
background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。
bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。
leftmargin=2
设定整份文件显示画面的左方边沿空间，单位为像素。 『只适用于IE』
topmargin=2
设定整份</p><p style='padding:5px 0px;'>19、文件显示画面的上方边沿空间。 『只适用于IE』
bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。 『只适用于IE』
标记及参数之字母大小都可以。
4、HTML语言剖析之排版标记
<!--注解--> ； <P> ； <BR> ； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ；
■<!--注解-->： ▲Top
像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以 是很多行）而不作显示，一般</p><p style='padding:5px 0px;'>20、使用目的：
为文中不同部份加上说明，方便日后修改。
这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分 做什么、那部分做什么。
例子：
<!--由这处开始是产品订购表格-->
用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字眼。
例子：
<!--本文版权为 1998, Creation of Webpage 所拥有，未经许，请勿抄摘-->
■ <P> ： ▲Top
<P>称为段落标记。作用：为字、画、表格等之间留一空白行。
本来<P>是一围堵标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要<</p><p style='padding:5px 0px;'>21、/P>作结尾。
<P> 的常用参数： 如：<p align="center">
align="center"
可选值：right, left, center。
内定值： align="left"
例子： 原始码 Here is the text for my paragraph. It does't matter how long it is,
how many space are between the words or when I decide to hit the return key.
It will create a new paragraph </p><p style='padding:5px 0px;'>22、only when I begin the tag with another one.
<P>Here's the next paragraph.
显示结果 Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another o</p><p style='padding:5px 0px;'>23、ne.
Here's the next paragraph.
■ <BR> ： ▲Top
<BR>称为换行标记。作用：令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。
错误示范：（邮局可不会接受一行过的地址） 原始码 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
结果 566 E Bo</p><p style='padding:5px 0px;'>24、ston Post RD Mamaroneck NY 10543-9982 United States of America
正确例子： 原始码 566 E Boston Post RD
<BR>Mamaroneck NY 10543-9982
<BR>United States of America
结果 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
■ <HR> ： ▲Top
<HR>称为水平线。作用：插入一条水平线。
<HR> 之参数修</p><p style='height:0px;padding:0;overflow:hidden'>25、改：
以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。
align="LEFT"
设定线条置放位置，可选择：left；right；center 三种设定值。
size="2"
设定线条厚度，以像素作单位，内定为 2。
width="70%"
设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。
color="#0000FF" 『只适用于IE』
设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text="b</p><p style='height:0px;padding:0;overflow:hidden'>26、lue" 。
noshade
设定线条为平面显示，若删去则具阴影或立体，这是内定值。
例子： 原始码 <HR>
<HR align="LEFT" size="4">
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
显示结果
----------------------------------------------------------------------------</p><p style='height:0px;padding:0;overflow:hidden'>27、
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
■ <CENTER> ： ▲Top
<CENTER>称为居中标记</p><p style='height:0px;padding:0;overflow:hidden'>28、作用：令字、画、表格等显示于中间。
这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align="CENTER" 的参数，<CENTER>似乎多馀了，事实上它还是常用的标记之一，其简单 易用，常用于文字上，对于己加有 align="CENTER" 参数的 <TABLE> 标记亦要不厌其烦 地加上居中标记，因有狻多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。
例子： 原始码 <CENTER>Chris's First Homepage</CENTER>
<CENTER>What's new</CENTER> </p><p style='height:0px;padding:0;overflow:hidden'>29、
<CENTER>My profile</CENTER>
结果 Chris's First Homepage
What's new
My profile
■ <PRE> ： ▲Top
<PRE>称为预设格式标记。作用：令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
能以<PRE>标记产生对 效果，或产生多于一行的空白才算上乘！
例子： 原始码 <pre> Creation o</p><p style='height:0px;padding:0;overflow:hidden'>30、f Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506</pre>
显示结果 Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 2</p><p style='height:0px;padding:0;overflow:hidden'>31、00 268 296 358 385 453 506
■ <DIV> ： ▲Top
<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。
<DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍 一个属性设定。
以 <DIV align="center"> 为例：
align="center"
可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 </p><p style='height:0px;padding:0;overflow:hidden'>32、
<DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。
例子： 原始码 <DIV align="center">Chris's First Homepage
<br>What's new
<br>My profile</DIV>
结果 Chris's First Homepage
What's new
My profile
■ <NOBR> ： ▲Top
<NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一 显示于同一行或下一 行。它对住址、数学算</p><p style='height:0px;padding:0;overflow:hidden'>33、式、一行数字、程式码等尤为有用。
例子：（其中 Chris's Creation of Webpage 将不被分开而显示于同一行。） 码 If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot.
结果 If you want to know how to create you own homepage quickly, don't miss Chris's Creat</p><p style='height:0px;padding:0;overflow:hidden'>34、ion of Webpage which will help you a lot.
■ <WBR> ： ▲Top
<WBR>称为建议折行标记。作用：预设折行部位。
它没有侵犯到 <BR> 的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是 不会折行的。
例子：（若不加<WBR>标记，整个网址会显示于下一行。） 原始码 Please visit my other homepage which locate at There are many softwares for download. I think you will really love that p</p><p style='height:0px;padding:0;overflow:hidden'>35、lace.
结果 Please visit my other homepage which locate at There are many softwares for download. I think you will really love that place.
5、HTML语言剖析之字体标记
<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL</p><p style='height:0px;padding:0;overflow:hidden'>36、> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>
■实体标记与逻辑标记 ： ▲Top
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：
实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介 绍。
多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏</p><p style='height:0px;padding:0;overflow:hidden'>37、览器不能有效显示多 重的标示。
例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。
实体标记有：
<I> <B> <U>
逻辑标记有：
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
若要求真确的效果当然以实体标记为佳。
■<STRONG> <B> ： ▲Top
两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所 标示的中文字不会于 Netscape Netvigator 显示粗体</p><p style='height:0px;padding:0;overflow:hidden'>38、效果。
例子： （第一行是没有任何字体标记的，作对照之用） HTML Source Code （原始码） 浏览器显示结果
Creation of Webpage
<br><STRONG>Creation of Webpage</STRONG>
<br><B>Creation of Webpage</B> Creation of Webpage
Creation of Webpage
Creation of Webpage
■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>： ▲Top
这些标记于 Internet Explo</p><p style='height:0px;padding:0;overflow:hidden'>39、rer 都产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作 用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。
例子： HTML Source Code （原始码） 浏览器显示结果
<I>Creation of Webpage</I>
<br><EM>Creation of Webpage</EM>
<br><VAR>Creation of Webpage</VAR>
<br><CITE>Creation of Webpage</CITE>
<br><DFN>Creation o</p><p style='height:0px;padding:0;overflow:hidden'>40、f Webpage</DFN>
<ADDRESS>Creation of Webpage</ADDRESS> Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> ▲Top
为方便对照及记认，所以把十个标记于在一起介绍。
<TT> <SA</p><p style='height:0px;padding:0;overflow:hidden'>41、MP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。
<U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。
例子： （第一行是没有任何字体标记的，作对照之用） HTML Source Code （原始码） 浏览器显示结果
Creation of Webpage
<br><TT>Creation of Webpage</TT>
<</p><p style='height:0px;padding:0;overflow:hidden'>42、br><SAMP>Creation of Webpage</SAMP>
<br><CODE>Creation of Webpage</CODE>
<br><KBD>Creation of Webpage</KBD>
<br><U>Creation of Webpage</U>
<br><STRIKE>Creation of Webpage</STRIKE>
<br><BIG>Creation of Webpage</BIG>
<br><SMALL>Creation of Webpage</SMALL>
<br>12345<SUB>7</SUB> 6789<SUP>9</p><p style='height:0px;padding:0;overflow:hidden'>43、</SUP> Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899
■<H1> <H2> <H3> <H4> <H5> <H6>： ▲Top
这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小</p><p style='height:0px;padding:0;overflow:hidden'>44、每个标题标记所标示 的字句将独占一行且上下留一空白行。
例子： 原始码 <H1>Header Level 1</H1>
<H2>Header Level 2</H2>
<H3>Header Level 3</H3>
<H4>Header Level 4</H4>
<H5>Header Level 5</H5>
<H6>Header Level 6</H6>
显示结果 Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6
</p><p style='height:0px;padding:0;overflow:hidden'>45、■<FONT> <BASEFONT>： ▲Top
这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大 小、字形及颜色，但各有用处，且看以下比较：
<BASEFONT> 可以用于文件的开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。
<FONT> 是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响 所标示的字句，是一个围堵标记。
两标记可同时存在，唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影 响，而 <FONT> 本身亦受 </p><p style='height:0px;padding:0;overflow:hidden'>46、<BASEFONT> 的影响。
<FONT>的参数设定：
例子： <font face="Arial" size="+2" color="#008000">Creation of Webpage</font>
face="Arial"
设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。
size="+2"
设定文字的大小。其值可以是绝对或相对，
绝对的意思便是标记自己决定文字的大小，不受 </p><p style='height:0px;padding:0;overflow:hidden'>47、<BASEFONT> 的影响，如
size="5" 表示其大小便是 5， 而html内定值为 3，即 size="3"和没有设定是一样的。
相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝 对表示法的 size="5"，但若已设定 <BASEFONT size="n"> 则其实际大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有绝对表示法。
color="#008000"
设定文字的颜色。#008000 表示绿色
例子： 原始码 <font size="+1">I love Creation of Webpage</fo</p><p style='height:0px;padding:0;overflow:hidden'>48、nt>
<br><font size="+2" color="#800080">I love Creation of Webpage</font>
<br><font face="Times New Roman" size="5" color="#008000">I love Creation of Webpage</font>
显示结果 I love Creation of Webpage
I love Creation of Webpage
I love Creation of Webpage
6、HTML语言剖析之清单标记
<OL> <LI</p><p style='height:0px;padding:0;overflow:hidden'>49、>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>
■ <OL> <LI> :
<OL>称为顺序清单标记。<LI>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。
<OL> 的参数设定（常用）：
例如： <ol type="i" start="4"></ol>
type="i"
设定数目款式，其值有五种，请参考 右表，内定为 type="1"。
start="4"
设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3.. 等整 数，内定为 start="1"。
Type Numbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii, ...
I upper roman I, II, III</p>
</div>
</div>
<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js"></script>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div>
<div style=" margin: auto; overflow:hidden;
text-align: center;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e2a21bc68316db308b5fdc9a0d11f2e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div style=" height:80px; margin: auto; overflow:hidden;
text-align: center;">
<a target="_blank"
href='https://m.zixin.com.cn/ADMiddle.aspx?t=92ULKnFRa/o='>
<img src="https://www.zixin.com.cn/FileUpload/Images/81dd1a0b-02e3-435a-aa37-fbfccae9a83d.gif" width="100%" height='80'
alt="移动网页_全站_页脚广告1" />
</a>
</div> </div>
<div class="siteInner">
<p style="white-space: normal; text-align: center;"><a href="https://www.zixin.com.cn/h-33.html" target="_blank" title="关于我们" textvalue="关于我们"><span style="text-align: center;">关于我们</span></a> <span style="text-align: center;"> </span><a href="https://www.zixin.com.cn/h-37.html" target="_blank" title="便捷服务" textvalue="便捷服务">便捷服务</a> <span style="text-align: center;"> </span><a href="https://ai.zixin.com.cn/" target="_blank" title="自信AI" textvalue="自信AI">自信AI</a> <span style="text-align: center;"> </span><a href="https://gpt.zixin.com.cn/" target="_blank" title="AI导航" textvalue="AI导航">AI导航</a> <a href="https://www.zixin.com.cn/info/266.html" target="_blank" title="抽奖活动" textvalue="抽奖活动">抽奖活动</a></p><p style="white-space: normal; text-align: center;"><span style="color: rgb(153, 153, 153); font-family: 微软雅黑, 宋体, Arial; font-size: 12px; text-align: center; background-color: rgb(248, 248, 248);"></span><span style="text-align: center;">©2010-2025 宁波自信网络信息技术有限公司 </span><span style="text-align: center;"> </span><span style="text-align: center;">版权所有</span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;">客服电话：<span style="text-wrap: wrap;">0574-28810668</span> <span style="text-align: center;">投诉</span>电话：18658249818</span></span></span></span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-6/9/6379033271755225397249870.png" title="gongan.png" alt="gongan.png"/></span><a href="http://www.beian.gov.cn/portal/index.do" target="_blank" textvalue="浙公网安备33021202000488号">浙公网安备33021202000488号</a> </p><p style="white-space: normal; text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/4/6379256265460890686562879.png" title="icp.png" alt="icp.png"/><a href="http://beian.miit.gov.cn/" target="_blank" textvalue="浙ICP备2021020529号-1">浙ICP备2021020529号-1</a> <span style="text-align: center;"> | </span> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%AE%81%E6%B3%A2%E8%87%AA%E4%BF%A1%E7%BD%91%E7%BB%9C%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&type=xuke" target="_blank" title="浙B2-20240490" textvalue="浙B2-20240490">浙B2-20240490</a><span style="text-align: center;"> </span></p><p style="white-space: normal; text-align: left;"><span style="text-align: center; font-family: 楷体, 楷体_GB2312, SimKai; font-size: 20px;">关注我们</span><span style="text-align: center;"> ：<a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/9/6379298231429297878483475.png" title="微信公众号" alt="微信公众号"/></a></span><span style="text-align: center;"> <a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497521.png" title="抖音" alt="抖音"/></a> <a href="https://weibo.com/zixinnetwork" target="_blank" style="color: rgb(217, 83, 79); text-align: center; white-space: normal;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497523.png" title="微博" alt="微博"/></a> <a href="https://zixinnetwork.lofter.com/" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257740834991205479163.png" title="LOFTER" alt="LOFTER"/></a> </span></p>
</div>
</div>
<div style="position: fixed; bottom: 100px; right: 15px; z-index: 100000000000000000;">
<a href="https://work.weixin.qq.com/kfid/kfcb5dffb1386b26424"><img src="https://www.zixin.com.cn/FileUpload/Images/c1022425-c464-4203-b6dc-db237b2252d5.gif" style="width:36px" alt="客服"/></a>
</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.zixin.com.cn/" title="咨信网"><img src="https://www.zixin.com.cn/FileUpload/Images/c4280cd2-fe62-449e-aeca-027ef73439f5.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.zixin.com.cn/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/">首页 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/booklist-0.html">分类 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/infos.html">学堂 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/newslist.html">公告 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/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.zixin.com.cn/docdown/12072622.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1762706128', // 必填，生成签名的时间戳
nonceStr: '9F61408E3AFB633E50CDF1B20DE6F466', // 必填，生成签名的随机串
signature: '9e71320339f58448fe1508b4d0e2803b0d53ae20',// 必填，签名，见附录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.zixin.com.cn/docdown/12072622.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1762706128', // 必填，生成签名的时间戳
nonceStr: '9F61408E3AFB633E50CDF1B20DE6F466', // 必填，生成签名的随机串
signature: '9e71320339f58448fe1508b4d0e2803b0d53ae20',// 必填，签名，见附录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>
<!--footer-->
<footer class="footer">
<a target="_parent" class="footer-item" href="https://m.zixin.com.cn/">
<img class="footer-item-img" src="/Master/img/tabbar/home.png" alt="首页" />
<div class="footer-item-txt ">首页</div>
</a>
<a target="_parent" class="footer-item" id="classify" href="https://m.zixin.com.cn/bookmap.html">
<img class="footer-item-img" src="/Master/img/tabbar/category.png" alt="分类" />
<div class="footer-item-txt ">分类</div>
</a>
<a target="_parent" class="footer-item" id="case" href="https://m.zixin.com.cn/zhuantilist-.html">
<img class="footer-item-img" src="/Master/img/tabbar/case.png" alt="专题" />
<div class="footer-item-txt ">专题</div>
</a>
<a target="_parent" class="footer-item" id="my" href="https://m.zixin.com.cn/UserDefault.aspx">
<img class="footer-item-img" src="/Master/img/tabbar/my.png" alt="我的" />
<div class="footer-item-txt ">我的</div>
</a>
</footer>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.zixin.com.cn/header.aspx";
$.get(url + "?tp=0&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://m.zixin.com.cn/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>