html100实例教程.docx

1、html100实例教程Html实例教程100例1.简单的html程序我的第一个 HTML 页面body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。2.简单的段落这是段落。这是段落。这是段落。段落元素由 p 标签定义。 3.更多的段落这个段落在源代码中包含许多行但是浏览器忽略了它们。这个段落在源代码 中包含 许多行但是 浏览器忽略了 它们。段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。4.诗歌问题春晓 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。5.拆行To

2、breaklinesin aparagraph,use the br tag.6.标题This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。7.居中排列的标题This is heading 1上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。8.水平线hr 标签定义水平线：这是段落。这是段落。这是段

3、落。9.隐藏的注释这是一段普通的段落。10.背景颜色请看: 改变了颜色的背景。HTML 文本格式化实例11.创建超链接本文本 是一个指向本网站中的一个页面的链接。本文本 是一个指向万维网上的页面的链接。12.将图像作为超链接您也可以使用图像来作链接：13.在新的浏览器窗口打开超链接Visit W3School!如果把链接的 target 属性设置为 _blank，该链接会在新窗口中打开。14.链接到页面的不同位置查看 Chapter 4。Chapter 1This chapter explains ba bla blaChapter 2This chapter explains ba bla

4、blaChapter 3This chapter explains ba bla blaChapter 4This chapter explains ba bla blaChapter 5This chapter explains ba bla blaChapter 6This chapter explains ba bla blaChapter 7This chapter explains ba bla blaChapter 8This chapter explains ba bla blaChapter 9This chapter explains ba bla blaChapter 10

5、This chapter explains ba bla blaChapter 11This chapter explains ba bla blaChapter 12This chapter explains ba bla blaChapter 13This chapter explains ba bla blaChapter 14This chapter explains ba bla blaChapter 15This chapter explains ba bla blaChapter 16This chapter explains ba bla blaChapter 17This c

6、hapter explains ba bla bla15.跳出框架被锁在框架中了吗？ 请点击这里！ 16.创建电子邮件链接这是邮件链接：发送邮件注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。17.创建另一个电子邮件链接这是另一个 mailto 链接：发送邮件！注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 HTML 框架实例17.垂直框架 18.水平框架 19.如何使用 标签 您的浏览器无法处理框架！3.混合框架结构20.含有 noresize=noresize 属性的框架结构 21.导航框架 6.内联框架一些老的浏览器不支持

7、 iframe。如果得不到支持，iframe 是不可见的。22.跳转到框架一个指定的节 23.使用框架导航跳转至指定的节 HTML 表格实例1.表格每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。一列： 100一行三列： 100 200 300两行三列： 100 200 300 400 500 6002.表格边框带有普通的边框： First Row Second Row带有粗的边框： First Row Second Row带有很粗的边框： First Row Second Row3.没有边框的表格这个表格没有边框： 100 200 300 40

8、0 500 600这个表格也没有边框： 100 200 300 400 500 6004.表格中的标头表头： 姓名 电话 电话 Bill Gates 555 77 854 555 77 855垂直的表头： 姓名 Bill Gates 电话 555 77 854 电话 555 77 8555.空单元格 Some text Some text Some text正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。我们的技巧是在单元中插入一个 no-breaking 空格。no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符

9、实体的章节。no-breaking 空格由和号开始 (&)，然后是字符nbsp，并以分号结尾(;)。6.带有标题的表格 这个表格有一个标题，以及粗边框：我的标题 100 200 300 400 500 6007.跨行跨列的表格横跨两列的单元格： 姓名 电话 Bill Gates 555 77 854 555 77 855横跨两行的单元格： 姓名 Bill Gates 电话 555 77 854 555 77 8558.表格内的标签 这是一个段落。 这是另一个段落。 这个单元包含一个表格： A B C D 这个单元包含一个列表： 苹果 香蕉 菠萝 HELLO9.单元格边距没有 cellpadding： First Row Second Row带有 cellpadding： First Row Second Row9.单元格间距没有 cellspacing： First Row Second Row带有 cellspacing： First Row Second Row10.向表格添加背景颜色或背景图像 背景颜色： First Row Second Row背景图像： First Row Second Row/htm