HTML语言剖析_计算机软件及应用_IT计算机_专业资料_第1页
HTML语言剖析_计算机软件及应用_IT计算机_专业资料_第2页
HTML语言剖析_计算机软件及应用_IT计算机_专业资料_第3页
HTML语言剖析_计算机软件及应用_IT计算机_专业资料_第4页
HTML语言剖析_计算机软件及应用_IT计算机_专业资料_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、html语言剖析简介简释：一种为普通文件屮某些字句加上标示的语言，其目的在于运用标记（tag）使文件达 到预期的显示效果。html是在sgml定义下的一个描述性语言，或可说html是sgml的一个应用程 式，html不是程式语言，如c+和java之类，它只是标示语言，基木上你只要明白了 各种标记的用法便算学懂了 html, html的格式非常简单，只是由文字及标记组合而 成，于编辑方而，任何文字编辑器都可以，只要能将文件另存成ascii纯文字格式即可, 当然以专业的网页编辑软件为佳。阅读须知：这一篇【html剖析】偏重于标记的介绍，考虑到易懂及毎节的篇幅问题，我并不按w3c 的html分类,这

2、可令你更易选择有兴趣的标记,其中只有【文件标记】是必读的,其 余 可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 html，任何网页编辑工 具都可以变成一把利器。标记写法:任何标记皆山”v”及”所围住，如 标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如hello参数只町加于起始标记中。在起始标记之标记名前加上符号”/”便是其终结标记，如标记字母大小写皆可。围堵标记与空标记：标记按型态分为围堵标记与空标记围堵标记顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如 html source : creation of webpage is my f

3、avourite.显示丿戍： creation of webpage is my favourite.其中便称为围堵标记。它以起始标记及终结标记标示文字creation of webpage ,令它显示成粗体，两者失其一都 会发生错谋显示。空标记是指标记单独出现，只有起始标记没有终结标记。 例如 html source：i love creation of webpage.it's a wonderful place.显示成：i love creation of webpage.its a wonderful place其中换行标记便属空标记。它的作用便是将标记后所有东西显示于下一行，

4、可见终结标记于它是没意义的，但有些人 会为空标记加上终结标记，这是为方便记认而己，对html没有影响。二html标记一览文件标记<html> 文件声明让浏览器知道这是html文件<head> 开头提供文件整体资讯<title> 标题定义文件标题，将显示于浏览顶端<body> 木文 设计文件格式及内文所在排版标记<!-注解-> o说明标记为文件加上说明，但不被显示<p> o段落标记为字、画、表格等之间留一空白行<br> o换行标记令字、画、表格等显示于下一行<hr> o水平线插入一条水平线<ce

5、nter> 居中 令字、画、表格等显示于中间 反对<pre> 预设格式令文件按照原始码的排列方式显示<d1v> 区隔标记设定字、画、表格等的摆放位置<nobr> 不折行令文字不因太长而绕行<wbr> 建议折行预设折行部位字体标记<strong> 加重语气产生字体加粗bold的效果<b> 粗体标记产牛字体加粗的效果<em> 强调标记字体出现斜体效果<1> 斜体标记字体出现斜体效果<tt> 打字字体courier字体，字母宽度相同<u> 加上底线加上底线反对<h1&g

6、t; 一级标题标记变粗变大加宽，程度与级数反比<h2> 二级标题标记将字体变粗变大加宽<h3> 三级标题标记将字体变粗变人加宽<h4> 四级标题标记将字体变粗变人加宽<h5> 五级标题标记将字体变粗变大加宽<h6> 六级标题标记将字体变粗变大加宽<font> 字形标记设定字形、人小、颜色反对<basefont> o基准字形标记 设定所有字形、人小、颜色 反对<big> 字体加大令字体稍为加大<small> 字体缩细令字体稍为缩细<strike> 画线删除为字体加一删除线反対&

