HTML 语言入门教程


HTML 语言教程 . 什么是 HTML 语言 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言,由 W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑 HTML 文 件,因为它就是一总纯文本文件。 . HTML 语言的基本结构 下面我们来看一小段 HTML 语言的代码,来了解 HTML 语言的基本结构: HTML 语言的基本结构 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为.htm 或者.html 即可, 然后再所在的目录下就可看到一个 IE 的图标,名字就是你所存的文件名称。 …… …… 这是声明 HTML 文件的语法格式。每一个 HTML 文件,都必须以开头,以结束 …… …… 这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头,并不属于文件本体。 …… …… 这是声明文件标题的语法格式。在这之中写下的所有内容,都将写在网页最上面的标题栏中。 …… …… 这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体,也就是说将会被显示在客户区之 中。 注意:几乎每一种 HTML 语言的语法都是以<>开头,以结束。在编辑 HTML 语言过程中,也可以使 用注释。语法格式为:。就好像 C 语言中的 /* …… …… */ 一样,中间的内容只是解释 说明,并不被编译器所编译。 . HTML 语言的基本单位 1. 长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同时也可以用来定 义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。 长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%),像素代表 的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例,说明这 两种表示方法。 HTML 语言的长度表示 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。

在文本编译器中编译,改变网页的大小,就会看到这两者表示长度方法的不同。 其中
标记是在页面上建立水平线的标记。width 是水平线元素中的一种属性,用来表示水平线 的宽度。这里 width="500"即表示这个水平线的宽度是 500 像素;width="%50"即表示水平线占据客 户区的总宽度的%50。 2. 颜色单位 和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方 法:16 进制颜色代码、10 进制 RGB 码、直接颜色名称 。这三种表示方法不同,但是效 果却是一样的。下面用一小段代码说明这三种颜色的表示方法。 HTML 语言中颜色的不同表示方法 静夜思
窗前明月光
疑是地上霜
举头望明月
低头思故乡 注意:本文件在保存时请选择 Unicode 字符型进行保存。 16 进制颜色代码,语法格式: #RRGGBB 。16 进制颜色代码之前必须有一个“#”号, 这种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。不同的取 值代表不同的颜色,他们的取值范围是 00--FF。 10 进制 RGB 码,语法格式: RGB(RRR,GGG,BBB) 。在这种表示法中,后面三 个参数分别是红色、绿色、蓝色,他们的取值范围是 0--255。以上两种表达方式可以相互转换,标 准是 16 进制与 10 进制的相互转换。 直接颜色名称,可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同,一般 16 进制颜色代码的表示方法比较常用。读者可以根据自己的喜好 和实际情况来决定使用哪一种表示方法。关于不同颜色的定义,请查看相关资料。。 3. URL 路径 URL(Universal Resource Locator)路径是一种互联网地址的表示法。在这个数据里可以包括以何种 协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件 名称等信息。在 HTML 中,URL 路径分为两种形式:绝对路经和相对路径。 a. 绝对路径: 绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来,同时也会表现出磁盘上的目录结构。 语法格式: : 其中,是某一种传输协议,而 则是连接的位置 信息。 例如: b. 相对路径: 相对路径是相对于当前的 HTML 文档所在目录或站点根目录的路径。 语法格式: 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 <1>相对文档: 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../” 表示上一级目录,没有“../”表示当前目录。 例如当前文档的路径是:test/project1/index.htm 。我们要找 test 目录下的 html.htm 。而当前 的目录是 project1,我们要回到上一级目录中,所以路径是“../html.htm”。 <2>相对根目录: 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”,这 个符号表示这个路径是一个相对于根目录的表达式。 例如: 这一课我给大家介绍 html 文档中 head 部分的基本使用方法。 head 这一部分是由标记开始,以标记结束,是 html 文档的首要部分。下面我们 看一下 head 部分所包含的元素: 元素 描述 title 文档标题 meta 描述非 html 标准的一些文档信息 link 描述当前文档与其他文档之间的连接关系 base 定义体试时默认的外部资源 script 脚本程序内容 style 样式表内容 下面简要介绍一下各个部分的功能及用法: title: title 包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字,可以体现出一些 自己的个性。 语法格式: …… …… 在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。 meta: meta 元素提供的信息是用户不可见的。下面是 meta 的几种用法: 定义搜索关键字: 这里介绍两种基本的用法: 这样一来,在你的网页中就会体现出这样的信息。但是这些信息是不可见的,只是提供给那些搜索引擎 使用。 控制页面缓存: 浏览器一般为了节约时间,都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网 页的时候,浏览器将会直接调用硬盘上的这个版本,而不是网上的。如果想让浏览者每次打开网页的时候 都是看到的最新版本,那么就在网页上加上这一句吧! 定义语言: 我们可以通过这样的语句设定语言的编码方式。这样,浏览器就可以为我们正确的选择语言,不需要我 们来选取。上面的例子显示的就是简体中文,如果想要显示繁体中文,将 GB3212 替换为 BIG5 就可以了。 刷新页面 这样的语句可以让我们的浏览器按照 content 属性中制定的时间来跳转到 URL 属性中设定的 URL 地 址。上面的例子就是在打开页面 60 秒后调用一个新的页面 new.htm。如果没有能够找到 new.htm,浏 览器就﹞执行刷新本页的操作。这也是大多数聊天室的设定方法。 link: 这个元素用来指定当前文档和其他文档之间的联接关系。 语法格式: rel 说明两个文档之间的关系;href 说明目标文档名。以下是一个指定外联样式表文件的例子: 关于 css 层叠样式表,请查阅有关资料。 base: 用于定义文档提交是默认的外部资源。 语法格式: href 指定文档中链接到的所有文件默认的 URL 地址。在这里指定 href 的属性,所有的相对卢劲的前面 都会加上 href 属性中的值。 target 指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(frame)中。我们要把 Menu 框 架中的联接显示到 content 框架中,就可以在 Menu 的网页中加上。这样, 就省去了在 Menu 网页上所有链接的属性上加上 target 属性了。 script: 标记用来在页面中加入脚本程序。 语法格式: 在 language 中一定要指定脚本语言的种类。如 VBScript 等。 style: 用来指定当前文档的 css 层叠样式表。css 对于网页的字体样式、背景、边界等都有很大的应用。详细 部分请大家参阅 css 有关内容。 这一次我给大家介绍 html 语言中的 body 的部分用法。 大家从各大门户网站的主页上就可以看出,body 部分占据了大部分的代码。可见 body 是一个网页代码的 绝对主要部分。body 是由开始,由结束。下面我们看一下 body 部分的元素: 元素 描述 bgcolor 背景色 background 背景图案 text 文本颜色 link 链接文字颜色 alink 活动链接文字颜色 vlink 已访问链接文字颜色 leftmargin 页面左侧的留白距离 topmargin 页面顶部的留白距离 下面介绍各个部分的功能及用法: bgcolor: bgcolor 用于指定页面的背景颜色。在 Microsoft 公司的 IE 浏览器中,默认情况下是白色,Netscape 公 司的 Navigator 浏览器的默认情况是灰色。 语法格式: background: background 属性用于指定页面的背景图案。 语法格式: 下面介绍几种文字的属性,可以改变文字的颜色,以及在页面上留出空白: text link alink vlink leftmargin topmargin 他们的作用分别是:非链接文字的颜色;可连接文字的颜色;正被点击的可链接文字的颜色;已被点击的 可链接的文字的颜色;页面左侧的留白;页面顶部的留白。 语法格式: 示例: body 元素示例

