html语言简单,HTML语言范例

313676_201403141840050284.jpg

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

3. 1 、建立超链接

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

  这是百度的链接

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

效果如下:

313676_201403141841450440.jpg

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

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

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

效果:

313676_201403141842440003.jpg

3. 3、 title属性

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

  川音成都美术学院

川音成都美术学院

效果:

313676_201403141844040878.jpg

3. 4 、 name 属性

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

  参见第5章

 

第1章

这个是练习name属性的。

 

第2章

这个是练习name属性的。

  

第3章

这个是练习name属性的。

  

第4章

这个是练习name属性的。

  

第5章

这个是练习name属性的。

效果:

313676_201403141845350175.jpg

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

3. 5、链接到email地址

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

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

效果:

313676_201403141847160753.jpg

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

313676_201403141848070112.jpg

四、如何创建HTML表格

HTML表格用

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

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

只有一行(Row)一列(Column)的表格
100
一行三列的表格
100200300
两行三列的 表格
100200300
400500600

效果如图:

313676_201403141849290253.jpg

4. 1、 border属性

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

缺省 border情况下,表格没有边界。
100200300
400500600
表格Border设为0,也不显示边界:
100200300
400500600
表格的border(边界)值设为8,边界更粗:
第一
第二

效果如图:

313676_201403141851580050.jpg

4. 2、表格的表头

来表示表格的表头,表头的字是粗体显示的。   HTML语言如下:
横向表头的表格:
姓名电话传真
Bill Gates555 77 854555 77 855
竖直方向的表头:
姓名Bill Gates
电话555 77 854
传真555 77 855

效果如图:

313676_201403141854360893.jpg

4. 3、空的单元格

如果表格的单元格

Some textSome text
Some text

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

Some textSome text
 Some text

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

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

效果如下:

313676_201403141856140253.jpg

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

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

用colpsan属性,设置包含多列的单元格:
姓名联系方式
Bill Gates555 77 854555 77 855
用rowspan这个属性,设置包含多行的单元格:
姓名Bill Gates
联系方式555 77 854
555 77 855

效果如图:

313676_201403141857300050.jpg

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

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

给表格设置背景颜色:
第一
第二
给表格加背景图片:
第一第一
第二第二
第三第三
第四第四

效果如图:

313676_201403141858480347.jpg

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

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

单元格背景色:
第一
第二

效果如图:

313676_201403141900370331.jpg

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

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

分数期中考试期末考试
小明250.1050000.20
小明的同桌1000.005000.45
王大为2000.40500.00
黄新300.50800.65

效果如图:

313676_201403141901340706.jpg

五、HTML框架(Frames)

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

5. 1、 Frameset  

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

使用 cols属性,表示按列分布Frame;

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

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

效果:

313676_201403141902530190.jpg

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

效果如下:

313676_201403141905370143.jpg

混合模式:   HTML语言如下:

效果:

313676_201403141907000690.jpg

5. 2、 Iframe

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

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

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

效果:

313676_201403141908520003.jpg

六、HTML表单 (Forms)

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

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

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

表单控件 (Form Contros)  说明

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

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

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

效果:

313676_201403141909520784.jpg

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

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

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

选择

苹果

桔子

芒果

效果:

313676_201403141911160862.jpg

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

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

6. 4、下拉框 (select)

HTML语言如下:

苹果

桔子

芒果

效果:

313676_201403141915080675.jpg

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

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

输入用户姓名和密码


请输入你的密码: 

效果:

313676_201403141915540831.jpg

七、HTML图片 (Images)

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

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

7. 1、图片 align 属性

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

图片的上下对齐方式:

xsi11.jpg对齐方式:top

xsi11.jpg对齐方式:middle

xsi11.jpg对齐方式:bottom

图片的左右对齐方式:

xsi11.jpg对齐方式:left

xsi11.jpg对齐方式:center

xsi11.jpg对齐方式:right

效果:

313676_201403141917170925.jpg

7. 2、 图片的大小

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

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

smile.jpg

smile.jpg

smile.jpg

smile.jpg

效果略

7. 3、背景图片

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

这个网页有背景图片哦!

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

效果:

313676_201403141918370425.jpg

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

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

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

xsi11.jpg

效果:

313676_201403141920250097.jpg

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

313676_201403141921110972.jpg

八、HTML字体 (Fonts)

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

8. 1、 字体大小

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

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

8. 2、 字体颜色

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

这一段的字体颜色是红色

改变字体和字体大小

第一章 静态网页

示例:  HTML语言如下:

字体颜色 font color

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

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

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

效果:

313676_201403141922270503.jpg

  2053615825_2.jpg

上面这段代码可以使图片动起来 蓝色部分都可以修改   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表示禁用右键菜单;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值