Html5入门教程资料_第1页
Html5入门教程资料_第2页
Html5入门教程资料_第3页
Html5入门教程资料_第4页
Html5入门教程资料_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

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

文档简介

2017最新Html5入门教程Html5入门教程，适合初学者一、HTML基本概念什么是HTML 文件？HTML的英文全称是 HypertextMarkedLanguage ，中文叫做“超文本标记语言 ”。和一般文本的不同的是，一个 HTML文件不仅包含文本内容，还包含一些 Tag，中文称“标记”。一个HTML文件的后缀名是 .htm 或者是.html 。用文本编辑器就可以编写 HTML文件。这就试写一个HTML 文件吧！打开你的Notepad ，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.<b>Thistextisbold</b></body></html>要浏览这个 first.html 文件，双击它。或者打开浏览器，在 File菜单选择 Open，然后选择这个文件就行了。示例解释这个文件的第一个 Tag是<html> ，这个Tag告诉你的浏览器这是 HTML文件的头。文件的最后一个 Tag是</html> ，表示HTML文件到此结束。在<head> 和</head> 之间的内容，是 Head 信息。Head 信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在 Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。在<body>和</body>之间的信息，是正文。在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold的意思。HTML文件看上去和一般文本类似，但是它比一般文本多了 Tag，比如<html> ，<b> 等，通过这些 Tag，可以告诉浏览器如何显示这个文件。HTML 元素(HTMLElements)HTML元素(HTMLElement) 用来标记文本，表示文本的内容。比如body,p,title就是HTML元素。HTML元素用Tag表示，Tag以<开始，以>结束。Tag通常是成对出现的，比如 <body></body> 。起始的叫做 OpeningTag ，结尾的就叫做 ClosingTag 。目前HTML的Tag不区分大小写的。比如， <HTML> 和<html> 其实是相同的。HTML 元素(HTMLElements) 的属性HTML元素可以拥有属性。属性可以扩展 HTML元素的能力。比如你可以使用一个 bgcolor 属性，使得页面的背景色成为红色，就像这样：<bodybgcolor="red">再比如，你可以使用 border 这个属性，将一个表格设成一个无边框的表格。如下：<tableborder="0">属性通常由属性名和值成对出现，就像这样： name="value" 。上面例子中的 bgcolor,border 就是name，red和0就是value。属性值一般用双引号标记起来。属性通常是附加给 HTML的OpeningTag ，而不是 ClosingTag 。二、基础HTMLTagHTML里，比较基础的 Tag主要用于标题，段落和分行。学习HTML最好的方法，就是跟着示例学。正文标题这个示例告诉你如何在 HTML文件里定义正文标题。HTML用<h1> 到<h6> 这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3><h4>Thisisaheading</h4><h5>Thisisaheading</h5><h6>Thisisaheading</h6>段落划分在HTML里用<p> 和</p> 划分段落。<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>换行通过使用<br> 这个Tag，可以在不新建段落的情况下换行。 <br> 没有ClosingTag 。用<p> 换行是个坏习惯，正确的是使用 <br> 。<p>This<br>isapara<br>graphwithlinebreaks</p>HTML 注释在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在<!-- 和-->之间。浏览器是忽略注释的，你不会在 HTML正文中看到你的注释。<!--Thisisacomment-->一些小建议HTML文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。 一个空行也被看做一个空格。有些Tag能够将文本自成一段，而不需要使用 <p></p> 来分段。比如<h1></h1> 之类的标题Tag。更多示例这个示例显示了段落的特性。<html><body><p>这一段在源代码里包含很多分行，但是浏览器忽略这些分行。</p><p>这一段 在浏览器里包含 很多 空格，但是 浏览器忽略多余空格。</p><p>你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。</p></body></html>换行这个示例告诉你如何在 HTML文件里换行。<html><body><p>要<br>在一段<br>里<br>换行<br>请使用<br>br 这个Tag。</p></body></html>正文标题这个示例教会你如何在 HTML文件里显示正文标题。<html><body><h1>这是1号标题</h1><h2>这是2号标题</h2><h3>这是3号标题</h3><h4>这是4号标题</h4><h5>这是5号标题</h5><h6>这是6号标题</h6></body></html>居中的正文标题这个示例告诉你如何将正文标题居中显示。<html><body><h1align="center"> 这是标题</h1><p>上面的标题是居中显示的。 </p></body></html>加条横线这个示例演示了如何在 HTML文中加条横线。<html><body><p>用hr这个Tag可以在HTML文件里加一条横线。 </p><hr><p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。 </p><hr><p>问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。</p><hr><p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！⋯⋯</p></body></html>代码注释这个示例演示如何在 HTML代码中加上代码注释，这些注释只显示在 HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。<html><body><!-- 这是代码注释--><p>代码注释是不会显示在网页里的。 </p></body></html>背景颜色这个示例演示如何改变 HTML文件的背景色。<html><bodybgcolor="yellow"><h2>看，这个页面是黄色的。 </h2></body></html>三、Html常用格式HTML定义了一些文本格式的 Tag，比如利用 Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式 Tag如何改变HTML文本的显示。常用文本格式TagTag Tag 说明<b> 粗体bold<i> 斜体italic<del> 文字当中划线表示删除<ins> 文字下划线表示插入<sub> 下标<sup> 上标<blockquote> 缩进表示引用<pre> 保留空格和换行<code> 表示计算机代码，等宽字体示例HTML 常用的格式Tag这个示例用了上述 Tag，你可以对比一下 HTML的显示结果。<html><body><p><b>粗体用b表示。</b></p><p><i> 斜体用i表示。</i></p><p><del> 芙蓉姐姐</del> 这个词当中划线表示删除。 </p><p><ins> 想唱就唱</ins> 这个词下划线插入。 </p><p>X<sub>2</sub> 其中的2是下标</p><p>X<sup>2</sup> 其中的2是上标</p><p><blockquote> 好好学习，天天向上。这句话缩进表示引用 </blockquote></p><pre>这是预设(preformatted) 文本.在pre 这个tag 里的文本 保留空格和分行。</pre><code>callgetOrders</code><p>用code 显示计算机代码， code 里显示的字符是等宽字符。 </p></body></html>如何看HTML 的源代码在浏览器看到的 HTML网页，是浏览器解释 HTML源代码后产生的结果。要查看这个 HTML的源代码，有两种方法。一是点击鼠标右键，点击 ViewSource( 查看源文件)命令；二是选择浏览器菜单 View( 查看)中的Source( 源文件)命令。利用ViewSource 得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的 HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。四、Html特殊字符显示HTML 字符实体(CharacterEntities)有些字符在 HTML里有特别的含义，比如小于号 <就表示HTMLTag 的开始，这个小于号是不显示在我们最终看到的网页里的。 那如果我们希望在网页中显示一个小于号， 该怎么办呢？这就要说到 HTML字符实体(HTMLCharacterEntities) 了。一个字符实体(CharacterEntity) 分成三部分：第一部分是一个 &符号，英文叫ampersand ；第二部分是实体 (Entity) 名字或者是#加上实体(Entity) 编号；第三部分是一个分号。比如，要显示小于号，就可以写 <或者< 。用实体(Entity) 名字的好处是比较好理解，一看 lt，大概就猜出是 lessthan 的意思，但是其劣势在于并不是所有的浏览器都支持最新的 Entity 名字。而实体(Entity) 编号，各种浏览器都能处理。注意：Entity 是区分大小写的。如何显示空格通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了 10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用   表示空格。最常用的字符实体(CharacterEntities)显示结果说明EntityNameEntityNumber显示一个空格  <小于<<>大于>>&&符号&&"双引号""其他常用的字符实体(CharacterEntities)显示结果说明EntityNameEntityNumber?版权©©?注册商标®®×乘号××÷除号÷÷ISOLatin-1 字符集（见附件 1）五、HTML的超链接先看两个示例建立一个超链接这个示例演示了如何在 HTML文件里创建超链接。<html><body><p><ahref="../asdocs/html_tutorials/humor02.html"> 这是一个链接</a></p><p><ahref="/html"target=_blank> 站长网 站长学院站点链接</a></p></body></html>将一个图片作为一个超链接这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。<html><body><p>你可以将一张图片作为一个链接，点击这个图片。<ahref="../asdocs/html_tutorials/humor03.html"><imgsrc="../images/html_tutorials/smile.jpg"></a></p></body></html>a和href 属性HTML用<a>来表示超链接，英文叫 anchor。<a> 可以指向任何一个文件源： 一个HTML网页，一个图片，一个影视文件等。用法如下：<ahref="url"> 链接的显示文字 </a>点击<a></a> 当中的内容，即可打开一个链接文件， href属性则表示这个链接文件的路径。比如链接到 /html 站点首页，就可以这样表示：<ahref="/html"> 站长网 站长学院 /html 首页</a>target 属性使用target 属性，可以在一个新窗口里打开链接文件。<ahref="/html"target=_blank> 站长网 站长学院/html 首页</a>实例：<html><body><ahref="../asdocs/html_tutorials/humor01.html"target="_blank"></a>

