HTML代码示例

《HTML代码示例》由会员分享，可在线阅读，更多相关《HTML代码示例（37页珍藏版）》请在装配图网上搜索。

1、HTML代码示例HTML文本格式示例 一个非常简单的 HTML文件这是一个非常简单的 HTML。HTML简单段落这是第一段。这是第二段。这是第三段。在HTML里，用p来定义段落。 在HTML写多个段落这一段在源代码里包含很多分行， 但是浏览器忽略 这些分行。 这一段在浏览器里包含很多 空格，但是浏览器忽略多余空格。如果你改编浏览器窗口的大小， 段落的行数你使用的浏览器的窗口大小决定了段落的行数。 会因此改变。在HTML里如何换行要在一段里换行请使用br这个Tag。HTML正文标题这是1号标题这是2号标题这是3号标题这是4号标题这是5号标题这是6号标题HTML居中显示的标题 这是标题 上面的标题

2、是居中显示的。在HTML文件里加一条横线(horizontal rule)用hr这个Tag可以在HTML文件里加一条横线。村妇想像皇宫的生活：皇后得用金扁担挑水吧。问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅 看别人打炮。初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形 了！ HTML文件的代码注释代码注释是不会显示在网页里的。HTML常用格式 Tag 粗体用 b 表示。 斜体用 i 表示。芙蓉姐姐这个词当中划线表示删除。想唱就唱这个词下划线插入。X2 其中的 2 是下标 X2 其中的 2 是上标 好好学习，天天向上。这句话缩进表示引用

3、这是预设(preformatted)文本.在pre这个tag里的文本保留空格和分行。call getOrders用code显示计算机代码，code里显示的字符是等宽字符。HTML 预格式文本(preformatted text)这是预格式(preformatted)文本浏览器会保留pre里面的空格和分行。pre用来表示计算机代码，效果很好。看如下代码显示：for i = 1 to 10print inext iHTML不同计算机输出的 Tag 计算机代码 Computer code 键盘键入 Keyboard in put 电报文本 Teletype text 示例文本 Sample text

4、 计算机变量 Computer variable注:以上这些Tag都可以用来显示计算机程序代码。HTML里加入地址 上海站长网 站长学院路1000号 站长网站长学院大楼101室邮编:200000HTML里表示删除插入的Tag我要 删除 插入 文字。还可以使用strike表示删除，效果和 del 一样。但是 HTML国际标准推荐使用del，不再建议使用strike。 HTML超链接示例如何创建 HTML 超链接(hyperlinks) 这是一个链接 站长网站长学院站点链接 将图片作为一个超链接你可以将一张图片作为一个链接，点击这个图片。在HTML文件里跳转 参见第六章 第 1 章这是站长网站长学

5、院 第 2 章这是站长网站长学院 第 3 章这是站长网站长学院 第 4 章这是站长网站长学院 第 5 章这是站长网站长学院 第 6 章这是站长网站长学院 第 7 章这是站长网站长学院网页教程与代码的中文站点。网页教程与代码的中文站点。网页教程与代码的中文站点。网页教程与代码的中文站点。网页教程与代码的中文站点。网页教程与代码的中文站点。网页教程与代码的中文站点。 第 8 章 这是站长网站长学院网页教程与代码的中文站点。 第 9 章 这是站长网站长学院网页教程与代码的中文站点。 第 10 章 这是站长网站长学院网页教程与代码的中文站点。 第 11 章 这是站长网站长学院网页教程与代码的中文站点。

6、 第 12 章 这是站长网站长学院网页教程与代码的中文站点。 第 13 章 这是站长网站长学院网页教程与代码的中文站点。 第 14 章 这是站长网站长学院网页教程与代码的中文站点。 第 15 章 这是站长网站长学院 第 16 章 这是站长网站长学院网页教程与代码的中文站点。网页教程与代码的中文站点。 第 17 章 这是站长网站长学院网页教程与代码的中文站点。在新窗口打开一个链接 则笑话如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。链接到一个邮箱地址 这是一个最简单的邮箱地址的链接： 给新浪网站发信 这个邮箱地址的链接写了subject内容： 给新

