文档库
文档库 最新最全的文档下载
当前位置：文档库 › HTML语言_范例

HTML语言_范例

HTML语言_范例
HTML语言_范例

HTML语言_范例

一、一些基础的HTML Tag（类别）

1.1：一个非常简单的HTML文件

HTML语言如下：

</p><p>我的第一个网站</p><p>

这是一个非常简单的HTML。

效果如下：

这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML 文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML文件有个最初的认识。

1.2：更多段落

这个示例显示了段落的特性，在HTML里用

和

划分段落。

HTML语言如下：

这是第一段。

这是第二段。

这是第三段。

在HTML里，用p来定义段落。

效果如图：

1.3：换行

这个示例告诉你如何在HTML文件里换行。

HTML语言如下：

要
在一段
里
换行
请使用
br这个Tag。

效果如下：

通过使用
这个Tag，可以在不新建段落的情况下换行。用

换行是个坏习惯，正确的是使用
。

1.4：正文标题

这个示例教会你如何在HTML文件里显示正文标题。HTML用

到

这几个Tag 来定义正文标题，从大到小。每个正文标题自成一段。

HTML语言如下：

这是1号标题

这是2号标题

这是3号标题

这是4号标题

这是5号标题

这是6号标题

效果如图：

1.5：居中的正文标题

这个示例告诉你如何将正文标题居中显示。使用

与
表示居中。

HTML语言如下：

这是1号标题

上面的标题是居中显示的。

效果如图：

1.6：加条横线

HTML语言如下：

用hr这个Tag可以在HTML文件里加一条横线。

你看到上下的横线了吗？

初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……

效果如下：

1.7：代码注释

这些注释只显示在HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。

HTML语言如下：

代码注释是不会显示在网页里的。

效果如图：

1.8：背景颜色

可以直接写颜色的英文名，也可以找到色彩的数字代码。

HTML语言如下：

看，这个页面是黄色的。

效果：

二、HTML常用格式

2.1HTML常用的格式

HTML语言如下：

粗体用b表示。

斜体用i表示。

芙蓉姐姐这个词当中划线表示删除。

想唱就唱这个词下划线插入。

X2其中的2是下标

X2其中的2是上标

好好学习，天天向上。这句话缩进表示引用

这是
预设(preformatted)文本.
在pre这个tag里的文本保留
空格和
分行。

call getOrders

用code显示计算机代码，code里显示的字符是等宽字符。

效果：

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

3.1建立超链接

点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。

使用target属性，可以在一个新窗口里打开链接文件。

HTML语言如下：

这是百度的链接

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

效果如下：

3.2将一个图片作为一个超链接

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

HTML语言如下：

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

效果：

使用title属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

如果希望注释多行显示，可以使用 作为换行符。

HTML语言如下：

川音成都美术学院

川音成都美术学院

效果：

使用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表格用

表示。一个表格可以分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。

HTML语言如下：

表示。

示例：

HTML语言如下：

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

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

100

一行三列的表格

100200300

两行三列的

表格

100200300
400500600

效果如图：

4.1border属性

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

示例：

HTML语言如下：

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

100200300
400500600

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

100200300
400500600

表格的border（边界）值设为8，边界更粗：

第一行
第二行

效果如图：

4.2表格的表头

用

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

横向表头的表格：

姓名电话传真
Bill Gates5557785455577855

竖直方向的表头：

姓名Bill Gates
电话55577854
传真55577855

效果如图：

4.3空的单元格

如果表格的单元格

Some textSome text
Some text

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

界值。

Some textSome text
 Some text

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

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

效果如下：

4.4包含多列或多行的单元格

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

HTML语言如下：

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

姓名联系方式
Bill Gates5557785455577855

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

姓名Bill Gates
联系方式55577854
55577855

效果如图：

4.5设置表格的背景颜色和背景图片

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

HTML语言如下：

给表格设置背景颜色：

第一行
第二行

给表格加背景图片：

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

效果如图：

4.6设置单元格的背景颜色和背景图片

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

HTML语言如下：

单元格背景色：

第一行
第二行

效果如图：

4.7单元格内容的对齐方式

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

HTML语言如下：

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

效果如图：

五、HTML框架(Frames)

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

5.1Frameset

决定如何划分Frame。有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。

列（cols）的示例：

HTML语言如下：

效果：

超文本标记语言

第1章HTML基础 HTML(超文本标记语言)是制作网页的基础。HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。 一个HTML文件中包含了所有将显示在网页上的文字信息。其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。 教学目标 通过对本章的学习，读者应了解和掌握HTML的各种标记和语法，并能够使用HTML 设计简单的静态网页。 教学重点与难点 ●使用HTML设计静态网页 ●编辑网页文本格式 ●创建超链接 ●使用表格 ●使用列表 1.1 网页基础知识 Internet是从Interconnected Networks延伸而来的，是跨国界的网络。Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。 1.1.1 万维网——WWW WWW(World Wide Web)即环球信息网，也可以称为Web，中文名字为“万维网”。 用户在使用浏览器来访问Web的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。WWW 是Internet上发展最快和目前使用最广泛的一种服务。

简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。 1.1.2 超文本传输协议——HTTP HTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。通过这一跨平台的通信协议，在WWW任何平台上的电脑都可以阅读远方服务器(Server)上的同一文件。 HTTP协议经常用来在网络上传送Web页。当用户以http://开始一个超链接的名字时，就是告诉浏览器去访问使用HTTP协议的Web页。 HTTP协议不仅能保证正确传输超文本文档，还可以确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等等。 1.1.3 统一资源定位器——URL URL(Uniform Resource Locator)即统一资源定位器，它使用数字和字母来代表网页文件在网上的地址。URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中查找到所需要的资料。 Web上所能访问的资源都有惟一的URL。URL包括所用的传输协议、服务器名称、文件的完整路径。例如：在浏览器的URL处输入https://www.wendangku.net/doc/5e9090628.html,/index.html就可以访问搜狐网站的主页。 URL的第一部分http://表示要访问的资源类型。其他常见资源类型中，ftp://表示FTP 服务器，gopher://表示Gopher服务器，new://表示Newgroup新闻组。 第二部分https://www.wendangku.net/doc/5e9090628.html,是主机名，它说明了要访问服务器的Internet名称。其中，www表示要访问的文件存放在名为www的服务器里，多数公司都有指定的服务器作为对外的网上站点，叫做www；sohu则表示了该网站的名称；.com则指出了该网站的服务类型。 目前，常用的网站服务类型的含义如下：.com特指事务和商务组织；.edu表示教育机 构；.gov表示政府机关；.mil表示军用服务；.net表示网关，由网络主机或Internet 服务提 供商决定；.org一般表示公共服务或非正式组织。 另外，有些域名后面会带有本国和地区的域名。例如：新浪的网址 https://www.wendangku.net/doc/5e9090628.html,中的cn就代表该网站属于中国。另外，au代表澳大利亚、ca代表加拿大、fr代表法兰西、uk代表英国、jp代表日本等。 第三部分/index.html表示要访问主机的哪一个页面文件，可以把它理解为该文件存放

html超文本标记语言

… 表示该文档是html文档 … 头部标记 … 网页的标题标记