【php精品源码栏目提醒】:文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。
网学会员整理了php精品源码-【精品】html经典教程讲解 - 小学课件的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!
HTML 元素 Previous Page Next Page HTML 文档是由 HTML 元素构成的文本文件。
HTML 元素是通过使用 HTML 标签进行定义的。
HTML 标签 HTML 标签是用来标记 HTML 元素的。
HTML 标签被 lt 和 gt 符号包围。
这些包围的符号叫作尖括号。
HTML 标签是成对出现的。
例如 ltbgt 和 lt/bgt。
位于起始标签和终止标签之间的文本是元素的内容。
HTML 标签对大小写不敏感,ltbgt 和 ltBgt 的作用的相同的。
HTML 元素 还记得上一节中的那个例子吗: lthtmlgt ltheadgt lttitlegt页面的标题lt/titlegt lt/headgt ltbodygt ltpgt这是我的第一个页面。
lt/pgt ltbgt此文本是粗体的。
lt/bgt lt/bodygt lt/htmlgt 这就是一个 HTML 元素: ltbgt此文本是粗体的。
lt/bgt 这个 HTML 元素由起始标签 ltbgt 开始。
这个元素的内容是:“此文本是粗体的。
”。
这个 HTML 元素由终止标签 lt/bgt 结尾。
ltbgt 标签的作用是定义一个显示为粗体的 HTML 元素。
这也是一个 HTML 元素: ltbodygt ltpgt这是我的第一个页面。
lt/pgt ltbgt此文本是粗体的。
lt/bgt lt/bodygt 这个 HTML 元素开始于 ltbodygt 标签,结束于 lt/bodygt 标签。
ltbodygt 标签的作用是定义 HTML 文件中的容纳 body 的 HTML 元素。
为什么我们要使用小写的标签? 我们刚才讲到:HTML 标签对大小写是不敏感的:ltbgt 和 ltBgt 的作用的相同的。
当您在网上冲浪时, 您会发现大多数教程在他们的例子中都使用大写的 HTML 标签。
而我们总是使用小写。
原因何在呢? 如果您希望为使用下一代 HTML 而做好准备,您就应该使用小写标签。
万维网协会 W3C 的标准是:建 议在 HTML 4 中使用小写标签,而在 XHTML(下一代 HTML)中,必须使用小写标签。
基本的 HTML 标签 Previous Page Next Page HTML 中最重要的标签是定义标题、段落和换行的标签。
学习 HTML 最好的方式就是边学边做实验。
我们为您准备了很好的 HTML 编辑器。
使用这个编辑器, 您可以任意编辑一段 HTML
源码,然后单击 TIY 按钮来查看结果。
实例一个简单的 HTML 文件 这个例子是一个很简单的 HTML 文件,使用了尽可能少的 HTML 标签。
它向您演示了 body 元素中的内容是如何被浏览器显示的。
简单的段落 此例演示:段落元素中的文字如何被浏览器显示。
(您可以在页面的底部找到更多实例)标题标题使用 lth1gt 至 lth6gt 标签进行定义。
lth1gt 定义最大的标题。
lth6gt 定义最小的标题。
lth1gtThis is a headinglt/h1gtlth2gtThis is a headinglt/h2gtlth3gtThis is a headinglt/h3gtlth4gtThis is a headinglt/h4gtlth5gtThis is a headinglt/h5gtlth6gtThis is a headinglt/h6gtHTML 会自动在标题前后添加一个额外的折行。
段落段落使用 ltpgt 标签进行定义。
ltpgtThis is a paragraphlt/pgtltpgtThis is another paragraphlt/pgtHTML 会自动在段落前后添加一个额外的空行。
不要忘记关闭标签您可能注意到了,在编写段落时可以不带有 lt/pgt 标签:ltpgtThis is a paragraphltpgtThis is another paragraph上面的例子在大多数浏览器中都可以
工作,但是不要依赖这种做法。
HTML 未来的版本不允许省略任何结束标签。
通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。
清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解。
换行符当你打算结束一行,而又不想开始一个新段落时,ltbrgt 标签就派上用场了。
无论你将它置于何处,ltbrgt标签都会产生一个强制的换行。
ltpgtThis ltbrgt is a paraltbrgtgraph with line breakslt/pgtltbrgt 标签是空白标签,由于关闭标签没有任何意义,因此它没有类似 lt/brgt 的终止标签。
ltbrgt 还是 ltbr /gt您会越来越多地发现 ltbrgt 与 ltbr /gt 很相似。
由于 ltbrgt 没有结束标签,它也就违反了未来的 HTML 的规则之一,即所有的元素都必须关闭。
把这个标签写为 ltbr /gt 是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
HTML 注释注释标签用于在 HTML
源码中插入注释。
注释会被浏览器忽略。
您可以使用注释对您的代码进行解释,这么做在以后的日子里会对您的代码编辑产生帮助。
lt-- This is a comment --gt注意:左括号后需要写一个惊叹号,右括号前就不需要了。
对 HTML 元素的重新认识 每个 HTML 元素都有一个元素名(比如 body、h1、p、br) 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间 某些 HTML 元素没有内容 某些
HTML 元素没有结束标签基本的注意事项 - 有益的提示当您写 HTML 文本的时候,你永远也没法确定这些文本在另一台显示器上是如何显示的。
一些人使用大显示器,而另一些使用小的。
当用户调整视窗的分辨率时,这些文本就会被重新格式化。
所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。
HTML 会裁掉文本中所有的空格。
任何数量的空格都被按一个空格计数。
另外,在 HTML 中,一个空行也被当作一个空格。
使用空的段落标记 ltpgt 去插入一个空行是个坏习惯。
用 ltbrgt 标签代替它!(但是不要用 ltbrgt 标签去创建列表。
不要着急,您将在稍后的篇幅学习到 HTML 列表。
)您也许已经注意到了,在没有结束标签 lt/pgt 的情况下,ltpgt 标签依然可以正常工作。
不过不要这样做!下一个版本的 HTML 将不允许忽略任何的结束标签。
HTML 会自动地在某些元素前后添加一个额外的空行,比如段落、标题元素前后。
使用水平线 lthrgt 标签 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
更多实例更多的段落 本例演示段落元素的某些缺省的行为。
“诗歌”问题 本例演示 HTML 格式化的某些
问题。
折行 本例演示在 HTML 文档中折行的使用。
标题 本例演示在 HTML 文档中显示标题的标签。
水平线 本例演示如何插入水平线。
隐藏的注释 本例演示如何在 HTML
源代码中插入隐藏的注释。
基本的 HTML 标签 标签 描述 lthtmlgt 定义 HTML 文档。
ltbodygt 定义文档的主体。
lth1gt to lth6gt 定义标题 1 至标题 6。
ltpgt 定义段落。
ltbrgt 插入折行。
lthrgt 定义水平线。
lt--gt 定义注释。
HTML 属性 Previous Page Next Page 属性为 HTML 元素提供附加信息。
HTML 标签的属性 HTML 标签拥有属性。
属性为 HTML 元素提供附加信息。
属性总是以名称/值对的形式出现,比如:namequotvaluequot 属性总是在 HTML 元素的开始标签中规定。
属性例子 1: lth1gt 定义标题的开始。
lth1 alignquotcenterquotgt 拥有关于对齐方式的附加信息。
TIY : 居中排列标题 属性例子 2: ltbodygt 定义 HTML 文档的主体。
ltbody bgcolorquotyellowquotgt 拥有关于背景颜色的附加信息。
TIY : 背景颜色 属性例子 3: lttablegt 定义 HTML 表格。
(您将在稍后的章节学习到更多有关 HTML 表格的内容) lttable borderquot1quotgt 拥有关于表格边框的附加信息。
使用小写属性 属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值,而 XHTML 要求使用小写属性/属性值。
始终为属性值加引号 属性值应该始终被包括在引号内。
双引号是最
常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如: nameJohn quotShotGunquot Nelson HTML 文本格式化 Previous Page Next Page HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
下面有很多例子,您可以亲自试试: HTML 文本格式化实例 文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化 预格式文本 此例演示如何使用 pre 标签对空行和空格进行控制。
“计算机输出”标签 此例演示不同的“计算机输出”标签的显示效果。
地址 此例演示如何在 HTML 文件中写地址。
缩写和首字母缩写 此例演示如何实现缩写或首字母缩写。
文字方向 此例演示如何改变文字的方向。
块引用 此例演示如何实现长短不一的引用语。
删除字效果和插入字效果 此例演示如何标记删除文本和插入文本。
如何查看 HTML
源码 您是否有过这样的经历,当你看到一个很棒的站点,你会很想知道开发人员是如何将它实现的?你有没有看过一些网页,并且想知道它是如何做出来的呢?要揭示一个网站的技术秘密,其实很简单。
单击浏览器的“查看”菜单,选择“查看源文件”即可。
随后你会看到一个弹出的窗口,窗口内就是实际的 HTML 代码。
文本格式化标签 标签 描述 ltbgt 定义粗体文本。
ltbiggt 定义大号字。
ltemgt 定义着重文字。
ltigt 定义斜体字。
ltsmallgt 定义小号字。
ltstronggt 定义加重语气。
ltsubgt 定义下标字。
ltsupgt 定义上标字。
ltinsgt 定义插入字。
ltdelgt 定义删除字。
ltsgt 不赞成使用。
使用 ltdelgt 代替。
ltstrikegt 不赞成使用。
使用 ltdelgt 代替。
ltugt 不赞成使用。
使用样式(style)代替。
“
计算机输出”标签 标签 描述 ltcodegt 定义计算机代码。
ltkbdgt 定义键盘码。
ltsampgt 定义计算机代码样本。
ltttgt 定义打字机代码。
ltvargt 定义变量。
ltpregt 定义预格式文本。
ltlistinggt 不赞成使用。
使用 ltpregt 代替。
ltplaintextgt 不赞成使用。
使用 ltpregt 代替。
ltxmpgt 不赞成使用。
使用 ltpregt 代替。
引用、引用和术语定义 标签 描述 ltabbrgt 定义缩写。
ltacronymgt 定义首字母缩写。
ltaddressgt 定义地址。
ltbdogt 定义文字方向。
ltblockquotegt 定义长的引用。
ltqgt 定义短的引用语。
ltcitegt 定义引用、引证。
ltdfngt 定义一个定义项目。
延伸阅读: 改变文本的外观和含义 HTML 链接 Previous Page Next Page HTML 使用超级链接与网络上的另一个文档相连。
实例 创建超级链接 本例演示如何在 HTML 文档中创建链接。
将图像作为链接 本例
演示如何使用图像作为链接。
(可以在本页底端找到更多实例。
)锚标签和 Href 属性HTML 使用 ltagt (锚)标签来创建连接另一个文档的链接。
锚可以指向
网络上的任何资源:一张 HTML 页面,一幅图像,一个声音或视频文件等等。
创建锚的语法:lta hrefquoturlquotgtText to be displayedlt/agtltagt 用来创建锚。
href 属性用于定位需要链接的文档,锚的开始标签和结束标签之间的文字被作为超级链接来显示。
这个锚定义了指向 w3school 的链接:lta hrefquothttp://www.w3school.com.cn/quotgtVisit W3Schoollt/agt上面的这行在浏览器中显示为这样:Visit W3SchoolTarget 属性使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:lta hrefquothttp://www.w3school.com.cn/quot targetquot_blankquotgtVisit W3Schoollt/agt锚标签和 Name 属性Name 属性用于创建被命名的锚(named anchors)。
当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法:lta namequotlabelquotgtText to be displayedlt/agtname 属性用于创建命名锚。
锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚:lta namequottipsquotgtUseful Tips Sectionlt/agt你会注意到,命名锚会以特殊的方式来显示。
将 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个节,就像这样:lta hrefquothttp://www.w3school.com.cn/html/html_links.asptipsquotgtJump to the Useful Tips Sectionlt/agt从文件 html_links.asp 内部链接到 Useful Tips 节的超级链接是这样的:跳转到 有用的提示 部分基本的注意事项 - 有用的提示:总是将正斜杠添加到子文件夹。
假如你这样书写链接的话:hrefquothttp://www.w3school.com.cn/htmlquot,就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:hrefquothttp://www.w3school.com.cn/html/quot命名锚经常被用在长的
文档中创建目录。
可以为每个章节赋予一个命名锚,然后连接到这些锚的链接被置于
文档的上部。
假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。
不会有错误发生。
更多实例在新的浏览器窗口打开链接 本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。
链接到同一个页面的不同位置 本例演示如何使用链接跳转至文档的另一个部分跳出框架 本例演示如何跳出框架,假如你的页面被固定在框架之内。
创建电子邮件链接 本例演示如何如何链接到一个邮件。
(本例在安装邮件客户端
程序后才能工作。
) 创建电子邮件链接 2 本例演示更加复杂的邮件链接。
链接标签 标签 描述 ltagt 定义锚。
HTML 框架 Previous Page Next Page 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
实例 垂直框架 本例演示:如何使用三份不同的文档制作一个垂直框架。
水平框架 本例演示:如何使用三份不同的文档制作一个水平框架。
(可以在本页底端找到更多实例。
) 框架 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
每份 HTML 文档称为一个框架,并且每 个框架都独立于其他的框架。
使用框架的坏处: 开发人员必须同时跟踪更多的 HTML 文档 很难打印整张页面 框架结构标签(ltframesetgt) 框架结构标签(ltframesetgt)定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 编者注:frameset 标签也被某些文章和书籍译为框架集。
框架标签(Frame)Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。
第一列被设置为占据浏览器窗口的 25。
第二列被设置为占据浏览器窗口的 75。
HTML 文档 quotframe_a.htmquot 被置于第一个列中,而 HTML 文档quotframe_b.htmquot 被置于第二个列中:ltframeset colsquot2575quotgt ltframe srcquotframe_a.htmquotgt ltframe srcquotframe_b.htmquotgtlt/framesetgt基本的注意事项 - 有用的提示:假如一个框架有可见边框,用户可以拖动边框来改变它的大小。
为了避免这种情况发生,可以在 ltframegt标签中加入:noresizequotnoresizequot。
为不支持框架的浏览器添加 ltnoframesgt 标签。
重要提示:不能将 ltbodygtlt/bodygt 标签与 ltframesetgtlt/framesetgt 标签同时使用!不过,假如你添加包含一段文本的 ltnoframesgt 标签,就必须将这段文字嵌套于 ltbodygtlt/bodygt 标签内。
(在下面的第一个实例中,可以查看它是如何实现的。
)更多实例如何使用 ltnoframesgt 标签 本例演示:如何使用 ltnoframesgt 标签。
混合框架结构 本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。
含有 noresizequotnoresizequot 属性的框架结构 本例演示 noresize 属性。
在本例中,框架是不可调整尺寸的。
在框架间的边框上拖动鼠标, 你会发现边框是无法移动的。
导航框架 本例演示如何制作导航框架。
导航框架包含一个将第二个框架作为目标的链接
列表。
名为 quotcontents.htmquot 的文件包含三个链接。
内联框架 本例演示如何创建内联框架(HTML 页中的框架)。
跳转至框架内的一个指定的节 本例演示两个框架。
其中的一个框架设置了指向另一个文件内指定的节的链接。
这个 quotlink.htmquot文件内指定的节使用 lta namequotC10quotgt 进行标识。
使用框架
导航跳转至指定的节 本例演示两个框架。
左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。
第二个框架显示被链接的文档。
导航框架其中的链接指向目标文件中指定的节。
HTML 表格 Previous Page Next Page 你可以使用 HTML 创建表格。
实例 表格 这个例子演示如何在 HTML 文档中创建表格。
表格边框 本例演示各种类型的表格边框。
(可以在本页底端找到更多实例。
) 表格 表格由 lttablegt 标签来定义。
每个表格均有若干行(由 lttrgt 标签定义) 每行被分割为若干单元格 , (由 lttdgt 标签定义)。
字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文 本、图片、列表、段落、表单、水平线、表格等等。
lttable borderquot1quotgt lttrgt lttdgtrow 1 cell 1lt/tdgt .