三、HTML利用超链接打开链接文件
3. 1 、建立超链接
点击 当中的内容,即可打开一个链接文件,href 属性则表示这个链接文件的路径。 使用 target属性,可以在一个新窗口里打开链接文件。 HTML语言如下:
效果如下:
3. 2 、将一个图片作为一个超链接
演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。 HTML语言如下:
效果:
3. 3、 title属性
使用title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 如果希望注释多行显示,可以使用 作为换行符。 HTML语言如下:
效果:
3. 4 、 name 属性
使用 name 属性,可以跳转到一个文件的指定部位。 使用name 属性,要设置一对。一是设定 name的名称,二是设定一个 href指向这个 name: HTML语言如下:
第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)的表格
一行三列的表格
两行三列的 表格
效果如图: 4. 1、 border属性 在缺省情况下,如果不设置表格的边界,表格是不显示边界的。 示例: HTML语言如下: 缺省 border情况下,表格没有边界。
表格Border设为0,也不显示边界:
表格的border(边界)值设为8,边界更粗:
效果如图: 4. 2、表格的表头 用 | 来表示表格的表头,表头的字是粗体显示的。 HTML语言如下:横向表头的表格:
竖直方向的表头:
效果如图: 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表示图片的路径和文件名。
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表示禁用右键菜单;