HTML 实例

TML 基础

非常简单的HTML文档

HTML 标题

HTML 段落

HTML 链接

HTML 图片

实例解析

HTML 标题

HTML 标题

在html源码中插入注释

插入水平线

实例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文档中折行的使用。

HTML 格式化的某些问题。

实例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示不同的"计算机输出"标签的显示效果。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

文本下划线与删除线

实例解析

HTML 样式

HTML Style 元素

背景色样式

字体样式，颜色，大小

文本对齐样式

设置文本字体

设置文本字体大小

设置文本字体颜色

设置文本字体，字体大小，字体颜色

HTML使用不同样式

没有下划线的链接

链接到一个外部样式表

实例解析

HTML 链接

创建超级链接

将图像作为链接

在新的浏览器窗口打开链接

链接到同一个页面的不同位置

跳出框架

创建电子邮件链接

创建电子邮件链接 2

实例解析

HTML 图像

插入图像

从不同的位置插入图片

排列图片

本例演示如何使图片浮动至段落的左边或右边。

制作图像链接

创建图像映射

实例解析

HTML 表格

简单的表格

没有边框的表格

表格中的表头

带有标题的表格

跨行或跨列的表格单元格

表格内的标签

单元格边距(Cell padding)

单元格间距(Cell spacing)

实例解析

HTML 列表

无序列表

有序列表

不同类型的有序列表

不同类型的无序列表

嵌套列表

嵌套列表 2

定义列表

实例解析

HTML Forms 和 Input

创建文本域(Text fields)

创建密码域

复选框

单选按钮

简单的下拉列表

预选下拉列表

本例演示如何创建一个文本域（多行文本输入控件）。

创建一个按钮

本例演示如何在数据周围绘制一个带标题的框。

带有文本域与输入域的表单

带有复选框与提交按钮的form表单

带有单选框与提交按钮的表单

发送邮件表单

实例解析

HTML iframe

内联框架 (HTML页面中插入框架)

实例解析

HTML 头部元素

描述了文档标题

HTML页面中默认的URL链接

提供文档元数据

实例解析

HTML 脚本

插入一个脚本

使用 <noscript> 标签

实例解析

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

人说成为牛人的途径，就是练习+实践。要想成为编程高手，离不开编程实例。有网友问：编程高手都是从哪找到编程实例开始学习的?他想找些实例来做，但是又找不到，所以寻求大家的帮忙。

相信很多学习编程的程序员，知道理论后，都想找些实例来操作操作，或者看看别人是怎么操作的。因此搜索整个互联网，试图找到比较好的编程实例，于是一个网站一个网站的找。为了解决大家的这个问题，W3Cschool资深用户为大家精选编程高手最爱的实例。无论是HTML 实例、CSS 实例、XML 实例、SVG 实例，还是JavaScript 实例、JavaScript 对象实例、HTML DOM 实例，上面通通都有。

1.HTML 实例

此部分内容包括HTML 文本格式化、HTML 标题、HTML 颜色值、HTML 媒体、HTML 字符实体、HTML 区、HTML 框架等，通通都有。

而且都是文字与操作相结合，先让你熟悉理论，再给你看例子，最后你再根据上面的理论和实例，来编写HIML代码。

2.CSS 实例

这部分，主要囊括CSS 语法、、CSS 创建、CSS Backgrounds(背景)、CSS Text(文本)、CSS Fonts(字体)、CSS 链接(link)、CSS 列表样式(ul)、CSS Table(表格)、CSS 盒子模型、CSS Border(边框)、CSS 轮廓(outline)属性、CSS Margin(外边距)、CSS Padding(填充)、CSS 分组和嵌套、CSS 尺寸 (Dimension)、CSS Display(显示) 与 Visibility(可见性)等。同样，这部分也是理论、实例、操作相结合。

3.XML 实例

你想找XML 属性、XML 进阶、XML JavaScript、XML 验证器、查看 XML 文件、XML 和 CSS、XML 和 XSLT等，这里已经为你收集好了，你想要做的就是在http://www.w3cschool.cn/xml/xml-xmle_examples.html这里找。

4.JavaScript 实例

学习JavaScript，都会涉及JavaScript 错误处理 Throw、Try 和 Catch，以及JavaScript 调试、JavaScript 表单验证、JavaScript 保留关键字、JavaScript JSON、javascript：void(0) 含义、JavaScript 代码规范、JS 函数、JS HTML DOM、JS 高级教程、JS 浏览器BOM、JS 库等内容。上面的每一点内容，W3Cschool都为您精心准备了实例和解析，你可以边看边操作。

5.JavaScript 对象实例