一则笑话<p>如果你将

target

的属性值设成

_blank

，你点击这个链接的时候，网页就会在一个新窗口出现。</p></body></html>title 属性使用title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。<ahref="/html"title="

站长网 站长学院网页教程与代码的中文站点

">站长网 站长学院网站

</a>如果希望注释多行显示，可以使用

作为换行符。<ahref="/html"title="代码的中文站点 ">站长网 站长学院网站</a>

站长网 站长学院

网页教程与实例：<html><body><p><ahref="/html"title="中文站点">站长网 站长学院网站 </a></p><p>

站长网 站长学院网页教程与代码的<ahref="/html"title="代码的中文站点 ">站长网 站长学院网站</a>

站长网 站长学院

网页教程与</p></body></html>name

属性使用name 属性，可以跳转到一个文件的指定部位。使用

name

属性，要设置一对。一是设定

name

的名称，二是设定一个

href

指向这个

name

：<ahref="#C1">

参见第一章

</a><aname="C1">

第一章</a>实例：<html><body><p><ahref="#C9">参见第六章</a></p><p><aname="C1"><h2>第1章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C2"><h2>第2章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C3"><h2>第3章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C4"><h2>第4章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C5"><h2>第5章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C6"><h2>第6章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C7"><h2>第7章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C8"><h2>第8章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p><aname="C9"><h2>第9章</h2></a><p>这是站长网站长学院/html-网页教程与代码的中文站点。</p></body></html>name属性通常用于创建一个大文件的章节目录(tableofcontents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置 Name 属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。如果浏览器不能找到 Name 指定的部分，则显示文章开头，不报错链接到email 地址在网站中，你经常会看到 “联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如OutlookExpress ，然后显示一个新建 mail 的窗口。用<a> 可以实现这样的功能。<ahref="mailto:info@"> 联系新浪</a>实例：<html><body><p>这是一个最简单的邮箱地址的链接：<ahref="mailto:info@"> 给新浪网站发信 </a></p><p>这个邮箱地址的链接写了 subject 内容：<ahref="mailto:info@?subject=Hello"> 给新浪网站发信</a></p><p>这个邮箱地址链接写了 to,cc,bcc,subject,body 的内容：<ahref="mailto:info@?cc=webmaster@&bcc=media@&subject=I%20like%20your%20site&body= 真是个好站点！ ">写信给新浪</a></p><p><b>注:</b> 空格请用%20表示。</p></body></html>六、HTML相对路径(RelativePath)和绝对路径(AbsolutePath)HTML初学者会经常遇到这样一个问题， 如何正确引用一个文件。 比如，怎样在一个 HTML网页中引用另外一个 HTML网页作为超链接 (hyperlink) ？怎样在一个网页中插入一张图片？如果你在引用文件时 (如加入超链接，或者插入图片等 )，使用了错误的文件路径， 就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等 )。为了避免这些错误，正确地引用文件，我们需要学习一下 HTML路径。HTML有2种路径的写法：相对路径和绝对路径。HTML 相对路径(RelativePath)同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。我们现在建一个源文件 info.html ，在info.html 里要引用 index.html 文件作为超链接。假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="index.html">index.html</a>如何表示上级目录../表示源文件所在目录的上一级目录， ../../ 表示源文件所在目录的上上级目录， 以此类推。假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\sites\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="../index.html">index.html</a>假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="../../index.html">index.html</a>假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="../wowstory/index.html">index.html</a>如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="html/index.html">index.html</a>假设info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html假设index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html在info.html 加入index.html 超链接的代码应该这样写：<ahref="html/tutorials/index.html">index.html</a>HTML 绝对路径(AbsolutePath)HTML绝对路径(absolutepath) 指带域名的文件的完整路径。假设你注册了域名 /html ，并申请了虚拟主机， 你的虚拟主机提供商会给你一个目录，比如 www，这个www 就是你网站的根目录。假设你在 www 根目录下放了一个文件 index.html ，这个文件的绝对路径就是：/html 。假设你在 www 根目录下建了一个目录叫 html_tutorials ，然后在该目录下放了一个文件index.html ，这个文件的绝对路径就是/html/html_tutorials/index.html 。七、如何在HTML中创建表格HTML表格用<table> 表示。一个表格可以分成很多行 (row) ，用<tr> 表示；每行又可以分成很多单元格 (cell)，用<td> 表示。这三个Tag是创建表格最常用的 Tag。示例<html><body><p>表格所用到的

Tag：整个表格开始要用

table

；每一行开始要用

tr

；每一单元格开始要用

td

。</p><h4>

只有一行

(Row)

一列(Column)

的表格</h4><tableborder="1"><tr><td>100</td></tr></table><h4>

一行三列的表格

</h4><tableborder="1"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>两行三列的表格<tableborder="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>

</h4>border 属性在缺省情况下，如果不设置表格的边界，表格是不显示边界的。示例：不显示边界的表格<html><body><h4>缺省情况下，表格没有边界。 </h4><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>表格Border

设为

0，也不显示边界：

</h4><tableborder="0"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>要显示表格的边界，可使用 border 这个属性。示例：显示边界的表格<html><body><h4>表格的边界值设为 1：</h4><tableborder="1"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>表格的边界值设为 8，边界更粗：</h4><tableborder="8"><tr><td><td>

第一</td>行</td></tr><tr><td><td>

第二</td>行</td></tr></table><h4>表格的边界值设为

15，边界更粗：

</h4><tableborder="15"><tr><td><td></tr><tr>

第一</td>行</td><td>第二</td><td>行</td></tr></table></body></html>表格的表头用<th> 来表示表格的表头，表头的字是粗体显示的。示例： 有表头的表格<html><body><h4>有表头的表格： </h4><tableborder="1"><tr><th>姓名</th><th>电话</th><th>传真</th></tr><tr><td>BillGates</td><td>55577854</td><td>55577855</td></tr></table><h4>竖直方向的表头： </h4><tableborder="1"><tr><th>姓名</th><td>BillGates</td></tr><tr><th>电话</th><td>55577854</td></tr><tr><th>传真</th><td>55577855</td></tr></table></body></html>空的单元格如果表格的单元格 <td></td> 之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。 要显示这个单元格的边界， 可以插入一个  空格符。示例<html><body><tableborder="1"><tr><td>Sometext</td><td>Sometext</td></tr><tr><td></td><td>Sometext</td></tr></table><p>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。

