返回列表 发新帖

网络教程四《HTML语言简介》

[复制链接]

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:09:03  | 显示全部楼层 | 阅读模式

HTML语言简介(一)

作者黑马

此篇的目的是想通过网页制作基础知识的简单介绍让大家对HTML语言有个总体的了解,一者不枉来中年人生一趟(总算学到点什么嘛),二者可以在发贴时偶尔突破论坛的限制,制作出更具个性化的更为精美的贴子来。当然论坛不完全开放HTML功能,但通过不断尝试,你总会找到办法的。

本篇约定:为能使代码正确显示,我将用*号加入代码中,实际使用时应当去掉这个*号,文中不再提示。另,<!-和-->之间的文字为代码注释文字(实际应用时也是这样的约定,程序将不对这些文字作任何处理)。

黑马声明:以下介绍的代码暂时不能用于论坛,应如何使用方便时黑马再作介绍。

HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言,简称为超文本语言。我们先来看看HTML语言的基本构架:

<html> <!-文档开始--> <head> <!-文档头开始--> <title>标题</title> <!-标题,将显示于浏览器左上方的标题栏中--> </head> <!-文档头结束--> <body> <!-文档体开始--> 文档体 <!-文档体,即在浏览器里显示的内容--> </body> <!-文档体结束--> </html> <!-文档结束-->

如果我们把上面的<*title>和<*/title>之间的“标题”改为“黑马教程”,把<*body>和<*/body>之间的“文档体”改为一段文字,那么,当我们把这些代码用记事本保存为.html文件之后(如:test.html),我们双击这个文件,IE将把它打开,IE左上方的标题栏将显示为:黑马教程 - Microsof Internet Explorer,IE浏览框里则是我们输入的那段文字。

从上面的代码应该可以看出,HTML文件有很多标识符,它们形式上是由相应的英文嵌在“<>”内,而且大多数成对出现(有标识开始、标识结束,结束符号为“/”)。标识符也有不成对出现的,比如插入一个换行符<*br>。标识符很多,这里不可能一一介绍,我们将在下面的举例当中所用到的标识符以注释及其他形式加以说明。

■字体修饰开始。请研究以下代码:

<html> <head> <title>字体设置举例</title> </head> <body> <font size=5 color=blue> <!-字体修饰开始:大小和颜色--> 男女从相识到相恋,到携手走进围城,就像建立一种合伙关系,成立一家合资的婚姻公司。 </font> <!-本段字体修饰结束--> <br> <!插入换行符--> <font size=6 color=red><b> <!-字体改变颜色并加粗--> 论证入伙:</font></b> <!-改变字体颜色及加粗修饰结束> <font size=5 color=blue> <!-字体改回上一段的修饰--> 合资前,男女双方要对对方的长相、学识、品德等项目进行详尽的考察。恋爱到一定程度后,认为有合资的必要,然后按照平等自愿、互惠互利、和平共处和长期合作的原则,签订一份共同投资的合同。经婚姻登记机关审核后,颁发婚姻公司的营业执照,这就标志着婚姻公司可以正式开业运行了。 </font> <!-本段字体修饰结束--> </body> </html>

以上代码保存为html文件后,浏览器的标题将有“字体设置举例”字样,而正文效果如下:

男女从相识到相恋,到携手走进围城,就像建立一种合伙关系,成立一家合资的婚姻公司。 论证入伙:合资前,男女双方要对对方的长相、学识、品德等项目进行详尽的考察。恋爱到一定程度后,认为有合资的必要,然后按照平等自愿、互惠互利、和平共处和长期合作的原则,签订一份共同投资的合同。经婚姻登记机关审核后,颁发婚姻公司的营业执照,这就标志着婚姻公司可以正式开业运行了。

■插入图像

由于论坛本身对贴图的大小作了处理,同时也出于方便阅读和理解,这里只简单地探讨一下如何插入图片。加入图片的格式为:<*img src = 图片地址>。你可以用本地磁盘里的图片,如:<*img src = D:\Pic\01.jpg>,如果目录正确并有01.jpg图片,那么保存为html文件后打开此文件IE里会显示这张图片,但这样的代码是不可能在网上正确显示的,你必须用正确的网址来取代D:\Pic\01.jpg。

