html语言设置网页名称,HTML语言范例

三、HTML利用超链接打开链接文件

3. 1 、建立超链接

点击当中的内容，即可打开一个链接文件，href 属性则表示这个链接文件的路径。使用 target属性，可以在一个新窗口里打开链接文件。 HTML语言如下：

这是百度的链接

从新的页面打开网易的主页

效果如下：

3. 2 、将一个图片作为一个超链接

演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。 HTML语言如下：

你可以将一张图片作为一个链接，点击这个图片。

效果：

3. 3、 title属性

使用title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。如果希望注释多行显示，可以使用作为换行符。 HTML语言如下：

川音成都美术学院

效果：

3. 4 、 name 属性

使用 name 属性，可以跳转到一个文件的指定部位。使用name 属性，要设置一对。一是设定 name的名称，二是设定一个 href指向这个 name： HTML语言如下：

参见第5章

第1章

这个是练习name属性的。

第2章

这个是练习name属性的。

第3章

这个是练习name属性的。

第4章

这个是练习name属性的。

第5章

这个是练习name属性的。

效果：

单击第一张图的“参见第5章”就跳到第二张图的效果。

3. 5、链接到email地址

在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建 mail 的窗口。用可以实现这样的功能。 HTML语言如下：

这是一个最简单的邮箱地址的链接：给自己的邮箱发信

效果：

单击上图中的“给自己的邮箱发信”就会得到下图这个对话框。

四、如何创建HTML表格

HTML表格用

表示。示例： HTML语言如下：

表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。

只有一行(Row)一列(Column)的表格

100

一行三列的表格

100

200

300

两行三列的表格

100	200	300
400	500	600

效果如图：

4. 1、 border属性

在缺省情况下，如果不设置表格的边界，表格是不显示边界的。示例： HTML语言如下：

缺省 border情况下，表格没有边界。

100	200	300
400	500	600

表格Border设为0，也不显示边界：

100	200	300
400	500	600

表格的border(边界)值设为8，边界更粗：

第一	行
第二	行

效果如图：

4. 2、表格的表头

用

来表示表格的表头，表头的字是粗体显示的。 HTML语言如下：

横向表头的表格：

姓名	电话	传真
Bill Gates	555 77 854	555 77 855

竖直方向的表头：

姓名	Bill Gates
电话	555 77 854
传真	555 77 855

效果如图：

4. 3、空的单元格

如果表格的单元格

Some text	Some text
	Some text

上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。

Some text	Some text
	Some text

上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。

注意：空格符要用&bsp;表示。是一个HTML特别字符，参见HTML特别字符(HTML CharacterEntities)。

效果如下：

4. 4、包含多列或多行的单元格

这个示例演示如何用 colspan，rowspan设置多列或者多行的单元格。 HTML语言如下：

用colpsan属性，设置包含多列的单元格：

姓名	联系方式
Bill Gates	555 77 854	555 77 855

用rowspan这个属性，设置包含多行的单元格：

姓名	Bill Gates
联系方式	555 77 854
联系方式	555 77 855

效果如图：

4. 5、设置表格的背景颜色和背景图片

这个示例演示如何用 bgcolor属性设置表格的背景颜色，如何用background 属性为表格添加背景图片。 HTML语言如下：

给表格设置背景颜色：

第一	行
第二	行

给表格加背景图片：

第一	行	第一	行
第二	行	第二	行
第三	行	第三	行
第四	行	第四	行

效果如图：

4. 6、设置单元格的背景颜色和背景图片

这个示例演示如何用 bgcolor 属性设置单元格的背景颜色，如何用 background 属性为单元格添加背景图片。 HTML语言如下：

单元格背景色：

第一	行
第二	行

效果如图：

4. 7、单元格内容的对齐方式

这个示例教你如何用 align属性设置单元格的对齐方式。 HTML语言如下：

分数	期中考试	期末考试
小明	250.10	50000.20
小明的同桌	1000.00	5000.45
王大为	2000.40	500.00
黄新	300.50	800.65

效果如图：

五、HTML框架(Frames)

