资源描述

html100实例教程.docx

《html100实例教程.docx》由会员分享，可在线阅读，更多相关《html100实例教程.docx（53页珍藏版）》请在冰豆网上搜索。

html100实例教程.docx

html100实例教程

Html实例教程100例

1.简单的html程序

我的第一个HTML页面

body元素的内容会显示在浏览器中。

title元素的内容会显示在浏览器的标题栏中。

2.简单的段落

这是段落。

段落元素由p标签定义。

3.更多的段落

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"/html4/loose.dtd">

这个段落

在源代码中

包含许多行

但是浏览器

忽略了它们。

这个段落

在源代码中

包含许多行

但是浏览器

忽略了它们。

段落的行数依赖于浏览器窗口的大小。

如果调节浏览器窗口的大小，将改变段落中的行数。

4.诗歌问题

春晓

春眠不觉晓，

处处闻啼鸟。

夜来风雨声，

花落知多少。

注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

5.拆行

Tobreak
lines
ina
paragraph,
usethebrtag.

6.标题

Thisisheading1

Thisisheading2

Thisisheading3

Thisisheading4

Thisisheading5

Thisisheading6

请仅仅把标题标签用于标题文本。

不要仅仅为了产生粗体文本而使用它们。

请使用其它标签或CSS代替。

7.居中排列的标题

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"/html4/loose.dtd">

Thisisheading1

上面的标题在页面中进行了居中排列。

8.水平线

hr标签定义水平线：

这是段落。

9.隐藏的注释

--这是一段注释。

注释不会在浏览器中显示。

-->

这是一段普通的段落。

10.背景颜色

请看:
改变了颜色的背景。

HTML文本格式化实例

11.创建超链接

本文本是一个指向本网站中的一个页面的链接。

本文本是一个指向万维网上的页面的链接。

12.将图像作为超链接

您也可以使用图像来作链接：

13.在新的浏览器窗口打开超链接

VisitW3School!

如果把链接的target属性设置为"_blank"，该链接会在新窗口中打开。

14.链接到页面的不同位置

查看Chapter4。

Chapter1

Thischapterexplainsbablabla

Chapter2

Thischapterexplainsbablabla

Chapter3

Thischapterexplainsbablabla

Chapter4

Thischapterexplainsbablabla

Chapter5

Thischapterexplainsbablabla

Chapter6

Thischapterexplainsbablabla

Chapter7

Thischapterexplainsbablabla

Chapter8

Thischapterexplainsbablabla

Chapter9

Thischapterexplainsbablabla

Chapter10

Thischapterexplainsbablabla

Chapter11

Thischapterexplainsbablabla

Chapter12

Thischapterexplainsbablabla

Chapter13

Thischapterexplainsbablabla

Chapter14

Thischapterexplainsbablabla

Chapter15

Thischapterexplainsbablabla

Chapter16

Thischapterexplainsbablabla

Chapter17

Thischapterexplainsbablabla

15.跳出框架

被锁在框架中了吗？

target="_top">请点击这里！

16.创建电子邮件链接

这是邮件链接：

subject=Hello%20again">发送邮件

注意：

应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

17.创建另一个电子邮件链接

这是另一个mailto链接：

cc=&bcc=&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!

">发送邮件！

注意：

应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

HTML框架实例

17.垂直框架

18.水平框架

19.如何使用

3.混合框架结构

20.含有noresize="noresize"属性的框架结构

21.导航框架

6.内联框架

一些老的浏览器不支持iframe。

如果得不到支持，iframe是不可见的。

22.跳转到框架一个指定的节

23.使用框架导航跳转至指定的节

HTML表格实例

1.表格

每个表格由table标签开始。

每个表格行由tr标签开始。

每个表格数据由td标签开始。

一列：

100

一行三列：

100

200

300

两行三列：

100

200

300

400

500

600

2.表格边框

带有普通的边框：

First

Row

Second

Row

带有粗的边框：

First

Row

Second

Row

带有很粗的边框：

First

Row

Second

Row

3.没有边框的表格

这个表格没有边框：

100	200	300
400	500	600

这个表格也没有边框：

100

200

300

400

500

600

4.表格中的标头

表头：

姓名

电话

BillGates

55577854

55577855

垂直的表头：

姓名

BillGates

电话

55577854

电话

55577855

5.空单元格

Sometext

正如您看到的，其中一个单元没有边框。

这是因为它是空的。

在该单元中插入一个空格后，仍然没有边框。

我们的技巧是在单元中插入一个no-breaking空格。

no-breaking空格是一个字符实体。

如果您不清楚什么是字符实体，请阅读关于字符实体的章节。

no-breaking空格由和号开始（"&"），然后是字符"nbsp"，并以分号结尾（";"）。

6.带有标题的表格

这个表格有一个标题，以及粗边框：

我的标题

100

200

300

400

500

600

7.跨行跨列的表格

横跨两列的单元格：

姓名

电话

BillGates

55577854

55577855

横跨两行的单元格：

姓名

BillGates

电话

55577854

55577855

8.表格内的标签

这是一个段落。

这是另一个段落。

这个单元包含一个表格：

这个单元包含一个列表：

苹果

香蕉

菠萝

HELLO

9.单元格边距

没有cellpadding：

First

Row

Second

Row

带有cellpadding：

cellpadding="10">

First

Row

Second

Row

9.单元格间距

没有cellspacing：

First

Row

Second

Row

带有cellspacing：

cellspacing="10">

First

Row

Second

Row

10.向表格添加背景颜色或背景图像

背景颜色：

bgcolor="red">

First

Row

Second

Row

背景图像：

background="/i/eg_bg_07.gif">

First

Row

Second

Row

展开阅读全文

html100实例教程.docx

春晓

Thisisheading1

Thisisheading2

Thisisheading3

Thisisheading4

Thisisheading5

Thisisheading6

请看:改变了颜色的背景。

Chapter1

Chapter2

Chapter3

Chapter4

Chapter5

Chapter6

Chapter7

Chapter8

Chapter9

Chapter10

Chapter11

Chapter12

Chapter13

Chapter14

Chapter15

Chapter16

Chapter17

一列：

一行三列：

两行三列：

带有普通的边框：

带有粗的边框：

带有很粗的边框：

这个表格没有边框：

这个表格也没有边框：

表头：

垂直的表头：

这个表格有一个标题，以及粗边框：

横跨两列的单元格：

横跨两行的单元格：

没有cellpadding：

带有cellpadding：

没有cellspacing：

带有cellspacing：

背景颜色：

背景图像：

请看:
改变了颜色的背景。