下面代码将在网页中显示两幅图片,其中第二幅图是居中的。

<html> <head> <title>图像的嵌入<*/title> </head> <body> <img src="D:\Pic\01.jpg"> <!-第一幅图,注意小角双引号--> <br> <!-换行--> <center> <!-图片居中--> <img src="D:\pic\02.jpg"> <!-第二幅图--> </center> <!-图片居中结束--> </body> </html>

效果如下(实际图片采用了网上的而不是我的硬盘里的):

今天先讲到这里——讲得多了,授课的人累,听课的人打瞌睡。下课!(值日生怎么不叫起立?!

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:11:22  | 显示全部楼层
HTML语言简介(二)

本讲内容概要:通过两个完整的源码,介绍如果在Web页中插播媒体文件。 本讲约定:为能使代码正确显示,我将用*号加入代码中,实际使用时应当去掉这个*号。另,<!-和-->之间的文字为代码注释文字(实际应用时也是这样的约定,程序将不对这些文字作任何处理)。

黑马声明:以下介绍的代码暂时不能用于论坛,应如何使用方便时黑马再作介绍。 ■插入媒体文件

媒体文件类型繁多,这里先以WindowsMedaPlayer支持的MP3为例,谈谈如何在网页中以插入ActiveX控件的形式播放媒体文件。

先分析以下完整代码(保存为html文件后可观察效果,注意要播放的文件路径):

<html> <head> <title>MP3播放演示<*/title> </head> <body> <p align="center"> <!-定义播放机位置:居中--> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer1" width="400" height="44"> <param name="URL" value="D:\Music\十二种颜色.mp3"> <param name="playCount" value="10"> </object> </body> </html>

请注意观察以上代码中<*object>和<*/object>之间的内容。分析:

object标识符成对出现用以规范ActiveX控件的各种属性和事件。

在<object ……>和</object>之间,用classid、id指定播放机控件,你不用去管它,平时使用时复制就可以;width和height指定播放界面的宽度和高度;<*param name...>那两行,头一行指明MP3文件地址(实际应用时要更改,可以是网上的MP3文件或WMP播放机支持的其他文件),下一行则是指定播放次数(10次)。播放机还有很多属性可设置,出于阅读方便,这里不一一介绍,有兴趣的朋友可通过看其他网页代码自行研究。

我们再试着插入一个Flash动画。以下是完整代码,去掉*号后把它保存为flash.html文件即可用浏览器观察效果(请确保硬盘里的Flash文件的事实存在,你可以更改路径和文件名,如果引用网上的文件,则控件会自动下载然后播放):

<html> <head> <title>播放Flash动画<*/title> </head> <body> <center> <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="ShockwaveFlash1" width="500" height="350"> <param name="_cx" value="12965"> <param name="_cy" value="10081"> <param name="FlashVars" value="-1"> <param name="Movie" value="E:\Flash音乐\No1\雪人.swf"> <param name="Src" value="E:\Flash音乐\No1\雪人.swf"> <param name="WMode" value="Window"> <param name="Play" value="-1"> <param name="Loop" value="-1"> <param name="Quality" value="High"> <param name="SAlign" value> <param name="Menu" value="-1"> <param name="Base" value> <param name="AllowScriptAccess" value="always"> <param name="Scale" value="ShowAll"> <param name="DeviceFont" value="0"> <param name="EmbedMovie" value="0"> <param name="BGColor" value> <param name="SWRemote" value> </object> </center> </body> </html>

上面代码中对ShockWave控件用了许多参数,其实几乎都是采用默认值的,省略部分参数设置也是一样的,亦即指定好URL后其他的参数可以不要。

注:RealOnePlayer的id:classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" id="RealAudio1"

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:11:55  | 显示全部楼层

一、关于查找Flash MTV文件:以 .swf 四个字符(头一个为小角符号)为关键词在源文件中查找,找到有完整的 http://……/.swf字样,先把它复制下来,开启一个新页面,粘贴复制的网址让它打开,以确定是不是,如果不是再重复上面步骤。

二、关于在论坛中Flash播放界面的宽度和高度:论坛约定默认值为,500,350,中间有小角逗号。

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:13:05  | 显示全部楼层
HTML语言简介(三)

■插入表格 表格作为一种容器广泛运用于网页中,它起到修饰网页、布置格式等作用,使网页看上去更直观明了。表格的起始标识符为:<table>……</talbe>。 下面的代码放在<*body>和<*/body>之间将得到一行一列的表格: <table border="1" width="50%"> <tr> <td width="100%">这是一个一行一列的表格演示</td> </tr> </table> 其中,border表示表线的粗细,width表示表格的宽度,tr标识符定义表中的行,td标识符定义数据表元,即每行中的每一列。效果为:

这是一个一行一列的表格演示

下面是另外一张表格的完整代码,表格有两行一列,第一行是文字,第二行是一和图片。代码和效果如下: <html> <head> <title>表格·文字·图片</title> <head> <body> <center> <table border="1" width="60%"> <tr> <td width="100%"> <p align="center">这是一个两行一列的表格演示</td> </tr> <tr> <td width="100%"> <p align="center"><*img border="0" src="http://znrs.2000y.net/dispbbs.asp?boardID=16&ID=7871&star=7&page=1" width="80" height="129"></td> </tr> </table> </center> </body> </html>

这是一个两行一列的表格演示

思考题:对照以下代码和后面的实表效果,领悟对表格的控制方法。 <html> <head> <title>5×4表格演示</title> </head> <body> <center> <!--居中开始,下一行是表格前的标题--> <font face="黑体" size="5" color="#008000"><*b>5×4表格演示</b></font><br> <table border="1" width="80%"> <!表格开始 --> <tr> <td width="20%" align="center">姓名</td> <td width="20%" align="center">基本工资</td> <td width="20%" align="center">奖金</td> <td width="20%" align="center">代扣款</td> <td width="20%" align="center">实发金额</td> </tr> <tr> <td width="20%" align="center">李小彥</td> <td width="20%" align="center">5000</td> <td width="20%" align="center">2000</td> <td width="20%" align="center">200</td> <td width="20%" align="center">6800</td> </tr> <tr> <td width="20%" align="center">张朝阳</td> <td width="20%" align="center">2000</td> <td width="20%" align="center">1500</td> <td width="20%" align="center">100</td> <td width="20%" align="center">3400</td> </tr> <tr> <td width="20%" align="center">何春风</td> <td width="20%" align="center">3000</td> <td width="20%" align="center">3000</td> <td width="20%" align="center">100</td> <td width="20%" align="center">5900</td> </tr> <tr> <td width="20%" align="center">合计</td> <td width="20%" align="center">10000</td> <td width="20%" align="center">6500</td> <td width="20%" align="center">400<*/td> <td width="20%" align="center">16100</td> </tr> </table> </center> </body> </html>

5×4表格演示
姓名 基本工资 奖金 代扣款 实发金额
李小彥 5000 2000 200 6800
张朝阳 2000 1500 100 3400
何春风 3000 3000 100 5900
合计 10000 6500 400 16100

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:13:27  | 显示全部楼层

关于对HTML语言的介绍在本贴就不再往下介绍了,因为再介绍下去就背离了本贴的目的。下一步我们将回到与本论坛有关的话题,不再走题:)