7、浪网站发信 这个邮箱地址链接写了to, cc, bcc, subject, body的内容: 写信给新浪注:空格请用%20表示。HTML 表格(Table)示例HTML简单表格 td。表格所用到的Tag :整个表格开始要用table ;每一行开始要用tr;每一单元格开始要用 只有一行(Row) 一列(Column)的表格 100 一行三列的表格 100200300两行三列的表格 100200300400500600没有边界的表格缺省情况下，表格没有边界。100200300400500600表格Border设为0，也不显示边界: 100200300400500600有边界的表格表格的边界值设为1

8、: 第一 行 第二 行 表格的边界值设为 8，边界更粗： 第一 行 第二 行 表格的边界值设为15,边界更粗: 第一 行 第二 行 HTML表格的表头有表头的表格： 姓名 电话 传真 Bill Gates555 77 854555 77 855竖直方向的表头： 姓名 Bill Gates 电话 555 77 854 传真 555 77 855 表格空单元格Some textSome textSome text上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽 然整个表格设了边界值。 Some text Some text &n bsp;Some text上面的例子，你

9、可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。带标题的表格这个表格有标题： 表格标题 100200300400500600包含多行或多列的表格单元格用colpsan属性，设置包含多列的单元格： 姓名 联系方式 Bill Gates555 77 854555 77 855用rowspan这个属性，设置包含多行的单元格: 姓名 Bill Gates 联系方式 555 77 854555 77 855一个表格单元格里的内容这是一段这是另外

10、一段。这个单元格里包含了一个表格：ABCD这个单元格里包含了一个图片： HELLO表格的单元格内容和单元格边界之间的距离(CellPaddi ng) 没有 cellpadding 的表格： FirstRowSec on dRow设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。以下是设置了 cellpadding属性的表格： 第一 行 第二 行 cellpadding属性值设置为 30的表格： 第一 行 第二 行 表格中单元格之间的距离(Cellspaci ng)Cellspacing属性表示单元格之间的距离。如果表格里没有设置cellspacing属性，缺省情况下，c

11、ellspacing值为1。 第一 行 第二 行 Cellspacing属性值设为0的表格： 第一 行 第二 行 Cellspacing属性值设为20的表格： 第一 行 第二 行 给表格加背景颜色或者背景图片Cellspacing属性表示单元格之间的距离。如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。 第一 行 第二 行 Cellspacing属性值设为0的表格： 第一 行 第二 行 Cellspacing属性值设为20的表格: 第一 行 第二 行 表格单元格对齐方式 (alig n) 分数 期中考试 期末考试 芙蓉姐姐 250.1050000.20

12、td align=left程菊花 1000.005000.45 周笔畅 2000.40500.00 黄新 300.50800.65 表格的单元格背景颜色和背景图片 单元格背景色： 第一 行 第二 行 HTML框架(Frame)示例列分的框架(Frame, cols)vframeset cols=25%,50%,25%vframe src=./asdocs/html_tutorials/Frame_a.html vframe src=./asdocs/html_tutorials/Frame_b.html vframe src=./asdocs/html_tutorials/Frame_c.ht

13、ml行分的框架(Frame, rows)vframeset rows=25%,50%,25% vframe src=./asdocs/html_tutorials/Frame_a.htmlvframe src=./asdocs/html_tutorials/Frame_b.htmlvframe src=./asdocs/html_tutorials/Frame_c.html既有行分又有列分的框架(Frame, rows, cols)vframeset rows=50%,50%vframe src=./asdocs/html_tutorials/Frame_a.htmlvframeset col

14、s=25%,75%vframe src=./asdocs/html_tutorials/Frame_b.htmlvframe src=./asdocs/html_tutorials/Frame_c.htmlv/framesetv/framesetv/html用框架(Frame)导航vhtmlvframeset cols=120,*vframe src=./asdocs/html_tutorials/framelist.htmlvframe src=./asdocs/html_tutorials/Frame_a.html n ame=showframev/framesetv/html使用内嵌框架

