html100实例教学教程.doc

《html100实例教学教程.doc》由会员分享，可在线阅读，更多相关《html100实例教学教程.doc（43页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

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

2、 breaklinesin aparagraph,use the br tag.6.标题This is heading 1 This is heading 2 This is heading 3 This is heading 4|This is heading 5 This 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 1 This chapter explains ba bla bla Chapter 2 This

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

5、 chapter explains ba bla bla|Chapter 10 This chapter explains ba bla bla Chapter 11 This chapter explains ba bla bla Chapter 12 This chapter explains ba bla bla Chapter 13 This chapter explains ba bla bla Chapter 14 This chapter explains ba bla bla Chapter 15 This chapter explains ba bla bla Chapter

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

7、结构20.含有 noresize=“noresize“ 属性的框架结构 |21.导航框架 6.内联框架一些老的浏览器不支持 iframe。 如果得不到支持，iframe 是不可见的。22.跳转到框架一个指定的节23.使用框架导航跳转至指定的节 HTML 表格实例 1.表格每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 一列：|100一行三列：100200300两行三列：1002003004005006002.表格边框带有普通的边框： FirstRow|SecondRow带有粗的边框： FirstRowSecondRow带有很粗的边框： Fi

8、rstRowSecondRow3.没有边框的表格|这个表格没有边框：100200300400500600这个表格也没有边框：1002003004005006004.表格中的标头表头：|姓名电话电话Bill Gates555 77 854555 77 855垂直的表头：姓名Bill Gates电话555 77 854电话555 77 8555.空单元格Some textSome text|Some text正如您看到的，其中一个单元没有边框。这是因为它是空的。在 该单元中插入一个空格后，仍然没有边框。 我们的技巧是在单元中插入一个 no-breaking 空格。 no-breaking 空格是一

9、个字符实体。如果您不清楚什么是字符实 体，请阅读关于字符实体的章节。 no-breaking 空格由和号开始 (“)。6.带有标题的表格这个表格有一个标题，以及粗边框：我的标题100200300400500600|7.跨行跨列的表格横跨两列的单元格：姓名电话Bill Gates555 77 854555 77 855横跨两行的单元格：姓名Bill Gates电话555 77 854555 77 855|8.表格内的标签这是一个段落。这是另一个段落。这个单元包含一个表格：ABCD这个单元包含一个列表：苹果香蕉菠萝HELLO|9.单元格边距没有 cellpadding：FirstRowSecond

10、Row带有 cellpadding：FirstRowSecondRow9.单元格间距|没有 cellspacing：FirstRowSecondRow带有 cellspacing：FirstRowSecondRow10.向表格添加背景颜色或背景图像 背景颜色：FirstRow|SecondRow背景图像：FirstRowSecondRow11.向表格单元添加背景颜色或者背景图像 单元背景： FirstRowSecondRow|11.在表格单元中排列内容 消费项目.一月二月衣服$241.10$50.20化妆品$30.00$44.45食物$730.40$650.00总计$1001.50$744.6

11、5|12.框架属性注释：frame 属性无法在 Internet Explorer 中正确地 显示。 Table with frame=“box“:MonthSavingsJanuary$100Table with frame=“above“:MonthSavingsJanuary$100Table with frame=“below“:MonthSavings|January$100Table with frame=“hsides“:MonthSavingsJanuary$100Table with frame=“vsides“:MonthSavingsJanuary$100HTML 列表实

12、例 1.无序列表|一个无序列表：咖啡茶牛奶2.有序列表一个有序列表：咖啡茶牛奶3.不同类型的无序列表Disc 项目符号列表：苹果香蕉柠檬桔子Circle 项目符号列表：苹果|香蕉柠檬桔子Square 项目符号列表：苹果香蕉柠檬桔子4.不同类型的有序列表数字列表：苹果香蕉柠檬桔子字母列表：苹果香蕉柠檬桔子小写字母列表：苹果|香蕉柠檬桔子罗马字母列表：苹果香蕉柠檬桔子小写罗马字母列表：苹果香蕉柠檬桔子5.嵌套列表一个嵌套列表：咖啡茶红茶绿茶牛奶|6.嵌套列表2一个嵌套列表：咖啡茶红茶绿茶中国茶非洲茶牛奶7.定义列表一个定义列表：计算机用来计算的仪器 . .|显示器以视觉方式显示信息的装置 . .H

13、TML 表单与输入实例 1.文本域名：姓：2.密码用户：密码：请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代 替这些字符。 |3.复选框我喜欢自行车：我喜欢汽车：4.单选按钮男性：女性：当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有 按钮会变为非选中状态。5.简单的下拉列表 |Volvo Saab Fiat Audi6.另一个下拉列表Volvo Saab Fiat Audi7.文本域领先的 Web 技术教程 - 全部免费 在w3school，你可以找到你所需要的所有的网站建设教程。 从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和 WAP。 |您无法对本例进行编辑，因为我们的在线编辑器使用 textarea 进行输入， 而浏览器不允许 textarea 中存在另一个 textarea。8.创建按钮9.本例演示如何在数据周围绘制一个带标题的框健康信息身高：体重：如果表单周围没有边框，说明您的浏览器太老了。表单实例 1.本例演示如何向页面添加表单。此表单包含两个输入框和一个确 认按钮。First name: