HTML语言范例_第1页
HTML语言范例_第2页
HTML语言范例_第3页
HTML语言范例_第4页
HTML语言范例_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML语言_范例一、一些基础的HTML Tag（类别）1.1：一个非常简单的HTML文件HTML语言如下：<html><title>我的第一个网站</title><body>这是一个非常简单的HTML。</body></html>效果如下：这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML文件有个最初的认识。1.2：更多段落这个示例显示了段落的特性，在HTML里用<p>和</p>划分段落。HTML

2、语言如下：<html><body><p>这是第一段。</p><p>这是第二段。</p><p>这是第三段。</p><p>在HTML里，用p来定义段落。</p></body></html>效果如图：1.3：换行这个示例告诉你如何在HTML文件里换行。<br>HTML语言如下：<html><body><p>要<br>在一段<br>里<br>换行<br>请使用<

3、;br>br这个Tag。</p></body></html>效果如下：通过使用<br>这个Tag，可以在不新建段落的情况下换行。用<p>换行是个坏习惯，正确的是使用<br>。1.4：正文标题这个示例教会你如何在HTML文件里显示正文标题。HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。HTML语言如下：<html><body><h1>这是1号标题</h1><h2>这是2号标题</h2>

4、;<h3>这是3号标题</h3><h4>这是4号标题</h4><h5>这是5号标题</h5><h6>这是6号标题</h6></body></html>效果如图：1.5：居中的正文标题这个示例告诉你如何将正文标题居中显示。使用<center>与</center>表示居中。HTML语言如下：<html><body><center><h1>这是1号标题</h1></center><

5、p>上面的标题是居中显示的。</p></body></html>效果如图：1.6：加条横线 <hr>HTML语言如下：<html><body><p>用hr这个Tag可以在HTML文件里加一条横线。</p><hr><p>你看到上下的横线了吗？</p><hr><p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！</p></body></html>效果如下：1.7：代码注释

6、这些注释只显示在HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。<!注释内容->HTML语言如下：<html><body><!-这是代码注释-><p>代码注释是不会显示在网页里的。</p></body></html>效果如图：1.8：背景颜色 可以直接写颜色的英文名，也可以找到色彩的数字代码。HTML语言如下：<html><body bgcolor="yellow"><h2>看，这个页面是黄色的。</h2></b

7、ody></html>效果：二、HTML常用格式2.1 HTML常用的格式HTML语言如下：<html><body><p><b>粗体用b表示。</b></p><p><i>斜体用i表示。</i></p><p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p><p><ins>想唱就唱</ins>这个词下划线插入。</p><p>X<sub&

8、gt;2</sub>其中的2是下标</p><p>X<sup>2</sup>其中的2是上标</p><p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p><pre>这是预设(preformatted)文本.在pre这个tag里的文本 保留空格和分行。</pre><code>call getOrders</code><p>用code显示计算机代码，code里显示的字符是等宽字

9、符。</p></body></html>效果：三、HTML利用超链接打开链接文件3.1 建立超链接点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。使用target属性，可以在一个新窗口里打开链接文件。HTML语言如下：<html><body><p><a href="">这是百度的链接</a></p><p><a href="" target=_blank>从新的

10、页面打开网易的主页</a></p></body></html>效果如下：3.2 将一个图片作为一个超链接 演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。HTML语言如下：<html><body><p>你可以将一张图片作为一个链接，点击这个图片。<a href=""><img src="tupian.jpg" ></a></p></body></html>效果：3.3 titl

11、e属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。如果希望注释多行显示，可以使用&#10;作为换行符。HTML语言如下：<html><body><p><a href="" title = "这是川音成都美术学院的网站">川音成都美术学院</a></p><p><a href="" title = "川音成都美术学院的网站&#10;我们的学院">川音成都美术学院</a

12、></p></body></html>效果：3.4 name属性使用name属性，可以跳转到一个文件的指定部位。使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name：HTML语言如下：<html><body><p><a href="#C5">参见第5章</a></p><p><a name="C1"><h2>第1章</h2></a><p>

13、;这个是练习name属性的。</p><a name="C2"><h2>第2章</h2></a><p>这个是练习name属性的。</p><a name="C3"><h2>第3章</h2></a><p>这个是练习name属性的。</p><a name="C4"><h2>第4章</h2></a><p>这个是练习name属性的。&

14、lt;/p><a name="C5"><h2>第5章</h2></a><p>这个是练习name属性的。</p></body></html>效果： 单击第一张图的“参见第5章”就跳到第二张图的效果。3.5链接到email地址在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。HTML语言如下：<html><body>

15、<p>这是一个最简单的邮箱地址的链接：<a href="mailto:yaozijie_502">给自己的邮箱发信</a></p></body></html>效果：单击上图中的“给自己的邮箱发信”就会得到下图这个对话框。四、如何创建HTML表格HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。示例：HTML语言如下：<html><body><p>