7、lt;code> 程式码 字体稍为加宽如<71><kbd> 键盘字字体稍为加宽，单-空白<samp> 范例 字体稍为加宽如<tt><var> 变数斜体效果<cite> 传记引述 斜体效果<blockquote> 引述文字区块 缩排字体<dfn> 述语定义斜体效果<address> 地址标记斜体效果<sub> 下标字下标字<sup> 上标字指数（平方、立方等）清单标记<0l> 顺序清单清单项目将以数字、字母顺序排列<ul> 无序清单清单

8、项目将以圆点排列<li> o清单项h每一标记标示一项清单项冃<menu> 选单清单 清单项目将以圆点排列，如<ul>反对 <dir> 目录清单 清单项冃将以圆点排列，如<ul>反对 <dl> 定义清单清单分两层出现<dt> o定义条目标示该项定义的标题<dd> o定义内容 标示定义内容表格标记<table> 表格标记 设定该表格的各项参数<capt10n> 表格标题做成一打通列以填入表格标题<tr> 表格列设定该表格的列<td> 表格栏设定该表格的栏&

9、lt;th> 表格标头相等于<td>,但其内之字体会变粗表单标记<form> 表单标记决定单一表单的运作模式<textarea> 文字区块提供文字方盒以输入较大量文字<input> o输入标记决定输入形式<select> 选择标记 建立pop叩 卷动清单<option> o选项每一标记标示一个选项图形标记<img> o图形标记用以插入图形及设定图形属性连结标记<a> 连结标记加入连结<base> o基准标记可将相对url转绝对及指定连结目标 框架标记<frameset>

10、 框架设定设定框架<frame> o框窗设定设定框窗<iframe> o页内框架 于网页屮间插入框架ie<noframes> 不支援框架 设左当浏览器不支援框架时的提示 影像地图<map> 影像地图名称 设定影像地图名称<area> o连结区域设定各连结区域多媒体<bgsound> o背景声音于背景播放声音或音乐ie<embed> o多媒体加入声音、音乐或影像其他标记<marquee> 走动文字令文字左右走动ie<blink> 闪烁文字闪烁文字nc<isindex> o页内寻

11、找器可输入关键字寻找于该一页反对 <meta> o开头定义 让浏览器知道这是html文件 <link> o关系定义定义该文件与其他url的关系 stylesheet<style> 样式表 控制网页版面<span> 自订标记独立使用或与样式表同用三文件标记html基本架构：以下html source code便是一份html文件的基本架构:<html><head><title>网页的标题/title</head><body>网页的内容，很多标记都作用于此</body></

12、html>特点解说：整份文件处于标记html与</html>之间。<html>用以声明这是html文件，让浏览器认出并正确处理此html文件。文件分两部分，由<证人。>至</head>称为开头，<b0dy>至/body称本文。基本上两者各有适用的标记，如<title>只可出现于开头部分。开头部分用以存载重要资讯，而只有本文部分会被显示。所以大部分标记会运用于本文部分。<title>所标示的是文件的标题。会出现于浏览器顶部及为别人bookmark时的名称，所以每页有不同而明确的标题 是需要 的。上述标记中只

13、有<body>具参数设定。 <body>之参数设定：例子：<body textj#oooooo link二#ooooff" alink#ffoooo vlink二#ooooff" background=/zbg1. gif" bgcolor="#ffffff" leftmargin=2 topmargin=2 bgproperties=，zf ixed"> text二#000000用以设定文字颜色。#000000代表黑色，亦可以采用颜色的名称，即text二"black"。各 种颜

14、色的值及名称可参考【调色原理】一节。link二#0000ff设定一般文字连结颜色。alink=#ff0000"设定刚按下时文字连结颜色。vlink二"#0000ff"设定连结后的颜色。（被按过）。background二"bgl. gif"设定背景墙纸。gif或jpeg皆可，可以是绝对途径或相对途径。bgcolor#ffffff"设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。leftmargin=2设定整份文件显示画面的左方边沿空间，单位为像素。只适用于ietopmargin=2设定整份文件显示画面的上方边沿空间。只适

