查看完整版本: HTML基本语言介绍(转)

笨笨象 2007-8-2 19:11

HTML基本语言介绍(转)

[color=darkorange][size=5]HTML[/size][/color][size=3]英语意思是：Hypertext Marked Language，即超文本标记语言,[/size]是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。[size=3]使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。[/size]
　[size=3]　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。[/size]

☆通过HTML可以表现出丰富多彩的设计风格

　　　　　图片调用[color=darkorchid]：<IMG SRC="文件名">[/color]　　　　　
文字格式：[color=royalblue]<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>[/color]

☆通过HTML可以实现页面之间的跳转

　　　　　页面跳转[color=SandyBrown]：〈A HREF="文件路径/文件名"></A>[/color]

☆通过HTML可以展现多媒体的效果

　　　　　声频[color=purple]：<EMBED SRC="音乐文件名" AUTOSTART=true>[/color]　　　　　
视频[color=royalblue]：<EMBED SRC="视频文件名" AUTOSTART=true>[/color]

　　上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。

笨笨象 2007-8-2 19:13

[color=MediumTurquoise][size=5]HTML的基本结构[/size][/color]
　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

<HTML>

　　　<HEAD>
　　　　　　头部信息
　　　</HEAD>

　　　<BODY>
　　　　　文档主体，正文部分
　　　</BODY>

</HTML>

　　其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略，表示正文内容的开始。

[color=Red]下面是一个最基本的超文本文档的源代码：[/color][color=Blue]显示结果如下[/color]

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临上班族论坛</H3>
<BR>
<HR>
<FONT SIZE=2>
　　这是我第一次介绍HTML语言，希望对您有帮助
</FONT>
</CENTER>
</BODY>

</HTML>

[color=Blue]代码如下[/color]：：[code]下面是一个最基本的超文本文档的源代码：

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临上班族论坛</H3>
<BR>
<HR>
<FONT SIZE=2>
　　这是我第一次介绍HTML语言，希望对您有帮助
</FONT>
</CENTER>
</BODY>

</HTML>
[/code]

笨笨象 2007-8-2 19:18

[color=Purple][size=5]超文本中的标签[/size][/color]

　　刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

[color=Green][size=5]1. 单标签[/size][/color]

　　某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

　　　　　　　　　　< 标签名称>

　　最常用的单标签是<BR>, 它表示换行。

[color=Green][size=5]2.双标签[/size][/color]
　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

　　　　　　　　　　　　　<标签> 内容</ 标签>

　　其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：

　　　　　　　　　　　　　　<EM>第一：</EM>

[color=Green][size=5]3.标签属性 [/size][/color]

　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：

　　　　　　　　< 标签名字属性1 属性2 属性3 … >

　　各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：

<HR SIZE=3 ALIGN=LEFT WIDTH="75%">

　　其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，
缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "
号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的
个数，如WIDTH=300），缺省值是"100%"。

笨笨象 2007-8-2 19:20

[color=MediumTurquoise][size=5]换行<br>[/size][/color]

　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<br>标签。

笨笨象 2007-8-2 19:23

[color=Teal][size=5]表格的基本结构[/size][/color]

　<table>...</table> 　定义表格
　<caption>...</caption>　定义标题
　<tr> 　定义表行
　<th> 　定义表头
　<td> 　定义表元(表格的具体数据)

--------------------------------------------------------------------------------

以下是一个简单的例子：

[code]<table border=1>

<tr><th>姓名</th><th>性别</th><th>年龄</th>

<tr><td>汉人</td><td>男</td><td>00</td>

</table>[/code]<table border=1>

<tr><th>姓名</th><th>性别</th><th>年龄</th>

<tr><td>汉人</td><td>男</td><td>00</td>

</table>

笨笨象 2007-8-2 19:25

[color=DarkOrchid][size=5]表格的标题 [/size][/color]

　　表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。

　　设置标题位于表格上方：

[color=Plum]
　　　　<caption align=top> ... </caption> [/color]

　　设置标题位于表格下方：

　　　　[color=Plum]　<caption align=bottom> ... </caption> [/color]

[code]<table border>
　<caption align=top>旅游日程</caption>
　<tr>
　　　<th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
　<tr>
　　　<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table> [/code]

显示结果：<table border>
　<caption align=top>旅游日程</caption>
　<tr>
　　　<th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
　<tr>
　　　<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table>

木子潇潇 2007-8-2 23:27

吗的，弄不起来

[[i] 本帖最后由木子潇潇于 2007-8-2 23:30 编辑 [/i]]

shaopan 2007-8-2 23:52

不是吧…复过来就行了……左下角要在html前面要打勾…打勾

木子潇潇 2007-8-3 00:44

七月星光 2007-8-3 08:20

下次弄个教程…

页: [1]

查看完整版本: HTML基本语言介绍(转)