</p><tableborder="1"><tr><td>Sometext</td><td>Sometext</td></tr><tr><td> </td><td>Sometext</td></tr></table><p>上面的例子，你可以看到，给这个单元格加上一个空格符号之后， 单元格的边界就显示出来了。 </p><p>注意：空格符要用 &bsp; 表示。  是一个HTML特别字符，参见 HTML特别字符(HTMLCharacterEntities)

。</p></body></html>更多示例有标题的表格这个示例演示如何用 <caption> 在一个表格上加上标题。<html><body><h4>这个表格有标题：</h4><tableborder="6"><caption> 表格标题</caption><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>包含多列或多行的单元格这个示例演示如何用

colspan

，rowspan

设置多列或者多行的单元格。<html><body><h4>用colpsan

属性，设置包含多列的单元格：

</h4><tableborder="1"><tr><th>姓名</th><thcolspan="2"></tr>

联系方式

</th><tr><td>BillGates</td><td>55577854</td><td>55577855</td></tr></table><h4>用rowspan

这个属性，设置包含多行的单元格：

</h4><tableborder="1"><tr><th>姓名</th><td>BillGates</td></tr><tr><throwspan="2">

联系方式

</th><td>55577854</td></tr><tr><td>55577855</td></tr></table></body></html>单元格里的内容这个例子演示单元格 <td></td> 里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。<html><body><tableborder="1"><tr><td><p>这是一段</p><p>这是另外一段。 </p></td><td>这个单元格里包含了一个表格：<tableborder="1"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>这个单元格里包含了一个图片：<imgsrc="../images/html_tutorials/mail.gif"></td><td>HELLO</td></tr></table></body></html>单元格内容与单元格边界之间的距离这个示例教你如何用 cellpadding 这个属性设置单元格内容与单元格边界之间的距离。<html><body><h4>没有cellpadding 的表格：</h4><tableborder="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><p>设置cellpadding 属性，可以改变单元格内容和单元格边界之间的距离。 </p><h4>以下是设置了 cellpadding 属性的表格：</h4><tableborder="1"cellpadding="10"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>cellpadding 属性值设置为 30的表格：</h4><tableborder="1"cellpadding="30"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>单元格之间的距离这个示例教你如何用 cellspacing 这个属性设置单元格之间的距离<html><body><p>Cellspacing 属性表示单元格之间的距离。 </p><h4>如果表格里没有设置 cellspacing 属性，缺省情况下， cellspacing 值为1。</h4><tableborder="1"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>Cellspacing 属性值设为 0的表格：</h4><tableborder="1"cellspacing="0"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>Cellspacing 属性值设为 20的表格：</h4><tableborder="1"cellspacing="20"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>设置表格的背景颜色和背景图片这个示例演示如何用 bgcolor 属性设置表格的背景颜色，如何用 background 属性为表格添加背景图片。<html><body><h4>给表格设置背景颜色： </h4><tableborder="1"bgcolor="red"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>给表格加背景图片： </h4><tableborder="1"background="../images/html_tutorials/background.gif"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>设置单元格的背景颜色和背景图片这个示例演示如何用 bgcolor 属性设置单元格的背景颜色，如何用 background 属性为单元格添加背景图片。<html><body><h4>单元格背景色： </h4><tableborder="1"><tr><tdbgcolor="red"> 第一</td><td>行</td></tr><tr><tdbackground="../images/html_tutorials/background.gif"> 第二</td><td>行</td></tr></table></body></html>单元格内容的对齐方式这个示例教你如何用 align 属性设置单元格的对齐方式。<html><body><tablewidth="350"border="1"><tr><thalign="center"><thalign="center"><thalign="center">