15、用于iejbgproperties二"fixed"固定背景墙纸，当卷动文字时墙纸不会跟著卷动。只适用于iej 标记及参数之字母大小都可以。四排版标记！-注解-；<p> ； <br> ； <hr> ； <center> ； <pre> ； <div> ； <n0br> ； <wbr> ； <!注解一：atop像很多电脑语言一样，html文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显不，一般使用目的：为文中不同部份加上说明，方便日后修改。这对较复杂或非私

16、人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、 那部分做什么。例子：!一由这处开始是产品订购表格一>用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。例子：本文版权为1998, creation of webpage所拥有，未经许，请勿抄摘-> <p> : atopp>称为段落标记。作用：为字、画、表格等之间留一空白行。本来p>是一围堵标记，标于一段落的头尾，但从html 2.0开始己不需要/p>作结尾。<p> 的常用参数：如：<p align二"center"align二"

17、;center"可选值：right, left, center。内定值：align 二"left"例子： 原始码 here is the text for my paragraph. it does* t mat ter 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 one <p>

18、;here，s the next paragraph.显示结果 here is the tex t for my paragraph it does' t mat ter 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 one.here，s the next paragraph. <br> : ato

19、pbr>称为换行标记。作用：令字、画、表格等显示于下一行。由于浏览器会自动忽略原始码中空白和换行的部分，这令到br>成为最常用的标记之一。 因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览 器只会将它显示成一大段。错误示范：（邮局可不会接受一行过的地址）原始码566 e boston post rd mamaroneck ny 10543-9982united states of america结果 566 e boston post rd mamaroneck ny 10543-9982 united states of america正确例子：原始

20、码566 e boston post rd<br>mamaroneck ny 10543-9982 <br>united states of america 结果 566 e boston post rdmamaroneck ny 10543-9982united states of america <hr> : top<hr>称为水平线。作用：插入一条水平线。<hr>之参数修改：以：<hr align二"left" size二"2" width二70% color二#0000ff&quo

21、t; noshade> 为例。 alignleft"设定线条置放位置，可选择：left； right； center三种设定值。 size二2设定线条厚度，以像素作单位，内定为2。width二"70%设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。 colorttooooff"只适用于 ie设定线条颜色，内定为黑色。#0000ff代表蓝色，亦可以采用颜色的名称，即 text二"blue"。noshade设定线条为平面显示，若删去则具阴影或立体，这是内定值。例子：原始码hr><hr align=z，left&

22、quot; size="4><hr align二left" size二"2 width二"70%" color二#0000ff" noshade><hr align=left" size=4 width="70" color=，#008000">显示结果 <center> : top<center>称为居中标记。作用：令字、画、表格等显示于中间。这标记原先是netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align=&

23、#39;center"的参数，<center>似乎多馀了，事实上它还是常用的标记之一，其简单易 用，常用于文字上，对于己加有align="center参数的<table>标记亦要不厌其烦 地 加上居中标记，因有狡多浏览器不支持<table>标记中的align='center"参数。例子： 原始码 <center>chris，s first homepage</center> <center>what, s new</center><center>my prof订

24、e</center> 结果 chris' s first homepagewhat* s newmy profi1e <pre> : atoppre>称为预设格式标记。作用：令文件按照原始码的排列方式显示。这标记允许保留你于原始码中输入的空白及returno细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。能以pre>标记产生对 效果，或产生多于一行的空白才算上乘！五清单标记<ol> <li><ul><menu> <dir><dl>

25、<dt> <dd> <ol> <li> :01>称为顺序清单标记。li>则用以标示清单项目。所谓顺序清单就是在每一项前面加上1,2, 3.等数目，又称编号清单。<ol>的参数设定（常用）：例如：ol type二"i" start=，4/zx/ol>type二 1设定数目款式，其值有五种，请参考右表，内定为typel。start二 4设定开始数目，不论设定了哪一数目款式，其值只能是1,2, 3.等整数，内定为 start=/r/o type numbering style 1 arabic numb