当然,对于经常上网的人来说,对HTML语言有个总体了解总是好的,如果以上的几节确实对大家以后冲浪有所帮助,那我会感到非常欣慰的。毕竟,我写这些教程也是要花些时间和心思的(尤其是,要想让论坛显示出预设的网页效果颇需要些技巧,朋友们可以看出来,我的每一节教程几乎都反复修改过,主要原因就是这个)。

如果想掌握更高超的网页制作技能,JapaScript和ASP也是非学不可的,有兴趣的朋友可以作些尝试。至于进一步学习HTML语言,可以借助FrontPage及其他网页制作软件来进行,会有事半功倍的效果。安装有Office2000的朋友,完全安装的话就会有一个FrontPage2000的。

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 19:50:10  | 显示全部楼层

HTML语言语法大全 <! - - ... - -> 註解 <!> 跑馬燈 <marquee>...</marquee>普通捲動 <marquee behavior=slide>...</marquee>滑動 <marquee behavior=scroll>...</marquee>預設捲動 <marquee behavior=alternate>...</marquee>來回捲動 <marquee direction=down>...</marquee>向下捲動 <marquee direction=up>...</marquee>向上捲動 <marquee direction=right></marquee>向右捲動 <marquee direction=’left’></marquee>向左捲動 <marquee loop=2>...</marquee>捲動次數 <marquee width=180>...</marquee>設定寬度 <marquee height=30>...</marquee>設定高度 <marquee bgcolor=FF0000>...</marquee>設定背景顏色 <marquee scrollamount=30>...</marquee>設定捲動距離 <marquee scrolldelay=300>...</marquee>設定捲動時間 <!>字體效果 <h1>...</h1>標題字(最大) <h6>...</h6>標題字(最小) <b>...</b>粗體字 <strong>...</strong>粗體字(強調) <i>...</i>斜體字 <em>...</em>斜體字(強調) <dfn>...</dfn>斜體字(表示定義) <u>...</u>底線 <ins>...</ins>底線(表示插入文字) <strike>...</strike>橫線 <s>...</s>刪除線 <del>...</del>刪除線(表示刪除) <kbd>...</kbd>鍵盤文字 <tt>...</tt> 打字體 <xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效) <plaintext>...</plaintext>固定寬度字體(不執行標記符號) <listing>...</listing> 固定寬度小字體 <font color=00ff00>...</font>字體顏色 <font size=1>...</font>最小字體 <font style =’font-size:100 px’>...</font>無限增大 <!>區斷標記 <hr>水平線 <hr size=’9’>水平線(設定大小) <hr width=’80%’>水平線(設定寬度) <hr color=’ff0000’>水平線(設定顏色) <br>(換行) <nobr>...</nobr>水域(不換行) <p>...</p>水域(段落) <center>...</center>置中 <!>連結格式 <base href=位址>(預設好連結路徑) <a href=位址></a>外部連結 <a href=位址 target=’_blank’></a>外部連結(另開新視窗) <a href=位址 target=’_top’></a>外部連結(全視窗連結) <a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結) <!>貼圖/音樂 <img src=圖片位址>貼圖 <img src=圖片位址 width=’180’>設定圖片寬度 <img src=圖片位址 height=’30’>設定圖片高度 <img src=圖片位址 alt=’提示文字’>設定圖片提示文字 <img src=圖片位址’ border=’1’>設定圖片邊框 <bgsound src=MID音樂檔位址>背景音樂設定 <!>表格語法 <table aling=left>...</table>表格位置,置左 <table aling=center>...</table>表格位置,置中 <table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址 <table border=邊框大小>...</table>設定表格邊框大小(使用數字) <table bgcolor=顏色碼>...</table>設定表格的背景顏色 <table borderclor=顏色碼>...</table>設定表格邊框的顏色 <table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色 <table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色 <table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字) <table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字) <table cols=參數>...</table>指定表格的欄數 <table frame=參數>...</table>設定表格外框線的顯示方式 <table width=寬度>...</table>指定表格的寬度大小(使用數字) <table height=高度>...</table>指定表格的高度大小(使用數字) <td colspan=參數>...</td>指定儲存格合併欄的欄數(使用數字) <td rowspan=參數>...</td>指定儲存格合併列的列數(使用數字) <!>分割視窗 <frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整 <frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整 <frameset cols="20%,*">分割左右兩個框架 <frameset cols="20%,*,20%">分割左中右三個框架 <分割上下兩個框架 <frameset rows="20%,*,20%">分割上中下三個框架 <! - - ... - -> 註解 <A HREF TARGET> 指定超連結的分割視窗 <A HREF=#錨的名稱> 指定錨名稱的超連結 <A HREF> 指定超連結 <A NAME=錨的名稱> 被連結點的名稱 <ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址 <B> 粗體字 <BASE TARGET> 指定超連結的分割視窗 <BASEFONT SIZE> 更改預設字形大小 <BGSOUND SRC> 加入背景音樂 <BIG> 顯示大字體 <BLINK> 閃爍的文字 <BODY TEXT LINK VLINK> 設定文字顏色 <BODY> 顯示本文 <BR> 換行 <CAPTION ALIGN> 設定表格標題位置 <CAPTION>...</CAPTION> 為表格加上標題 <CENTER> 向中對齊 <CITE>...<CITE> 用於引經據典的文字 <CODE>...</CODE> 用於列出一段程式碼 <COMMENT>...</COMMENT> 加上註解 <DD> 設定定義列表的項目解說 <DFN>...</DFN> 顯示"定義"文字 <DIR>...</DIR> 列表文字標籤 <DL>...</DL> 設定定義列表的標籤 <DT> 設定定義列表的項目 <EM> 強調之用 <FONT FACE> 任意指定所用的字形 <FONT SIZE> 設定字體大小 <FORM ACTION> 設定戶動式表單的處理方式 <FORM METHOD> 設定戶動式表單之資料傳送方式 <FRame MARGINHEIGHT> 設定視窗的上下邊界 <FRame MARGINWIDTH> 設定視窗的左右邊界 <FRame NAME> 為分割視窗命名 <FRame NORESIZE> 鎖住分割視窗的大小 <FRame SCROLLING> 設定分割視窗的捲軸 <FRame SRC> 將HTML檔加入視窗 <FRameSET COLS> 將視窗分割成左右的子視窗 <FRameSET ROWS> 將視窗分割成上下的子視窗 <FRameSET>...</FRameSET> 劃分分割視窗 <H1>~<H6> 設定文字大小 <HEAD> 標示文件資訊 <HR> 加上分格線 <HTML> 文件的開始與結束 <I> 斜體字 <IMG ALIGN> 調整圖形影像的位置 <IMG ALT> 為你的圖形影像加註 <IMG DYNSRC LOOP> 加入影片 <IMG HEIGHT WIDTH> 插入圖片並預設圖形大小 <IMG HSPACE> 插入圖片並預設圖形的左右邊界 <IMG LOWSRC> 預載圖片功能 <IMG SRC BORDER> 設定圖片邊界 <IMG SRC> 插入圖片 <IMG VSPACE> 插入圖片並預設圖形的上下邊界 <INPUT TYPE NAME value> 在表單中加入輸入欄位 <ISINDEX> 定義查詢用表單 <KBD>...</KBD> 表示使用者輸入文字 <LI TYPE>...</LI> 列表的項目 ( 可指定符號 ) <MARQUEE> 跑馬燈效果 <MENU>...</MENU> 條列文字標籤 <meta NAME="REFRESH" CONTENT URL> 自動更新文件內容 <MULTIPLE> 可同時選擇多項的列表欄 <NOFRame> 定義不出現分割視窗的文字 <OL>...</OL> 有序號的列表 <OPTION> 定義表單中列表欄的項目 <P ALIGN> 設定對齊方向 <P> 分段 <PERSON>...</PERSON> 顯示人名 <PRE> 使用原有排列 <SAMP>...</SAMP> 用於引用字 <select >...</select > 在表單中定義列表欄 <SMALL> 顯示小字體 <STRIKE> 文字加橫線 <STRONG> 用於加強語氣 <SUB> 下標字 <SUP> 上標字 <TABLE BORDER=n> 調整表格的寬線高度 <TABLE CELLPADDING> 調整資料欄位之邊界 <TABLE CELLSPACING> 調整表格線的寬度 <TABLE HEIGHT> 調整表格的高度 <TABLE WIDTH> 調整表格的寬度 <TABLE>...</TABLE> 產生表格的標籤 <TD ALIGN> 調整表格欄位之左右對齊 <TD BGCOLOR> 設定表格欄位之背景顏色 <TD COLSPAN ROWSPAN> 表格欄位的合併 <TD NOWRAP> 設定表格欄位不換行 <TD VALIGN> 調整表格欄位之上下對齊 <TD WIDTH> 調整表格欄位寬度 <TD>...</TD> 定義表格的資料欄位 <TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄 <TEXTAREA WRAP> 決定文字輸入欄是自動否換行 <TH>...</TH> 定義表格的標頭欄位 <TITLE> 文件標題 <TR>...</TR> 定義表格美一行 <TT> 打字機字體 <U> 文字加底線 <UL TYPE>...</UL> 無序號的列表 ( 可指定符號 ) <var>...</var> 用於顯示變數

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
关于我们
友情链接
联系我们
帮助中心
网友中心
购买须知
支付方式
服务支持
资源下载
售后服务
定制流程
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表