分数</th>期中考试</th>期末考试</th></tr><tr><tdalign="left"> 芙蓉姐姐<tdalign="right">250.10</td><tdalign="right">50000.20</td></tr><tr>

</td><tdalign="left"> 程菊花</td><tdalign="right">1000.00</td><tdalign="right">5000.45</td></tr><tr><tdalign="left"> 周笔畅</td><tdalign="right">2000.40</td><tdalign="right">500.00</td></tr><tr><tdalign="left"> 黄新</td><tdalign="right">300.50</td><tdalign="right">800.65</td></tr></table></body></html>八、HTML框架(Frames)使用框架(Frame) ，你可以在浏览器窗口同时显示多个网页。 每个Frame 里设定一个网页，每个Frame 里的网页相互独立。Frameset<frameset></frameset> 决定如何划分性。使用cols属性，表示按列分布 Frame

Frame；使用

。<frameset> 有cols属性和rowsrows 属性，表示按行分布 Frame。

属Frame用<frame> 这个Tag设定网页。<frame> 里有src属性，src值就是网页的路径和文件名。下面的代码的目的是：

将

Frameset

分成

2列，第一列

25%

，表示第一列的宽度是窗口宽度的

25%

；第二列

75%

，表示第一列的宽度是窗口宽度的

75%

。第一列中显示

a.html

，第二列中显示

b.html

。<framesetcols="25%,75%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesrc="../asdocs/html_tutorials/Frame_b.html"></frameset>IframeIframe 是InlineFrame 的意思，用<iframe></iframe> 可以将Frame 置于一个HTML文件内。示例列分Frame这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。<html><framesetcols="25%,50%,25%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></html>行分Frame这个例子显示如何在浏览器里同时显示三个网页，三个网页是按行分布的。<html><framesetrows="25%,50%,25%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></html>混合Frameset这个例子既用到了 cols属性，又用到了 rows 属性，将Frame 进行灵活分布。<html><framesetrows="50%,50%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesetcols="25%,75%"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></frameset></html>Frameset

中的

noresize

属性使用

Noresize

属性可以确保

Frame

的大小。如果不使用

noresize

属性，你可以用鼠标移动

Frame

的边界，来改变

Frame

的大小，如果设置了

noresize