26、ers 1, 2, 3,a lower alpha a, b, c,a upper alpha a,b, c,i lower roman i, 11, 111,i upper roman i, 11, 111,<li>的参数设定（常用）：例如：<li type二"square" value二"4">type=，zsquare，z只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为type/disc"： 符号是当type二"disc"时的列项符号。符号 if" width=10 heig

27、ht=10 border=0> 是当 type二"circle"时的列项符号。 符号是当type="square"时的列项符号。六表格标记<table> <tr> <td><th><caption> <table> <tr> <td> :这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。<table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范 围内才适用，属容器标记的还有其他。用以标示表格列（row）td

28、用以标示储存格（cell）table的参数设定（常用）：例如：table width二"400" border二"1" cellspacing二"2" cellpadding二"2" aligncenter valign二"top" background二"mwww shanxiwangnetyweb gif" bgcolor="#0000ff" bordercolor=，z#ff00ff/z bordercolorlight=z*#00ff00/z bo

29、rdercolordark二"#00ffff" cols="2"width=400表格宽度，接受绝对值（如80）及相对值（如80%） oborder二"1"表格边框厚度，不同浏览器有不同的内定值，故请指明。cellspacing二"2"表格格线厚度，请看例子三，那是加厚到5的格线。cellpadding二"2"文字与格线的距离，请看例子四，那是加至10的paddingoalign二"center"表格的摆放位置（水平）,可选值为：left, right, center,请看例

30、子五或六，那表格是 放于中间的，为怕一些浏览器不支援，故特加上居中标记center,只是多层保证而己， 当然只用center亦可。vali gn二"top".表格内字画等的摆放贴位置（垂直），可选值为：top, middle, bottomobackground二myweb. gif"表格 纸，与bgcolor不要同用。bgcolor二"#0000ff"表格底色，与background不要同用，请看例子六。bordercolor="#ff00ff"表格边框颜色，nc与ie有不同的效果，请看例子六。bordercolor li

31、ght=zr#00ff 00*表格边框向光部分的颜色，请看例子二。只适用于iebordercolordark=a，#00ff f f "表格边框背光部分的颜色，请看例子二，使用bordercolor light或bordercolordark时 bordercolor将会失效。只适用于iecols二2表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。<tr>的参数设定（常用）：例如：<tr align二"right" valign二"middle" bgcolor二"#0000ff" borderc

32、olor="#ffooff" bordercolor light 二 #808080" bordercolordark=/z#ff0000，z>alignright"该一列内字画等的摆放贴 位置（水平），可选值为：left, center, rightovalign二"middle"该一列内字画等的摆放贴 位置（垂直），可选值为：top, middle, bottomobgcolor二"#0000ff"该一列底色，请看例子五。bordercolor二"#ff00ff"该一列边框颜色，请看例

33、子三。只适用于iebordercolorlight二"#808080"该一列边框向光部分的颜色，请看例子三。只适用于ie«|bordercolordark=/z#ff0000z/该一列边框背光部分的颜色，请看例子三，使用bordercolor light或bordercolordark 时bordercolor将会失效。只适用于ie«|<td>的参数设定（常用）：例如：<td width二"48%" height二"400" colspan二"5" rowspan二"

34、4" align="right" valignbottom bgcolor二"#ffooff" bordercolor二"#808080"bordercolorlight=“#ffoooo" bordercolordark="#00ffoo" background二"myweb. gif"> width二48%该一储存格宽度，接受绝对值（如80）及相对值（如80%） o height二"400 该一储存格高度。colspa5"该一储存格向右打通的栏数