此部分内容，主要包括JavaScript 输出、JavaScript 语法、JavaScript 语句、JavaScript 注释、JavaScript 变量等

JavaScript 教程，还有JS 函数、JS HTML DOM、JS 高级教程、JS 浏览器BOM、JS 库等。你可以看完理论，在文本框中编辑代码，再看运行结果。

6.HTML DOM 实例

如果你想掌握HTML DOM ，W3Cschool位大家精选HTML DOM 教程、HTML DOM 简介、HTML DOM 节点、HTML DOM 方法、HTML DOM 属性、HTML DOM 访问、HTML DOM 修改等实例。

7.XML DOM 实例

这部分，主要包括XML DOM 浏览器差异、XML DOM – 导航节点、XML DOM – 获取节点值、XML DOM – 改变节点值、XML DOM – 删除节点、XML DOM – 替换节点、XML DOM – 创建节点等。每一块内容，都会有相对应的例子。你可以先看例子，再进行实操。

8.AJAX 实例

创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据;创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。这里，将囊括XHR 创建对象、XHR 请求、XHR 响应、XHR readyState、AJAX ASP/PHP、AJAX 数据库等内容。

9.VBScript 实例

此部分将教你使用VBScript写文本，使用HTML标签格式化文本，了解head部分中的函数、body部分中的脚本等。更多详情，就在http://www.w3cschool.cn/vbscript/vbscript-examples.html。

10.ASP 实例

你想学习用ASP写文本、向文本添加HTML，亦或者使用Vbscript制作基于时间的问候语、使用JavaScript制作基于时间的问候语等，我们都帮你选好了实例。

11.ADO 实例

这部分内容，主要包括ADO Error 对象、ADO 实例、ADO Connection 对象、ADO 总结、ADO Command 对象、ADO 数据类型、ADO 通过 GetString() 加速脚本、ADO Stream 对象等，所有的实例这边都有。你可以看着实例来编写代码，再运行结果。

12.SVG 实例

这里你可以学到SVG 椭圆、SVG 直线、SVG 多边形、SVG 曲线、SVG 路径、SVG 文本、SVG Stroke 属性、SVG 滤镜、SVG 模糊效果等知识。不仅如此，这部分内容还教你把如何将SVG代码直接嵌入到HTML代码中。

俗话说“实践是检验真理的唯一标准”。即使你理论知道得再多，没有去操作也只是纸上谈兵。对于程序员来说，系统的找编程实例相当困难。W3Cschool资深用户为大家精心收集的编程实例大全，希望能够帮助大家。

上面所有的编程实例，都在这里http://www.w3cschool.cn/。赶紧收藏吧，有了这个收藏夹，找干货不用愁!

公众号：w3cschoolcn

TML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>

</html>

[/demo]

本例演示如何在 HTML 文档中创建链接。

将图像作为链接

[demo]

<html>

<head>

</head>

<body>

<p>

您也可以使用图像来作链接：

</a>

</p>

</body>

</html>

[/demo]

本例演示如何使用图像作为链接。

（可以在本页底端找到更多实例）

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

什么是超文本？

标记语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来。

这样的话，读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它将整个 Web 网络连接起来。

超文本的基础知识

超文本的基本特征就是可以超链接文档；你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网上的任何位置的文档中。这些文档组成了一个杂乱的信息网。目标文档通常与其来源有某些关联，并且丰富了来源；来源中的链接元素则将这种关系传递给浏览者。

超链接可以用于各种效果。超链接可以用在目录和主题列表中。浏览者可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题，或跳转到世界上某处完全不同的集合中的某个文档。

超链接还可以向浏览者指出有关文档中某个主题的更多信息。例如，“如果您想了解更详细的信息，请参阅某某页面。”。作者可以使用超链接来减少重复信息。例如，我们建议创作者在每个文档中都签署上自己的姓名。这样就可以使用一个将名字和另一个包含地址、电话号码等信息的单独文档链接起来的超链接，而不必在每个文档中都包含完整的联系信息。

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用 <a> 标签标记的，可以用两种方式表示。锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记，该标记可以被超链接引用。

还有一些与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。

注释

锚的这两种类型都使用同样的标签；也许这就是它们拥有同样的名称的原因。但是我们发现，如果将它们区分开，把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”，那么您将更容易理解这两种类型的锚。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.w3school.com.cn/">Visit W3School</a>

上面这行代码显示为：Visit W3School

点击这个超链接会把用户带到 W3School 的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

[demo]

<html>

<head>

</head>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>

[/demo]

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

基本的注意事项 - 有用的提示：

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

更多实例

在新的浏览器窗口打开链接

[demo]

<html>

<head>

</head>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>

[/demo]

本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

链接到同一个页面的不同位置

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>