16、表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。</p><h4>只有一行(Row)一列(Column)的表格</h4><table border="1"><tr><td>100</td></tr></table><h4>一行三列的表格</h4><table border="1"><tr><td>100</td><td>20

17、0</td><td>300</td></tr></table><h4>两行三列的表格</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td>&l

18、t;/tr></table></body></html>效果如图：4.1 border属性在缺省情况下，如果不设置表格的边界，表格是不显示边界的。示例：HTML语言如下：<html><body><h4>缺省 border情况下，表格没有边界。</h4><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400

19、</td><td>500</td><td>600</td></tr></table><h4>表格Border设为0，也不显示边界：</h4><table border="0"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500&l

20、t;/td><td>600</td></tr></table><h4>表格的border（边界）值设为8，边界更粗：</h4><table border="8"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></

21、html>效果如图：4.2表格的表头用<th>来表示表格的表头，表头的字是粗体显示的。HTML语言如下：<html><body><h4>横向表头的表格：</h4><table border="1"><tr><th>姓名</th><th>电话</th><th>传真</th></tr><tr><td>Bill Gates</td><td>555 77 854&

22、lt;/td><td>555 77 855</td></tr></table><h4>竖直方向的表头：</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th>电话</th><td>555 77 854</td></tr><tr><th>传

23、真</th><td>555 77 855</td></tr></table></body></html>效果如图：4.3空的单元格如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个&nbsp;空格符。HTML语言如下：<html><body><table border="1"><tr><td>Some

24、text</td><td>Some text</td></tr><tr><td></td><td>Some text</td></tr></table><p>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。</p><table border="1"><tr><td>Some text</td><td>Some t

25、ext</td></tr><tr><td>&nbsp;</td><td>Some text</td></tr></table><p>上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。</p><p>注意：空格符要用&bsp;表示。&nbsp;是一个HTML特别字符，参见HTML特别字符(HTML CharacterEntities)。</p></body></html

26、>效果如下：4.4包含多列或多行的单元格这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。HTML语言如下：<html><body><h4>用colpsan属性，设置包含多列的单元格：</h4><table border="1"><tr><th>姓名</th><th colspan="2">联系方式</th></tr><tr><td>Bill Gates</td&g

27、t;<td>555 77 854</td><td>555 77 855</td></tr></table><h4>用rowspan这个属性，设置包含多行的单元格：</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th rowspan="2">联系方式</th>

28、<td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table></body></html>效果如图：4.5设置表格的背景颜色和背景图片这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。HTML语言如下：<html><body><h4>给表格设置背景颜色：</h4><table border="1&qu

29、ot; bgcolor="red"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>给表格加背景图片：</h4><table border="1" background="微软.jpg"><tr><td>第一</td

30、><td>行</td><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td><td>第二</td><td>行</td></tr><tr><td>第三</td><td>行</td><td>第三</td><td>行</td></tr

31、><tr><td>第四</td><td>行</td><td>第四</td><td>行</td></tr></table></body></html>效果如图：4.6 设置单元格的背景颜色和背景图片这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。HTML语言如下：<html><body><h4>单元格背景色：</h4><t

32、able border="1"><tr><td bgcolor="red">第一</td><td>行</td></tr><tr><td background="xsi11.jpg">第二</td><td>行</td></tr></table></body></html>效果如图：4.7 单元格内容的对齐方式这个示例教你如何用align属性设置单元格的对

33、齐方式。HTML语言如下：<html><body><table width="350" border="1"><tr><th align="center">分数</th><th align="center">期中考试</th><th align="center">期末考试</th></tr><tr><td align="left"

34、;>小明</td><td align="right">250.10</td><td align="right">50000.20</td></tr><tr><td align="left">小明的同桌</td><td align="right">1000.00</td><td align="right">5000.45</td><

35、/tr><tr><td align="left">王大为</td><td align="right">2000.40</td><td align="right">500.00</td></tr><tr><td align="left">黄新</td><td align="right">300.50</td><td align=&q

36、uot;right">800.65</td></tr></table></body></html>效果如图：五、HTML框架(Frames)使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。5.1 Frameset<frameset></frameset>决定如何划分Frame。<frameset>有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。列

37、（cols）的示例：HTML语言如下：<html><frameset cols="25%,50%,25%"><frame src=""><frame src=""><frame src=""></frameset></html>效果：行（rows）的示例：HTML语言如下：<html><frameset rows="33%,33%,34%"><frame src="&quo

38、t;><frame src=""><frame src=""></frameset></html>效果如下：混合模式：HTML语言如下：<html><frameset rows="50%,50%"><frame src=""><frameset cols="50%,50%"><frame src=""><frame src="">&