35、。请看例子六rowspan二"4"该一储存格向下打通的列数。请看例子六align二"right"该一储存格内字画等的摆放贴 位置（水平），可选值为：left, center, righto valign二bottom"该一储存格内字画等的摆放贴位置（垂直），可选值为：top, middle, bottomo bgcolor="#ffooff" 该一储存格底色，请看例子四。bordercolor=#808080"该一储存格边框颜色，请看例子三。只适用于iebordercolorl ight=zz#f f0000该一储

36、存格边框向光部分的颜色，请看例子三。只适用于iebordercolordark=/z#00ff00，z该一储存格边框背光部分的颜色，请看例子三，使用bordercolor light或 bordercolordark时bordercolor将会失效。只适用于iebackground=/zmyweb. gif"该一储存格 纸，与bgcolor任用其一。例子一：原始码 <table width二"60%" border二"1"><tr><td>只有一个储存格(cell)的表格</td></tr&

37、gt;</table>显示结果只有一个储存格(cell)的表格例子二：原始码 <table width二"60%" border="5" bordercwww. sml36. comolorlight二"#ffooff" bordercolordark二"#ff0000"><tr><td> 第一列第一栏 </td><td> 第一列第二栏 </td></tr></table>显示结果第一列第一栏第一列第二栏例子

38、三：原始码 <table width二"60%" border二"1" cellspacing二"5"><tr bordercolor二"#0000ff">td>第一列第一栏</td>td>第一列第二栏</td></tr><tr bordercolorlight=zz#ff00ffz/ bordercolordark二"#00ff00">td>第二列第一栏</td>td>第二列第二栏<

39、;/td></tr></table>显示结果 第一列第一栏第一列第二栏 第二列第一栏第二列第二栏例了四：原始码 <table width二"60%" border二"1" cellpadding二"10"><tr><td bgcolor二"#ffcce6"第一列第一栏</td><td bgcolor="#ffffc6">第一列第二栏</td></tr><tr><td bg

40、color=z，#ffd9ff">第二列第一栏</td><td bgcolor=，#dab4b4">第二列第二栏</td></tr></table>显示结果第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子五：原始码<center><table width二"60%" cellspacing二"0" cellpadding二"2" align二"center"<tr><td bgcolor=&

41、quot;#ffd2e9">第一列第一栏</td><td bgcolor=z，#ffdab5">第一列第二栏</td><td bgcolor=z，#ffffb5">第一列第三栏</td></tr><tr bgcolor二"#c0c0c0"><td>第二列第一栏</td>td>第二列第二栏</td>td>第二列第三栏</td></tr></table></center&

42、gt;显示结果第一列第一栏第一列第二栏第一列第三栏第二列第一栏第二列第二栏第二列第三栏例子六原始码<center><table width二"350" border二t cellspacing二"0" cellpadding二"2" align二"center" bgcolor=，#ffc4el/z bordercolor二"#0000ff"><tr><td第一列第一栏</td><td colspan二2">第一列之第二

43、栏及第三栏</td></tr><tr><td rowspan='2">第二列及第三列之第一栏</td>td>第二列第二栏</td>td>第二列第三栏</td></tr><tr><td>第三列第二栏</td>td>第三列第三栏</td></tr></table></center>显示结果第一列第一栏第一列之第二栏及第三栏第二列及第三列 之第一栏第二列第二栏第二列第三栏第三列第二栏第三

44、列第三栏 <th> :讣>与"(1>同样是标示一个储存格，唯一不同的是<th>所标示的储存格中的文字是以粗体 出现，通常用于表格第一列以标示栏目。它的用法是取代sd>的位置便可以，其参数设定 请参考<td>o当然若为td>所标示的储存格中的文字加上粗体标记<b>便等如<th>的效果。例子：原始码<center><table width二"350" border二"1" cellspacing="0" cellpadding二"2" align二"center"<tr align=*centerz'><th>month</th><th>% of ie visitor</th><th>% of nc visitor</th></tr><tr align二"center"><td>august</td><

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论