属性，就不能移动边界了。<html><framesetrows="50%,50%"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_a.html"><framesetcols="25%,75%"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_b.html"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_c.html"></frameset></frameset></html>Frame 用于导航<html><framesetcols="120,*"><framesrc="../asdocs/html_tutorials/framelist.html"><framesrc="../asdocs/html_tutorials/Frame_a.html"name="showframe"></frameset></html>这个例子演示如何建立一个用于导航的 Frame。这个导航 Frame 包含一个 HTML，这个HTML（代码如下）包含了一个网页列表。 点击网页列表中的任何一项， 就会在第二个 Frame中显示点击中的网页。<HTML><HEAD><TITLE>humorlist.html</TITLE></HEAD><BODY><p><ahref="../asdocs/html_tutorials/Frame_a.html"target="showframe">笑话一<a></p><p><a href ="../asdocs/html_tutorials/Frame_b.html"target="showframe">笑话二<a></p><p><a href ="../asdocs/html_tutorials/Frame_c.html"target="showframe">笑话三<a></p></BODY></HTML>Iframe 的使用这个例子显示如何在一个 HTML文件里用 iframe 嵌入一个网页。<html><body><p>用

IFRAME

可以在

HTML文件里显示另一个网页。

</p><p>这个

HTML

文档中使用

IFRAME

来显示另外一个叫

Frame_a.html

的网页。

</p><iframesrc="../asdocs/html_tutorials/Frame_a.html"></iframe></body></html>九、HTML列表(Lists)HTML

有三种列表形式：排序列表

(OrderedList)

；不排序列表

(UnorderedList)

；定义列表(DefinitionList)

。排序列表(OrderedList)排序列表中，每个列表项前标有数字，表示顺序。排序列表由<ol> 开始，每个列表项由 <li> 开始。示例<html><body><h4>一个排序列表(OrderedList)：</h4><ol><li>站长网站长学院之网页课程</li><li>站长网站长学院之网页代码</li><li>站长网站长学院之魔兽世界</li></ol></body></html>不排序列表(UnorderedList)不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。不排序列表由<ul> 开始，每个列表项由 <li> 开始。示例<html><body><h4>不排序列表(UnorderedList)：</h4><ul><li>站长网站长学院之网页课程</li><li>站长网站长学院之网页代码</li><li>站长网站长学院之魔兽世界</li></ul></body></html>定义列表定义列表通常用于术语的定义。定义列表由

<dl>

开始。术语由

<dt>

开始，英文意为

DefinitionTerm

。术语的解释说明，由<dd>

开始，<dd></dd>

里的文字缩进显示。定义列表示例<html><body><h4>定义列表

(DefinitionList)

：</h4><dl><dt>野生动物</dt><dd>所有非经人工饲养而生活于自然环境下的各种动物。 </dd><dt>宠物</dt><dd>指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。