15、(IFrame)vhtmlvbodyvp用IFRAME 可以在 HTML文件里显示另一个网页。 v/pvp这个HTML文档中使用 IFRAME 来显示另外一个叫Frame_a.html的网页。viframe src=./asdocs/html_tutorials/Frame_a.htmlv/iframe如何固定框架(Frame)大小vframeset rows=50%,50%vframe no resize=no resize src=./asdocs/html_tutorials/Frame_a.htmlvframeset cols=25%,75%vframe no resize=no re

16、size src=./asdocs/html_tutorials/Frame_b.htmlvframe no resize=no resize src=./asdocs/html_tutorials/Frame_c.htmlv/framesetv/htmlHTML 列表(List)示例不排序列表(Unordered List) 不排序列表(Unordered List) : 站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界 v/ulv/html排序列表(ordered list) 一个排序列表(Ordered List) : 站长网站长学院之网页课程 站长网站长学

17、院之网页代码 站长网 站长学院之魔兽世界 v/ol不排序列表的类型(Type)设置Type设为disc的列表，列表项前面的符号是圆黑点:站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界 站长网站长学院之网页课程站长网站长学院之网页代码站长网站长学院之魔兽世界Type设为circle的列表，列表项前面的符号是空心圆:站长网站长学院之网页课程站长网站长学院之网页代码站长网站长学院之魔兽世界Type设为square的列表，列表项前面的符号是黑方块:嵌套的列表(nested list)Type设为disc的列表，列表项前面的符号是圆黑点:站长网站长学院之网页课程 站长网站

18、长学院之网页代码 站长网 站长学院之魔兽世界Type设为circle的列表，列表项前面的符号是空心圆:站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界Type设为square的列表，列表项前面的符号是黑方块:站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界定义列表(definition list)Type设为disc的列表，列表项前面的符号是圆黑点:站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界 Type设为circle的列表，列表项前面的符号是空心圆:站长网站长学院之网页课程 站长网站长学院之网页代码

19、 站长网 站长学院之魔兽世界Type设为square的列表，列表项前面的符号是黑方块:站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界HTML不同类型(Type)的排序列表 Type设为disc的列表，列表项前面的符号是圆黑点： 站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界 Type设为circle的列表，列表项前面的符号是空心圆： 站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站长学院之魔兽世界 Type设为square的列表，列表项前面的符号是黑方块：站长网站长学院之网页课程 站长网站长学院之网页代码 站长网 站

20、长学院之魔兽世界 HTML表单(Form)示例HTML表单控件-单行文本输入框 输入用户姓名 vformmethod=get请输入你的姓名:actio n=http:/www.admi HTML表单控件-密码输入框 输入用户姓名和密码vformactio n=http:/www.admi method=post请输入你的姓名：请输入你的密码：HTML表单控件-复选框(checkbox) 选择 请选择你喜欢的水果： 苹果 桔子 芒果 HTML表单控件-复选框(checkbox)缺省已选(checked) 选择 请选择你喜欢的水果： 苹果 桔子 芒果 HTML表单控件-单选框(radio) 选择

21、请选择你最喜欢的水果：vform actio n = http:/www.admi post 苹果 桔子 芒果 method = HTML表单控件-单选框(radio)缺省已选(checked) 选择 请选择你最喜欢的水果： 苹果 桔子 芒果 method = HTML 表单控件(Form Control)-下拉框(select)单选你最喜欢的水果是： 苹果 桔子 芒果method =method =method = HTML表单控件-下拉框(select)多选(multiple) 选择 你最喜欢的水果是： 苹果 桔子 芒果 HTML表单控件-下拉框多选-下拉框设置(size) 选择 你最喜欢

22、的水果是： 苹果 桔子 芒果HTML表单控件-多行输入框(textarea) 请提宝贵意见 vformactio n=http:/www.admi method=get请提宝贵意见：HTML表单控件-图片提交(input type=image) 输入用户姓名 请输入你的姓名：HTML 图片(Image)示例在HTML里插入图片站长网站长学院 Logo 图片：HTML里图片的对齐方式(Align) 图片的上下对齐方式：对齐方式 :top对齐方式:middleimg src=./images/logo/blabla_logo.gif align=bottom对齐方式:bottom图片的左右对齐方式：img src=./images/logo/blabla_logo.gif align=Left对齐方式:left对齐方式 ：center