html100实例教程

1、Html 实例教程 100 例 1. 简单得 html 程序 我得第一个 HTML 页面 body title 2.简单得段落 元素得内容会显示在浏览器中。 元素得内容会显示在浏览器得标题栏中。 这就是段落。 这就是段落。 这就是段落。 段落元素由p 标签定义。 3.更多得段落 这个段落 在源代码中 包含许多行 但就是浏览器 忽略了它们。 这个段落 在源代码 中 包含 许多行 但就是 浏览器HTML PUBLIC -/W3C/DTDHTML 4 、 01忽略了 它们。段落得行数依赖于浏览器窗口得大小。如果调节浏览器窗口得大小， 将改变段落中得行数。4.诗歌问题 春晓 春眠不觉晓，处处闻啼鸟。夜

2、来风雨声，花落知多少。注意，浏览器忽略了源代码中得排版（省略了多余得空格与换 行）。 5. 拆行 To 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 代替。 HTML 4 、 017. 居中排列得标题 This is heading 1 上面得标题在页面

3、中进行了居中排列。上面得标题在页面中进 行了居中排列。上面得标题在页面中进行了居中排列。 8.水平线 hr 标签定义水平线： 这就是段落。 这就是段落。 这就是段落。 9.隐藏得注释 这就是一段普通得段落。 10. 背景颜色 con te nt二text/html;conten t=zh-c n请瞧：改变了颜色得背景。HTML文本格式化实例11. 创建超链接、html本文本v/a就是一个指向本网站中得本文本 就是一个指向万维网上得页面得链a href=/i ndex一个页面得链接接。12. 将图像作为超链接您也可以使用图像来作链接：13. 在新得浏览器窗口打开超链接Visit W3School

4、!如果把链接得target属性设置为_blank，该链接会在新窗 口中打开。14. 链接到页面得不同位置 查瞧 Chapter 4 。 Chapter 1This chapter explains ba bla bla Chapter 2This chapter explains ba bla bla Chapter 3This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla Chapter 5This chapter explains ba bla bla Chapter 6This chapter

5、 explains ba bla bla Chapter 7This chapter explains ba bla bla Chapter 8This chapter explains ba bla bla Chapter 9This chapter explains ba bla bla Chapter 10This chapter explains ba bla bla Chapter 11This chapter explains ba bla bla Chapter 12This chapter explains ba bla bla Chapter 13This chapter e

6、xplains ba bla bla Chapter 14This chapter explains ba bla bla Chapter 15This chapter explains ba bla blaChapter 16 This chapter explains ba bla bla Chapter 17 This chapter explains ba bla bla 15. 跳出框架 被锁在框架中了吗？ 请点击这里！ 发送邮件 16. 创建电子邮件链接 这就是邮件链接： 注意：v/b应该使用20来替换单词之间得空格，这样浏览 器就可以正确地显示文本了。 17. 创建另一个电子邮件

7、链接 这就是另一个 mailto 链接： 发送邮件！ 注意：应该使用20来替换单词之间得空格，这样浏览 器就可以正确地显示文本了。HTML框架实例17、垂直框架vframeset cols二25%,50%,25%vframe src=/exa mp le/html/frame_a vframe src=/exa mp le/html/frame_b vframe src=/exa mp le/html/frame_c 18、水平框架vframeset rows二25%,50%,25%frame src=/exa mp le/html/frame_aframe src=/exa mp le/ht

8、ml/frame_bframe src=/exa mp le/html/frame_c 19、 女M可使用 noframes标签 frame src=/exa mp le/html/frame_aframe src=/exa mp le/html/frame_bframe src=/exa mp le/html/frame_c 您得浏览器无法处理框架！3.混合框架结构vframeset rows二50%,50%frame src=/exa mp le/html/frame_a 、html、html、html、html、html、html、html、html、html、html、html、htm