</dd></dl></body></html>更多示例不同类型(Type) 的排序列表这个例子显示如何用 Type 属性设置排序列表项前的符号。<html><body><h4>排序列表，不设 Type 属性：</h4><ol><li> 站长网 站长学院之网页课程 </li><li> 站长网 站长学院之网页代码 </li><li> 站长网 站长学院之魔兽世界 </li></ol><h4>排序列表，Type 属性设为A：</h4><oltype="A"><li> 站长网 站长学院之网页课程 </li><li> 站长网 站长学院之网页代码 </li><li> 站长网 站长学院之魔兽世界 </li></ol><h4>排序列表，Type 属性设为a：</h4><oltype="a"><li> 站长网 站长学院之网页课程 </li><li> 站长网 站长学院之网页代码 </li><li> 站长网 站长学院之魔兽世界 </li></ol><h4>排序列表，Type 属性设为I：</h4><oltype="I"><li> 站长网 站长学院之网页课程 </li><li> 站长网 站长学院之网页代码 </li><li> 站长网 站长学院之魔兽世界 </li></ol><h4>排序列表，Type 属性设为i：</h4><oltype="i"><li> 站长网 站长学院之网页课程 </li><li> 站长网 站长学院之网页代码 </li><li> 站长网 站长学院之魔兽世界 </li></ol></body></html>不同类型(Type) 的不排序列表这个例子显示如何用 Type 属性设置不排序列表项前的符号。<html><body><h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4><ultype="disc"><li>站长网站长学院之网页课程</li><li>站长网站长学院之网页代码</li><li>站长网站长学院之魔兽世界</li></ul><h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4><ultype="circle"><li>站长网站长学院之网页课程</li><li>站长网站长学院之网页代码</li><li>站长网站长学院之魔兽世界</li></ul><h4>Type设为square的列表，列表项前面的符号是黑方块：</h4><ultype="square"><li>站长网站长学院之网页课程</li><li>站长网站长学院之网页代码</li><li> 站长网 站长学院之魔兽世界 </li></ul></body></html>嵌套的列表列表里可以含有子列表。通常用这种嵌套的列表，反映层次较多的内容。<html><body><h4>嵌套一层的列表： </h4><ul><li> 肉类</li><li> 蔬菜<ul><li> 番茄</li><li> 青菜</li></ul></li><li> 酒类</li></ul><h4>嵌套2层的列表：</h4><ul><li> 动物<ul><li> 两栖动物</li><li> 哺乳动物<ul><li> 人</li><li> 猩猩</li></ul></li><li> 鱼类</li></ul></li><li> 植物</li></ul></body></html>十、HTML表单(Forms)HTML表单(Form) 是HTML的一个重要部分，主要用于采集和提交用户输入的信息。举个简单的例子，一个让用户输入姓名的 HTML表单(Form) 。示例代码如下：<formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">请输入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value=" 提交"></form>演示示例<html><head><title> 输入用户姓名</title></head><body><formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">请输入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value=" 提交"></form></body></html>学习HTML表单(Form) 最关键要掌握的有三个要点：表单控件(FormControls)ActionMethod先说表单控件(FormControls) ，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里， inputtype="text" 就是一个表单控件，表示一个单行输入框。用户填入表单的信息总是需要程序来进行处理，表单里的 action 就指明了处理表单信息的文件。比如上面例句里的/html/asdocs/html_tutorials/yourname.asp 。至于method ，表示了发送表单信息的方式。 method 有两个值：get和post。get的方式是将表单控件的 name/value 信息经过编码之后，通过 URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用 post。HTML 表单(Form) 常用控件(Controls)HTML表单(Form) 常用控件有：表单控件(FormContros)说明inputtype="text"单行文本输入框inputtype="submit"将表单(Form)里的信息提交给表单里action所指向的文件inputtype="checkbox"复选框inputtype="radio"单选框select下拉框textArea多行文本输入框inputtype="password"密码输入框(输入的文字用*表示)表单控件(FormControl) ：单行文本输入框 (inputtype="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：<inputtype="text"name="yourname">演示示例（同上）表单控件(FormControl) ：复选框(inputtype="checkbox")复选框允许用户在一组选项里，选择多个。示例代码：<inputtype="checkbox"name="fruit"value="apple"><inputtype="checkbox"name="fruit"value="orange"><inputtype="checkbox"name="fruit"value="mango">

苹果<br>桔子<br>芒果<br>演示示例<html><head><title> 选择</title></head><body>请选择你喜欢的水果： <br><formaction="/html/asdocs/html_tutorials/choose.asp"method="post"><inputtype="checkbox"name="fruit"value="apple"><inputtype="checkbox"name="fruit"value="orange"><inputtype="checkbox"name="fruit"value="mango"><inputtype="submit"value=" 提交"></form></body></html>

苹果<br>桔子<br>芒果<br>用checked 表示缺省已选的选项。<inputtype="checkbox"name="fruit"value="orange"checked>

桔子<br>表单控件

(FormControl)

：单选框

(inputtype="radio")使用单选框，让用户在一组选项里只能选择一个。示例代码：<inputtype="radio"name="fruit"value="Apple"><inputtype="radio"name="fruit"value="Orange"><inputtype="radio"name="fruit"value="Mango">

苹果<br>桔子<br>芒果<br>演示示例<html><head><title> 选择</title></head><body>请选择你最喜欢的水果： <br><formaction="/html/asdocs/html_tutorials/choose.asp"method="post"><inputtype="radio"name="fruit"value="Apple"> 苹果<br><inputtype="radio"name="fruit"value="Orange"> 桔子<br><inputtype="radio"name="fruit"value="Mango"> 芒果<br><inputtype="submit"value=" 提交"></form></body></html>用checked 表示缺省已选的选项。<inputtype="radio"name="fruit"value="Orange"checked> 桔子<br>表单控件(FormControl) ：下拉框(select)下拉框(Select) 既可以用做单选，也可以用做复选。单选例句如下：<selectname="fruit"><optionvalue="apple"> 苹果<optionvalue="orange"> 桔子<optionvalue="mango"> 芒果</select>演示示例<html><body><formaction="/html/asdocs/html_tutorials/choose.asp"method="post">你最喜欢的水果是：<selectname="fruit"><optionvalue="apple"> 苹果<optionvalue="orange"> 桔子<optionvalue="mango"> 芒果</select><inputtype="submit"value=" 提交"></form></body></html>如果要变成复选，加 muiltiple 即可。用户用 Ctrl 来实现多选。例句：<selectname="fruit"multiple>用户还可以用 size属性来改变下拉框 (Select) 的大小。<selectname="fruit"size="1"multiple>表单控件(FormControl) ：多行输入框(textarea)多行输入框(textarea) 主要用于输入较长的文本信息。例句如下：<textareaname="yoursuggest"cols="50"rows="3"></textarea>其中cols表示textarea 的宽度，rows 表示textarea 的高度。演示示例<html><head><title> 请提宝贵意见</title></head><body><formaction="/html/asdocs/html_tutorials/suggest.asp"method="get">请提宝贵意见： <br><textareaname="yoursuggest"cols="50"rows="3"></textarea><br><inputtype="submit"value="</form></body></html>

提交">表单控件

(FormControl)

：密码输入框

(inputtype="password")密码输入框(inputtype="password") 主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：<inputtype="password"name="yourpw">演示示例<html><head><title> 输入用户姓名和密码 </title></head><body><formaction="/html/asdocs/html_tutorials/userpw.asp"method="post">请输入你的姓名：<inputtype="text"name="yourname"><br>请输入你的密码：<inputtype="password"name="yourpw"><br><inputtype="submit"value=" 提交"></form></body></html>表单控件(FormControl) ：提交(inputtype="submit")通过提交(inputtype=submit) 可以将表单(Form) 里的信息提交给表单里 action 所指向的文件。例句如下：<inputtype="submit"value=" 提交">演示示例（同 inputtype= ”text ”示例）表单控件(FormControl) ：图片提交(inputtype="image")inputtype=image 相当于 inputtype=submit ，不同的是，inputtype=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。<inputtype="image"src="images/icons/go.gif"alt=" 提交"NAME="imgsubmit">演示示例<html><head><title> 输入用户姓名</title></head><body><formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">请输入你的姓名：<inputtype="text"name="yourname"><br><inputtype="image"src="images/icons/go.gif"alt=" 提交"NAME="imagesubmit"></form></body></html>十一、HTML图片(Images)用<img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：<imgsrc="url">url表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif ，也可以是个相对路径 "../images/logo/blabla_logo01.gif" 。示例<html><body><p>站长网 站长学院 Logo图片：<imgsrc="../images/html_tutorials/blabla_logo.gif"></p></body></html>图片alt 属性<img> 中有一个 alt属性，英文叫 alternatetext 。例句如下：<imgsrc="../images/html_tutorials/smile.jpg"alt="smileface">假使浏览器没有载入图片的功能，浏览器就会转而显示 Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍 Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字， 所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。示例<html><body><p>将鼠标停留在图片上，你可以看到 Alt 属性里写的内容。 </p><imgsrc="../images/logo/blabla_logo.gif"alt=" 站长网 站长学院的 Logo 标志"><br><img src="../images/html_tutorials/frjj01.jpg" alt=" 芙蓉姐姐照片：红配绿一台戏"></body></html>图片align 属性用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。示例<html><body><p>图片的上下对齐方式： </p><p><imgsrc="../images/logo/blabla_logo.gif"align="top"><p><imgsrc="../images/logo/blabla_logo.gif"align="middle">

对齐方式:top</p>对齐方式:middle</p><p><imgsrc="../images/logo/blabla_logo.gif"align="bottom">

对齐方式:bottom</p><p>图片的左右对齐方式： </p><p><imgsrc="../images/logo/blabla_logo.gif"align="Left">

对齐方式:left</p><p><imgsrc="../images/logo/blabla_logo.gif"align="center">

对齐方式:center</p><p><imgsrc="../images/logo/blabla_logo.gif"align="right">

对齐方式:right</p></body></html>图片的大小在缺省状况下，图片显示原有的大小。你可以用

height

和

width

属性改变图片的大小。

不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。示例<html><body><p>你可以使用 Height 和Width 属性来改变图片的大小。 </p><p><imgsrc="../images/html_tutorials/smile.jpg"></p><p><imgsrc="../images/html_tutorials/smile.jpg"width="30"height="30"></p><p><imgsrc="../images/html_tutorials/smile.jpg"width="100"height="80"></p><p><imgsrc="../images/html_tutori

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

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

最新文档

评论

0/150

提交评论