这里显示 body 的示例。

说明:对于 link 这样的属性,大多数 html 的页面已经不使用这样的用法了。现在多数是在 head 中加入 相应的代码。要达到的效果是鼠标放到有链接的字体上时,字体变色,点击后字体变为灰色。具体方法如 下: A:link {color:#00007f;} A:visited {color:#65038e;} A:active {color:#ff0000;} A:hover {color:#ff0000;} 将这段代码加入到 head 中,在 body 中加入有链接的文字,就可以看出效果了。这一部分是属于 css 中 的知识。在 body 中加入有链接的文字:在 Dreamweaver 中,选定文字后,在下面的 Properties 中的 link 中加入想要链接到的页面的地址。在 FrontPage 中,选定文字后,点击右键就会有相应的选项。 第一课 基础 Html 是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写 的文件(文档)的扩展名是.html 或.htm,它们是可供 浏览器解释浏览的文件格式。您可以使用记事本、写 字板或 FrontPage Editor 等编辑工具来编写 Html 文件。Html 语言使用标志对的方法编写文件,既简单 又方便,它通常使用<标志名>来表示标志的 开始和结束(例如标志对),因此在 Html 文档中这样的标志对都必须是成对使用的。 当我们畅游 Internet 时,我们透过浏览器所看到的网站,是由 HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、 图片、文字等连结显示出来。 HTML 标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、 双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML 网 页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将 HTML 网页文件由浏览器打开显示,若 测试没有问题则可以放到服务器 (Server) 上,对外发布信息。 HTML 文件基本架构 文件开始 标头区开始 ... 标题区 标头区结束 本文区开始 本文区内容 本文区结束 文件结束 网页文件格式。 标头区 : 记录文件基本资料,如作者、编写时间。 标题区 : 文件标题须使用在标头区内,可以在浏览器最上面 看到标题。 <BODY> 本文区 : 文件资料,即在浏览器上看到的网站内容。 注意事项 通常一份 HTML 网页文件包含二个部份 : <HEAD>...</HEAD> 标头 区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文 件格式。 习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。 第二课 字体 <hn>...</hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会 自动跳下一行。通常用在如章节、段落等标题上。 如 : <h2> 标题 </h2> 标题 如 : <h3 align = center> 标题 </h3> ( 标题置中 ) 标题 <b>...</b> 粗体字。 如 : <b> 粗体字 </b> 粗体字 <i>...</i> 斜体字。 如 : <i> 斜体字 </i> 斜体字 <del>...</del> 横线 ( 表示删除 )。 如 : <del> 横线 </del> <tt>...</tt> 打字体 ( 固定宽度文字 )。 如 : <tt> 打字体 </tt> 打字体 <sup>...</sup> 上标字。 如 : 字体 <sup> 上标字 </sup> 字体上标字 <sub>...</sub> 下标字。 如 : 字体 <sub> 下标字 </sub> 字体下标字 <!...> 注解 ( 不会显示在浏览器上 ),可以多行。 如 : <! 更新日期 : 2000/1/1> 第三课 表格 表格是 html 的一项非常重要功能,利用其多种属性能够设计出 多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页 面更加整齐美观。 常用表格标记 <table>...</table> 表格指令。 相关属性 : ·align 调整 ·bgcolor 背景颜色 ·border 边框 ·height 高度 ·width 宽度 <caption>...</caption> 表格标题。 相关属性 : ·align 调整 <tr>...</tr> 表格列 ( </tr>可省略 ) 。 相关属性 : ·align 调整 <th>...</th> 表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 ) 。 相关属性 : ·align 调整 ·colspan 栏宽 ·rowspan 栏高 <td>...</td> 表格栏资料 ( 储存格 ) ( </td>可省略 ) 。 相关属性 : ·align 调整 ·bgcolor 背景颜色 ·height 高度 ·width 宽度 ·colspan 栏宽 ·rowspan 栏高 举例 如 : ( 基础型 ) <table border=1 align=center> <tr><td>太平洋网络学院<td>太平洋网络学院 <tr><td>太平洋网络学院<td>太平洋网络学院 </table> 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 <table border=1 align=center bgcolor=#ccccff> <caption>表格标题</caption> <tr><td><th colspan=2>行标题 1 <th colspan=2>行标题 2 <tr><th rowspan=2>列标题 1 <td>a <td>a <td>a <td>a <tr><td>b <td>b <td>b <td>b <tr><th rowspan=2>列标题 2 <td>c <td>c <td>c <td>c <tr><td>d <td>d <td>d <td>d </table> 表格标题 行标题 1 行标题 2 列标题 1 a a a a b b b b 列标题 2 c c c c d d d d 第四课 标示 html 提供许多种类的标示标记,作项目标示,而且可以作巢状式标示! 常用标示标记 <li> 标示项目。 如 : <ol> <li>第一项 <li>第二项 </ol> 1. 第一项 2. 第二项 <ol>...</ol> 编号标示,可标示数字或英文、罗马字母。 如 : <ol type=i> <li>第一项 <li>第二项 </ol> i. 第一项 ii. 第二项 <ul>...</ul> 符号标示,可标示数字或英文、罗马字母。 如 : <ul> <li>第一项 <li>第二项 </ul> • 第一项 • 第二项 <dt> 定义项目。 <dd> 定义资料。 <dl>...</dl> 定义标示。 如 : <dl> <dt>十进制 :<dd>0、1、2、3、4、5、6、7、8、9 <dt>十六进制 :<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f </dl> 十进制 : 0、1、2、3、4、5、6、7、8、9 十六进制 : 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 巢状式标示 巢状式标示 如 : <ol><li>第一章 <ol type=i> <li>第一节 <ul> <li>第一段 <li>第二 段 </ul> <li>第二节 </ol><li>第二章<li>第 三章</ol> 1. 第一章 i. 第一节 . 第一段 . 第二段 ii. 第二节 2. 第二章 3. 第三章 其他标示标记 <dir>...</dir> 目录式标示 ( 自动加圆点 )。 如 : 网络学院 : <dir> <li>新手上路 <li>软件教室 <li>设计教室 <li>开发教室 </dir> 网络学院 : • 新手上路 • 软件教室 • 设计教室 • 开发教室 注意事项 标示项目符号也可以用<font>...</font> 标记,以符号字元 ( ○ 、 ◆、◎、★、■...等 ) 标示。 如 :<font color =#ff0000> ● </font> 特殊符号 : 在 html 文件中,有些符号是代表特定的意义的。所以当我们要使 用这些特殊符号时,便要用替代指令。 符号 替代指令 " " 或 " & & 或 & < < 或 < > > 或 > 不可分空格   第五课 区段标记 一个网站不仅要内容丰富外,也要有美观简洁的版面。html 所提供 的区段标记功能,如果可以好好的利用也会有相当不错的效果。 常用区段标记 <hr> 产生水平线。 如 : <hr aling=certen width=90%> <br> 跳下一行。 如 : 太平洋网络学院,<br>网上学电脑的好去处。 太平洋网络学院, 网上学电脑的好去处。 <p>...</p> 段落,跳下一行并加一行空白。 ( </p> 可省略 ) 如 : 太平洋网络学院,<p>网上学电脑的好去处。 太平洋网络学院, 网上学电脑的好去处。 <center>...</center> 置中。 如 : <center>置中</center> 置中 <nobr>...</nobr> 不跳下一行。 如 : <nobr>太平洋网络学院,</nobr>网上学电脑的好去处。 太平洋网络学院,网上学电脑的好去处。 <pre>...</pre> 以文件原始格式显示。 如 : <pre>原始格式: 文件</pre> 原始格式: 文件 第六课 链接 链接可说是 html 中最重要的功能!因为 html 拥有链接的功能,使 你能接上 internet、www ……享受多姿多彩的网络世界。 基本上链接分成 : 外部链接——链接至网络的某个 url 网址或文件,可参考考网络链接方 式。 内部链接——链接 html 文件的某个区段。 网络链接方式 网络链接方式 : //主机名称 / 路径 / 文件名称 网址 如 : http : //www.pconline.com.cn/ 文件传输 如 : ftp : //ftp.pconline.com.cn/ gropher 传输 如 : gropher : //gropher.net.cn/ 远端登入 如 : telnet : //bbs.net.cn/ 文件下载 如 : file : //data/html/file.zip net news 传输 如 : news : talk.hinet.net.cn e-mail 如 : mailto : pcedu@pconline.com.cn 常用链接标记 <base> 设定基本 url 位置或路径,以後只要设定文件名称即会自动加 上位置或路径。 相关属性 : ·href 链接的 url 位址或文件 ·target 指定链接到的 url 位址或文件显示于那一个视窗 ( 可和 <frame> 视窗标记配合使用或开新的视窗 ) 如 : <base href="http : //www.pconline.com.cn/"> <a href="kk.htm">■</a> <base href="http : //www.pconline.com.cn/" target=frame1> <a>...</a> 链接指令。 相关属性 : ·href 链接的 url 位址或文件 ·name 名称 ·target 指定链接到的 url 位址或文件显示于那一个视窗 ( 可和 <frame> 视窗标记配合使用或开新的视窗 ) 如 : 外部链接 <a href="http : //www.pconline.com.cn/">■</a> <a href="http : //www.pconline.com.cn/" target=frame1>■</a> 第六课 链接 内部链接 ·ch1.htm 文件 <a href=#a>■</a> ( 欲链接至 html 文件 a 点 ) <a name=a>■</a> ( html 文件 a 点 ) ·ch2.htm 文件 <a href=ch1.htm#a>■</a> (欲链接至 ch1.htm 文件 a 点 ) " ■ " 表示链接点,可以是文字或图案。( 即游标移到时,会变成手 指形状的地方 ) <link> 链接指令 ( 用于 head 区,设定 css 文件 )。 <meta> 储存应 用资讯,可设定时间载入网页 ( 用于 head 区 )。 相关属性 : ·charset 设定 ·content 回应表头资料内容 , 若是数字表示秒数 ·http-equiv 回应表头 , 若设定为 refresh 载入 url 设定 ·url html 位置 如 : ·设定中文自动跳行。 <meta http-equiv="content-type" content="text/html;charset=gb2312"> ·设定十秒回到首页。 ( 若不设定 html 文件位置则再载入原 html 文 件 ) <meta http-equiv="refresh" content=10 url=index.htm> 设定链接、未链接部份颜色 设定链接、未链接部份颜色,用<body>...</body>标记。 相关属性 : ·alink 按下链接部份未放开时颜色 ·link 未看过的链接部份颜色 ·vlink 已看过的链接部份颜色 如 : <body link=#0000ff alink=#ff0000 vlink=#00ff00> 第八课 设置图片 图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢 网站传输的效率 有关设定图片的方法共有以下几种 : 1. 设定 html 文件背景图片、背景颜色。<body>...</body>标记。 如 : <body background=a.gif>...</body> 或 <body bgcolor=#000000>...</body> 2. 设定图片。<img>标记。 3. 设定地图。<map>...</map>标记。 常用图片标记 <img> 指令 相关属性 : ·align 调整 ·alt 提示字 ·border 边框 ·height 高度 ·src 文件或 url 位址 ·usemap 地图名称 ·width 宽度 如 : 可插入图片 ( gif、jpg 格式 )、avi 电影 <center> <img src="../../../images/pcedu_lo.gif" alt="太平洋网络学院" align=top border=1> </center> <map>...</map> 地图 相关属性 : ·name 名称 <area> 设定地图动作区域 相关属性 : ·coords 设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 ) ·href 动作区域连结点 ( 可载入位址或文件 ) ·nohref 动作区域连结点不动作 ·shape 外型 举例 设定地图 <img border=0 src=a.gif usemap=#a> <map name=a> <area shape=rect coords=0,0,200,100 href=1.htm> <area shape=rect coords=0,100,200,200 nohref> <area shape=rect coords=0,200,200,300 href=3.htm> </map> 第九课 加入声音 html 不仅能插入图片,也可以载入 midi 音乐、wav 音效喔! 常用音乐标记 <bgsound> 背景音乐、音效。 相关属性 : ·loop 循环 , 背景音乐播放次数 ·src 文件或 url 位址 (可为 wav、midi 格式 ) 如 : <bgsound src=m-1.mid loop=true> 内嵌音乐插件 <embed>...</embed> 内嵌插件。 相关属性 : ·height 高度 ·width 宽度 ( 可设百分比% ) ·src 设定内嵌物件的 url 位址 ·loop 循环 , 背景音乐播放次数 ·autostart 自动播放 如 : <embed src=m-1.mid width=145 height=60 autostart=true loop=true></embed> 第十课 滚动条 这是由 ie 提供的滚动条,可不要被众多的属性吓到了,越多的属性功 能越强喔! 【文字卷动标记】 <marquee>...</marquee> 文字卷动 ( 滚动条 )。 【相关属性】 ·behavior = 设定卷动方式 -- alternate 交替来回卷动 -- scroll 卷动 ( 预设 ) -- slide 滑动 ·bgcolor = color 背景颜色 ·direction = 设定卷动方向 ·height = n 高度 ·loop = n 循环 , 卷动次数 ( 预设循环 ) ·scrollamount = n 设定卷动距离 ·scrolldelay = milliseconds 设定卷动时间 ·truespeed = milliseconds 设定卷动速度 ·width = n 宽度 ( 可设百分比% ) 【举例】 如 : <marquee bgcolor=red behavior=alternate direction=left scrollamout=10 scrolldelay=100> <font color=white>太平洋网络学 院</font></marquee> 如 : <marquee bgcolor=green height=50 behavior=scroll direction=up scrollamout=10 scrolldelay=300> <font color=white><center>太平洋网络学院</center></font></marquee> 一 html 的标签 table,tbody,tr,td 称为 html 的标签,以双标签的形式出现,所谓双 标签,也就是有一个<table>就有一个对应的</table>与之对应,同样 适用于其他的双标签。 一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达, 属性可选择使用,不一定全部都用。在整个图片或帖子里双标签以首尾 呼应的方式出现。 <table align=center background="背景图片地址" border=0 cellpadding=0 cellspacing=0 bordercolor=#0000ff width="100%"> <tbody> <tr> <td> 这里是图片,文字或帖子内容. </td> </tr> </tbody> </table> <table> 的常用参数设定: <table width="400" border="1" cellspacing="2" cellpadding="2" align="center" valign="top" background="myweb.gif" bgcolor="#0000ff" bordercolor="#cf0000" bordercolorlight="#00ff00" bordercolordark="#00ffff"> width="400" 表格宽度,接受绝对值(如 width=80)及相对值(width=80%)。 border="1" 表格边框的厚度,不同浏览器有不同的内定值。 cellspacing="2" 表格格线的厚度 align="center" 表格的摆放位置(水平),可选值为: left(居左), right(居右), center(居中) valign="top". 表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。 background="myweb.gif" 表格的背景图片,与 bgcolor 不要同用。 bgcolor="#0000ff" 表格的背景颜色,与 background 不要同用 bordercolor="#cf0000" 表格边框颜色 bordercolorlight="#00ff00" 表格边框向光部分的颜色 bordercolordark="#00ffff" 表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。 播放器宽度 width 和高度 height 的值根据需要自定 二 帖图格式 帖图基本代码如下: <img src="图片连接 url 地址"> <img> 称图形标记,主要用来插入图形标记。 三 文字设制 基本代码如下: <p align=center><font color=#0066ff face=隶书 size=5>插入文字 </font></p> align=center 表示字体居中,可选值为居右(right)居左(left) color=颜色代码 face=字体 常用字体为:宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体 等 size=字体大小,这里的最大值为 7 取值越大文字就越大 四 加入音乐 <embed src="音乐文件地址"> 常用属性如下: src="your.mid" 设定 midi 档案及路径,可以是相对或绝对。 autostart=true 是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。 loop="true" 是否自动反复播放。loop=2 表示重复两次,true 是, false 否。 hidden="true" 是否完全隐藏控制画面,true 为是,no 为否 (内定)。 starttime="分:秒" 设定歌曲开始播放的时间。如 starttime="00:30" 表示从第 30 秒处开 始播放。 volume="0-100" 设定音量的大小,数值是 0 到 100 之间。内定则为使用系统本身的设定 width="整数" 和 high="整数" 设定控制面板的高度和宽度。(若 hidden="no") align="center" 设定控制面板和旁边文字的对齐方式,其值可以是 top、bottom、 center、baseline、 left、right、texttop、middle、absmiddle、 absbottom controls="smallconsole" 设定控制面板的外观。预设值是 console。 console 一般正常面板 smallconsole 较小的面板 playbutton 只显示播放按钮 pausecutton 只显示暂停按钮 stopbutton 只显示停止按钮 volumelever 只显示音量调节按钮 贴音乐的完整语法如下: 一: 隐藏播放器 <embed src="音乐文件地址" hidden=true autostart=true loop=true> 二: 不隐藏播放器 <embed src="音乐文件地址" width="" height=""> 入门 HTML> <HEAD> <TITLE> 我的页面 网页的内容....... 例 1-1 当你点开任何网页的源文件的时候,相信都可以在长长的字符中寻找到上面这些 单词,或者你现在把上面这些单词复制到你新建的文档文件中,保存之后把后缀 名改成.html,一个网页就诞生了。这就是 HTML 语言,它不象 C++,VB 等等程序 语言要你摸不清头脑,HTML 语言只是一个在 SGML 定义下的描述性语言,或者说 是标识语言。 既然是标识语言,我们就从标识开始进行学习好了,也许当你完全掌握标识之后, 就会发现基本上已经明白什么是 HTML 了。 标识的写法: 1.任何标识都应该写在"<"和">"之间,如 2.标识的字母没有大小写的区分。 3.在起始标识中加入“/”就是终止标识,一般情况下有起始表示就有终止标识。 例如... 4.有的标识需要加入参数,有的不必,需要注意的是这些参数只能加在起始标识 中。 现在我们开始认识第一类标识:文件标识 事实上你已经见过了这些标识,没错就是 ; ; ; , <html>.....</html> 这段标识告诉浏览器现在运行 HTML 文件,所以你写 HTML 文件都应该以<html> 开头,</html>. <head>.....</head> 这是 HTML 文件的开头部分,相应的<body>...</body>就是本文部分,开头部分 主要是用来记载关于这个页面的一写重要资讯,所以呢大部分的标记都将在本文 部分进行应用。 <title>... 这里的文字就成了你所建立页面的标题,你可以更改一下例 1-1 中非标记部分。 这些标记就构成了 HTML 的基本构架,其中只有具有参数设定,我们就通过 一个例子还认识好了 text="" 用以设定文字颜色。 link="" 设定一般文字连结颜色。 alink="" 设定刚按下时文字连结颜色。 vlink="" 设定连结后的颜色。(被按过)。 background="" 设定背景墙纸。 bgcolor="" 设定背景颜色。 leftmargin= 设定整份文件显示画面的左方边沿空间,单位为像素。 topmargin= 设定整份文件显示画面的上方边沿空间。 bgproperties="fixed" 固定背景墙纸,当卷动文字时墙纸不会跟著卷动。 这里需要说明的是色彩的问题,色彩是用 16 进制的 红-绿-蓝 (red-green-blue, RGB) 值来表示的,所以一个颜色也就由 RRGGBB 的格式构成, 而 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. #000000, 其中红=00,蓝=00,绿=00,色彩即为黑色 #0000FF,其中红=00,绿=00,蓝=ff,色彩即为蓝色 如果你想深入了解色彩的问题,你可以查看诸如 FLASH 等等软件的色彩表. 首先我们看, 这两个标识都是用于控制字体的大小,色彩,字体,但可以用于 之间,控制全文的文字;而只应用与之间, 控制在它选择范围中的文字.两个标识出现在一个 html 文件中的时候,没有被 选择的文字才会受到的影响。 下面我们就来看一个例子: H.S Workshop 欢迎来到H.S Workshop [例 2-1] 我们看到告诉 IE 全文用 7 号黑色 Arial 字体显示,但 H.S Workshop 被我们用围住了,所以执行的设定.这里有 face=,size=,color=三 个参数可以进行设定, face= 设定字体。 size= (1,2,3,4,5,6,7,-x,+x) 设定字体大小,这里需要注意的是相对值和绝对值,我们在例 2-1 中, 把 的 size 的值改成"-2"你会发现效果是一样的,相应的把的 size 值改 成其他任何小于 7 的数值,你就会发现改变。我们在这里就把 size="-2"称为相 对值,被围住的文字在的基础上,减少 2 个字符大小,公式为 "n-/+x".当然只有可以设定相对值。 color= 设定文字色彩. 这里我们还发现了一个问题,没有终止标识,但它一样可以实现它的 功能,这就是 HTML 的空标识,因为我们看到没有存在的意义,所以 可以忽略,当然如果你在后面添加对整个 html 文件也没 有影响。其他的我们就称之为围堵标识。 接下来看...(n=1,2,3,4,5,6) 这是一个标题标识,从 1 到 6 替减,是一个围堵标识,我们需要注意的是这个标 识独占一行并自动插入一个空行,你可以自己尝试一下,这里就不举例说明了。
: 这是对文字进行一些特殊处理的标识,我们就来看看他们的效果来进行学习好了. 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop 欢迎来到 H.S Workshop
欢迎来到 H.S Workshop
欢迎来到 H.S Workshop 你是否已经了解了呢,这些就是 HTML 实现字体特殊效果的标识,唯一特别的是,
可以不用插入
换行。至于
是什么,我想看了明天的排版标识 我就可以了解了。 昨天我们已经认识了文字标识,为了让整个网页更清晰美观,我们就不可以少了 排版标识,那么现在就要我们开始来认识他们吧。 现在比较讲知识产权,呵呵~我们就先来看看如何告诉别人这是你的产权好了, 当然我们还可以用它来告诉你的工作伙伴,这段开始是什么,那就是 HTML 和其他的程序语言一样,可以在代码中添加注释,来告诉别人这里开始写 的是什么,当然这也是告诉自己,方便以后的管理,不过你放心,这只存在于你 的原代码中,不会在浏览器中发生任何影响。 现在我们开始认识对段落控制的标识,

,
,.

我们可以把他看做一个空行标识,既在网页中显示一段空白行,一般在 DW 或者 FG 等网页编辑工具中,回车即在 HTML 插入一个

,这也是一个空标记,他的 常用参数是 align="#"(#=right, left, center) 分别表示左对齐,右对齐,居中。默认值为 left. 实现一下下面的例子你就明白了: H.S Wrokshop

H.S Wrokshop

H.S Wrokshop

H.S Workshop [例 3-1]
,
这两个标记分别表示换行和不换行,前者使网页中的元素直接在下一行,不插入 空行,后者则表示不 换行,对于一些必须在一行中显示的文字,对电话号码等 等的显示比较有用。这里的
是个空标识,
是围堵标识.需要注意的是 align=""在 BR 中没有的意义. 这时候我们就要通过一个另一个标识来实现对齐效果,

....
,当然这 个标识有它更广泛的用途,在这里只简单的提一下其中的对齐参数运用。下面我 们就来看一个简单的例子。
H.S Workshop
H.S Workshop

H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop
H.S Workshop
H.S Workshop
H.S Workshop
[例 3-2] 这样一来我们就可以实现对
的对齐效果了。 ,
, 现在我们把 align=""的三个值提出来,发现他们其实自身也是标识,它们可以 对单个,单行文字进行围堵,实现他的效果,这样又多了一个途径实现
的对 齐效果了,具体的就举例说明了,你可以自行尝试一下,注意,他们可是围堵标 识哦。 这里把它从换行中分出来,是想大家于
对比一下,这是个建议折行的标识, 当用户的分辨率无法完整的显示出一段文字的时候,你就可以插入这个标识,这 时候就会发生于
同样的效果,如果达到了条件则没有效果产生,你可以自己 尝试一下,它是一个空标识。接着我们来看看 HTML 两个在排版上非常使用的标 识。
,   预格式化文本标识,他们允许你在 HTML 原文件里输入空白,并显示出和你在 HTML  编辑的一模一样的格式,区别就在<pre>显示出来的是设定好了的字体大小,  <listing>显示小于设定的一号字体, 〈xmp>则在<pre>的基础上把 html 里的标  识也显示出来。   <pre>   Please use your card.   VISA Master   <b>Here is an order form.</b>   <ul><li>Fax   <li>Air Mail</ul>   </pre>   <listing>   Please use your card.   VISA Master   <b>Here is an order form.</b>   <ul><li>Fax   <li>Air Mail</ul>   </listing>   <xmp>   Please use your card.   VISA Master   <b>Here is an order form.</b>   <ul><li>Fax   <li>Air Mail</ul>      大家可以自己看看三者的效果。   
今天的最后一个标识称为水平线。顾名思义,它实现插入一条水平线的效果。
。 align= 设定线条置放位置,可选择:left;right;center 三种设定值。 size= 设定线条厚度,以像素作单位. width= 设定线条长度,可以是绝对值(以像素作单位)或相对值,默认值为 100%。 color= 设定线条颜色,内定为黑色. noshade 设定线条为平面显示,若删去则具阴影或立体,这是默认值。 通过这三天的学习,你是否可以运用已知的标识写出一个网页了呢?呵呵~这就 开始尝试一下吧. 今天我们学习的只有一个标识,重点并不在这个标标识本身,而在于这个标识的 参数设置,现在我们就来认识一下吧。 图形对于一个网页来说其占的位置尽次于文字所占的比重,我们同过这个标识在 网页中加入一张图片做到图文并茂,它只是一个空连接,现在我们就来看看它的 参数设定。 src= 首先我们必须向 HTML 中导入一张图片,这张图片的格式可以是 jpg,gif 或者 png,同时我们还要注意导入图片的途径书写,当你要求导入的图片和显示此图 的 html 在同一个文件夹下,我们就可以只写文件名即可,如则需要完整的途径 表示。 width=,height= 设定图象显示的大小,以象素为单位,不过一般情况下为了保持页面的美观,我 们使用真实的大小为佳,通过专业的图形编辑工具来编辑图形的大小。 border= 设定图象边框的大小,单位也是象素,它可以是任何数值,在现代网页编辑中通 常取值为 1。 hspace=,vspace= 设定图象边缘的空白数,hspace 设定左右,vspace 设定上下,这样可以确保其 他元素与图片的距离。 align=(top, middle, bottom, left, right)默认值为 botom 这个参数昨天我们已经讲过,在这里我们我们需要注意的是它的作用是控制文字 的位置,具体的运用我们就通过这下面的例子来看看好了. alt= 在图片显示的位置插入一段文字,当图片还没有被读取或这浏览者使用的是文字 游览器的时候,这段文字就会显示出来。 lowsrc= 同样在显示 src 所显示的图片之前先显示出一张图片,条件也是在 src 还没有被 读取的时候,一般我们用于显示原图片的缩略图,使浏览者不会因为图片读取慢 而失去浏览的兴趣。 表格在网页排版中所占的比重不用说相信大家也都知道,它把整个页面清晰的分 成多个区域。专业的网页怎么可以少了对表格的操作呢~现在我们就来看看关于 表格的标识。 首先我们必须建立一个表格,我们可以通过着个围堵标识来实现,着个 标识的作用就好象告诉浏览器开始处理 HTML 文件一样,它告诉浏览器现 在开始处理表格,其他所有的表格标识都必须写在
里面。 关于它的参数比较多,我们现在一个个来看它有什么作用。
windth= 设定表格的宽度,一般来说在这层我们只需要指定一个表格的宽度就可以了。这 个值可以是绝对的也可以是相对的。 border= 设定表格边框的厚度,当取值为 0 时或者不用这个参数的时候,表格就不在浏览 器中显示出来,但表格中的元素仍然是按表格排列。 cellspacing= 表格线的厚度,为了和 border=区别开来,我们看个例子
1 2
3 4
1 2
3 4
[例 5-1] 比较一下这两个例子,我们就可以很清晰的看到两个例子的不同. cellpadding="" 文字和格线之间的距离,使文字看起来更清晰。 align=""(left, right, center) 这个值在前面我们已经重复的介绍过了,这里是对表格的位置进行水平位置设定. valign=""(top, middle, bottom) 这是对表格垂直位置的设定. background="" 导入表格的背景图片。 bgcolor="" 设定表格的背景颜色。 bordercolor="" 设定表格的边框颜色。(注意,当设定 border=为 0 时,这个值无效) bordercolorlight="" 设定表格边框向光部分的颜色. bordercolordark="" 设定表格边框背光部分的颜色. cols="" 表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己. frame=""(box,above,below,hsides,vsides,lhs,rhs,void) 显示边框,参数的含义依此是:显示所有边框,只显示上边框,只显示下边框, 只显示上下边框,只显示左右边框,只显示左边框,只显示右边框,不显示任何 边框. rules=""(all,groups,rows,cols,none) 显示分隔线,参数的含义依此是:显示所有分隔线,只显示组与组之间的分隔线, 只显示行与行之间的分隔线,只显示列与列之间的分隔线,不显示任何分隔线。 建立了一个表格区,接着我们就要把这个表格分开,那么就必须用到 这个标识,一般我们添加多少个就表格就会分成多少行。一个表格的 基本格式如下:
[例 5-2] 现在我们就来看看的参数设定吧。 align=""(left, right, center) 这就不多说了。水平位置的设定. valign=""(top, middle, bottom) 垂直位置的设定琀?瑧?瑬;开嫞??????。 bgcolor="" 这一列的背景色。 bordercolor="" 这一列的边框颜色 。 bordercolorlight="" 这一列的向光部分. bordercolordark="" 这一列的背光部分. 有了列,就要开始设定单元格,可以说单元格就是一个表格的最小单位。我们用 过来实现.在下面写入多少个就会在这一列中显示出多 少个单元格。然后我们来看看对单元格有些什么参数可以设定吧。 windth="" 通过相对值或绝对值设定这个单元格的宽. height="" 通过相对值或绝对值设定这个单元格的高. colspan="" rowspan="" 这里我们看一个例子来说明一下好了.
第一列第一栏 第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
第三列第二栏 第三列第三栏
第一列第一栏 第一列 之 第二栏及第三栏 第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏 第三列第二栏 第三列第三栏 [例 5-3] 同过标识,我们看到这实际上是个三列三行的表格,如果只看第一行第一列是不 是认为这是两行两列的呢。没错,colspan 就是向右合并单元格,rowspan 则是 向下合并单元格. align=""(left, right, center) 元素水平位置设定. valign=""(top, middle, bottom) 元素垂直位置设定. background="" 导入单元格的背景图片。 bgcolor="" 设定单元格的背景颜色。 bordercolor="" 设定单元格的边框颜色。(注意,当设定 border=为 0 时,这个值无效) bordercolorlight="" 设定单元格边框向光部分的颜色. bordercolordark="" 设定单元格边框背光部分的颜色. 另一个单元格表示,它同样也表示一个单元格,唯一不同的是所 标示的储存格中的文字是以粗体出现,当然若为所标示的储存格中的文字加 上粗体标记便等如的效果。用它取代即可显示效果,关于它的参数和 一样,这里就不详细说明了. 今天最后一个标识,它可以在表格上显示出一段没有格线的列。通常 我们把他来给表格内容命题。关于它的参数有两个,分别是 align 和 valigan,(left, right, center,top, middle, bottom)
此处加入文章内容
标签的分析: :表格的起始符。任意一个表格的开始都必须以它开头, 且必须有终止符
。 cellspacing:单元格间距。当一个表格有多个单元格时,各单 元格的距离就是 cellspacing 了,如若表格只有一个单元格,那么,这 个单元格与表格上、下、左、右边边框的距离也是 cellspacing。 width:表格的宽度。取值从 0 开始,默认以像素为单位,与显 示器的分辨率的像素是一致的。800×600 的显示分辨率下,如果表格 设置成 1000 个像素的宽度,那么,得出的效果将导致 IE 的横向滚动条 出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表 格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比, 如 widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的 宽度来自我调整宽度。 background:表格的背景图。其值为一个有效的图片地址。 也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样, 当图片不能显示时,表格的外观依然是好看的。 :表体的起始符。紧跟在之后,表示表体开始。 必须有终止符</tbody>,放在
之前。在纯网页中可以不要 tbody 元素,但在论坛一定要使用,因为,当帖子用到较多的表格时, 论坛的自动填充功能将可能会导致代码出错。 :表示表格的行,其中,t 是 table,r 是 row(行)。有 多少组 tr,这张表格就有多少行。紧跟在之后。必须有终 止符。 :表示表格的列,t 是 table,d 可理解为 down(向下)。有 多少组 td,这张表格就有多少列。紧跟在之后。终止符为 。td 与 tr 配合构成单元格。 1:borderColorDark=#0d1737 暗边框,颜色为 0d1737 当 border 值不 为 0 时设置有效。暗边框指表格的右边和下边的边框。 2:borderColorLight=#24387a 亮边框,颜色为 24387a 当 border 值 不为 0 时设置此值有效。亮边框指表格的左边和上边的边框。 3:cellpadding:单元格衬距。指该单元格里的内容与 cellspacing 区域的距离,如果 cellspacing 为 0,则表示单元格里的内容与表格周 边边框的距离。
还剩46页未读

继续阅读

pdf贡献者

czj8329484

贡献于2012-09-11

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!