9、l属性得框架结构frame src=/exa mp le/html/frame_b frame src=/exa mp le/html/frame_c 20、含有 noresize=noresize html、html /、html /vframe src=/exa mp le/html/frame_bframe src=/exa mp le/html/frame_c 21、导航框架 、html、 htmlframe src=/exa mp le/html/html_c on te nts 6.内联框架 一些老得浏览器不支持 iframe。如果得不到支持，iframe 就是不可见得。 22、跳

10、转到框架一个指定得节vframeset cols=20%,80%、html、html#C10frame src=/exa mp le/html/frame_aframe src=/exa mpl e/html/li nk23、使用框架导航跳转至指定得节vframeset cols=180,*htmlvframe src=/example/html/content、htmlHTML表格实例1、表格标签开始。v/p 标签开始。v/p每个表格由table每个表格行由tr 每个表格数据由td标签开始。 一列：1OO 一行三列：1OO200300两行三列：1002003004005006002. 表格边

11、框 带有普通得边框： FirstRowSecondRow 带有粗得边框： FirstRowSecondRow 带有很粗得边框： FirstRowSecondRow 3. 没有边框得表格 这个表格没有边框： 100200300 400500600 这个表格也没有边框： 100200300 400500600 4. 表格中得标头 表头： 姓名v/th 电话 电话 Bill Gates 555 77 854 555 77 855 垂直得表头： 姓名 Bill Gates 电话 555 77 854 电话 555 77 8555. 空单元格Some textSome textSome text 正如您

12、瞧到得，其中一个单元没有边框。这就是因为它就是空 得。在该单元中插入一个空格后，仍然没有边框。 我们得技巧就是在单元中插入一个no-breaking空格。no-breaking空格就是一个字符实体。 如果您不清楚什么就是字符实体，请阅读关于字符实体得章节。 no-breaking空格由与号开始 (&) ，然后就是字符 nbsp ，并以分号结尾(；)。v/p6. 带有标题得表格 这个表格有一个标题，以及粗边框： 我得标题 1002003004005006007. 跨行跨列得表格 横跨两列得单元格： 姓名 Bill Gates555 77 854555 77 855 横跨两行得单元格： 姓名 Bi

13、ll Gates电话 555 77 854555 77 8558.表格内得标签 电话 这就是一个段落。 这就是另一个段落。 这个单元包含一个表格：ABCD 这个单元包含一个列表：苹果v/li 香蕉 菠萝HELLO9. 单元格边距 没有 cellpadding ：FirstRowSecondRow 带有 cellpadding ： FirstRow SecondRow 9.单元格间距 没有 cellspacing ： FirstRow SecondRow 带有 cellspacing ： FirstRow SecondRow10. 向表格添加背景颜色或背景图像背景颜色： FirstRowSec

14、on dRow背景图像：backgro un d=/i/eg_bg_07FirstRowSec on dRow11. 向表格单元添加背景颜色或者背景图像单元背景：First Rowtdbackgro un d=/i/eg_bg_07Secon d Row 11.在表格单元中排列内容th alig n二rightth alig n=right、gif消费项目、一月 二月 衣服、10、20$241$50$30$44食物 $730$650总计 化妆品、00、45、40v/td、00、50、65属性无法在 Internet Explorer 中正$1001$744 12. 框架属性 注释：frame

15、确地显示。 Table with frame=box: Month Savings January $100 Table with frame=above: Month Savings January $100 Table with frame=below: Month SavingsJa nu ary $100 Table with frame二hsides: Mo nthSav in gsJa nu ary $100 Table with frame二vsides:Mo nthSav in gsJa nu ary $100HTML列表实例1. 无序列表vhtml 一个无序列表： 咖啡 茶