39、lt;/frameset></frameset></html>效果：5.2 IframeIframe是Inline Frame的意思，用<iframe></iframe>可以将Frame置于一个HTML文件内。HTML语言如下：<html><body><p>用 IFRAME 可以在HTML文件里显示另一个网页。</p><p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p><iframe src="&qu

40、ot;></iframe></body></html>效果：六、HTML表单(Forms)HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。6.1 HTML表单(Form)常用控件(Controls)HTML表单(Form)常用控件有：表单控件(Form Contros) 说明 6.2 表单控件(Form Control)：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。HTML语言如下：<html><head>

41、<title>输入用户姓名</title></head><body><form action="" method="get">请输入你的姓名：<input type="text" name="yourname"><input type="submit" value="提交"></form></body></html>效果：6.3 表单控件(Form Cont

42、rol)：A、复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。HTML语言如下：<html><head><title>选择</title></head><body>请选择你喜欢的水果：<br><input type="checkbox" name="fruit" ="apple" >苹果<br><input type="checkbox" n

43、ame="fruit" ="orange">桔子<br><input type="checkbox" name="fruit" ="mango">芒果<br><input type="submit" value="提交"></form></body></html>效果：B、单选框(input type="radio")使用单选框，让用户在一组选项里

44、只能选择一个。6.4 下拉框(select)HTML语言如下：<html><body>你最喜欢的水果是：<select name="fruit" ><option value="apple">苹果<option value="orange">桔子<option value="mango">芒果</select><input type="submit" value="提交"><

45、/form></body></html>效果：6.5密码输入框(input type="password")密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是“*”符号。HTML语言如下：<html><head><title>输入用户姓名和密码 </title></head><body>请输入你的姓名：<input type="text"

46、name="yourname"><br>请输入你的密码：<input type="password" name="yourpw"><br><input type="submit" value="提交"></form></body></html>效果：七、HTML图片(Images)用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：<img src="ur

47、l"> url表示图片的路径和文件名。7.1图片align属性用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。HTML语言如下：<html><body><p>图片的上下对齐方式：</p><p><img src="xsi11.jpg" align="top">对齐方式:top</p><p><img src="xsi11.jpg" align="middle&q

48、uot;>对齐方式:middle</p><p><img src="xsi11.jpg" align="bottom">对齐方式:bottom</p><p>图片的左右对齐方式：</p><p><img src="xsi11.jpg" align="Left">对齐方式:left</p><p><img src="xsi11.jpg" align="center&

49、quot;>对齐方式:center</p><p><img src="xsi11.jpg" align="right">对齐方式:right</p></body></html>效果：7.2 图片的大小在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。<html><body><p>你可以使用Height和Width属性来改变图片的大小。

50、</p><p><img src="./images/html_tutorials/smile.jpg"></p><p><img src="./images/html_tutorials/smile.jpg" width="30" height="30"></p><p><img src="./images/html_tutorials/smile.jpg" width="100"

51、; height="80"></p><p><img src="./images/html_tutorials/smile.jpg" width="300" height="300"></p></body></html>效果略7.3背景图片这个示例演示如何将一个图片作为HTML网页的背景图片。HTML语言如下：<html><body background="vista文件夹.jpg"><h3

52、>这个网页有背景图片哦！</h3><p>如果图片比页面小，图片会自动重复。</p></body></html>效果：7.4 将一个图片作为一个超链接这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。HTML语言如下：<html><body><p>你可以将一张图片作为一个链接，点击这个图片。<a href="xsi.jpg"><img src="xsi11.jpg" ></a></p&

53、gt;</body></html>效果：单机上图中的“图片”，就能打开下图这样一张“完整的图片”。八、HTML字体(Fonts)在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。8.1 字体大小用字体大小属性(size)来设定字体的大小。<p><font size="2">这一段的字体大小的值是2。</font></p>8.2 字体颜色用颜色属性(color)来设定字体颜色。<p><font color="#FF0000">这一段的

54、字体颜色是红色</font></p>改变字体和字体大小<span id=“ChapterName” style=“color:#990000;font-family:楷体_GB2312;font-size:18pt;font-weight:bold;”>第一章 静态网页</span>示例：HTML语言如下：<html><head><title>字体颜色 font color</title></head><body><p><font size="2&

55、quot;>这一段的字体大小的值是2。</font></p><p>这段文字用的是缺省的字体颜色。</p><p><font color="#FF0000">这段文字的字体颜色为红色。</font></p></body></html>效果：<MARQUEE scrollAmount=4 scrollDelay=3 direction=left height=600 align="center" valign="middle"><IMG src="2053615825_2.jpg" width="430" heigth="560"></MARQUEE>上面这段代码可以使图片动起来蓝色部分都可以修改hspace="500" vspace="50"可以调节图片的位置hs

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论