使用框架 (Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。

5. 1、 Frameset

决定如何划分Frame。有cols属性和rows属性。

使用 cols属性，表示按列分布Frame；

使用 rows 属性，表示按行分布Frame。

列(cols)的示例： HTML语言如下：

效果：

行(rows)的示例： HTML语言如下：

效果如下：

混合模式： HTML语言如下：

效果：

5. 2、 Iframe

Iframe是 Inline Frame 的意思，用可以将 Frame 置于一个HTML文件内。 HTML语言如下：

用 IFRAME 可以在HTML文件里显示另一个网页。

这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。

效果：

六、HTML表单 (Forms)

HTML表单 (Form) 是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

6. 1、 HTML表单(Form)常用控件(Controls)

HTML表单 (Form) 常用控件有：

表单控件 (Form Contros) 说明

6. 2、表单控件(Form Control)：

单行文本输入框 (input type="text") 单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。 HTML语言如下：

输入用户姓名请输入你的姓名：

效果：

6. 3、表单控件(Form Control)：

A、复选框(input type="checkbox")

复选框允许用户在一组选项里，选择多个。 HTML语言如下：

选择

苹果

桔子

芒果

效果：

B、单选框(input type="radio")

使用单选框，让用户在一组选项里只能选择一个。

6. 4、下拉框 (select)

HTML语言如下：

苹果

桔子

芒果

效果：

6. 5、密码输入框 (input type="password")

密码输入框 (input type="password") 主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是“*”符号。 HTML语言如下：

输入用户姓名和密码

请输入你的密码：

效果：

七、HTML图片 (Images)

用这个 Tag 可以在HTML里面插入图片。

最基本的语法如下： url url表示图片的路径和文件名。

7. 1、图片 align 属性

用 align 属性，可以改变图片的垂直 (居上、居中、居下) 对齐方式和水平对齐方式 (居左、居中、居右) 。 HTML语言如下：

图片的上下对齐方式：

对齐方式:top

对齐方式:middle

对齐方式:bottom

图片的左右对齐方式：

对齐方式:left

对齐方式:center

对齐方式:right

效果：

7. 2、图片的大小

在缺省状况下，图片显示原有的大小。你可以用 height 和 width 属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。

你可以使用Height和Width属性来改变图片的大小。

效果略

7. 3、背景图片

这个示例演示如何将一个图片作为HTML网页的背景图片。 HTML语言如下：

这个网页有背景图片哦！

如果图片比页面小，图片会自动重复。

效果：

7. 4、将一个图片作为一个超链接

这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。 HTML语言如下：

你可以将一张图片作为一个链接，点击这个图片。

效果：

单击上图中的“图片”，就能打开下图这样一张“完整的图片”。

八、HTML字体 (Fonts)

在HTML里，可以用 font这个元素及其属性来设定字体的大小，颜色和字体风格。

8. 1、字体大小

用字体大小属性 (size) 来设定字体的大小。

这一段的字体大小的值是2。

8. 2、字体颜色

用颜色属性 (color) 来设定字体颜色。

这一段的字体颜色是红色

改变字体和字体大小

第一章静态网页

示例： HTML语言如下：

字体颜色 font color

这一段的字体大小的值是2。

这段文字用的是缺省的字体颜色。

这段文字的字体颜色为红色。

效果：

上面这段代码可以使图片动起来蓝色部分都可以修改 hspace="500" vspace="50" 可以调节图片的位置hspace

九、音乐、视频

9. 1、加背景音乐标记：

下表给出有关上面的语法的一些具体的值和含义：

src：音乐文件的路径及文件名；

autostart：true为音乐文件上传完后自动开始播放，默认为 false(否)。

loop：true 为无限次重播，

false 为不重播，

某一具体值(整数)为重播多少次。

Volume：取值范围为“0-100”，设置音量，默认为系统本身的音量

Starttime： “分：秒”，设置歌曲开始播放的时间，如：

starttime=“00:10”，从第10秒开始播放。

endtime： “分：秒”，设置歌曲结束播放的时间

width：控制面板的宽

height：控制面板的高

示例： HTML语言：

加背景音乐

9. 2、加音乐控制器

实例：

9. 3、加影片

示例：

加影片

a表示重复播放电影几次，如为0的话就让电影无限循环；

< param name=”AutoStart” value=”a” >

a表示是否自动播放电影，为1表示自动播放，0是按键播放；

< param name=”ClickToPlay” value=”a”>

a 点击控制播放状态，为1表示用鼠标点击控制播放或暂停状态，为0是禁用此功能；

< param name=”DisplaySize” value=”a” >

a 为1表示按原始尺寸播放

< param name=”EnableFullScreen Controls” value=”a”>

a 为1表示允许切换为全屏，为0则禁止切换；

< param name=”ShowAudio Controls” value=”a”

a 为1表示允许调节音量，为0禁止调节；

< param name=”EnableContext Menu” value=”a”

a 为1表示允许使用右键菜单，为0表示禁用右键菜单；