16、牛奶 2.有序列表 一个有序列表： 咖啡v/li 茶 牛奶 3.不同类型得无序列表 Disc 项目符号列表： 苹果 香蕉 柠檬 桔子 Circle 项目符号列表： 苹果香蕉柠檬桔子 Square 项目符号列表： 苹果香蕉 柠檬桔子 4.不同类型得有序列表 数字列表： 苹果v/li 香蕉 柠檬 桔子字母列表： 苹果 香蕉 柠檬 桔子 小写字母列表： 苹果 香蕉 柠檬 桔子罗马字母列表： 苹果 香蕉 柠檬 桔子小写罗马字母列表： 苹果 v/li 香蕉 柠檬 桔子 5. 嵌套列表 一个嵌套列表： 咖啡 茶 红茶 绿茶 牛奶 6. 嵌套列表 2 一个嵌套列表： 咖啡 茶 红茶 绿茶 中国茶 非洲茶 牛

17、奶 7. 定义列表 一个定义列表：计算机用来计算得仪器、显示器以视觉方式显示信息得装置、HTML表单与输入实例1. 文本域名：姓： 2. 密码用户：密码： 请注意，当您在密码域中键入字符时， 浏览器将使用项目符号来代替 这些字符。 3.复选框 我喜欢自行车： 我喜欢汽车： checked=checkedname=Sex4. 单选按钮 男性： 女性： 当用户点击一个单选按钮时，该按钮会变为选中状态，其她所 有按钮会变为非选中状态。 5. 简单得下拉列表 VolvoSaab FiatAudi 6. 另一个下拉列表 VolvoSaabFiatAudi 7.文本域 领先得 Web 技术教程 - 全部免

18、费 在 w3school ，您可以找到您所需要得所有得网站建设教程。 从基础得 HTML 到 XHTML ，乃至进阶得 XML 、SQL 、数据库、多 媒体与 WAP 。 您无法对本例进行编辑， 因为我们得在线编辑器使用 textarea 进行输入，而浏览器不允许 textarea 中存在另一个 textarea 。 8. 创建按钮 input typ e=butt on value二Hello world!9. 本例演示如何在数据周围绘制一个带标题得框 健康信息 身高：体重：如果表单周围没有边框，说明您得浏览器太老了。表单实例1、本例演示如何向页面添加表单。此表单包含两个输入框与一个确 认按

19、钮。First/Last/n ame:inputn ame:inputasptyp e二texttyp e二textn ame=f namen ame=l nameform action请单击确认按钮，输入会发送到服务器上名为asp 得页面。 2、此表单包含两个复选框与一个确认按钮。 I have a bike:name=vehiclevalue=Bike I have a car: I have an airplane:name=vehicle 按钮，您将把输入传送到名为得新页面。 、asp 如 果 您点 击 Submit html_form_action action=/html/html

20、_form_actionname=Sexvalue=Male3. 带有单选按钮得表单 Male: Female: 如 果 您点 击 Submit 按 钮， 您 将把 输 入 传 送到 名 为 html_form_action 、asp 得新页面。 4、此例演示如何从表单发送电子邮件。method二post这个表单会把电子邮件发送到W3School 。姓名：电邮：内容： input typ e=submit value=input typ e=reset value=HTML图像实例1.插入图像一幅图像：一幅动画图像：img src=/i/eg_cuten ame=n amen ame二mail

21、发送 重置value二y ourn amevalue二yourmailn ame二comme nt、jpg width二128height二128gif width二50 height二50 / 请注意，插入动画图像得语法与插入普通图像得语法没有区别。 2.从不同位置插入图片 来自另一个文件夹得图像： 来自 W3School 、com 、cn 得图像： 、jpg3. 背景图片 body background=/i/eg_background 图像背景 gif 与 jpg 文件均可用作 HTML 背景。 如果图像小于页面，图像会进行重复。 4.排列图片 未设置对齐方式得图像： 图像 img src =/i/eg_cute 已设置对齐方式得图像：img src=/i/eg_cute 图像 本中V/p 图像本中 图像 中 img src =/i/eg_cute、