HTML 教程导读- （HTML5标准）

HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言，您可以使用 HTML 来建立自己的 WEB 站点。

通过学习本教程，您可以使用 HTML 来创建站点。

HTML 是非常容易学习的！相信您可以很快学会它！ 

HTML 实例

在本教程中的每个章节中都会提供一定量的实例，使用本站的编辑器，在线运行并修改这些实例，您可以深入掌握 HTML ！

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

尝试一下»

点击“尝试一下”按钮查看在线实例

HTML 实战闯关

我们为学习者准备逐步的 HTML 编程实战练习，供大家通过亲自编程实验来熟练编程操作。

开始HTML编程闯关

HTML 实例

在HTML手册中包含了数千个在线实例，您可以在线编辑并查看运行结果。

查看HTML实例！

HTML 参考手册

在 W3Cschool 教程中，我们提供了完整的 HTML 参考手册，其中包括标签，属性，颜色，实体等等。

HTML标签参考手册


HTML 简介

现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面，以此来简单了解一下 HTML 的结构。

HTML 实例

<!DOCTYPE html>
<html>

<head>

<title>页面标题(51coolma.cn)</title>

</head>

<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>

尝试一下 »

点击“尝试一下”按钮查看在线实例

实例解析

  • DOCTYPE声明了文档的类型
  • <html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
  • <head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。
  • <title>标签定义文档的标题
  • <body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
  • <h1>标签作为一个标题使用，该标签的结束标志为</h1>，--　HTML标题
  • <p>标签作为一个段落显示，该标签的结束标志为</p>-- p标签用法
lamp<!DOCTYPE html> 在 HTML5 中也是描述了文档类型。

什么是 HTML?

HTML 语言用于描述网页。

  • HTML 是指超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 ( markup tag )
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了 HTML 标签及文本内容
  • HTML 文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。您可以在 W3Cschool 的编程实战部分开始学习 HTML 标签。

  • HTML 标签是由 尖括号 包围的关键词，比如<html>
  • HTML 标签通常是 成对出现 的，比如<b>和</b>
  • 标签对中的第一个标签是开始标签，第二个标签是 结束标签
  • 开始和结束标签也被称为开放标签 和 闭合标签

    <标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述相同的意思。

但是严格来讲，一个 HTML元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web 浏览器（如谷歌浏览器、Internet Explorer、Firefox 和 Safari ）是用于读取 HTML 文件，并将其作为网页显示。

Web 浏览器不会直接显示 HTML 标签，而是通过使用标签来决定如何向用户展现 HTML 页面的内容：

51coolma web 浏览器

HTML 网页结构

下面是一个可视化的 HTML 页面结构（只有<body>标签中的内容会显示在浏览器中）：

<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

HTML 版本

从最初的非标准化的超文本标记语言诞生后，HTML 已经更新了多个版本：

发布时间版本
1989Tim Berners-Lee 发明万维网
1991Tim Berners-Lee 制定 HTML 规范
1993Dave Raggett 拟定了 HTML+
1995HTML 工作组定义 HTML 2.0
1997W3C 推荐标准: HTML 3.2
1999W3C 推荐标准: html 4.01
2000W3C 推荐标准: XHTML 1.0
2008WhatWG 首次公开 HTML5
2012WHATWG 制定 HTML5 标准
2014W3C 推荐标准: HTML5
2016W3C 候选推荐： HTML 5.1
2017W3C 推荐： HTML5.1 第二版
2017W3C 推荐： HTML5.2

<!DOCTYPE> 声明

<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。

　由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示您的网页内容。

doctype声明是不区分大小写的，以下方式均可使用：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册.

MDN CSS参考

中文编码

在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。

HTML 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题(51coolma.cn)</title>
</head>
<body>
<h1>这是我的第一个标题</h1>
<p>这是我的第一个段落。</p>
</body>
</html>

尝试一下 »

点击“尝试一下”按钮查看在线实例


HTML 编辑器

HTML 编辑器是用于编写 HTML 的工具，使用 HTML 编辑器时以编辑主题，索引，自定义窗口，选择添加搜索页。

使用 Notepad 或 TextEdit 来编写 HTML

下列是三种专门用于编辑 HTML 的 HTML 编辑器：

  • Adobe Dreamweaver

  • Microsoft Expression Web

  • CoffeeCup HTML 编辑器

不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad（PC）或 TextEdit（Mac）。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。

我们可以使用 Notepad 工具来创建 HTML 文件，具体的步骤参考如下：

步骤1：启动记事本

打开 Notepad 的步骤（ Windows 系统中）：

  1. 打开“开始”菜单
  2. 选择“所有程序”
  3. 选择“附件”
  4. 选择“记事本”

步骤2：使用记事本编辑 HTML

在记事本中输入 HTML 代码：

实例代码

<html>
<head>
<meta charset="utf-8">
<title>编程狮(51coolma.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

尝试一下 »

步骤3：保存你的 HTML

在 Notepad 文件菜单中选择另存为。

您可以以.htm或者.html扩展名保存您的 HTML 文件，两者没有区别，根据您的使用习惯即可。

将该文件保存在您常用的文件夹中，比如 51coolma

1459508307749495

步骤4：在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。

运行显示结果类似如下：

blob.png


常用HTML编辑器下载

1、UltraEdit（编辑工具）

　UltraEdit 文本编辑器能够满足你一切编辑需要的编辑器。

　UltraEdit 文本编辑器是一套功能强大的文本编辑器。

　UltraEdit 文本编辑器内建英文单字检查，C ++ 及 VB 指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。

　UltraEdit 软件附有 HTML 标签颜色显示，搜寻替换以及无限制的还原功能，一般大家喜欢用其来修改 EXE 或 DLL 文件。





2、Notepad++ (代码编辑器）

Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率，降低电脑系统能源消耗，但轻巧且执行效率高，使得 Notepad++ 可完美地取代微软视窗的记事本。



3、Adobe Dreamweaver CC

Dreamweaver CC 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建 Web 页面。其成熟的代码编辑工具更适用于 Web 开发高级人员的创作！


  


点击下载 »



4、EditPlus (文本编辑器)

EditPlus（文字编辑器）一套功能强大，可取代记事本的文字编辑器，拥有无限制的 Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴簿的功能，能够同步于剪贴簿自动将文字贴进 EditPlus 的编辑窗口中，让你省去做贴上的步骤。另外它也是一个好用的 HTML 编辑器，除了可以颜色标记 HTML Tag （同时支持 C/C++、Perl、Java）外，还内建完整的 HTML 和 CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装 IE 3.0 以上版本，它还会结合 IE 浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装 IE，也可指定浏览器路径）。 

 

点击下载»


HTML 调试

在编写 HTML 代码的时候通常会有以下两种主要类型的错误：

  • 语法错误：由于拼写错误导致程序无法运行；通常熟悉语法并理解错误信息后很容易修复。
  • 逻辑错误：不存在语法错误，但代码无法按预期运行；通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。

注释：HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。

实例

我们通过一段含有错误的 HTML 代码来讨论一下：

实例标题

<h1>HTML 调试示例</h1>
<p>什么使得 HTML 出错？
<ul>
<li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。
<li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？
</em>
<li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.51coolma.cn/>W3Cschool 主页链接</a>
</ul>

尝试一下 »

以下是上述代码出现的问题：

  • 段落（Paragraph） 和列表项（list item）元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来，因此上图中并没有太严重的渲染错误。
  • 第一个<strong>元素没有结束标签。这就严重了，因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。
  • 第二个<li>元素中存在嵌套问题：对于下面这个代码，在浏览器很难做出正确解析，理由同上。
    <strong> 重点（strong）<em> 重点强调（ strongly emphasised）？ </strong> 这又是什么鬼？ </em>
  • href属性缺少了一个双引号。从而导致了一个最严重的问题：整个链接完全没有渲染出来。

　但是浏览器会尝试修补代码错误：

  • <p>和<li>元素加上了关闭标签。
  • 第一个<strong>没有明确的关闭标签，因此浏览器为之后所有独立块都补全了<strong></strong>。
  • 浏览器（以下代码节选自Chrome修补后的页面代码）是这样修补嵌套错误的：

实例标题

<h1>HTML 调试示例</h1>

<p>什么使得 HTML 出错？</p>

<ul>

    <li>未闭合的元素：如果元素

        <strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。</strong>

    </li>

    <li>

        <strong>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。

            <strong>重点（strong）

                <em>重点强调（strongly emphasised）？</em>

            </strong>

            <em>这又是什么鬼？

            </em>

        </strong>

    </li>

    <li>

        <strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>

    </li>

</ul>


尝试一下 »
  • 删除整个缺少双引号的链接。最后一个列表项就成了：

实例代码

<li>
<strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>
</li>

尝试一下 »

阅读以上示例后，你会发现保持良好 HTML 格式的重要性。


HTML 基础- 4个实例

本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ 

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

 <h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

实例

 <h1>这是标题1</h1>

 <h2>这是标题2</h2>

 <h3>这是标题3</h3>

 <h4>这是标题4</h4>

 <h5>这是标题5</h5>

 <h6>这是标题6</h6>


尝试一下 »

你也可以通过实战实验来尝试挑战一个 h2 标题的设置：

HTML标题实战实验

HTML 段落

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战演练。

实例

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

尝试一下 »

    

下面这个实例讲述了标题和段落的结构层次：

实例

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒</p>


尝试一下 »

上述实例所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要确保层次结构是合理的。在创建此类结构时，您只需要记住以下几点：

  • 首先，您应该只对每个页面使用一次<h1>，这是主标题，所有其他标题位于层次结构中的下方。
  • 其次，请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题，这是没有意义的，会导致奇怪的结果。
  • 最后，在可用的六个标题级别中，您应该保证每个页面中标题级别的使用不超过三个，除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。 

HTML 中的空格

在代码中可能包含了很多的空格——这是没有必要的

下面的两个代码片段是等价的：

实例

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很

       呆 萌。</p>


尝试一下 »
无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。

为什么我们会使用那么多的空格呢? 

答案就是为了可读性——如果你的代码被很好地进行格式化，那么就很容易理解你的代码，反之就会很混乱。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。

你使用什么风格来格式化你的代码取决于你（比如所对于每层缩进使用多少个空格），但是记住你应该坚持使用某种风格。

HTML 链接

HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

实例

<a href="http://www.51coolma.cn">这是一个链接</a>

尝试一下 »

 提示：在href属性中指定链接的地址。

 (您将在本教程稍后的章节中学习更多有关属性的知识)

 HTML链接实战测验

HTML 图像

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例如下：<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >

请注意：img元素是自关闭元素，不需要结束标记。

实例

<img src="logonew2.png" width="206" height="36">

尝试一下 »

注意： 图像的名称和尺寸是以属性的形式提供的。

HTML 图像实战测验 

HTML 强调

在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：

实例

<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>


尝试一下 »

在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：

实例

<p>这种液体是<strong>高毒性的</strong>.</p>

<p>我就指望你<strong>不会</strong> 迟到!</p>


尝试一下 »

注意：为了不同的字体风格，我们应该使用元素和一些 CSS 的样式.


HTML 元素

HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素

开始标签 *元素内容结束标签 *
<p>这是一个段落</p>
<a href="default.htm">这是一个链接</a>
<br>这是一个换行标签 

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的 HTML 属性一章中学习更多有关属性的详细内容。

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。 

HTML 文档实例

实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>


尝试一下 »

上述的实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

实例

<p>这是第一个段落。</p>


尝试一下 »

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。
元素内容是: 这是第一个段落。

打开实战测试开始学习 <p> 标签。

<body> 元素:

实例

<body>

<p>这是第一个段落。</p>

</body>


尝试一下 »

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

实例

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>


尝试一下 »

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

如果您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

实例

<p>这是一个段落

<p>这是一个段落


尝试一下 »

上述实例在浏览器中也能正常显示，因为关闭标签是可选的。

但您不能对此产生依赖性，因为忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受这种方式。

注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。

HTML 提示：使用小写标签

由于 HTML 标签对英文字母的大小写不敏感，所以 <P> 和 <p> 表达的意思相同，不过大部分网站喜欢使用大写的 HTML 标签。

W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。


HTML 属性

属性是为 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

实例

<a href="https://www.51coolma.cn">这是一个链接使用了 href 属性</a>

尝试一下 »

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的 HTML 属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：

属性描述
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)

更多 HTML 标准属性说明： HTML 标准属性参考手册.


HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1>定义最大的标题。<h6> 定义最小的标题。

实例

<h1>这是标题1</h1>

<h2>这是标题2</h2>

<h3>这是标题3</h3>

<h4>这是标题4</h4>

<h5>这是标题5</h5>

<h6>这是标题6</h6>


尝试一下 »

注释: 浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

您可以在实战练习中学习编辑<h2>标签！

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

实例

<p>hr 标签定义水平线：</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>


尝试一下 »


HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

注释写法如下:

实例

<!-- 这是一个注释 -->

尝试一下 »

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

您可以在实战练习中学习 HTML 注释语句！

HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

本站实例

标题
如何在 HTML 文档中显示标题。

隐藏注释
如何在 HTML 源代码中插入注释。

水平线
如何插入水平线。

HTML 标签参考手册

W3CSchool 的标签参考手册提供了有关这些标题及其属性的更多信息。

您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。

标签描述
<html>定义 HTML 文档
<body>定义文档的主体
<h1> - <h6>定义 HTML 标题
<hr>定义水平线
<!--...-->定义注释


HTML 开头

HTML 可以将文档分割为多个层次。

HTML 初步

开头是通过 <p> 标签定义的。

实例

<p>这是一个段落</p> 

<p>这是另一个段落</p>


尝试一下»

注意：浏览器会自动地在先前的前后添加空行。（</p>是块级元素）

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例

<p>这是一个段落 
<p>这是另一个段落

尝试一下»

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释：在未来的 HTML 版本中，重复省略结束标签。

HTML 折行

如果您希望在不产生一个新起点的情况下进行换行（新行），请使用 <br /> 标签。

在 HTML 语言中，<br /> 标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行拆分：

实例

<p>这个<br>段落<br>演示了分行的效果</p>


尝试一下»


<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出-使用提醒

我们无法确定 HTML 被显示的效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空间或换行来改变输出的效果。

当显示页面时，浏览器会可移动源代码中多余的空间和空行。所有连续的空间或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行） ）也被显示为一个空格。

尝试一下

（这个示例演示了一些 HTML 格式化方面的问题）

本站实例

HTML初步

如何在浏览器中显示 HTML 进行。

换行

在 HTML 文档中使用换行。

在 HTML 代码中的布局一首唐诗

浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。

更多实例

更多起点

随之而来的行为。

HTML 标签参考手册

W3CSchool 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。

标签描述
<p>

定义一个段落
<br>插入单个折行（换行）


HTML 文本格式化

HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

实例

<b>加粗文本</b><br><br>

<i>斜体文本</i><br><br>

<code>电脑自动输出</code><br><br>

这是 <sub> 下标</sub> 和 <sup> 上标</sup>


尝试一下 »

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体 or 斜体

这些 HTML 标签被称为格式化标签（请查看底部完整标签参考手册）。

lamp通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。
现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

本站实例

文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化

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

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

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

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

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

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

删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。


HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

尝试一下 - 实例

HTML 链接
如何在 HTML 文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。

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

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

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时，链接显示为红色并带上下划线
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示

    HTML 空链接

    HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

    临时加的空链接，主要为了能更好的看到最终的效果。

    基本语法：

    <a href="#">链接文字</a>

    其中“ # ”表示空链接。

    实例

    <a href="#">W3CSchool</a>

    HTML 链接语法

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

    <a href="url">Link text</a>

    href 属性描述了链接的目标。.

    实例

    <a href="//www.51coolma.cn/">Visit W3Cschool</a>

    上面这行代码显示为：: Visit W3Cschool

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

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

    HTML 链接 - target 属性

    使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

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

    实例

    <a href="https://www.51coolma.cn/" target="">访问W3Cschool教程!</a>

    <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>


    尝试一下 »

    提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。


    HTML 链接 - id 属性

    id 属性可用于在一个 HTML 文档中创建书签标记。

    提示: 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。

    实例

    在 HTML 文档中插入 ID：

    <a id="tips">Useful Tips Section</a>

    在 HTML 文档中创建一个链接到"有用的提示部分 (id="tips"）"：

    <a href="#tips">Visit the Useful Tips Section</a>

    或者，从另一个页面创建一个链接到"有用的提示 (id="tips"）部分"：

    <a href="//www.51coolma.cn/html_links.html#tips"> Visit the Useful Tips Section</a>


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

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

    更多实例

    图片链接
    如何使用图片链接。

    在当前页面链接到指定位置 如何使用书签

    跳出框架
    本例演示如何跳出框架，假如你的页面被固定在框架之内。

    创建电子邮件链接
    本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

    创建电子邮件链接 2
    本例演示更加复杂的邮件链接。

    HTML 链接标签

    标签描述
    <a>定义一个超级链接


    本章为大家带来的是HTML引用的使用方法教程，内含引用实例及常用引用方式介绍。

    这是摘自 WWF 网站的引文：

    五十年来，WWF 一直致力于保护自然界的未来。 世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

    HTML <q> 用于短的引用

    HTML <q> 元素定义短的引用。

    浏览器通常会为 <q> 元素包围引号。

    实例

    <p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

    用于长引用的 HTML <blockquote>

    HTML <blockquote> 元素定义被引用的节。

    浏览器通常会对 <blockquote> 元素进行缩进处理。

    实例

    <p>以下内容引用自 WWF 的网站：</p><blockquote cite="http://www.worldwildlife.org/who/index.html">五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。</blockquote>

    用于缩略词的 HTML <abbr>

    HTML <abbr> 元素定义缩写或首字母缩略语。

    对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

    实例

    <p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

    用于定义的 HTML <dfn>

    HTML <dfn> 元素定义项目或缩写的定义。

    <dfn> 的用法，按照 HTML5 标准中的描述，有点复杂：

    1. 如果设置了 <dfn> 元素的 title 属性，则定义项目：

    实例

    <p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

    2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：

    实例

    <p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

    3. 否则，<dfn> 文本内容即是项目，并且父元素包含定义。

    实例

    <p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

    注释：如果您希望简而化之，请使用第一条，或使用 <abbr> 代替。

    用于联系信息的 HTML <address>

    HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

    此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

    实例

    <address>Written by Donald Duck.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>

    用于著作标题的 HTML <cite>

    HTML <cite> 元素定义著作的标题。

    浏览器通常会以斜体显示 <cite> 元素。

    实例

    <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

    用于双向重写的 HTML <bdo>

    HTML <bdo> 元素定义双流向覆盖（bi-directional override）。

    <bdo> 元素用于覆盖当前文本方向：

    实例

    <bdo dir="rtl">This text will be written from right to left</bdo>

    HTML 引文、引用和定义元素

    标签描述
    <abbr>定义缩写或首字母缩略语。
    <address>定义文档作者或拥有者的联系信息。
    <bdo>定义文本方向。
    <blockquote>定义从其他来源引用的节。
    <dfn>定义项目或缩略词的定义。
    <q>定义短的行内引用。
    <cite>定义著作的标题。


    本章为大家带来的是HTML注释标签 ​<!--​ 与 ​--> ​用于在 HTML 插入注释。

    HTML 注释标签

    您能够通过如下语法向 HTML 源代码添加注释：

    实例

    <!-- 在此处写注释 -->

    注释：在开始标签中有一个惊叹号，但是结束标签中没有。

    浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

    您可以利用注释在 HTML 中放置通知和提醒信息：

    实例

    <!-- 这是一段注释 --><p>这是一个段落。</p><!-- 记得在此处添加信息 -->

    注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误：

    实例

    <!-- 此刻不显示图片：<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">-->

    条件注释

    您也许会在 HTML 中偶尔发现条件注释：

    <!--[if IE 8]>    .... some HTML here ....<![endif]-->

    条件注释定义只有 Internet Explorer 执行的 HTML 标签。

    软件程序标签

    各种 HTML 软件程序也能够生成 HTML 注释。

    例如 <!--webbot bot--> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

    作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

    HTML ​id​ 属性用于 为HTML 元素指定唯一的 id。

    一个 HTML文档中不能存在多个有相同 id 的元素。

    使用 id 属性

    ​id​ 属性指定 HTML 元素的唯一 ID。 ​id​ 属性的值在 HTML 文档中必须是唯一的。

    ​id​ 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

    id 的语法是：写一个井号 (#)，后跟一个 ​id​ 名称。然后，在花括号 {} 中定义 CSS 属性。

    下面的例子中我们有一个 ​<h1>​ 元素，它指向 ​id​ 名称 "myHeader"。这个 ​<h1>​ 元素将根据 head 部分中的 ​#myHeader​ 样式定义进行样式设置：

    实例

    <!DOCTYPE html><html><head><style>#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}</style></head><body><h1 id="myHeader">My Header</h1></body></html>

    注释：id 名称对大小写敏感！

    注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

    Class 与 ID 的差异

    同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

    实例

    <style>/* 设置 id 为 "myHeader" 的元素的样式 */#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}/* 设置类名为 "city" 的所有元素的样式 */.city {  background-color: tomato;  color: white;  padding: 10px;}</style><!-- 拥有唯一 id 的元素 --><h1 id="myHeader">My Cities</h1><!-- 拥有相同类名的多个元素 --><h2 class="city">London</h2><p>London is the capital of England.</p><h2 class="city">Paris</h2><p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2><p>Tokyo is the capital of Japan.</p>

    提示：请在我们的 CSS教程 中学习更多 CSS 知识。

    通过 ID 和链接实现 HTML 书签

    HTML 书签用于让读者跳转至网页的特定部分。

    如果页面很长，那么书签可能很有用。

    要使用书签，您必须首先创建它，然后为它添加链接。

    然后，当单击链接时，页面将滚动到带有书签的位置。

    实例

    首先，用 ​id​ 属性创建书签：

    <h2 id="C4">第四章</h2>

    然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

    实例

    <a href="#C4">跳转到第四章</a>

    或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

    <a href="html_demo.html#C4">Jump to Chapter 4</a>

    在 JavaScript 中使用 id 属性

    JavaScript 也可以使用 id 属性为特定元素执行某些任务。

    JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素：

    实例

    使用 id 属性通过 JavaScript 来处理文本：

    <script>function displayResult() {  document.getElementById("myHeader").innerHTML = "Have a nice day!";}</script>

    提示：请在我们的 JavaScript教程 中学习 JavaScript。

    本章总结

    • ​id​ 属性用于为 HTML 元素指定唯一的 id
    • ​id​ 属性的值在 HTML 文档中必须是唯一的
    • CSS 和 JavaScript 可使用 ​id​ 属性来选取元素或设置特定元素的样式
    • ​id​ 属性的值区分大小写
    • ​id​ 属性还可用于创建 HTML 书签
    • JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素

    HTML <head>

    HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

    查看在线实例

    <title> - 定义了HTML文档的标题
    使用 <title> 标签定义HTML文档的标题

    <base> - 定义了所有链接的URL
    使用 <base> 定义页面中所有链接默认的链接目标地址。

    <meta> - 提供了HTML文档的meta标记
    使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

    HTML <head> 元素

    <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

    可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

    <head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

    HTML <title> 元素

    <title> 标签定义了不同文档的标题。

    title 在 HTML/XHTML 文档中是必须的。

    title 元素:

    • 定义了浏览器工具栏的标题
    • 当网页添加到收藏夹时，显示在收藏夹中的标题
    • 显示在搜索引擎结果页面的标题

    一个简单的 HTML 文档:

    实例

    <!DOCTYPE html>      

    <html>        

    <head>        

    <title>编程狮(51coolma.cn)</title>        

    </head>                

    <body>       

    51coolma随时随地学编程！         

    </body>                

    </html>


    尝试一下 »

    HTML <base> 元素

    <base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接 规定默认地址或默认目标（target）:

    <head>       

    <base href="//www.51coolma.cn/images/" target="_blank">      

    </head>

    提示：在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

    HTML <link> 元素

    <link> 标签定义了文档与外部资源之间的关系。

    <link> 标签通常用于链接到样式表:

    <head>       

    <link rel="stylesheet" type="text/css" href="mystyle.css">        

    </head>

    HTML <style> 元素

    <style> 标签定义了HTML文档的样式文件引用地址.

    在<style> 元素中你需要指定样式文件来渲染HTML文档:

    实例

    <head>        

    <style type="text/css">        

    body {background-color:yellow}        

    p {color:blue}        

    </style>        

    </head>


    尝试一下 »

    HTML <meta> 元素

    元数据（metadata）是关于数据的信息。

    <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

    典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    <meta> 标签始终位于 head 元素中。

    元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

    针对搜索引擎的关键词

    一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

    下面的 meta 元素定义页面的描述：

    <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

    下面的 meta 元素定义页面的关键词：

    <meta name="keywords" content="HTML, CSS, XML" />

    name 和 content 属性的作用是描述页面的内容。

    HTML <script> 元素

    <script> 标签用于加载脚本文件，如： JavaScript。

    <script> 元素在以下章节会详细描述。

    HTML head 元素

    标签描述
    <head>定义了文档的信息
    <title>定义了文档的标题
    <base>定义了页面链接标签的默认链接地址
    <link>定义了一个文档和外部资源之间的关系
    <meta>定义了HTML文档中的元数据
    <script>定义了客户端的脚本文件
    <style>定义了HTML文档的样式文件


    HTML 样式- CSS

    CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用 CSS 实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在 <head> 部分或存储在 外部 CSS 文件中。作为网页标准化设计的趋势，CSS 取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

    网页现在的新标准是 W3C 。目前的模式是 Html + Css + Javascript ，如何理解呢，就是 Html 是网页的结构，CSS 是网页的样式，Javascript是行为。结构就是盖房子先要把结构建出来，然后用 CSS 来装饰。其实你在用 Dreamweaver 做网页时就已经用到了 CSS，比如你用 DW 的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个 .style1 的红色代码，在 <style></style> 之间不知道你注意过没有，这就是 CSS。

    CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式.

    Look! Styles and colors

    Manipulate Text
    Colors,  Boxes
    and more...


    尝试一下 - 实例

    HTML 使用样式
    本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

    本例演示如何使用样式属性做一个没有下划线的链接。
    如何使用 style 属性制作一个没有下划线的链接。

    链接到一个外部样式表
    本例演示如何 标签链接到一个外部样式表。

    如何使用 CSS

    CSS 是在 HTML 4 开始使用的,是为了更好的渲染 HTML 元素而引入的.

    CSS 可以通过以下方式添加到 HTML 中:

    • 内联样式- 在 HTML 元素中使用 "style" 属性
    • 内部样式表 -在 HTML 文档头部 <head> 区域使用 <style> 元素 来包含 CSS
    • 外部引用 - 使用外部 CSS 文件

    最好的方式是通过外部引用 CSS 文件.

    在本站的 HTML 教程中我们使用了内联 CSS 样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

    你可以通过本站的 CSS 教程 CSS 教程学习更多的CSS知识,或者学习更容易理解的 CSS 微课.

    内联样式

    当特殊的样式需要应用到个别元素时，就可以使用内联样式，你可以在 <head> 部分通过 <style> 标签定义内部样式表。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色。

    Example

    <head>

    <style type="text/css">

    body {background-color:yellow;}

    p {color:blue;}

    </style>

    </head> 

    学习更多样式，请访问 CSS 教程.

    HTML样式实例 - 背景颜色

    背景色属性（background-color）定义一个元素的背景颜色：

    Example

    <!DOCTYPE html>
    <html>
    <body style="background-color:yellow;">
    <h2 style="background-color:red;">This is a heading</h2>
    <p style="background-color:green;">This is a paragraph.</p>
    </body>
    </html>

    尝试一下 »

    早期背景色属性（background-color）是使用 bgcolor 属性定义。

    尝试一下: 旧版HTML来设置背景方式

    HTML 样式实例 - 字体, 字体颜色 ，字体大小

    我们可以使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义字体的样式:

    实例

    <!DOCTYPE html>
    <html>
    <body>
    <h1 style="font-family:verdana;">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>
    </html>

    尝试一下 »

    现在通常使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义文本样式，而不是使用 <font> 标签。

    HTML 样式实例 - 文本对齐方式

    使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

    实例

    <!DOCTYPE html>
    <html>
    <body>
    <h1 style="text-align:center;">Center-aligned heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

    尝试一下 »

    文本对齐属性 text-align 取代了旧标签 <center> 。

    尝试一下

    内部样式表

    当单个文件需要特别样式时，就可以使用内部样式表。你可以在 <head> 部分通过 <style> 标签定义内部样式表:

    实例

    <head>

    <style type="text/css">

    body {background-color:yellow;}

    p {color:blue;}

    </style>

    </head> 


    尝试一下 »

    外部样式表

    当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

    <head>

    <link rel="stylesheet" type="text/css" href="mystyle.css">

    </head> 

    HTML 样式标签

    标签描述
    <style>定义文本样式
    <link>定义资源引用地址

    已弃用的标签和属性

    在 HTML 4, 原来支持定义 HTML 元素样式的标签和属性已被弃用。这些标签将不支持新版本的 HTML 标签。

    不建议使用的标签有: <font>, <center>, <strike>

    不建议使用的属性: color 和 bgcolor.

    学习 HTML + CSS 的书籍推荐

    1、《 CSS那些事儿 》
    CSS那些事儿
    本书专注于 CSS 技巧实例的讲解，由浅入深地分析了 CSS 样式在布局时所需要理解的原理。绕开随处可见的基础知识、网络中能随意搜索到的 hack 技巧，侧重原理分析，拓展读者使用 CSS 布局的思维方式，通过本书的阅读读者将会了解到使用 CSS 布局的强大功能。

    全书以传达 CSS 布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用 CSS 布局。尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。

    无论是 CSS 布局的初学者还是具有一定水准的读者，阅读本书之后将会发现，原来 CSS 样式居然是这么好玩的东西。本书适合网站开发人员、网页设计人员参考学习，同时也适合作为相关培训机构的教材。


    2、《 Head First HTML and CSS 2nd Edition 》
         《 Head First HTML5 》
          这两本应该都有翻译，但是建议看原版


    3、《 Eric Meyer 谈 CSS 》（上下册）
    Eric Meyer谈CSS
    《 Eric Meyer 谈 CSS (卷1) 》融汇了世界级专家 Eric Meyer 极富价值的 CSS 实战经验，运用 13 个典型实际项目，采取手把手的方式来指导读者如何使用 CSS 来解决实际问题。项目包括转换现有网页、设置新闻网页的样式、设置日历样式、设置菜单样式、创建打印样式多列布局等。


    4、《 CSS 禅意花园 》
    CSS禅意花园
    这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS 禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS 禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括 6 章，占据了书中的大部分篇幅。

    每章剖析“CSS 禅意花园”收录的 6 件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索 36 件设计作品面临的挑战和解决的问题，读者将洞悉主要的 Web 设计原则以及它们运用的CSS 布局技巧，理解 CSS 设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
    5、《精通 HTML 》
    精通HTML
    本书深入地探讨了 (X)HTML 及相关技术包括 CSS、微格式、语义网等，重点阐述了如何在恰当的时候使用恰当的标签，全书始终贯彻现代的 Web 设计理念，从而使读者可以学习如何充分利用各种标记提供的多样性，创建语义丰富和结构合理的网站。

    本书适合具备初步 HTML 和 CSS 知识的 Web 设计开发人员阅读。
    6、《精通 CSS: 高级 Web 标准解决方案》
    精通CSS
    本书将最有用的 CSS 技术汇总在一起，在介绍基本的 CSS 概念和最佳实践之后，讨论了核心的 CSS 技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯 CSS 布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug 和 bug 修复，最后由 Simon Collison 和 Cameron Moll 两位杰出的 CSS 设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补 CSS 知识欠缺不可或缺的参考书。

    本书适合具有 (X)HTML 和 CSS 基本知识的任何网页设计人员阅读。    


    7、《 深入浅出 html 》
    深入浅出HTML
    本书是一部讲述现代 web 标准的优秀教程，彻底摒弃了过时的内容，始终贯彻三层分离的思想。书中结合实例讲述如何使用 html、css 设计符合现代web标准的网页，并讲解了如何使用 javascript 添加动态行为。书中的主体部分让读者接触 html、xhtml 的各种主题，逐渐熟悉各种元素。最后一章将书中讲述的各种技术付诸应用，带领读者一步步地创建一个实用的网站。


    8、《 CSS 权威指南 》（第3版）
    CSS权威指南（第三版）
    你是否既想获得丰富复杂的网页样式，同时又想节省时间和精力？本书为你展示了如何遵循 CSS 最新规范（ CSS2 和 CSS2.1 ）将层叠样式表的方方面面应用于实践。

    通过本书提供的诸多示例，你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观，以及如何得到 HTML 力不能及的更丰富的表现效果。

    资深 CSS 专家 Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实现做了深入的研究，另外在浏览器支持和设计原则等实际问题上也有独到的见解。你所需要的就是 HTML 4.0 的知识即可以为网站布局和分页创建简明而且易于维护的脚本，同时兼具桌面系统的美观性和可控性。


    9、《 网站重构 》（第 3 版）
    网站重构（第3版）
    《网站重构:应用 Web 标准进行设计(第3版)》内容简介：畅销书作家、设计师、网页标准教父 jeffrey zeldman 再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构：应用 Web 标准进行设计(第 3 版)》的第 3 版了,此次更新基本涵盖了随着环境和技术的变化，Web 标准所面临的挑战以及因此而发生的改善。第 3 版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。

    一如既往,《网站重构:应用 Web 标准进行设计(第 3 版)》提供了更多明确的见解和新的例子,来阐述基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。

    与前两版不同的是,在第3版,除了有很多的“why”来提出问题,也提供了大量的“how”来解决问题。另外,在写作方法上作者力图用诙谐的、有吸引力的写作风格,使复杂的技术更易于理解消化,帮助你轻松创建一个访问快速、低成本维护和开发、更多用户的网站,帮助你用新技术使 css 布局适应多个浏览器,使网站内容更容易被搜索和访问到。


    10、《 html+css+js 网页制作从入门到精通》
    HTML、CSS、JavaScript网页制作从入门到精通
    《 HTMLCSSJavaScript 网页制作从入门到精通》共分为 18 章和 4 个附录，重点介绍使用 HTML 进行网页制作的方方面面，同时讲解了目前流行的 Web 标准与 CSS 网页布局实例，以及基于 JavaScript 语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧 60 多例。


    HTML 符号实体

    在上一章中已经讲解了 HTML 实体。

    普通键盘上不存在众多数学、技术和货币符号。

    如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。

    如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

    实例

    <p>我将显示 &</p><p>我将显示 &#8364;</p><p>我将显示 &#x20AC;</p>

    HTML 支持的一些数学符号

    字符数字实体描述
    ∀&#8704;&forall;FOR ALL
    ∂&#8706;&part;PARTIAL DIFFERENTIAL
    ∃&#8707;&exist;THERE EXISTS
    ∅&#8709;&empty;EMPTY SETS
    ∇&#8711;&nabla;NABLA
    ∈&#8712;&isin;ELEMENT OF
    ∉&#8713;&notin;NOT AN ELEMENT OF
    ∋&#8715;&ni;CONTAINS AS MEMBER
    ∏&#8719;&prod;N-ARY PRODUCT
    ∑&#8721;&sum;N-ARY SUMMATION

    完整的数学参考

    HTML 支持的一些希腊字母

    字符数字实体描述
    Α&#913;&Alpha;GREEK CAPITAL LETTER ALPHA
    Β&#914;&Beta;GREEK CAPITAL LETTER BETA
    Γ&#915;&Gamma;GREEK CAPITAL LETTER GAMMA
    Δ&#916;&Delta;GREEK CAPITAL LETTER DELTA
    Ε&#917;&Epsilon;GREEK CAPITAL LETTER EPSILON
    Ζ&#918;&Zeta;GREEK CAPITAL LETTER ZETA

    完整的希腊参考

    HTML 支持的一些其他实体。

    字符数字实体描述
    ©&#169;&copy;COPYRIGHT SIGN
    ®&#174;&reg;REGISTERED SIGN
    €&#8364;&euro;EURO SIGN
    ™&#8482;&trade;TRADEMARK
    ←&#8592;&larr;LEFTWARDS ARROW
    ↑&#8593;&uarr;UPWARDS ARROW
    →&#8594;&rarr;RIGHTWARDS ARROW
    ↓&#8595;&darr;DOWNWARDS ARROW
    ♠&#9824;&spades;BLACK SPADE SUIT
    ♣&#9827;&clubs;BLACK CLUB SUIT
    ♥&#9829;&hearts;BLACK HEART SUIT
    ♦&#9830;&diams;BLACK DIAMOND SUIT

    HTML 图像

    　使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

    实例

    <h2>挪威山旅行</h2>

    <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock">


    尝试一下 »

    在线实例

    　插入图像
    　本例演示如何在网页中显示图像。

    　从不同的位置插入图片
    　本例演示如何将其他<>文件夹或服务器的图片显示到网页中。

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


    HTML 图像- 图像标签（<img>）和源属性（Src）

    　在 HTML 中，图像由<img>标签定义。

    　<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

    　要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。

    　定义图像的语法是：

    <img src="url" alt="some_text">

    　URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.51coolma.cn 的 images 目录中，那么其 URL 为 //www.51coolma.cn/images/boat.gif。

    　浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。


    HTML 图像- Alt属性

    　alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。

    　替换文本属性的值是用户定义的。

    <img src="boat.gif" alt="Big Boat">

    　在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。


    HTML 图像- 设置图像的高度与宽度

    　height（高度）与width（宽度）属性用于设置图像的高度与宽度。您可以在编程测试中调整一张图像的大小。

    　属性值默认单位为像素:

    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

    提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。


    设置图像边框

    　在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

    <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">


    设置图像对齐

    　默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

    <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">


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

    注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

    注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

    更多实例

    　排列图片
    　本例演示如何在文字中排列图像。

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

    　设置图像链接
    　本例演示如何将图像作为一个链接使用。

    　创建图像映射
    　本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


    HTML 图像标签

    标签描述
    <img>定义图像
    <map>定义图像地图
    <area>定义图像地图中的可点击区域


    HTML 表格

    HTML 表格实例

    First NameLast NamePoints
    JillSmith50
    EveJackson94
    JohnDoe80
    AdamJohnson67



    在线实例

    　表格
    　这个例子演示如何在 HTML 文档中创建表格。

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


    HTML 表格

    　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    　HTML 表格的基本结构：

    <table>…</table>：定义表格

    <th>…</th>：定义表格的标题栏（文字加粗）

    <tr>…</tr>：定义表格的行

    <td>…</td>：定义表格的列


    表格实例

    实例

    <table border="1">

    <tr>

    <td>row 1, cell 1</td>

    <td>row 1, cell 2</td>

    </tr>

    <tr>

    <td>row 2, cell 1</td>

    <td>row 2, cell 2</td>

    </tr>

    </table>


    尝试一下 »

    　在浏览器显示如下：

    row 1, cell 1row 1, cell 2
    row 2, cell 1row 2, cell 2

    HTML 表格和边框属性

    　如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

    　使用边框属性border来显示一个带有边框的表格：

    实例

    <table border="1">

    <tr>

    <td>Row 1, cell 1</td>

    <td>Row 1, cell 2</td>

    </tr>

    </table>


    尝试一下 »


    HTML 表格表头单元格

    　表格的表头单元格使用<th>标签进行定义。

    　表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

    　大多数浏览器会把表头显示为粗体居中的文本：

    实例

    <table border="1">

    <tr>

    <th>Header 1</th>

    <th>Header 2</th>

    </tr>

    <tr>

    <td>row 1, cell 1</td>

    <td>row 1, cell 2</td>

    </tr>

    <tr>

    <td>row 2, cell 1</td>

    <td>row 2, cell 2</td>

    </tr>

    </table>


    尝试一下 »

    　在浏览器显示如下：

    Header 1Header 2
    row 1, cell 1row 1, cell 2
    row 2, cell 1row 2, cell 2


    表格标题 <caption>

    　在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。

    注：此标签在较新版本的HTML / XHTML中已弃用

    实例

    <table border = "1">

    <caption>这是标题</caption>

    <tr>

    <td>row 1, column 1</td><td>row 1, columnn 2</td>

    </tr>         

    <tr>

    <td>row 2, column 1</td><td>row 2, columnn 2</td>

    </tr>

    </table>


    尝试一下 »


    HTML 表格高度和宽度

    　在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

    实例

    <table border = "1" width = "400" height = "150">

    <tr>

    <td>Row 1, Column 1</td>

    <td>Row 1, Column 2</td>

    </tr>

    <tr>

    <td>Row 2, Column 1</td>

    <td>Row 2, Column 2</td>

    </tr>

    </table>


    尝试一下 »


    HTML 表格背景

    　您可以使用以下方法之一设置 HTML 表格的背景 

    • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
    • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
    • bordercolor属性 - 可以设置边框颜色。

    注：HTML5 中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。 

    实例

    <body>

    <table border = "1" bordercolor = "green" bgcolor = "yellow">

    <tr>

    <th>Column 1</th>

    <th>Column 2</th>

    <th>Column 3</th>

    </tr>

    </table>

    </body>


    尝试一下 »

    　使用background属性需要提供图像 URL 地址：

    实例

    <table border = "1" bordercolor = "green" background = "/images/test.png">

    <tr>

    <th>Column 1</th>

    <th>Column 2</th>

    <th>Column 3</th>

    </tr>

    </table>


    尝试一下 »


    HTML 表格空间

    　有以下两个属性，用于调整 HTML 表格中单元格的空间：

    • cellspacing属性-定义表格单元格之间的空间 
    • cellpadding属性-表示单元格边框与单元格内容之间的距离

    实例

    <table border = "1" cellpadding = "5" cellspacing = "5">

    <tr>

    <th>Name</th>

    <th>Salary</th>

    </tr>

    <tr>

    <td>其琛</td>

    <td>5000</td>

    </tr>

    <tr>

    <td>曼迪</td>

    <td>7000</td>

    </tr>

    </table>


    尝试一下 »

    HTML 合并单元格

    • 如果要将两个或多个列合并为一个列，将使用colspan属性 
    • 如果要合并两行或更多行，则将使用rowspan属性。

    实例

    <table border = "1">

    <tr>

    <th>Column 1</th>

    <th>Column 2</th>

    <th>Column 3</th>

    </tr>

    <tr>

    <td rowspan = "2">Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

    <td>Row 1 Cell 3</td>

    </tr>

    <tr>

    <td>Row 2 Cell 2</td>

    <td>Row 2 Cell 3</td>

    </tr>

    <tr>

    <td colspan = "3">Row 3 Cell 1</td>

    </tr>

    </table>


    尝试一下 »


    效果如下：

    Column 1Column 2Column 3
    Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
    Row 2 Cell 2Row 2 Cell 3
    Row 3 Cell 1

    HTML 表格头部、主体、页脚

    　表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

    　头部，主体和页脚的对应的三个标签是：

    • <thead> - 创建单独的表头。
    • <tbody> - 表示表格的主体。
    • <tfoot> - 创建一个单独的表页脚。

    　表可以包含多个<tbody>元素以指示不同的页面。

    　但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：

    实例

    <table border = "1" width = "100%">

    <thead>

    <tr>

    <td colspan = "4">This is the head of the table</td>

    </tr>

    </thead>       

    <tfoot>

    <tr>

    <td colspan = "4">This is the foot of the table</td>

    </tr>

    </tfoot>     

    <tbody>

    <tr>

    <td>Cell 1</td>

    <td>Cell 2</td>

    <td>Cell 3</td>

    <td>Cell 4</td>

    </tr>

    </tbody>         

    </table>


    尝试一下 »

    HTML 表格的嵌套

    　您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

    实例

    <table border = "1" width = "100%">

    <tr>

    <td>

    <table border = "1" width = "100%">

    <tr>

    <th>Name</th>

    <th>Salary</th>

    </tr>

    <tr>

    <td>其琛</td>

    <td>5000</td>

    </tr>

    <tr>

    <td>曼迪</td>

    <td>7000</td>

    </tr>

    </table>

    </td>

    </tr>       

    </table>


    尝试一下 »



    更多实例

    　没有边框的表格
    　本例演示一个没有边框的表格。

    　表格中的表头 ( Heading )
    　本例演示如何显示表格表头。

    　带有标题的表格
    　本例演示一个带标题  ( caption ) 的表格

    　跨行或跨列的表格单元格
    　本例演示如何定义跨行或跨列的表格单元格。

    　表格内的标签
    　本例演示如何显示在不同的元素内显示元素。

    　单元格边距 ( Cell padding )
    　本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

    　单元格间距 ( Cell spacing )
    　本例演示如何使用 Cell spacing 增加单元格之间的距离。


    HTML 表格标签

    标签描述
    <table>定义表格
    <th>定义表格的表头
    <tr>定义表格的行
    <td>定义表格单元
    <caption>定义表格标题
    <colgroup>定义表格列的组
    <col>定义用于表格列的属性
    <thead>定义表格的页眉
    <tbody>定义表格的主体
    <tfoot>定义表格的页脚


    HTML 列表

    HTML 支持有序、无序和定义列表:

    HTML 列表

    有序列表

    1. The first list item
    2. The second list item
    3. The third list item

    无序列表

    • List item
    • List item
    • List item

    在线实例

    无序列表
    本例演示无序列表。

    有序列表
    本例演示有序列表。

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

    HTML无序列表

    无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

    无序列表适合成员之间无级别顺序关系的情况。

    无序列表使用 <ul> 标签：

    实例

    <ul>

    <li>Coffee</li>

    <li>Milk</li>

    </ul>


    尝试一下 »

    浏览器显示如下：

    • Coffee
    • Milk

    HTML 有序列表

    同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    有序列表适合各项目之间存在顺序关系的情况。

    列表项项使用数字来标记。您可以通过本站的编程测试来练习创建有序列表。

    实例

    <ol>       

    <li>Coffee</li>      

    <li>Milk</li>       

    </ol>


    尝试一下 »

    浏览器中显示如下：

    1. Coffee
    2. Milk

    HTML 自定义列表

    自定义列表不仅仅是一列项目，而是项目及其注释的组合。  

    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

    实例

    <dl>

    <dt>Coffee</dt>

    <dd>- black hot drink</dd>

    <dt>Milk</dt>

    <dd>- white cold drink</dd>

    </dl>


    尝试一下 »

    浏览器显示如下：

    Coffee
    - black hot drink
    Milk
    - white cold drink

    注意事项 - 有用提示

    提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    更多实例

    不同类型的有序列表
    本例演示不同类型的有序列表。

    不同类型的无序列表
    本例演示不同类型的无序列表。

    嵌套列表
    本例演示如何嵌套列表。

    嵌套列表 2
    本例演示更复杂的嵌套列表。

    自定义列表
    本例演示一个定义列表。

    HTML 列表标签

    标签描述
    <ol>定义有序列表
    <ul>定义无序列表
    <li>定义列表项
    <dl>定义列表
    <dt>自定义列表项目
    <dd>定义自定义列表的描述


    HTML <div> 和<span>

    HTML 可以通过 <div> 和 <span> 将元素组合起来。

    HTML 区块元素

    大多数 HTML 元素被定义为块级元素或内联元素。

    块级元素在浏览器显示时，通常会以新行来开始（和结束）。

    实例: <h1>, <p>, <ul>, <table>

    HTML 内联元素

    内联元素在显示时通常不会以新行开始。

    实例: <b>, <td>, <a>, <img>

    HTML <div> 元素

    <div> 标签可以把文档分割为独立的、不同的部分。

    HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

    <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

    如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

    如果要熟悉 <div> 元素是如何进行文档布局的，您可以在编程测试中进行练习使用 <div> 元素组合其他 HTML 元素！

    HTML <span> 与元素

    HTML <span> 元素是内联元素，可用作文本的容器

    <span> 元素也没有特定的含义。

    当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

    HTML 分组标签

    标签描述
    <div>定义了文档的区域，块级 (block-level)
    <span>用来组合文档中的行内元素， 内联元素(inline)

    <span>实例

    HTML  <span> 实例

    <p>我有一双

    <span style="color:gold">金色</span> 的

    <span style="font-size:50px">大眼睛</span>和 

    <span style="color:blue">蓝色的头发</span>。

    </p> 


    尝试一下 »

    <div>实例

    HTML  <div> 实例

    <p>这是一些文本。</p>

    <div style="color:#00FFFF">

    <h3>这是一个在 div 元素中的标题。</h3>

    <p>这是一个在 div 元素中的文本。</p>

    </div>

    <p>这是一些文本。</p>


    尝试一下 »



    内容就在这里内容就在这里HTML 布局

    网页布局对改善网站的外观非常重要。

    请慎重设计您的网页布局。

    Examples

    在线实例

    使用 <div> 元素的网页布局
    如何使用 <div> 元素添加布局。

    使用 <table> 元素的网页布局
    如何使用 <table> 元素添加布局。

    网站布局

    大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

    大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

    lamp虽然我们可以使用HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。

    HTML 布局 - 使用<div> 元素

    div 元素是用于分组 HTML 元素的块级元素。

    下面的例子使用五个 div 元素来创建多列布局：

    实例

    <!DOCTYPE html>
    <html>
    <body>
    <div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">网页的主标题</h1></div>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容就在这里</div>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © W3Cschools.com</div>
    </div>
    </body>
    </html>

    尝试一下 »

    上面的 HTML 代码会产生如下结果：

    网页的主标题

    Menu
    HTML
    CSS
    JavaScript

    内容就在这里

    Copyright © W3CSchool.cc

    HTML 布局 - 使用表格

    使用 HTML <table> 标签是创建布局的一种简单的方式。

    大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

    lamp即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

    下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

    实例

    <!DOCTYPE html>
    <html>
    <body>
    <table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>网页的主标题</h1>
    </td>
    </tr>
    <tr>
    <td style="background-color:#FFD700;width:100px;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript
    </td>
    <td style="background-color:#EEEEEE;height:200px;width:400px;">
    内容就在这里</td>
    </tr>
    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    Copyright © W3Cschools.com</td>
    </tr>
    </table>
    </body>
    </html>

    尝试一下 »

    上面的 HTML 代码会产生以下结果：

    网页的主标题

    Menu
    HTML
    CSS
    JavaScript    		内容就在这里
    Copyright © W3CSchool.cc/td>

    HTML 布局 - 有用的提示

    Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程.

    Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

    HTML 布局标签

    标签描述
    <div>定义文档区块，块级(block-level)
    <span>定义 span，用来组合文档中的行内元素。


    HTML 表单和输入

    HTML 表单用于收集不同类型的用户输入。

    Examples

    在线实例

    创建文本字段 (Text field)
    本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

    创建密码字段
    本例演示如何创建 HTML 的密码域。

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

    HTML 表单

    表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

    表单使用表单标签 <form> 来设置:

    <form>

    .   

    input elements        

    .

    </form>

    HTML 表单 - 输入元素

    多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

    输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

    文本域（Text Fields）

    文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在编程测试中创建文本输入框！

    实例

    <form>

    姓名: <input type="text" name="firstname"><br>       

    电话号码: <input type="text" name="lastname">      

    </form>


    尝试一下 »

    浏览器显示如下：

    姓名:


    电话号码:

    注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

    密码字段

    密码字段通过标签 <input type="password"> 来定义:

    实例

    <form>        

    密码: <input type="password" name="pwd">        

    </form>


    尝试一下 »

    浏览器显示效果如下:

    密码:

    注意:密码字段字符不会明文显示，而是以星号或圆点替代。

    单选按钮（Radio Buttons）

    <input type="radio"> 标签定义了表单单选框选项。在编程测试中练习使用单选按钮！

    实例

    <form>        

    <input type="radio" name="sex" value="male">男<br>      

    <input type="radio" name="sex" value="female">女       

    </form>


    尝试一下 »

    浏览器显示效果如下:

    男


    女

    复选框（Checkboxes）

    <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在实战测试中学习使用复选框！

    实例

    <form>      

    <input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      

    <input type="checkbox" name="vehicle" value="Car">我有小车

    </form>


    尝试一下 »

    浏览器显示效果如下:

    我有自行车


    我有小车

    提交按钮 (Submit Button)

    <input type="submit"> 定义了提交按钮.

    当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

    实例

    <form name="input" action="html_form_action.php" method="get">

    Username: <input type="text" name="user">

    <input type="submit" value="Submit">

    </form>


    尝试一下 »

    尝试一下 »

    浏览器显示截图效果如下:


    假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

    Try it 更多实例

    单选按钮 (Radio buttons)
    本例演示如何在 HTML 中创建单选按钮。

    复选框 (Checkboxes)
    本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。

    简单的下拉列表
    本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

    预选下拉列表
    本例演示如何创建一个简单的带有预选值的下拉列表。

    文本域 (Textarea)
    本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

    创建按钮
    本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

    Try it 表单实例

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

    带有输入框和确认按钮的表单
    本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

    带有复选框的表单
    此表单包含两个复选框和一个确认按钮。

    带有单选按钮的表单
    此表单包含两个单选框和一个确认按钮。

    从表单发送电子邮件
    此例演示如何从表单发送电子邮件。

    HTML 表单标签

    New : HTML5 新标签

    标签描述
    <form>定义供用户输入的表单
    <input>定义输入域
    <textarea>定义文本域 (一个多行的输入控件)
    <label>定义了 <input> 元素的标签，一般为输入标题
    <fieldset>定义了一组相关的表单元素，并使用外框包含起来
    <legend>定义了 <fieldset> 元素的标题
    <select>定义了下拉选项列表
    <optgroup>定义选项组
    <option>定义下拉列表中的选项
    <button>定义一个点击按钮
    New指定一个预先定义的输入控件选项列表
    New定义了表单的密钥对生成器字段
    New定义一个计算结果


    HTML 框架

    <iframe>标签规定一个内联框架。

    　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

    　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

    　iframe 语法：

    <iframe src="URL"></iframe>

    　该URL指向不同的网页，将窗口内容显示为URL地址指向页面。


    Iframe - 设置高度与宽度

    height和width属性用来定义iframe标签的高度与宽度。

    属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

    实例

    <iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

    尝试一下 »

    Iframe - 移除边框

    frameborder属性用于定义iframe表示是否显示边框。

    　设置属性值为 "0" 移除iframe的边框:

    实例

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

    尝试一下 »

    使用 iframe 来显示目录链接页面

    iframe可以显示一个目标链接的页面

    　目标链接的属性必须使用iframe的属性，如下实例：

    实例

    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.51coolma.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

    尝试一下 »

    HTML iframe 标签

    标签说明
    <iframe>定义一个内联的 iframe

    iframe 标准属性

    属性说明
    class
    		规定元素的类名（classname）
    id规定元素的唯一 id
    style规定元素的行内样式（inline style）
    title规定元素的额外信息（可在工具提示中显示）


    HTML <frameset>标签 - HTML5 不支持

    <frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。

    　<frameset> 语法：

    <frameset>

    <frame src="menu.html">

    <frame src="content.html">

    </frameset>

    • frameset- 建立框架的标记，将在其中定义各个框架。
    • frame src- 指示框架显示内容URL地址。

    <frameset> - 设置行列比例

    <frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。

    实例

    <frameset rows="20%,*">

    <frame src="title.html">

    <frameset cols="30%,*">

    <frame src="menu.html">

    <frame src="content.html">

    </frameset>

    </frameset>


    尝试一下 »
    • frameset cols- 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的 30％，并且我们使用“*”符号来指示剩余百分比。
    • frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为 20％，剩下的剩余空间将在menu.html和content.html之间划分。

    <frameset> - 设置边框 

    　框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。

    注意：frameset和frameborder是相同的属性。

    实例

    <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

    <frame src="title.html">

    <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

    <frame src="menu.html">

    <frame src="content.html">

    </frameset>

    </frameset>


    尝试一下 »
    • frameborder-设置边框， 0 值表示没有边框
    • border- 修改边框的粗细（由 Netscape 浏览器使用）
    • framespacing- 修改边框的粗细（由 Internet Explorer 浏览器使用）

    <frame> - 设置名字 - HTML5 不支持 

    <frame>标签中我们使用name属性命名每个框架，而不是内容页面。

    实例

    <frameset rows="20%,*">

    <frame name="title" src="title.html">

    <frameset cols="30%,*">

    <frame name="menu" src="menu.html">

    <name="content" src="content.html">

    </frameset>

    </frameset>


    尝试一下 »

    <frame> - 设置滚动

    <frame>标签中我们使用noresize设置禁止用户拖拉框架大小；scrolling用于设置滚动条是否显示。

    实例

    <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

    <frame src="title.html" noresize scrolling="no">

    <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

    <frame src="menu.html" scrolling="auto" noresize>

    <frame src="content.html" scrolling="yes" noresize>

    </frameset>

    </frameset>


    尝试一下 »
    • noresize- 不允许用户更改其尺寸。
    • scrolling- 设置滚动条是否显示。


    HTML 颜色

    HTML 颜色采用的是 RGB 颜色，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色。

    Color Values

    HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

    每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

    这个表格给出了由三种颜色混合而成的具体效果：

    颜色值

    颜色(Color) 颜色十六进制 (Color HEX) 颜色 RGB (Color RGB)
      #000000 rgb(0,0,0)
      #FF0000 rgb(255,0,0)
      #00FF00 rgb(0,255,0)
      #0000FF rgb(0,0,255)
      #FFFF00 rgb(255,255,0)
      #00FFFF rgb(0,255,255)
      #FF00FF rgb(255,0,255)
      #C0C0C0 rgb(192,192,192)
      #FFFFFF rgb(255,255,255)

    尝试一下 »

    1600 万种不同颜色

    三种颜色 红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 (256 x 256 x 256)。您可以在编程测试中练习使用 RGB 红色表达方式！

    在下面的颜色表中你会看到不同的结果，从 0 到 255 的红色，同时设置绿色和蓝色的值为 0 ，随着红色的值变化，不同的值都显示了不同的颜色。

    Red Light Color HEX Color RGB
      #000000  rgb(0,0,0)
      #080000 rgb(8,0,0)
      #100000 rgb(16,0,0)
      #180000 rgb(24,0,0)
      #200000 rgb(32,0,0)
      #280000 rgb(40,0,0)
      #300000 rgb(48,0,0)
      #380000 rgb(56,0,0)
      #400000 rgb(64,0,0)
      #480000 rgb(72,0,0)
      #500000 rgb(80,0,0)
      #580000 rgb(88,0,0)
      #600000 rgb(96,0,0)
      #680000 rgb(104,0,0)
      #700000 rgb(112,0,0)
      #780000 rgb(120,0,0)
      #800000 rgb(128,0,0)
      #880000 rgb(136,0,0)
      #900000 rgb(144,0,0)
      #980000 rgb(152,0,0)
      #A00000 rgb(160,0,0)
      #A80000 rgb(168,0,0)
      #B00000 rgb(176,0,0)
      #B80000 rgb(184,0,0)
      #C00000 rgb(192,0,0)
      #C80000 rgb(200,0,0)
      #D00000 rgb(208,0,0)
      #D80000 rgb(216,0,0)
      #E00000 rgb(224,0,0)
      #E80000rgb(232,0,0)
      #F00000 rgb(240,0,0)
      #F80000 rgb(248,0,0)
      #FF0000 rgb(255,0,0)

    灰暗色调

    以下展示了灰色到黑色的渐变

    Gray Shades Color HEX Color RGB
      #000000  rgb(0,0,0) 
      #080808  rgb(8,8,8) 
      #101010  rgb(16,16,16) 
      #181818  rgb(24,24,24) 
      #202020  rgb(32,32,32) 
      #282828  rgb(40,40,40) 
      #303030  rgb(48,48,48) 
      #383838  rgb(56,56,56) 
      #404040  rgb(64,64,64) 
      #484848  rgb(72,72,72) 
      #505050  rgb(80,80,80) 
      #585858  rgb(88,88,88) 
      #606060  rgb(96,96,96) 
      #686868  rgb(104,104,104) 
      #707070  rgb(112,112,112) 
      #787878  rgb(120,120,120) 
      #808080  rgb(128,128,128) 
      #888888  rgb(136,136,136) 
      #909090  rgb(144,144,144) 
      #989898  rgb(152,152,152) 
      #A0A0A0  rgb(160,160,160) 
      #A8A8A8  rgb(168,168,168) 
      #B0B0B0  rgb(176,176,176) 
      #B8B8B8  rgb(184,184,184) 
      #C0C0C0  rgb(192,192,192) 
      #C8C8C8  rgb(200,200,200) 
      #D0D0D0  rgb(208,208,208) 
      #D8D8D8  rgb(216,216,216) 
      #E0E0E0  rgb(224,224,224) 
      #E8E8E8  rgb(232,232,232) 
      #F0F0F0  rgb(240,240,240) 
      #F8F8F8  rgb(248,248,248) 
      #FFFFFF  rgb(255,255,255) 

    Web 安全色?

    数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

    我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

    最初，216 跨平台 Web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

    HTML 常用颜色代码表

      #000000   #2F0000   #600030   #460046   #28004D
      #272727   #4D0000   #820041   #5E005E   #3A006F
      #3C3C3C   #600000   #9F0050   #750075   #4B0091
      #4F4F4F   #750000   #BF0060   #930093   #5B00AE
      #5B5B5B   #930000   #D9006C   #AE00AE   #6F00D2
      #6C6C6C   #AE0000   #F00078   #D200D2   #8600FF
      #7B7B7B   #CE0000   #FF0080   #E800E8   #921AFF
      #8E8E8E   #EA0000   #FF359A   #FF00FF   #9F35FF
      #9D9D9D   #FF0000   #FF60AF   #FF44FF   #B15BFF
      #ADADAD   #FF2D2D   #FF79BC   #FF77FF   #BE77FF
      #BEBEBE   #FF5151   #FF95CA   #FF8EFF   #CA8EFF
      #d0d0d0   #ff7575   #ffaad5   #ffa6ff   #d3a4ff
      #E0E0E0   #FF9797   #FFC1E0   #FFBFFF   #DCB5FF
      #F0F0F0   #FFB5B5   #FFD9EC   #FFD0FF   #E6CAFF
      #FCFCFC   #FFD2D2   #FFECF5   #FFE6FF   #F1E1FF
      #FFFFFF   #FFECEC   #FFF7FB   #FFF7FF   #FAF4FF
      #000079   #000079   #003E3E   #006030   #006000
      #000093   #003D79   #005757   #01814A   #007500
      #0000C6   #004B97   #007979   #019858   #009100
      #0000C6   #005AB5   #009393   #01B468   #00A600
      #0000E3   #0066CC   #00AEAE   #02C874   #00BB00
      #2828FF   #0072E3   #00CACA   #02DF82   #00DB00
      #4A4AFF   #0080FF   #00E3E3   #02F78E   #00EC00
      #6A6AFF   #2894FF   #00FFFF   #1AFD9C   #28FF28
      #7D7DFF   #46A3FF   #4DFFFF   #4EFEB3   #53FF53
      #9393FF   #66B3FF   #80FFFF   #7AFEC6   #79FF79
      #AAAAFF   #84C1FF   #A6FFFF   #96FED1   #93FF93
      #B9B9FF   #97CBFF   #BBFFFF   #ADFEDC   #A6FFA6
      #CECEFF   #ACD6FF   #CAFFFF   #C1FFE4   #BBFFBB
      #DDDDFF   #C4E1FF   #D9FFFF   #D7FFEE   #CEFFCE
      #ECECFF   #D2E9FF   #ECFFFF   #E8FFF5   #DFFFDF
      #FBFBFF   #ECF5FF   #FDFFFF   #FBFFFD   #F0FFF0
      #467500   #424200   #5B4B00   #844200   #642100
      #548C00   #5B5B00   #796400   #9F5000   #842B00
      #64A600   #737300   #977C00   #BB5E00   #A23400
      #73BF00   #8C8C00   #AE8F00   #D26900   #BB3D00
      #82D900   #A6A600   #C6A300   #EA7500   #D94600
      #8CEA00   #C4C400   #D9B300   #FF8000   #F75000
      #9AFF02   #E1E100   #EAC100   #FF9224   #FF5809
      #A8FF24   #F9F900   #FFD306   #FFA042   #FF8040
      #B7FF4A   #FFFF37   #FFDC35   #FFAF60   #FF8F59
      #C2FF68   #FFFF6F   #FFE153   #FFBB77   #FF9D6F
      #CCFF80   #FFFF93   #FFE66F   #FFC78E   #FFAD86
      #D3FF93   #FFFFAA   #FFED97   #FFD1A4   #FFBD9D
      #DEFFAC   #FFFFB9   #FFF0AC   #FFDCB9   #FFCBB3
      #E8FFC4   #FFFFCE   #FFF4C1   #FFE4CA   #FFDAC8
      #EFFFD7   #FFFFDF   #FFF8D7   #FFEEDD   #FFE6D9
      #F5FFE8   #FFFFF4   #FFFCEC   #FFFAF4   #FFF3EE
      #613030   #616130   #336666   #484891   #6C3365
      #743A3A   #707038   #3D7878   #5151A2   #7E3D76
      #804040   #808040   #408080   #5A5AAD   #8F4586
      #984B4B   #949449   #4F9D9D   #7373B9   #9F4D95
      #AD5A5A   #A5A552   #5CADAD   #8080C0   #AE57A4
      #B87070   #AFAF61   #6FB7B7   #9999CC   #B766AD
      #C48888   #B9B973   #81C0C0   #A6A6D2   #C07AB8
      #CF9E9E   #C2C287   #95CACA   #B8B8DC   #CA8EC2
      #D9B3B3   #CDCD9A   #A3D1D1   #C7C7E2   #D2A2CC
      #E1C4C4   #D6D6AD   #B3D9D9   #D8D8EB   #DAB1D5
      #EBD6D6   #DEDEBE   #C4E1E1   #E6E6F2   #E2C2DE
      #F2E6E6   #E8E8D0   #D1E9E9   #F3F3FA   #EBD3E8


    HTML 颜色名

    目前所有浏览器都支持以下颜色名。

    141 个颜色名称是在 HTML 和 CSS 颜色规范定义的（ 17 标准颜色，再加 124 ）。下表列出了所有颜色的值，包括十六进制值。

    Remark 提示: 17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。：

    按颜色名排序

    按十六进制的值排序

    单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

    Color Name HEX Color
    AliceBlue  #F0F8FF  
    AntiqueWhite  #FAEBD7  
    Aqua  #00FFFF  
    Aquamarine  #7FFFD4  
    Azure  #F0FFFF  
    Beige  #F5F5DC  
    Bisque  #FFE4C4  
    Black  #000000  
    BlanchedAlmond  #FFEBCD  
    Blue  #0000FF  
    BlueViolet  #8A2BE2  
    Brown  #A52A2A  
    BurlyWood  #DEB887  
    CadetBlue  #5F9EA0  
    Chartreuse  #7FFF00  
    Chocolate  #D2691E  
    Coral  #FF7F50  
    CornflowerBlue  #6495ED  
    Cornsilk  #FFF8DC  
    Crimson  #DC143C  
    Cyan  #00FFFF  
    DarkBlue  #00008B  
    DarkCyan  #008B8B  
    DarkGoldenRod  #B8860B  
    DarkGray  #A9A9A9  
    DarkGreen  #006400  
    DarkKhaki  #BDB76B  
    DarkMagenta  #8B008B  
    DarkOliveGreen  #556B2F  
    DarkOrange  #FF8C00  
    DarkOrchid  #9932CC  
    DarkRed  #8B0000  
    DarkSalmon  #E9967A  
    DarkSeaGreen  #8FBC8F  
    DarkSlateBlue  #483D8B  
    DarkSlateGray  #2F4F4F  
    DarkTurquoise  #00CED1  
    DarkViolet  #9400D3  
    DeepPink  #FF1493  
    DeepSkyBlue  #00BFFF  
    DimGray  #696969  
    DodgerBlue  #1E90FF  
    FireBrick  #B22222  
    FloralWhite  #FFFAF0  
    ForestGreen  #228B22  
    Fuchsia  #FF00FF  
    Gainsboro  #DCDCDC  
    GhostWhite  #F8F8FF  
    Gold  #FFD700  
    GoldenRod  #DAA520  
    Gray  #808080  
    Green  #008000  
    GreenYellow  #ADFF2F  
    HoneyDew  #F0FFF0  
    HotPink  #FF69B4  
    IndianRed   #CD5C5C  
    Indigo   #4B0082  
    Ivory  #FFFFF0  
    Khaki  #F0E68C  
    Lavender  #E6E6FA  
    LavenderBlush  #FFF0F5  
    LawnGreen  #7CFC00  
    LemonChiffon  #FFFACD  
    LightBlue  #ADD8E6  
    LightCoral  #F08080  
    LightCyan  #E0FFFF  
    LightGoldenRodYellow  #FAFAD2  
    LightGray  #D3D3D3  
    LightGreen  #90EE90  
    LightPink  #FFB6C1  
    LightSalmon  #FFA07A  
    LightSeaGreen  #20B2AA  
    LightSkyBlue  #87CEFA  
    LightSlateGray  #778899  
    LightSteelBlue  #B0C4DE  
    LightYellow  #FFFFE0  
    Lime  #00FF00  
    LimeGreen  #32CD32  
    Linen  #FAF0E6  
    Magenta  #FF00FF  
    Maroon  #800000  
    MediumAquaMarine  #66CDAA  
    MediumBlue  #0000CD  
    MediumOrchid  #BA55D3  
    MediumPurple  #9370DB  
    MediumSeaGreen  #3CB371  
    MediumSlateBlue  #7B68EE  
    MediumSpringGreen  #00FA9A  
    MediumTurquoise  #48D1CC  
    MediumVioletRed  #C71585  
    MidnightBlue  #191970  
    MintCream  #F5FFFA  
    MistyRose  #FFE4E1  
    Moccasin  #FFE4B5  
    NavajoWhite  #FFDEAD  
    Navy  #000080  
    OldLace  #FDF5E6  
    Olive  #808000  
    OliveDrab  #6B8E23  
    Orange  #FFA500  
    OrangeRed  #FF4500  
    Orchid  #DA70D6  
    PaleGoldenRod  #EEE8AA  
    PaleGreen  #98FB98  
    PaleTurquoise  #AFEEEE  
    PaleVioletRed  #DB7093  
    PapayaWhip  #FFEFD5  
    PeachPuff  #FFDAB9  
    Peru  #CD853F  
    Pink  #FFC0CB  
    Plum  #DDA0DD  
    PowderBlue  #B0E0E6  
    Purple  #800080  
    Red  #FF0000  
    RosyBrown  #BC8F8F  
    RoyalBlue  #4169E1  
    SaddleBrown  #8B4513  
    Salmon  #FA8072  
    SandyBrown  #F4A460  
    SeaGreen  #2E8B57  
    SeaShell  #FFF5EE  
    Sienna  #A0522D  
    Silver  #C0C0C0  
    SkyBlue  #87CEEB  
    SlateBlue  #6A5ACD  
    SlateGray  #708090  
    Snow  #FFFAFA  
    SpringGreen  #00FF7F  
    SteelBlue  #4682B4  
    Tan  #D2B48C  
    Teal  #008080  
    Thistle  #D8BFD8  
    Tomato  #FF6347  
    Turquoise  #40E0D0  
    Violet  #EE82EE  
    Wheat  #F5DEB3  
    White  #FFFFFF  
    WhiteSmoke  #F5F5F5  
    Yellow  #FFFF00  
    YellowGreen  #9ACD32  

    HTML 颜色值

    颜色由红 (R)、绿 (G)、蓝 (B) 组成。

    颜色值

    颜色值由十六进制来表示红、绿、蓝（RGB）。

    每个颜色的最低值为 0 (十六进制为 00 )，最高值为 255 (十六进制为 FF )。

    十六进制值的写法为#号后跟三个或六个十六进制字符。

    三位数表示法为：#RGB，转换为 6 位数表示为：#RRGGBB。

    颜色实例

    颜色 3 位十六进制颜色值 6 位十六进制颜色值 RGB
      #000 #000000 rgb(0,0,0)
      #F00 #FF0000 rgb(255,0,0)
      #0F0 #00FF00 rgb(0,255,0)
      #00F #0000FF rgb(0,0,255)
      #FF0 #FFFF00 rgb(255,255,0)
      #0FF #00FFFF rgb(0,255,255)
      #F0F #FF00FF rgb(255,0,255)
      #888 #888888 rgb(136,136,136)
      #FFF #FFFFFF rgb(255,255,255)

    尝试一下 »

    通过十六进制（Hex）的颜色值排序

    查看以颜色名称排序的颜色列表

    Color Name HEX Color
    Black  #000000  
    Navy  #000080  
    DarkBlue  #00008B  
    MediumBlue  #0000CD  
    Blue  #0000FF  
    DarkGreen  #006400  
    Green  #008000  
    Teal  #008080  
    DarkCyan  #008B8B  
    DeepSkyBlue  #00BFFF  
    DarkTurquoise  #00CED1  
    MediumSpringGreen  #00FA9A  
    Lime  #00FF00  
    SpringGreen  #00FF7F  
    Aqua  #00FFFF  
    Cyan  #00FFFF  
    MidnightBlue  #191970  
    DodgerBlue  #1E90FF  
    LightSeaGreen  #20B2AA  
    ForestGreen  #228B22  
    SeaGreen  #2E8B57  
    DarkSlateGray  #2F4F4F  
    LimeGreen  #32CD32  
    MediumSeaGreen  #3CB371  
    Turquoise  #40E0D0  
    RoyalBlue  #4169E1  
    SteelBlue  #4682B4  
    DarkSlateBlue  #483D8B  
    MediumTurquoise  #48D1CC  
    Indigo   #4B0082  
    DarkOliveGreen  #556B2F  
    CadetBlue  #5F9EA0  
    CornflowerBlue  #6495ED  
    MediumAquaMarine  #66CDAA  
    DimGray  #696969  
    SlateBlue  #6A5ACD  
    OliveDrab  #6B8E23  
    SlateGray  #708090  
    LightSlateGray  #778899  
    MediumSlateBlue  #7B68EE  
    LawnGreen  #7CFC00  
    Chartreuse  #7FFF00  
    Aquamarine  #7FFFD4  
    Maroon  #800000  
    Purple  #800080  
    Olive  #808000  
    Gray  #808080  
    SkyBlue  #87CEEB  
    LightSkyBlue  #87CEFA  
    BlueViolet  #8A2BE2  
    DarkRed  #8B0000  
    DarkMagenta  #8B008B  
    SaddleBrown  #8B4513  
    DarkSeaGreen  #8FBC8F  
    LightGreen  #90EE90  
    MediumPurple  #9370DB  
    DarkViolet  #9400D3  
    PaleGreen  #98FB98  
    DarkOrchid  #9932CC  
    YellowGreen  #9ACD32  
    Sienna  #A0522D  
    Brown  #A52A2A  
    DarkGray  #A9A9A9  
    LightBlue  #ADD8E6  
    GreenYellow  #ADFF2F  
    PaleTurquoise  #AFEEEE  
    LightSteelBlue  #B0C4DE  
    PowderBlue  #B0E0E6  
    FireBrick  #B22222  
    DarkGoldenRod  #B8860B  
    MediumOrchid  #BA55D3  
    RosyBrown  #BC8F8F  
    DarkKhaki  #BDB76B  
    Silver  #C0C0C0  
    MediumVioletRed  #C71585  
    IndianRed   #CD5C5C  
    Peru  #CD853F  
    Chocolate  #D2691E  
    Tan  #D2B48C  
    LightGray  #D3D3D3  
    Thistle  #D8BFD8  
    Orchid  #DA70D6  
    GoldenRod  #DAA520  
    PaleVioletRed  #DB7093  
    Crimson  #DC143C  
    Gainsboro  #DCDCDC  
    Plum  #DDA0DD  
    BurlyWood  #DEB887  
    LightCyan  #E0FFFF  
    Lavender  #E6E6FA  
    DarkSalmon  #E9967A  
    Violet  #EE82EE  
    PaleGoldenRod  #EEE8AA  
    LightCoral  #F08080  
    Khaki  #F0E68C  
    AliceBlue  #F0F8FF  
    HoneyDew  #F0FFF0  
    Azure  #F0FFFF  
    SandyBrown  #F4A460  
    Wheat  #F5DEB3  
    Beige  #F5F5DC  
    WhiteSmoke  #F5F5F5  
    MintCream  #F5FFFA  
    GhostWhite  #F8F8FF  
    Salmon  #FA8072  
    AntiqueWhite  #FAEBD7  
    Linen  #FAF0E6  
    LightGoldenRodYellow  #FAFAD2  
    OldLace  #FDF5E6  
    Red  #FF0000  
    Fuchsia  #FF00FF  
    Magenta  #FF00FF  
    DeepPink  #FF1493  
    OrangeRed  #FF4500  
    Tomato  #FF6347  
    HotPink  #FF69B4  
    Coral  #FF7F50  
    DarkOrange  #FF8C00  
    LightSalmon  #FFA07A  
    Orange  #FFA500  
    LightPink  #FFB6C1  
    Pink  #FFC0CB  
    Gold  #FFD700  
    PeachPuff  #FFDAB9  
    NavajoWhite  #FFDEAD  
    Moccasin  #FFE4B5  
    Bisque  #FFE4C4  
    MistyRose  #FFE4E1  
    BlanchedAlmond  #FFEBCD  
    PapayaWhip  #FFEFD5  
    LavenderBlush  #FFF0F5  
    SeaShell  #FFF5EE  
    Cornsilk  #FFF8DC  
    LemonChiffon  #FFFACD  
    FloralWhite  #FFFAF0  
    Snow  #FFFAFA  
    Yellow  #FFFF00  
    LightYellow  #FFFFE0  
    Ivory  #FFFFF0  
    White  #FFFFFF  

    HTML 脚本

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 使 HTML 页面具有更强的动态和交互性。

    JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

    Examples

    在线实例

    插入一段脚本
    如何将脚本插入 HTML 文档。

    使用 <noscript> 标签
    如何应对不支持脚本或禁用脚本的浏览器。

    HTML <script> 标签

    <script> 标签用于定义客户端脚本，比如 JavaScript。

    <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

    JavaScript 最常用于图片操作、表单验证以及内容动态更新。

    下面的脚本会向浏览器输出 "Hello World!"：

    实例

    <script>
    document.write("Hello World!")
    </script>

    尝试一下 »

    注释：如果使用 "src" 属性，则 <script> 元素必须是空的。

    RemarkTip: 学习更多关于 Javascript 教程，请查看 JavaScript 教程!

    HTML<noscript> 标签

    <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

    <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

    只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

    实例

    <script>
    document.write("Hello World!")
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>

    尝试一下 »

    RemarkTip: <noscript> 标签支持全局属性，查看完整属性表 HTML全局属性！

    JavaScript 体验(来自本站 JavaScript 教程)

    JavaScript 实例代码:

    JavaScript 可以直接在 HTML 输出:

    document.write("<p>This is a paragraph</p>");

    尝试一下 »

    JavaScript 事件响应:

    <button type="button" onclick ="myFunction()">Click Me!</button>

    尝试一下 »

    JavaScript 处理 HTML 样式:

    document.getElementById("demo").style.color ="#ff0000";

    尝试一下 »

    如何应付老式的浏览器

    如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

    实例

    JavaScript :

    <script type="text/javascript">

    <!--

    document.write("Hello World!")

    //-->

    </script>

    HTML 脚本标签

    标签描述
    <script>定义了客户端脚本
    <noscript>定义了不支持脚本浏览器输出的文本


    HTML 字符实体

    HTML 中的预留字符必须被替换为字符实体。

    一些在键盘上找不到的字符也可以使用字符实体来替换。

    HTML 实体

    在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。

    在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

    如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

    &entity_name;     

    或

    &#entity_number;

    如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

    Remark提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

    不间断空格 (Non-breaking Space)

    HTML 中的常用字符实体是不间断空格( )。

    浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp;字符实体。

    结合音标符

    发音符号是加到字母上的一个"glyph(字形)"。

    一些变音符号, 如 尖音符 (  ̀) 和 抑音符 (  ́) 。

    变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

    变音符号可以与字母、数字字符的组合来使用。

    以下是一些实例:

    音标符字符Construct输出结果
      ̀aàà
      ́aáá
    ̂aa&#770;â
      ̃aa&#771;ã
      ̀OO&#768;Ò
      ́OO&#769;Ó
    ̂OO&#770;Ô
      ̃OO&#771;Õ

    HTML 字符实体

    Note

     实体名称对大小写敏感！


    显示结果描述实体名称实体编号
     空格&nbsp;&#160;
    <小于号&lt;&#60;
    >大于号&gt;&#62;
    &和号&amp;&#38;
    "引号&quot;&#34;
    '撇号 &apos; (IE不支持)&#39;
    ￠分&cent;&#162;
    £镑&pound;&#163;
    ¥人民币/日元&yen;&#165;
    €欧元&euro;&#8364;
    §小节&sect;&#167;
    ©版权&copy;&#169;
    ®注册商标&reg;&#174;
    ™商标&trade;&#8482;
    ×乘号&times;&#215;
    ÷除号&divide;&#247;

    查看本站完整的 HTML 实体：请点击 HTML 实体参考手册。


    HTML 统一资源定位器 (Uniform Resource Locators)

    URL 是一个网页地址。

    URL 可以由字母组成，如 "51coolma.cn"，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

    URL - 统一资源定位器

    Web 浏览器通过 URL 从 Web 服务器请求页面。

    当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

    一个统一资源定位器 (URL) 用于定位万维网上的文档。

    一个网页地址实例: //www.51coolma.cn/html/html-tutorial.html 语法规则:

    scheme://host.domain:port/path/filename 

    说明:

      • scheme - 定义因特网服务的类型。最常见的类型是 http

      • host - 定义域主机（http 的默认主机是 www ）

      • domain - 定义因特网域名，比如 51coolma.cn

      • :port - 定义主机上的端口号（http 的默认端口号是 80 ）

      • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

      • filename - 定义文档 / 资源的名称

    常见的 URL Schemes

    以下是一些 URL scheme：

    Scheme访问用于...
    http超文本传输协议以 http:// 开头的普通网页。不加密。
    https安全超文本传输协议安全网页，加密所有信息交换。
    ftp文件传输协议用于将文件下载或上传至网站。
    file 您计算机上的文件。


    URL 字符编码

    URL 只能使用 ASCII 字符集。

    URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

    URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

    URL 不能包含空格。URL 编码通常使用 + 来替换空格。

    在线实例

    实例

    如果您点击"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

    <form name="input" target="_blank" action="form_action.php" method="get">
      <input type="text" value="51coolma.cn" name="text" size="30">
      <input type="submit" value="提交">
    </form>

    尝试一下 »

    点击 "尝试一下" 按钮查看在线实例

    Remark提示：JavaScript、PHP、ASP 都提供了对字符串进行 URL 编码的函数。

    URL 编码实例

    字符URL 编码
    €%80
    £%A3
    ©%A9
    ®%AE
    À%C0
    Á%C1
    Â%C2
    Ã%C3
    Ä%C4
    Å%C5

    如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。


    HTML 速查列表

    HTML 速查列表. 你可以打印它，以备日常使用。

    HTML 基本文档

    <!DOCTYPE html>

    <html>

    <head>

    <title>文档标题</title>

    </head>

    <body> 可见文本... </body>

    </html>

    基本标签（Basic Tags）

    <h1>最大的标题</h1>

     <h2> . . . </h2>

     <h3> . . . </h3>

     <h4> . . . </h4>

     <h5> . . . </h5>

     <h6>最小的标题</h6>

     

     <p>这是一个段落。</p>

     <br> （换行）

     <hr> （水平线）

     <!-- 这是注释 -->

    文本格式化（Formatting）

    <b>粗体文本</b>

    <code>计算机代码</code>

    <em>强调文本</em>

    <i>斜体文本</i>

    <kbd>键盘输入</kbd> 

    <pre>预格式化文本</pre>

    <small>更小的文本</small>

    <strong>重要的文本</strong>

     

    <abbr> （缩写）

    <address> （联系信息）

    <bdo> （文字方向）

    <blockquote> （从另一个源引用的部分）

    <cite> （工作的名称）

    <del> （删除的文本）

    <ins> （插入的文本）

    <sub> （下标文本）

    <sup> （上标文本）

    链接（Links）

    普通的链接：<a href="链接地址">链接文本</a>

    图像链接： <a href="http://www.example.com/" rel="external nofollow" target="_blank" ><img src="URL" alt="替换文本"></a> 

    邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

    书签： <a id="tips">

    提示部分</a> <a href="#tips">跳到提示部分</a>

    图片（Images）

    <img src="URL" alt="替换文本" height="42" width="42">

    样式/区块（Styles/Sections）

    <style type="text/css">

    h1 {color:red;}

    p {color:blue;}

     </style>

      

     <div>文档中的块级元素</div>

     <span>文档中的内联元素</span>

    无序列表

    <ul>

       <li>项目</li>

       <li>项目</li>

     </ul>

    有序列表

    <ol>

       <li>第一项</li>

       <li>第二项</li>

     </ol>

    定义列表

    <dl>

       <dt>项目 1</dt>

         <dd>描述项目 1</dd>

       <dt>项目 2</dt>

         <dd>描述项目 2</dd>

     </dl>

    表格（Tables）

    <table border="1">

       <tr>

         <th>表格标题</th>

         <th>表格标题</th>

       </tr>

       <tr>

         <td>表格数据</td>

         <td>表格数据</td>

       </tr>

     </table>

    框架（Iframe）

    <iframe src="demo_iframe.htm"></iframe>

    表单（Forms）

    <form action="demo_form.php" method="post/get">

    <input type="text" name="email" size="40" maxlength="50"> 

    <input type="password"> 

    <input type="checkbox" checked="checked"> 

    <input type="radio" checked="checked"> 

    <input type="submit" value="Send"> 

    <input type="reset"> 

    <input type="hidden"> 

    <select> 

    <option>苹果</option> 

    <option selected="selected">香蕉</option> 

    <option>樱桃</option> 

    </select>

    <textarea name="comment" rows="60" cols="20">

    </textarea> 

    </form>

    实体（Entities）

    < 等同于 &lt;

    > 等同于 &gt;

    © 等同于 &copy;


    JavaScript 使 HTML 页面更具动态性和交互性

    实例

    <!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><button type="button"onclick="document.getElementById('demo').innerHTML = Date()">点击我来显示日期和时间</button><p id="demo"></p></body></html>

    HTML <script> 标签

    HTML ​<script>​ 标签用于定义客户端脚本（JavaScript）。

    ​<script>​ 元素即可包含脚本语句，也可通过 ​src​ 属性指向外部脚本文件。

    JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

    如需选取 HTML 元素，JavaScript 最常用 ​document.getElementById()​ 方法。

    这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!"：

    实例

    <script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>

    提示：您可在我们的 JavaScript教程 中学习更多 JavaScript 知识。

    JavaScript 的味道

    以下是展示 JavaScript 能力的一些例子：

    实例

    JavaScript 能够更改内容：

    document.getElementById("demo").innerHTML = "Hello JavaScript!";

    实例

    JavaScript 能够更改样式：

    document.getElementById("demo").style.fontSize = "25px";document.getElementById("demo").style.color = "red";document.getElementById("demo").style.backgroundColor = "yellow";

    实例

    JavaScript 能够更改属性：

    document.getElementById("image").src = "picture.gif";

    HTML <noscript> 标签

    HTML ​<noscript>​ 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：

    实例

    <script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script><noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

    HTML Script 标签

    标签描述
    ​<script>​定义客户端脚本。
    ​<noscript>​为不支持客户端脚本的用户定义替代内容。

    如需所有可用的 HTML 标签的完整列表，请访问我们的 HTML标签手册。

    你已经完成了 HTML 的学习，下一步该学习什么呢？

    HTML 总结

    本教程已教你如何使用 HTML 创建站点。

    HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

    HTML 的关键是标签，其作用是指示将出现的内容。

    如需更多关于 HTML 的信息，请查看我们的 HTML 教程 和 HTML 参考手册 。

    为了能够巩固您对 HTML 的熟练度，您可以进行一些基础的 HTML 测试！

    现在，你已学完 HTML，接下来该学习什么呢？

    学习 CSS

    CSS 被用来同时控制多重网页的样式和布局。

    通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。 

    通过使用 CSS 来我们可以大大提升网页开发的工作效率！

    如需学习如何创建样式表，请访问我们的 CSS 教程 。

    学习 JavaScript

    JavaScript 可以让你的网页更加生动。

    如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到 Javascript。

    JavaScript 是互联网上最流行的脚本语言，目前所有主流浏览器都支持 Javascript。

    如果你想学习更多关于Javascript 的知识，可以访问本站的 JavaScript 教程.

    站点服务器

    在自己的服务器上托管网站始终是一个选项。有几点需要考虑：

    硬件支出

    如果要运行"真正"的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。

    软件支出

    请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。

    人工费

    不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

    使用因特网服务提供商（ISP）

    从 ISP 租用服务器也很常见。

    大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：

    连接速度

    大多数 ISP 都拥有连接因特网的高速连接。

    强大的硬件

    ISP 的 Web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。

    安全性和可靠性

    ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。

    选择 ISP 时的注意事项

    24 小时支持

    确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。

    每日备份

    确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。

    流量

    研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。

    带宽或内容限制

    研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。

    E-mail 功能

    请确保 ISP 支持您需要的 e-mail 功能。

    数据库访问

    如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。

    在您选取一家 ISP 之前，请务必阅读 W3Cschool 的 Web 主机教程。

    学完本教程之后，W3Cschool 推荐您进行Html实战来巩固你刚学习的新知识。

    路径描述
    <img src="logo.jpg">logo.jpg 位于与当前网页相同的文件夹
    <img src="logo/logo.jpg">logo.jpg 位于当前文件夹的 logo文件夹中
    <img src="/logo/logo.jpg">logo.jpg 当前站点根目录的 images 文件夹中
    <img src="../logo.jpg">logo.jpg 位于当前文件夹的上一级文件夹中

    HTML 文件路径

    文件路径描述了网站文件夹结构中某个文件的位置。

    文件路径会在链接外部文件时被用到：

    • 网页
    • 图像
    • 样式表
    • JavaScript

    绝对文件路径

    绝对文件路径是指向一个因特网文件的完整 URL：

    实例

    <img src="https://www.51coolma.cn/statics/img/logo/indexlogo@2x.png" alt="Logo">

    <img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

    相对路径

    相对路径指向了相对于当前页面的文件。

    在本例中，文件路径指向了位于当前网站根目录中 logo 文件夹里的一个文件：

    实例

    <img src="/statics/img/logo/indexlogo@2x.png" alt="Logo">

    在本例中，文件路径指向了位于当前文件夹中 logo 文件夹里的一个文件：

    实例

    <img src="/statics/img/logo/indexlogo@2x.png" alt="Logo">

    在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 logo 文件夹里的一个文件：

    实例

    <img src="../statics/img/logo/indexlogo@2x.png" alt="Logo">

    好习惯

    使用相对路径是个好习惯（如果可能）。

    如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。


    在 HTML 中使用表情符号

    表情符号（Emoji）是来自 UTF-8 字符集的字符：

    为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。

    从 ASCII 到 UTF-8

    ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

    ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

    ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

    HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

    HTML charset 属性

    为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

    这在 ​<meta>​ 标签中指定：

    <meta charset="UTF-8">

    字符集之间的差异

    下表展示了上述字符集之间的区别：

    NumbASCIIANSI8859UTF-8Description
    32space
    33!!!!exclamation mark
    34""""quotation mark
    35####number sign
    36$$$$dollar sign
    37%%%%percent sign
    38&&&&ampersand
    39''''apostrophe
    40((((left parenthesis
    41))))right parenthesis
    42****asterisk
    43++++plus sign
    44,,,,comma
    45----hyphen-minus
    46....full stop
    47////solidus
    480000digit zero
    491111digit one
    502222digit two
    513333digit three
    524444digit four
    535555digit five
    546666digit six
    557777digit seven
    568888digit eight
    579999digit nine
    58::::colon
    59;;;;semicolon
    60<<<<less-than sign
    61====equals sign
    62>>>>greater-than sign
    63????question mark
    64@@@@commercial at
    65AAAALatin capital letter A
    66BBBBLatin capital letter B
    67CCCCLatin capital letter C
    68DDDDLatin capital letter D
    69EEEELatin capital letter E
    70FFFFLatin capital letter F
    71GGGGLatin capital letter G
    72HHHHLatin capital letter H
    73IIIILatin capital letter I
    74JJJJLatin capital letter J
    75KKKKLatin capital letter K
    76LLLLLatin capital letter L
    77MMMMLatin capital letter M
    78NNNNLatin capital letter N
    79OOOOLatin capital letter O
    80PPPPLatin capital letter P
    81QQQQLatin capital letter Q
    82RRRRLatin capital letter R
    83SSSSLatin capital letter S
    84TTTTLatin capital letter T
    85UUUULatin capital letter U
    86VVVVLatin capital letter V
    87WWWWLatin capital letter W
    88XXXXLatin capital letter X
    89YYYYLatin capital letter Y
    90ZZZZLatin capital letter Z
    91[[[[left square bracket
    92reverse solidus
    93]]]]right square bracket
    94^^^^circumflex accent
    95____low line
    96````grave accent
    97aaaaLatin small letter a
    98bbbbLatin small letter b
    99ccccLatin small letter c
    100ddddLatin small letter d
    101eeeeLatin small letter e
    102ffffLatin small letter f
    103ggggLatin small letter g
    104hhhhLatin small letter h
    105iiiiLatin small letter i
    106jjjjLatin small letter j
    107kkkkLatin small letter k
    108llllLatin small letter l
    109mmmmLatin small letter m
    110nnnnLatin small letter n
    111ooooLatin small letter o
    112ppppLatin small letter p
    113qqqqLatin small letter q
    114rrrrLatin small letter r
    115ssssLatin small letter s
    116ttttLatin small letter t
    117uuuuLatin small letter u
    118vvvvLatin small letter v
    119wwwwLatin small letter w
    120xxxxLatin small letter x
    121yyyyLatin small letter y
    122zzzzLatin small letter z
    123{{{{left curly bracket
    124||||vertical line
    125}}}}right curly bracket
    126~~~~tilde
    127DEL    
    128 €  euro sign
    129 NOT USED
    130 ‚  single low-9 quotation mark
    131 ƒ  Latin small letter f with hook
    132 „  double low-9 quotation mark
    133 …  horizontal ellipsis
    134 †  dagger
    135 ‡  double dagger
    136 ˆ  modifier letter circumflex accent
    137 ‰  per mille sign
    138 Š  Latin capital letter S with caron
    139 ‹  single left-pointing angle quotation mark
    140 Œ  Latin capital ligature OE
    141 NOT USED
    142 Ž  Latin capital letter Z with caron
    143 NOT USED
    144 NOT USED
    145 ‘  left single quotation mark
    146 ’  right single quotation mark
    147 “  left double quotation mark
    148 ”  right double quotation mark
    149 •  bullet
    150 –  en dash
    151 —  em dash
    152 ˜  small tilde
    153 ™  trade mark sign
    154 š  Latin small letter s with caron
    155 ›  single right-pointing angle quotation mark
    156 œ  Latin small ligature oe
    157 NOT USED
    158 ž  Latin small letter z with caron
    159 Ÿ  Latin capital letter Y with diaeresis
    160    no-break space
    161 ¡¡¡inverted exclamation mark
    162 ¢¢¢cent sign
    163 £££pound sign
    164 ¤¤¤currency sign
    165 ¥¥¥yen sign
    166 ¦¦¦broken bar
    167 §§§section sign
    168 ¨¨¨diaeresis
    169 ©©©copyright sign
    170 ªªªfeminine ordinal indicator
    171 «««left-pointing double angle quotation mark
    172 ¬¬¬not sign
    173 ­­­soft hyphen
    174 ®®®registered sign
    175 ¯¯¯macron
    176 °°°degree sign
    177 ±±±plus-minus sign
    178 ²²²superscript two
    179 ³³³superscript three
    180 ´´´acute accent
    181 µµµmicro sign
    182 pilcrow sign
    183 ···middle dot
    184 ¸¸¸cedilla
    185 ¹¹¹superscript one
    186 ºººmasculine ordinal indicator
    187 »»»right-pointing double angle quotation mark
    188 ¼¼¼vulgar fraction one quarter
    189 ½½½vulgar fraction one half
    190 ¾¾¾vulgar fraction three quarters
    191 ¿¿¿inverted question mark
    192 ÀÀÀLatin capital letter A with grave
    193 ÁÁÁLatin capital letter A with acute
    194 ÂÂÂLatin capital letter A with circumflex
    195 ÃÃÃLatin capital letter A with tilde
    196 ÄÄÄLatin capital letter A with diaeresis
    197 ÅÅÅLatin capital letter A with ring above
    198 ÆÆÆLatin capital letter AE
    199 ÇÇÇLatin capital letter C with cedilla
    200 ÈÈÈLatin capital letter E with grave
    201 ÉÉÉLatin capital letter E with acute
    202 ÊÊÊLatin capital letter E with circumflex
    203 ËËËLatin capital letter E with diaeresis
    204 ÌÌÌLatin capital letter I with grave
    205 ÍÍÍLatin capital letter I with acute
    206 ÎÎÎLatin capital letter I with circumflex
    207 ÏÏÏLatin capital letter I with diaeresis
    208 ÐÐÐLatin capital letter Eth
    209 ÑÑÑLatin capital letter N with tilde
    210 ÒÒÒLatin capital letter O with grave
    211 ÓÓÓLatin capital letter O with acute
    212 ÔÔÔLatin capital letter O with circumflex
    213 ÕÕÕLatin capital letter O with tilde
    214 ÖÖÖLatin capital letter O with diaeresis
    215 ×××multiplication sign
    216 ØØØLatin capital letter O with stroke
    217 ÙÙÙLatin capital letter U with grave
    218 ÚÚÚLatin capital letter U with acute
    219 ÛÛÛLatin capital letter U with circumflex
    220 ÜÜÜLatin capital letter U with diaeresis
    221 ÝÝÝLatin capital letter Y with acute
    222 ÞÞÞLatin capital letter Thorn
    223 ßßßLatin small letter sharp s
    224 àààLatin small letter a with grave
    225 áááLatin small letter a with acute
    226 âââLatin small letter a with circumflex
    227 ãããLatin small letter a with tilde
    228 äääLatin small letter a with diaeresis
    229 åååLatin small letter a with ring above
    230 æææLatin small letter ae
    231 çççLatin small letter c with cedilla
    232 èèèLatin small letter e with grave
    233 éééLatin small letter e with acute
    234 êêêLatin small letter e with circumflex
    235 ëëëLatin small letter e with diaeresis
    236 ìììLatin small letter i with grave
    237 íííLatin small letter i with acute
    238 îîîLatin small letter i with circumflex
    239 ïïïLatin small letter i with diaeresis
    240 ðððLatin small letter eth
    241 ñññLatin small letter n with tilde
    242 òòòLatin small letter o with grave
    243 óóóLatin small letter o with acute
    244 ôôôLatin small letter o with circumflex
    245 õõõLatin small letter o with tilde
    246 öööLatin small letter o with diaeresis
    247 ÷÷÷division sign
    248 øøøLatin small letter o with stroke
    249 ùùùLatin small letter u with grave
    250 úúúLatin small letter u with acute
    251 ûûûLatin small letter with circumflex
    252 üüüLatin small letter u with diaeresis
    253 ýýýLatin small letter y with acute
    254 þþþLatin small letter thorn
    255 ÿÿÿLatin small letter y with diaeresis

    ASCII 字符集

    ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

    ASCII 使用 32 到 126 的值表示字母、数字和符号。

    ASCII 不使用 128 到 255 之间的值。

    ANSI 字符集 (Windows-1252)

    对于 0 到 127 的值，ANSI 与 ASCII 相同。

    ANSI 有一组专有的字符，其值从 128 到 159。

    对于 160 到 255 的值，ANSI 与 UTF-8 相同。

    ISO-8859-1 字符集

    对于 0 到 127 的值，8859-1 与 ASCII 相同。

    8859-1 不使用 128 到 159 之间的值。

    对于从 160 到 255 的值，8859-1 与 UTF-8 相同。

    UTF-8 字符集

    对于 0 到 127 的值，UTF-8 与 ASCII 相同。

    UTF-8 不使用 12 8到 159 之间的值。

    对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

    UTF-8 从值 256 继续，包含超过 10000 个不同字符。

    如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

    @charset CSS 规则

    您可以使用 CSS @charset 规则来指定样式表中使用的字符编码：

    实例

    将样式表的编码设置为 Unicode UTF-8：

    @charset "UTF-8";

    一个富有美感的背景会让站点看上去更加高级、更有吸引力。本篇为大家来的是 HTML 背景相关内容。

    背景（Backgrounds）

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

    背景颜色（Bgcolor）

    背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    <body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">

    以上的代码均将背景颜色设置为黑色。

    背景（Background）

    背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

    <body background="clouds.gif"><body background="http://www.w3school.com.cn/clouds.gif">

    URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

    提示：如果你打算使用背景图片，你需要紧记一下几点：

    • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
    • 背景图像是否与页面中的其他图象搭配良好。
    • 背景图像是否与页面中的文字颜色搭配良好。
    • 图像在页面中平铺后，看上去还可以吗？
    • 对文字的注意力被背景图像喧宾夺主了吗？

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

    <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

    应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

    Web 浏览器通过 URL 从 web 服务器请求页面。

    URL 是网页的地址，比如 http://www.51coolma.cn。

    URL 编码

    URL 只能使用 ASCII 字符集来通过因特网进行发送。

    由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

    URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

    URL 不能包含空格。URL 编码通常使用 + 来替换空格。

    亲自试一试

    如果您点击下面的“提交”按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

    试着输入一些字符，然后再次点击提交按钮。

    URL 编码示例

    字符URL 编码
    €%80
    £%A3
    ©%A9
    ®%AE
    À%C0
    Á%C1
    Â%C2
    Ã%C3
    Ä%C4
    Å%C5

    <!DOCTYPE> 声明帮助浏览器正确地显示网页。

    <!DOCTYPE> 声明

    Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

    HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

    <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

    实例

    带有 HTML5 DOCTYPE 的 HTML 文档：

    <!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

    HTML 版本

    从 Web 诞生早期至今，已经发展出多个 HTML 版本：

    版本年份
    HTML1991
    HTML+1993
    HTML 2.01995
    HTML 3.21997
    HTML 4.011999
    XHTML 1.02000
    HTML52012
    XHTML52013

    常用的声明

    HTML5

    <!DOCTYPE html>

    HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

    XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    HTML - XHTML

    XHTML 是以 XML 格式编写的 HTML。

    什么是 XHTML?

    • XHTML 指的是可扩展超文本标记语言

    • XHTML 与 HTML 4.01 几乎是相同的

    • XHTML 是更严格更纯净的 HTML 版本

    • XHTML 是以 XML 应用的方式定义的 HTML

    • XHTML 是 2001 年 1 月发布的 W3C 推荐标准

    • XHTML 是大小写敏感的，标准的 XHTML 标签应该使用小写。

    • XHTML 得到所有主流浏览器的支持

    为什么使用 XHTML?

    因特网上的很多页面包含了"糟糕"的 HTML。

    如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

    <html>        

    <head>       

    <title>This is bad HTML</title>       

    <body>      

    <h1>Bad HTML        

    <p>This is a paragraph        

    </body>

    XML 是一种必须正确标记且格式良好的标记语言。

    如果希望学习 XML，请阅读我们的 XML 教程。

    今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

    所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

    与 HTML 相比最重要的区别：

    文档结构

    • XHTML DOCTYPE 是强制性的

    • <html> 中的 XML namespace 属性是强制性的

    • <html>、<head>、<title> 以及 <body> 也是强制性的

    元素语法

    • XHTML 元素必须正确嵌套

    • XHTML 元素必须始终关闭

    • XHTML 元素必须小写

    • XHTML 文档必须有一个根元素

    属性语法

    • XHTML 属性必须使用小写

    • XHTML 属性值必须用引号包围

    • XHTML 属性最小化也是禁止的

    <!DOCTYPE ....>是强制性的

    XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

    您可以在 W3Cschool 的标签参考手册中找到完整的 XHTML 文档类型。

    <html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

    下面的例子展示了带有最少的必需标签的 XHTML 文档：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">               

    <html xmlns="http://www.w3.org/1999/xhtml">     

              

    <head>       

    <title>Title of document</title>        

    </head>   

                

    <body>     

    ......        

    </body>  

                 

    </html>


    XHTML 元素必须合理嵌套

    在 HTML 中，一些元素可以不互相嵌套，像这样：

    <b><i>This text is bold and italic</b></i>

    在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

    <b><i>This text is bold and italic</i></b>


    XHTML 元素必须有关闭标签

    错误示例：

    <p>This is a paragraph     

    <p>This is another paragraph

    正确示例：

    <p>This is a paragraph</p>        

    <p>This is another paragraph</p>


    空元素必须包含关闭标签

    错误示例：

    A break: <br>

    A horizontal rule: <hr>        

    An image: <img src="happy.gif" alt="Happy face">

    正确示例：

    A break: <br />        

    A horizontal rule: <hr />        

    An image: <img src="happy.gif" alt="Happy face" />


    XHTML 元素必须是小写

    错误示例:

    <BODY>        

    <P>This is a paragraph</P>        

    </BODY>

    正确示例：

    <body>        

    <p>This is a paragraph</p>        

    </body>


    属性名称必须是小写

    错误示例：

    <table WIDTH="100%">

    正确示例:

    <table width="100%">


    属性值必须有引号

    错误示例：

    <table width=100%>

    正确示例：

    <table width="100%">


    不允许属性简写

    错误示例：

    <input checked>        

    <input readonly>        

    <input disabled>        

    <option selected>

    正确示例：

    <input checked="checked">        

    <input readonly="readonly">        

    <input disabled="disabled">        

    <option selected="selected">


    如何将 HTML 转换为 XHTML

    1. 添加一个 XHTML <!DOCTYPE> 到你的网页中

    2. 添加 xmlns 属性添加到每个页面的html元素中。

    3. 改变所有的元素为小写

    4. 关闭所有的空元素

    5. 修改所有的属性名称为小写

    6. 所有属性值添加引号

    使用 W3C 验证器来测试你的 XHTML

    尝试一下 »

    XHTML 元素是以 XML 格式编写的 HTML 元素。

    XHTML 元素 - 语法规则

    • XHTML 元素必须正确嵌套
    • XHTML 元素必须始终关闭
    • XHTML 元素必须小写
    • XHTML 文档必须有一个根元素

    XHTML 元素必须正确嵌套

    在 HTML 中，某些元素可以不正确地彼此嵌套在一起，就像这样：

    <b><i>This text is bold and italic</b></i>

    在 XHTML 中，所有元素必须正确地彼此嵌套，就像这样：

    <b><i>This text is bold and italic</i></b>

    XHTML 元素必须始终关闭

    这是错误的：

    <p>This is a paragraph<p>This is another paragraph

    这是正确的：

    <p>This is a paragraph</p><p>This is another paragraph</p>

    空元素也必须关闭

    这是错误的：

    A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">

    这是正确的：

    A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />

    XHTML 元素必须小写

    这是错误的：

    <BODY><P>This is a paragraph</P></BODY>

    这是正确的：

    <body><p>This is a paragraph</p></body>

    XHTML 属性是以 XML 格式编写的 HTML 属性。

    XHTML 属性 - 语法规则

    • XHTML 属性必须使用小写
    • XHTML 属性值必须用引号包围
    • XHTML 属性最小化也是禁止的

    XHTML 属性必须使用小写

    这是错误的：

    <table WIDTH="100%">

    这是正确的：

    <table width="100%">

    XHTML 属性值必须用引号包围

    这是错误的：

    <table width=100%>

    这是正确的：

    <table width="100%">

    禁止属性简写

    这是错误的：

    <input checked><input readonly><input disabled><option selected>

    这是正确的：

    <input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" />

    HTML 多媒体

    Web 上的多媒体指的是音效、音乐、视频和动画。

    现代网络浏览器已支持很多多媒体格式。

    什么是多媒体？

    多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

    在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

    在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。

    浏览器支持

    第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。

    不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。

    您将在下面的章节学习更多有关插件的知识。

    多媒体格式

    格式 多媒体元素（比如视频和音频）存储于媒体文件中。

    确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

    多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

    视频格式

    pic_videoMP4是互联网推出新的视频格式。

    YouTube 推荐使用 MP4 。

    Flash Players 支持 MP4

    HTML5 支持 MP4。
    格式文件描述
    AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
    WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
    MPEG
    • .mpg
    • .mpeg
    		MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
    QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
    RealVideo
    • .rm
    • .ram
    		RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
    Flash
    • .swf
    • .flv
    		Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
    Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

    Note最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。

    声音格式

    MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。

    格式文件描述
    MIDI
    • .mid
    • .midi

    MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。

    点击这里播放 The Beatles。

    因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。

    RealAudio
    • .rm
    • .ram
    		RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
    Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
    WMA.wmaWMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
    MP3
    • .mp3
    • .mpga
    		MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

    NoteHTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。

    HTML 插件

    插件的功能是扩展 HTML 浏览器的功能。

    HTML 助手（插件）

    辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

    辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

    使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

    插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。 

    大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

    Note我们可以使用 <video> 和 <audio> 标签来显示视频和音频

    <object> 元素

    所有主流浏览器都支持 <object> 标签。

    <object> 元素定义了在 HTML 文档中嵌入的对象。

    <object> 元素具有局部属性:data，type，height，width，usemap，name，form。

    该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

    实例

    <object width="400" height="50" data="bookmark.swf"></object>

    尝试一下 »

    <object> 元素同样可用于包含HTML文件：

    实例

    <object width="100%" height="500px" data="snippet.html"></object>

    尝试一下 »

    或者插入一张图片:

    实例

    <object data="logo.png"></object>

    尝试一下 »

    <embed> 元素

    所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。

    <embed> 元素表示一个 HTML Embed 对象 。

    <embed> 元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。

    实例

    <embed width="400" height="50" src="bookmark.swf">

    尝试一下 »

    Note注意 <embed> 元素没有关闭标签。 不能使用替代文本。

    <embed> 元素同样可用于包含 HTML 文件：

    实例

    <embed width="100%" height="500px" src="snippet.html">

    尝试一下 »

    或者插入一张图片:

    Example

    <embed src="logo.png">

    尝试一下 »

    HTML 音频(Audio)

    声音在HTML中可以以不同的方式播放.

    问题以及解决方法

    在 HTML 中播放音频并不容易！

    您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

    在本章，W3Cschool为您总结了问题和解决方法。

    您可以参考本站的 HTML 参考手册的 <audio> 标签一节来获得更多详细信息！

    使用插件

    浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

    插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上. 

    这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

    使用 <embed> 元素

    <embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

    下面的代码片段能够显示嵌入网页中的 MP3 文件：

    实例

    <embed height="50" width="100" src="horse.mp3">

    尝试一下 »

    问题:

    • <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。

    • 不同的浏览器对音频格式的支持也不同。

    • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

    • 如果用户的计算机未安装插件，无法播放音频。

    • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

    使用 <object> 元素

    <object> 标签也可以定义外部（非 HTML）内容的容器。

    下面的代码片段能够显示嵌入网页中的 MP3 文件：

    实例

    <object height="50" width="100" data="horse.mp3"></object>

    尝试一下 »

    问题:

    • 不同的浏览器对音频格式的支持也不同。

    • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

    • 如果用户的计算机未安装插件，无法播放音频。

    • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

    使用 HTML5 <audio> 元素

    HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

    The <audio> element works in all modern browsers.

    浏览器兼容

    格中的数字表示支持该属性的第一个浏览器版本号。


    以下我们将使用 <audio> 标签来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

    实例

    <audio controls>
      <source src="horse.mp3" type="audio/mpeg">
      <source src="horse.ogg" type="audio/ogg">
      Your browser does not support this audio format.
    </audio>

    尝试一下 »

    问题:

    • <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。

    • 您必须把音频文件转换为不同的格式。

    • <audio> 元素在老式浏览器中不起作用。

    最好的 HTML 解决方法

    下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

    实例

    <audio controls height="100" width="100">
      <source src="horse.mp3" type="audio/mpeg">
      <source src="horse.ogg" type="audio/ogg">
      <embed height="50" width="100" src="horse.mp3">
    </audio>

    尝试一下 »

    问题:

    • 您必须把音频转换为不同的格式。

    • <embed> 元素无法回退来显示错误消息。

    雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

    使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

    雅虎播放器可以播放 MP3 以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的 HTML 页面制作成专业的播放列表：

    实例

    <a href="horse.mp3">Play Sound</a>

    <script src="http://mediaplayer.yahoo.com/latest" rel="external nofollow" rel="external nofollow" ></script>

    尝试一下 »

    如果你要使用它，您需要把这段 JavaScript 代码插入网页底部：

    <script src="http://mediaplayer.yahoo.com/latest" rel="external nofollow" rel="external nofollow" ></script>

    然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

    <a href="song1.mp3">Play Song 1</a>
    <a href="song2.wav">Play Song 2</a>
    ...
    ...

    雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

    请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

    使用超链接

    如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

    以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

    实例

    <a href="horse.mp3">Play the sound</a>

    尝试一下 »


    内联的声音说明

    当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

    如果您打算在 Web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

    我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

    HTML 多媒体标签

    New : HTML5 新标签

    标签描述
    <embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
    <object>定义内嵌对象。
    <param>定义对象的参数。
    <audio>New定义了声音内容
    <video>New定义一个视频或者影片
    <source>New定义了media元素的多媒体资源(<video> 和 <audio>)
    <track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)


    HTML 视频（Videos）

    在 HTML 中播放视频的方法有很多种。

    可以使用 <embed> 标签、<object> 标签以及 <video> 标签（HTML 5中启用）。

    HTML视频（Videos）播放

    实例

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.webm" type="video/webm">
      <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240">
      </object>
    </video>

    尝试一下 »

    问题以及解决方法

    在 HTML 中播放视频并不容易！

    您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

    在本章，W3CSchool 为您总结了问题和解决方法。

    使用 <embed> 标签

    <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

    下面的 HTML 代码显示嵌入网页的 Flash 视频：

    实例

    <embed src="intro.swf" height="200" width="200">

    尝试一下 »

    问题

    • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
    • 如果浏览器不支持 Flash，那么视频将无法播放
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

    使用 <object> 标签

    <object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

    下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

    实例

    <object data="intro.swf" height="200" width="200"></object>

    尝试一下 »

    问题:

    • 如果浏览器不支持 Flash，将无法播放视频。
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

    使用 HTML5 <video> 元素

    HTML5 <video> 标签定义了一个视频或者影片.

    <video> 元素在所有现代浏览器中都支持。

    以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

    实例

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>

    尝试一下 »

    RemarkTip: 

    ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
    mp4：带有 H.264 视频编码和 AAC 音频编码的 mp4 文件 
    webm：带有 VP8 视频编码和 Vorbis 音频编码的 webm 文件 

    问题:

    • 您必须把视频转换为很多不同的格式。
    • <video> 元素在老式浏览器中无效。

    最好的 HTML 解决方法

    以下实例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

    HTML 5 + <object> + <embed>

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.webm" type="video/webm">
      <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240">
      </object>
    </video>

    尝试一下 »

    问题:

    • 您必须把视频转换为很多不同的格式

    优酷解决方案

    在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

    如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

    <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" rel="external nofollow"  width="480" height="400" type="application/x-shockwave-flash"> </embed>

    使用超链接

    如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

    以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

    实例

    <a href="intro.swf">Play a video file</a>

    尝试一下 »

    关于内联视频的说明

    当视频被包含在网页中时，它被称为内联视频。

    如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

    同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

    我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

    HTML 多媒体标签

    New : HTML5新标签.

    标签描述
    <embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
    <object>定义内嵌对象。
    <param>定义对象的参数。
    <audio>New定义了声音内容
    <video>New定义一个视频或者影片
    <source>New定义了media元素的多媒体资源(<video> 和 <audio>)
    <track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)


    HTML 实例

    HTML 基础

    非常简单的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> 标签

    实例解析

    您可以通过 W3Cschool 的测验程序来测试您的 HTML 技能。

    关于本测验

    本测验包含 20 道题，每道题的最长答题时间是 20 分钟（这是由于每个 session 的默认有效时间是20钟）。

    本测验是非官方的测试，它仅仅提供了一个了解您对 HTML 的掌握程度的工具。

    测验会被记分

    每道题的分值是 1 分。在您完成全部的 20 道题之后，系统会为您的测验打分，并提供您做错的题目的正确答案。其中，绿色为正确答案，而红色为错误答案。

    现在就开始测验！祝您好运。


    HTML5 & CSS 课程列表

    为了帮助广大学习者，做到学以致用，我们为大家准备了大量的 HTML 编程实战题，通过这些实战题，您可以一边学习一边操作，来达到巩固学习的作用。

    请选择你喜欢的实战提，开始进行编程闯关。

    //www.51coolma.cn/html/html-css-index.html

    //www.51coolma.cn/html5/


    //www.51coolma.cn/htmltags/


    //www.51coolma.cn/htmldom/


    //www.51coolma.cn/jsref/


    HTML中如何键入空格

    • 一个空格的键入

      在 html 网页中一个空格，我们可以键入“空格”键即可实现。

    • 多个 html 空格字符

      如果在 html 中想实现多个空格间隙，如果是键入多个“空格”键，但最终也只显示一个空格间隙。这个时候我们就需要真正的空格字符代码 &nbsp; 了。


    代码示例：

    实例

    学编程上51coolma&nbsp;学编程上51coolma&nbsp;&nbsp;学编程上51coolma&nbsp;
    &nbsp;&nbsp;

    尝试一下 »


    HTML中的空格


    HTML空格的多种转义字符

    • == 普通的英文半角空格 
    • == == == no-break space （普通的英文半角空格但不换行） 
    • == 中文全角空格 （一个中文宽度） 
    • ==   == en空格 （半个中文宽度）
    • ==   == em空格 （一个中文宽度） 
    • == 四分之一em空格 （四分之一中文宽度） 

    相比平时的空格（ ），nbsp 拥有不间断（non-breaking）特性。即连续的 nbsp 会在同一行内显示。即使有100个连续的 nbsp，浏览器也不会把它们拆成两行。

    如何用 JS 动态给 HTML 添加空格

    前端项目中有时需要动态用 JS 添加空格，例如为了照顾 CSS 的样式或者为了照顾特殊效果的实现。只要用下面这种方法就好了。
    HTML:

    如果你不单单想让div 之间是 null，而是想动态添加空格的话，这样(jquery)

    $("#id").innerHTML += " ";

    使用 HTML（超文本标记语言）添加段落间距
    如果你希望输入的文本形成一个段落，那么在段落前插入 <p> ，在段落内句与句之间插入 <p> 来分割句子。

    实例

    51coolma简介

    51coolma.cn注册并建站于2009年8月，是国内较早以w3c标准为教程材料的的技术在线教程类网站之一，后来经过原站长多年经营，成为广为人知的51coolma在线教程网站，2016年开始公司化运作。


    网站主要为初学者提供入门的学习内容和日常技术资料查询服务。


    为了能更好的服务大家，本站中提供了大量的在线实例，通过实例，您可以更好地学习如何建站。


    并且我们会根据当前互联网的变化实时更新内容。


    对于我们网站及内容如有不足的地方，欢迎广大技术爱好者在本站留言提供意见、建议。




    尝试一下 »



    HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网的时候，如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的，程序猿们需要掌握一些必须知道的 HTML 常用代码，因为只有熟悉掌握了常用的 HTML 代码，程序猿们在编写网页的时候才可以做到流畅美观，用细腻的思维和创意的细节效果打动并留住网页浏览者。


    HTML+CSS 代码

    文本设置

     font-size 字号大小
     font-style 字体格式
     font-weight  字体粗细
     color 文本颜色

    提示:注意使用网页安全色.

    超链接设置 

     text-decoration 参数
     underline 为文字加下划线
     overline 为文字加上划线
     line-through 为文字加删除线
     blink 使文字闪烁
     none 不显示上述任何效果

    背景 

     background-color 设置背景色 
     背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。
     背景图片重复 background-repeat: 参数 
     参数取值范围  
     no-repeat 不重复平铺背景图片 
     repeat-x 使图片只在水平方向上平铺 
     repeat-y 使图片只在垂直方向上平铺 如果不指定背景图片重复属性，浏览器默认的是背景图片向水平和垂直两个方向平铺
     背景图片固定 background-attachment: 参数 
     参数取值范围 fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
    区块
     单词间距  word-spacing
     字母间距  letter-spacing
     文本对齐  text-align
     参数的取值  left：左对齐
     right：右对齐
    justify：相对左右两端对齐
     垂直对齐  vertical-align
     参数  top：顶对齐
     bottom：底对齐
    text-top：相对文本顶对齐
    text-bottom：相对文本底对齐
     baseline：基准线对齐
    middle：中心对齐
    sub：以下标的形式显示
    super：以上标的形式显示
     文本缩进  text-indent: 缩进距离
     显示样式 display block：块级元素，在对象前后都换行
     inline：在对象前后都不换行
    list-item：在对象前后都换行，增加了项目符号 
    none：无显示



    方框

     height高度 
     width 宽度 
     padding 内边距 
     margin 外边距 
     float（浮动）可以让块级元素在一行中排列，例如横向菜单。
     clear 清除浮动

    边框

     样式border style none：无边框  
    dotted：边框为点线 
    dashed：边框为长短线 
    solid：边框为实线 
    double：边框为双线 
    宽度 border width
    颜色 border color

    列表

     list-style-type列表样式 不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示

    鼠标

     cursor鼠标形状参数  style="cursor:hand" 　　　　　手形 
    style="cursor:crosshair" 　　十字形 
    style="cursor:text" 　　　　　文本形 
    style="cursor:wait" 　　　　　沙漏形 
    style="cursor:move" 　　　　十字箭头形： 
    style="cursor:help" 　　　　　问号形 
    style="cursor:e-resize" 　　　右箭头形 
    style="cursor:n-resize" 　　　上箭头形 
    style="cursor:nw-resize" 　　左上箭头形 
    style="cursor:w-resize" 　　　左箭头形 
    style="cursor:s-resize" 　　　下箭头形  
    style="cursor:se-resize" 　　右下箭头形  
    style="cursor:sw-resize" 　　左下箭头形 

    HTML常用代码之：结构性定义

     文件类型 放在档案的开头与结尾<html></html>
     文件主题 必须放在「文头」区块内 <title></title>
     文头 描述性资料，像是「主题」<head></head>
     文体 文件本体<body></body>
    标题 从1到6，有六层选择 <h?></h?>
    标题的对齐  <h? align=left|center|right></h?>
    区分  <div></div>
    区分的对齐  <div align=left|right|center|justify></div>
    引文区块  <blockquote></blockquote>
    强调 通常会以斜体显示<em></em>
    特别强调 通常会以加粗显示<strong></strong>
    引文 通常会以斜体显示<cite></cite>
     码显示原始码之用 <code></code>
    样本  <samp></samp>
    键盘输入  <kbd></kbd>
    变数  <var></var>
    定义 有些浏览器不提供<dfn></dfn>
    地址  <address></address>
    大字  <big></big>
    小字  <small></small>
    加粗  <b></b>
    斜体  <I></I>
    底线  <u></u>
    删除线  <s></s>
    下标  <sub></sub>
    上标  <sup></sup>
    打字机体  <tt></tt> 
    预定格式  <pre></pre>
    向中看齐 文字与图片都可以<center></center> 
    闪耀 有史以来最被嘲弄的标签<blink></blink>


    HTML常用代码之：常常会遇到的问题

    点击关闭窗口

    实例

     <a href="javascript.:top.window.close();">点击关闭窗口</a>！

    尝试一下 »

    请问如何去掉主页右面的滚动条？

    实例

    <body scroll="no"> 

    <body style="overflow-y:hidden">


    尝试一下 »

    使用<object> 元素在 HTML 加入 Flash 文件

    实例

    <object width="300" height="300" data="helloworld.swf" >


    尝试一下 »

    如何在不刷新页面的情况下刷新css?

    实例

    <style> 

    button{color:#000000;} 

    </style> 

    <button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为　　红色</button> 


    尝试一下 »

    请问如何让网页自动刷新？

    实例

     方法一，用refresh

    HTML 代码片段如下: 

    <head> 

    <meta. http-equiv="refresh" content="3">  

    </head> 

    3表示刷新时间 

    方法二，使用setTimeout控制 

    <img src=/logo.gif> 

    <script> 

    function rl(){ 

    document.location.reload() 

    } 

    setTimeout(rl,2000) 

    </SCRIPT>


    尝试一下 »

    如何让超链接没有下划线

    实例

    <style> 

    a { text-decoration: none} 

     </style>


    尝试一下 »

    如何用html实现浏览器上后退按钮的功能？ 

    实例

    <a href="java script:history.go(-1)">点击后退</a> 

    尝试一下 »


    HTML常用代码之：你不一定知道的技巧

    实例

    <link rel="Shortcut Icon"href="favicon.icon"> IE地址栏前换成自己的图标

    <link rel="Bookmark"href="favicon.icon"> 可以在收藏夹中显示出你的图标

    <inputstyle="ime-mode:disabled"> 关闭输入法

    <body  oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 

    onselectstart="return false" 取消选取 

    onpaste="return false" 不准粘贴 

    oncopy="return false;" 防止复制

    oncut="return false;"> 防止剪切


    尝试一下 »

    永远都会带着框架 

    实例

    <script language="JavaScript">

    if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 

    </script>


    尝试一下 »

     防止被人frame.

    实例

    <script>

            if (top.location != self.location)top.location=self.location; 

    </script>


    尝试一下 »

     网页将不能被另存为

    实例

    <noscript><iframe src=*.html></iframe></noscript>

    尝试一下 »

     查看网页源代码

    实例

    <input type=button value=查看网页源代码 onclick="window.location = "view-source:"+"http://www.51coolma.cn"">

    尝试一下 »

    删除时确认

    实例

    <a href="" onclick="javascript:return del();">删除</a>

    <script> 

    function del() {

    var msg = "您真的确定要删除吗？ 请确认！";

    if (confirm(msg)==true){

    return true;

    }else{

    return false;}}

    </script>

    尝试一下 »

     网页不会被缓存 

    实例

    <META. HTTP-EQUIV="pragma" CONTENT="no-cache"> 

    <META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate"> 

    <META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 

    或者<META. HTTP-EQUIV="expires"CONTENT="0">


    尝试一下 »

    怎样让表单没有凹凸感？

    实例

    <input type=text style="border:1 solid #000000"> 

    <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

    <body style="overflow:scroll;overflow-y:hidden"> //滚动条竖条消失

    <body style="overflow:scroll;overflow-x:hidden"> //滚动条横条消失

    <body scroll="no"> //两种滚动条都消失


    尝试一下 »

    怎样去掉图片链接点击后，图片周围的虚线？

    实例

    <a href="#" onFocus="this.blur()">

    <img src="logo.jpg"border=0></a>


    尝试一下 »

    电子邮件处理提交表单

    实例

    <form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

    <input type=submit> 

    </form>


    尝试一下 »

    在打开的子窗口刷新父窗口的代码里如何写？

    实例

    window.opener.location.reload()

    如何设定打开页面的大小

    实例

    <body onload="top.resizeTo(300,200);"> 

    <body onload="top.moveBy(300,200);">    //打开页面的位置


    尝试一下 »

    在页面中,如何加入不是满铺的背景图片,拉动页面时背景图不动

    实例

    body {background-image:url(logo.gif);

    background-repeat:no-repeat; 

    background-position:center;

    background-attachment: fixed}


    尝试一下 »

     检查一段字符串是否全由数字组成

    实例

    <script>

    function checkNum(str){return str.match(/D/) == null}
    alert(checkNum("1232142141"))
    alert(checkNum("123214214a1"))

    </script>


    尝试一下 »

    获得一个窗口的大小

    实例

    document.body.clientWidth; 

    document.body.clientHeight;

    怎么判断是否是字符

    实例

    if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"); 

    else alert("全是字符");


    TEXTAREA自适应文字行数的多少

    实例

    <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> 

    </textarea>


    尝试一下 »

     日期减去天数等于第二个日期

    实例

    <script. language=Javascript> 

    function cc(dd,dadd) 

    { 

    //可以加上错误处理 

    var a = new Date(dd) 

    a = a.valueOf() 

    a = a - dadd * 24 * 60 * 60 * 1000 

    a = new Date(a) 

    alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日") 

    } cc("12/23/2002",2) 

    </script>


     选择了哪一个Radio

    实例

    <script> 

    function checkme() 

    for each ob in radio1 

    if ob.checked then window.alert ob.value 

    next 

    end function 

    </script>

    <body> 

    <input name="radio1" type="radio"value="style" checked>Style. 

    <input name="radio1" type="radio"value="barcode">Barcode 

    <input type="button" value="check"nclick="checkme()"> 

    </body>


    尝试一下 »

    脚本永不出错

    实例

    <SCRIPT> 

    <Hide function killErrors(){return true;} window.onerror = killErrors;> 

    </SCRIPT>


    尝试一下 »

    ENTER键可以让光标移到下一个输入框

    实例

    <input onkeydown="if(event.keyCode==13)event.keyCode=9">


    HTML 特殊符号编码对照表

    特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;
    Δ&Delta;&#916;Ε&Epsilon;&#917;Ζ&Zeta;&#918;
    Η&Eta;&#919;Θ&Theta;&#920;Ι&Iota;&#921;
    Κ&Kappa;&#922;Λ&Lambda;&#923;Μ&Mu;&#924;
    Ν&Nu;&#925;Ξ&Xi;&#926;Ο&Omicron;&#927;
    Π&Pi;&#928;Ρ&Rho;&#929;Σ&Sigma;&#931;
    Τ&Tau;&#932;Υ&Upsilon;&#933;Φ&Phi;&#934;
    Χ&Chi;&#935;Ψ&Psi;&#936;Ω&Omega;&#937;
    α&alpha;&#945;β&beta;&#946;γ&gamma;&#947;
    δ&delta;&#948;ε&epsilon;&#949;ζ&zeta;&#950;
    η&eta;&#951;θ&theta;&#952;ι&iota;&#953;
    κ&kappa;&#954;λ&lambda;&#955;μ&mu;&#956;
    ν&nu;&#957;ξ&xi;&#958;ο&omicron;&#959;
    π&pi;&#960;ρ&rho;&#961;ς&sigmaf;&#962;
    σ&sigma;&#963;τ&tau;&#964;υ&upsilon;&#965;
    φ&phi;&#966;χ&chi;&#967;ψ&psi;&#968;
    ω&omega;&#969;ϑ&thetasym;&#977;ϒ&upsih;&#978;
    ϖ&piv;&#982;•&bull;&#8226;…&hellip;&#8230;
    ′&prime;&#8242;″&Prime;&#8243;‾&oline;&#8254;
    ⁄&frasl;&#8260;℘&weierp;&#8472;ℑ&image;&#8465;
    ℜ&real;&#8476;™&trade;&#8482;ℵ&alefsym;&#8501;
    ←&larr;&#8592;↑&uarr;&#8593;→&rarr;&#8594;
    ↓&darr;&#8595;↔&harr;&#8596;↵&crarr;&#8629;
    ⇐&lArr;&#8656;⇑&uArr;&#8657;⇒&rArr;&#8658;
    ⇓&dArr;&#8659;⇔&hArr;&#8660;∀&forall;&#8704;
    ∂&part;&#8706;∃&exist;&#8707;∅&empty;&#8709;
    ∇&nabla;&#8711;∈&isin;&#8712;∉&notin;&#8713;
    ∋&ni;&#8715;∏&prod;&#8719;∑&sum;&#8722;
    −&minus;&#8722;∗&lowast;&#8727;√&radic;&#8730;
    ∝&prop;&#8733;∞&infin;&#8734;∠&ang;&#8736;
    ∧&and;&#8869;∨&or;&#8870;∩&cap;&#8745;
    ∪&cup;&#8746;∫&int;&#8747;∴&there4;&#8756;
    ∼&sim;&#8764;≅&cong;&#8773;≈&asymp;&#8773;
    ≠&ne;&#8800;≡&equiv;&#8801;≤&le;&#8804;
    ≥&ge;&#8805;⊂&sub;&#8834;⊃&sup;&#8835;
    ⊄&nsub;&#8836;⊆&sube;&#8838;⊇&supe;&#8839;
    ⊕&oplus;&#8853;⊗&otimes;&#8855;⊥&perp;&#8869;
    ⋅&sdot;&#8901;⌈&lceil;&#8968;⌉&rceil;&#8969;
    ⌊&lfloor;&#8970;⌋&rfloor;&#8971;◊&loz;&#9674;
    ♠&spades;&#9824;♣&clubs;&#9827;♥&hearts;&#9829;
    ♦&diams;&#9830; &nbsp;&#160;¡&iexcl;&#161;
    ¢&cent;&#162;£&pound;&#163;¤&curren;&#164;
    ¥&yen;&#165;¦&brvbar;&#166;§&sect;&#167;
    ¨&uml;&#168;©&copy;&#169;ª&ordf;&#170;
    «&laquo;&#171;¬&not;&#172;­&shy;&#173;
    ®&reg;&#174;¯&macr;&#175;°&deg;&#176;
    ±&plusmn;&#177;²&sup2;&#178;³&sup3;&#179;
    ´&acute;&#180;µ&micro;&#181"&quot;&#34;
    <&lt;&#60;>&gt;&#62;' &#39;






    HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。

    初学者首先要知道 HTML 标签的一些特点：

    HTML 标签是与大小写无关的，例如“<BODY>”跟<body>表示的意思是一样的，推荐使用小写。类似“<p>”这样由尖括号包关键字组成，例如：

    实例

    <P>P 是段落标签,HTML标签不区分大小写</P>

    <p>意思是一样的，推荐使用小写。</p>


    尝试一下 »


    注：HTML 标签对大小写不敏感，但推荐使用小写！

    HTML 标签一般是成对出现的，由开始标签如<h1>，左边标签一般叫开始标签，右边</h1>叫结束标签，有始有终，除了一些个别是单闭合标签的，下面列举 HTML 单闭合标签。


    单闭合标签

    标签功能
    <br />插入一个换行简单的换行符
    <hr />定义水平线
    <area />定义图像映射内部的区域
    <base />定义页面中所有链接的默认地址或默认目标
    <img />定义图像
    <input />定义输入控件
    <link />定义文档与外部资源的关系
    <meta />定义关于 HTML 文档的元信息
    <basefont />不建议使用。定义页面中文本的默认字体、颜色或尺寸
    <param />定义对象的参数
    <col />定义表格中一个或多个列的属性值
    <frame />定义框架集的窗口或框架
    <embed />定义外部交互内容或插件

    字体效果

    标签

    功能

    <h1>...</h1>标题字(最大)
    <h6>...</h6>标题字(最小)
    <b>...</b>粗体字
    <strong>...</strong>粗体字(强调)
    <i>...</i>斜体字
    <em>...</em>斜体字(强调)
    <dfn>...</dfn>斜体字(表示定义)
    <u>...</u>底线
    <ins>...</ins>底线(表示插入文字)
    <strike>...</strike>横线
    <s>...</s>删除线
    <del>...</del>删除线(表示删除)
    <kbd>...</kbd>键盘文字
    <tt>...</tt>打字体
    <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
    <plaintext>...</plaintext>固定宽度字体(不执行标记符号)
    <listing>...</listing>固定宽度小字体
    <font color=00ff00>...</font>字体颜色
    <font size=1>...</font>最小字体
    <font style =font-size:100 px>...</font>无限增大

    区断标记

    标签

    功能

    <hr>水平线
    <hr size=9>水平线(设定大小)
    <hr width=80%>水平线(设定宽度)
    <hr color=ff0000>水平线(设定颜色)
    <br>(换行)
    <nobr>...</nobr>水域(不换行)
    <p>...</p>水域(段落)
    <center>...</center>置中

    链接

    标签

    功能

    <base href=地址>(预设好连结路径)
    <a href=地址></a>外部连结
    <a href=地址 target=_blank></a>外部连结(另开新窗口)
    <a href=地址 target=_top></a>外部连结(全窗口连结)
    <a href=地址 target=页框名></a>外部连结(在指定页框连结)

    图像/音乐

    标签

    功能

    <img src=图片地址>贴图
    <img src=图片地址 width=180>设定图片宽度
    <img src=图片地址 height=30>设定图片高度
    <img src=图片地址 alt=提示文字>设定图片提示文字
    <img src=图片地址 border=1>设定图片边框
    <bgsound src=MID音乐文件地址>背景音乐设定

    表格

    标签

    功能

    <table align=left>...</table>表格位置,置左
    <table align=center>...</table>表格位置,置中
    <table background=图片路径>...</table>背景图片的URL=就是路径网址
    <table border=边框大小>...</table>设定表格边框大小(使用数字)
    <table bgcolor=颜色码>...</table>设定表格的背景颜色
    <table borderclor=颜色码>...</table>设定表格边框的颜色
    <table borderclordark=颜色码>...</table>设定表格暗边框的颜色
    <table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
    <table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
    <table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
    <table cols=参数>...</table>指定表格的栏数
    <table frame=参数>...</table>设定表格外框线的显示方式
    <table width=宽度>...</table>指定表格的宽度大小(使用数字)
    <table height=高度>...</table>指定表格的高度大小(使用数字)
    <td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
    <td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

    分割窗口

    标签

    功能

    <frameset cols="20%,* ">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
    <frameset rows="20%,* ">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
    <frameset cols="20%,* ">分割左右两个框架
    <frameset cols="20%,*,20% ">分割左中右三个框架
    <frameset rows="20%,*,20% ">分割上中下三个框架
    <! - - ... - ->批注
    <a href target>指定超级链接的分割窗口
    <a href=#锚的名称>指定锚名称的超级链接
    <a href>指定超级链接
    <a name=锚的名称>被连结点的名称
    <address>....</address>用来显示电子邮箱地址
    <b>...</b>粗体字
    <base target>指定超级链接的分割窗口
    <basefont size>更改预设字形大小
    <bgsound src>加入背景音乐
    <big>显示大字体
    <blink>闪烁的文字
    <body text link vlink>设定文字颜色
    <body>显示本文
    <br>换行
    <caption align>设定表格标题位置
    <caption>...</caption>为表格加上标题
    <center>向中对齐
    <cite>...<cite>用于引经据典的文字
    <code>...</code>用于列出一段程序代码
    <comment>...</comment>加上批注
    <dd>设定定义列表的项目解说
    <dfn>...</dfn>显示"定义 "文字
    <dir>...</dir>列表文字卷标
    <dl>...</dl>设定定义列表的卷标
    <dt>设定定义列表的项目
    <em>强调之用
    <font face>任意指定所用的字形
    <font size>设定字体大小
    <form action>设定户动式窗体的处理方式
    <form method>设定户动式窗体之资料传送方式
    <frame marginheight>设定窗口的上下边界
    <frame marginwidth>设定窗口的左右边界
    <frame name>为分割窗口命名
    <frame noresize>锁住分割窗口的大小
    <frame scrolling>设定分割窗口的滚动条
    <frame src>将 HTML 文件加入窗口
    <frameset cols>将窗口分割成左右的子窗口
    <frameset rows>将窗口分割成上下的子窗口
    <frameset>...</frameset>划分分割窗口
    <h1>~<h6>设定文字大小
    <head>...</head>标示文件信息
    <hr>加上分网格线
    <html>...</html>文件的开始与结束
    <i>...</i>斜体字
    <img align>调整图形影像的位置
    <img alt>为你的图形影像加注
    <img dynsrc loop>加入影片
    <img height width>插入图片并预设图形大小
    <img hspace>插入图片并预设图形的左右边界
    <img lowsrc>预载图片功能
    <img src border>设定图片边界
    <img src>插入图片
    <img vspace>插入图片并预设图形的上下边界
    <input type name value>在窗体中加入输入字段
    <isindex>定义查询用窗体
    <kbd>...</kbd>表示使用者输入文字
    <li type>...</li>列表的项目 ( 可指定符号 )
    <marquee>跑马灯效果
    <menu>...</menu>条列文字卷标
    <meta name="refresh " content url>自动更新文件内容
    <multiple>可同时选择多项的列表栏
    <noframe>定义不出现分割窗口的文字
    <ol>...</ol>有序号的列表
    <option>定义窗体中列表栏的项目
    <p align>设定对齐方向
    <p>...</p>分段
    <person>...</person>显示人名
    <pre>使用原有排列
    <samp>...</samp>用于引用字
    <select>...</select>在窗体中定义列表栏
    <small>显示小字体
    <strike>文字加横线
    <strong>用于加强语气
    <sub>...</sup>下标字
    <sup>...</sup>上标字
    <table border=n>调整表格的宽线高度
    <table cellpadding>调整数据域位之边界
    <table cellspacing>调整表格线的宽度
    <table height>调整表格的高度
    <table width>调整表格的宽度
    <table>...</table>产生表格的卷标
    <td align>调整表格字段之左右对齐
    <td bgcolor>设定表格字段之背景颜色
    <td colspan rowspan>表格字段的合并
    <td nowrap>设定表格字段不换行
    <td valign>调整表格字段之上下对齐
    <td width>调整表格字段宽度
    <td>...</td>定义表格的数据域位
    <textarea name rows cols>窗体中加入多少列的文字输入栏
    <textarea wrap>决定文字输入栏是自动否换行
    <th>...</th>定义表格的标头字段
    <title>...</title>文件标题
    <tr>...</tr>定义表格美一行
    <tt>...</tt>打字机字体
    <u>...</u>文字加底线
    <ul type>...</ul>无序号的列表 ( 可指定符号 )
    <var>...</var>用于显示变量

    跑马灯

    标签

    功能

    <marquee>...</marquee>普通卷动
    <marquee behavior=slide>...</marquee>滑动
    <marquee behavior=scroll>...</marquee>预设卷动
    <marquee behavior=alternate>...</marquee>来回卷动
    <marquee direction=down>...</marquee>向下卷动
    <marquee direction=up>...</marquee>向上卷动
    <marquee direction=right>...</marquee>向右卷动
    <marquee direction=left>...</marquee>向左卷动
    <marquee loop=2>...</marquee>卷动次数
    <marquee width=180>...</marquee>设定宽度
    <marquee height=30>...</marquee>设定高度
    <marquee bgcolor=ff0000>...</marquee>设定背景颜色
    <marquee scrollamount=30>...</marquee>设定卷动距离
    <marquee scrolldelay=300>...</marquee>设定卷动时间



    近几年来，随着互联网的不断急剧发展，建站需求量激增，越来越多的个人和是企业都开设建设属于自己的网站，用来做电商营销或个人网站博客等用途。我们都知道正儿八经建设一个网站是耗时耗力的，所以，与其花费大量时间码出一个网站不如套用一个HTML模板再做修改就可以速成一个高逼格的网站，对于小型企业和不懂设计网站的个人来说使用HTML模板是最方便快捷的建站方式，下面51coolma就给大家推荐一些设计优秀的HTML模板，供君参考。

    THOMSOON

    适合个人或工作到作品展示的响应式模板

    THOMSOON


    SeFolio

    一个单页模板，透明设计风格，若搭配一个漂亮的全屏背景图像，一定会很有感觉。

    SeFolio


    Finec

    宫格式布局，用来展示作品、照片的个人网站比较适合。

    Finec

    Lithium

    网页布局很好的一个模板，UI设计可以用作自己的作品集展示，而且修改简单，把几个作品替换一下，写个简介神马的。

    Lithium


    Halcyon Days

    一个流行时尚的网页模板，CSS3动画渐显效果很棒。

    Halcyon Days

    Directive

    一个由HTML5+CSS3编写的网页模板，网页的头部设计很好看。

    Directive



    Dashgum

    配色美丽的管理后台界面模板。

    Dashgum


    Ophiuchus HTML5/CSS3 Template

    这网页无论是视觉设计还是交互设计都非常棒！完美把握设计趋势，是一个不错的HTML模板。

    Ophiuchus HTML5/CSS3 Template



    Iridum

    Iridum


    Infusion

    这模板除了包含HTML源码外，还附有该网页的PSD文件，新手们可以下载来学习学习啦。

    Infusion


    Magnetic

    导航固定在左侧的网站模板，适合展示图像、作品集。

    Magnetic


    Sssoon

    Coming soon、网站建设中类型模板，全屏背景，很有Feel，基于Bootstrap 3框架制作。这个免费的网站制作中模板有多个配色方案以及4个背景选择，每个都很漂亮，有的是全屏视屏背景，很不错！

    Sssoon




    Woo

    woo是一个干净、时尚的着陆页模板，全屏屏的设计，兼容流行的浏览器和移动端设备，适合用于APP、服务类网站。

    Woo


    图书介绍模板

    如果你正在推一本新书，那么这个图标介绍类模板就很适合你了

    图书介绍模板

    美食餐饮模板：MEAT KING

    现在流行使用微信订餐，美食餐饮类等餐厅的网站都火起来，都想做一个兼容手机浏览的网站，这个模板就非常适合了。

    MEAT KING

    Office

    一个欧美简约风格的企业站模板，响应式设计，兼容手机端浏览。

    Office

    Eco Travel

    适用于旅游类的网站模板


    使用HTML模板的优势？

    1、您可以轻松地修改网站模板，然后套用上自己的内容和图片变成自己的项目

    2、网站模板一般都建好了专业的HTML和CSS编码。任何人都可以轻松地设置自己的网站而不需要聘请专业的设计师和开发人员

    3、一些设计师也可以使用这些模板来为他们的客户创建具有专业外观的网站

    4、使用网站模板后的成本效益是最高的

    如何在Dreamweaver中使用网页模板

    不是每个模板都能在Dreamweaver中使用的!

     

    模板基本分为四大类:

     

    1、psd模版

    2、flash模版

    3、html模版

    4、PNG模版

     

    PSD模版需要专业的软件打开，不能像html模版那样直接使用。后缀名是.psd;这种类型的模版是最好的，也是我们重点推荐的。因为他把模版上的元素分为一个一个的层，设计起来十分方便。同时也可以任意切割成自己喜欢的布局！常用的打开软件fireworks、photoshop。

     

    flash模版如果包含.fla源文件，那么打开就需要flash软件。

     

    html模版就是平常的模版了,直接使用Frontpage或者Dreamweaver打开即可，这里就不介绍了。

    PNG模版的处理方法跟PSD模版类似，推荐使用Fireworks处理。



    在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？

    --------------------------------------------------------------


    W3Cschool文本输入框实例：


    --------------------------------------------------------------


    如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。首先我们需要在你的页面上添加一个文本框代码如下:


    实例

    W3Cschool文本输入框实例：<input type="text" value="请输入文本" >


    尝试一下 »


    这个是我们最常见到的按钮了，它没有任何的样式。现在我们来添加一些好看的样式，代码如下：

    实例

    .mytxt {

        color:#333;

        line-height:normal;

        font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;

        font-style:normal;

        font-variant:normal;

        font-size-adjust:none;

        font-stretch:normal;

        font-weight:normal;

        margin-top:0px;

        margin-bottom:0px;

        margin-left:0px;

        padding-top:4px;

        padding-right:4px;

        padding-bottom:4px;

        padding-left:4px;

        font-size:15px;

        outline-width:medium;

        outline-style:none;

        outline-color:invert;

        border-top-left-radius:3px;

        border-top-right-radius:3px;

        border-bottom-left-radius:3px;

        border-bottom-right-radius:3px;

        text-shadow:0px 1px 2px #fff;

        background-attachment:scroll;

        background-repeat:repeat-x;

        background-position-x:left;

        background-position-y:top;

        background-size:auto;

        background-origin:padding-box;

        background-clip:border-box;

        background-color:rgb(255,255,255);

        margin-right:8px;

        border-top-color:#ccc;

        border-right-color:#ccc;

        border-bottom-color:#ccc;

        border-left-color:#ccc;

        border-top-width:1px;

        border-right-width:1px;

        border-bottom-width:1px;

        border-left-width:1px;

        border-top-style:solid;

        border-right-style:solid;

        border-bottom-style:solid;

        border-left-style:solid;

    }


    当我们添加了样式以后，我们需要在文本框中引用此样式。修改文本框代码如下：


    实例

    <input type="text" value="" class="mytxt" />

    尝试一下 »


    好了我们基本的文本框样式完成了，现在我们需要再次添加 focus 按钮。首先简单的介绍一下 focus 按钮的作用：就是当我们箭头在文本框中的时候触发此样式。


    添加 css 样式如下：

    实例

    .mytxt:focus {

         border: 1px solid #fafafa;

        -webkit-box-shadow: 0px 0px 6px #007eff;

         -moz-box-shadow: 0px 0px 5px #007eff;

         box-shadow: 0px 0px 5px #007eff; 

    }


    尝试一下 »

    因为我们鼠标移进去的时候，需要修改边框的颜色和一些阴影，所以上面的代码就够了！希望你能从上面的例子中得到启发。


    现在，我们一起来看看几个好用的 html 表单文本框是如何实现的。表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。


    一、一个单行文本框的例子


    单行文本框

    本例的源代码如下：

    实例

    <p>您的姓名： <input type="text" name="text1" size="12" maxlength="20">

    您的E_mail： <input type="text" name="text2" size="20" maxlength="24" value="*****@*.*">

    输入口令： <input type="password" name="text3" size="8" maxlength="8"> </p>

    <p align="center"> 

    <input type="submit" name="提交" value="提 交">

    <input type="reset" name="重写" value="重 写">


    尝试一下 »

    本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息，在三个文本框中都设定文本框的宽度（size）和最大输入文本长度（maxlength），在第二个文本框中还设定了初始值（value），你可能注意到了，我把每个文本框的名称（name）都取成了英文名，这样对用于程序外理比较方便，因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理，那么用中文名比较直观。


    为了使其成为一个具有实际交互功能的表单，加上了一个提交按钮，并在<form>标记中设定了action参数为：action="mailto:3400982550@qq.com" ，同时把 method 参数设置为：method="post"，这样，一旦按下“提交”按钮将会把信息通过电子邮件发到“3400982550@qq.com”信箱。看来制作并不难！是吗？不过要注意：size 的值小于 maxlength 的值时，当内容超过输入窗口的长度时会自动滚动；反之，size的值大于maxlength的值，超过maxlength长度的内容无法输入。


    html文本框

    二、检验用户输入的信息

    在上例中，若是用户什么信息也不写就按提交按钮，那不是白收一份邮件吗？要避免这种情况出现，就要对用户的输入信息进行检验，这就要用到<input>标记的 onclick 参数，我们在“提交”按钮的<input>标记中把onclick 设置为：onclick="test(form1)"，而“test(form)”则是一个 Javascript 子程序，用来检验文本框的输入内容的，它的源代码如下：

    实例

    <script language="javascript">

    <!--

    function test(form){

    test1(form);

    test2(form);

    test3(form)}

    function test1(form){

    if (form.text1.value=="")

    alert("你没有写上你的姓名，请输入姓名！")

    }

    function test2(form){

    if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1)

    alert("E_mail地址不正确，请重新输入！")

    }

    function test3(form){

    if (form.text3.value！="12345678")

    alert("密码错误，请重新输入！")

    }

    -->

    </script>

    把这段程序复制在<head>与</head>之间，那么一旦用户按下提交按钮，就会调用这段程序对用户输入的信息进行检验，如果信息不正确就会给出提示，提醒用户输入正确的信息。注：在 <form> 标记中设置 onsubmit="test(form1)"也能达到同样的效果。

    三、制作一个留言簿


    留言簿


    这个留言簿虽简单，但已包含了留言簿的基本功能，它是通过邮件的方式接收用户的信息，无需 CGI 支持。它的制作也比较简单，它采用表格产生立体效果，在表单中先插入一个表格，并设置好表格的有关参数，在表单方面，只是比例一多了一个多行文本框。在<input>标记中设置 type="textarea"，不能得到一个多行文本框。我们用HTML的另一个标记<textarea>来设置一个多行文本框，若是默认的文本框大小不合适，可通过设定cols和rows参数来调整窗口的大小。其它标记参数的设置同例一。本例完成后的源代码如下：

    实例

    <table width="50%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" cellpadding="4" align="left">

    <tr><td colspan="2"> <div align="center"><b>留 言 簿</b></div> </td></tr>

    <tr><td>姓名： <input type="text" name="textfield" size="8"> </td>

    <td>E_mail: <input type="text" name="textfield2" size="10" maxlength="20"> </td>

    </tr>

    <tr><td colspan="2"> <div align="center">留 言<br> <textarea name="textfield3" cols="30" rows="3"></textarea></div></td></tr>

    <tr><td> <div align="right"> <input type="submit" name="Submit" value="提 交"> </div> </td>

    <td> <input type="reset" name="Submit2" value="重 写"> </td></tr></table>


    尝试一下 »

    html文本框参考样式

    输入框景背景透明：

    实例

    <input style="background:transparent;border:1px solid #ffffff">

    尝试一下 »

    鼠标划过输入框，输入框背景色变色：

    实例

    <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"

    style="width: 106; height: 21"

    onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">


    尝试一下 »

    输入字时输入框边框闪烁(边框为小方型)：

    实例

    <Script Language="JavaScript">

    function borderColor(){

    if(self['oText'].style.borderColor=='red'){

    self['oText'].style.borderColor = 'yellow';

    }else{

    self['oText'].style.borderColor = 'red';

    }

    oTime = setTimeout('borderColor()',400);

    }

    </Script>

    <input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">


    尝试一下 »
    输入字时输入框边框闪烁(边框为虚线)：

    实例

    <style>

    #oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};

    </style>

    <input type="text" id="oText">


    尝试一下 »


    自动横向廷伸的输入框：

    实例

    <input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

    尝试一下 »

    自动向下廷伸的文本框：

    实例

    <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

    尝试一下 »

    只有下划线的文本框：

    实例

    <input style="border:0;border-bottom:1px solid black;background:;">

    尝试一下 » 

    软件序列号式的输入框：

    实例

    <script for="T" event="onkeyup">

    if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();

    </script>

    <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">


    尝试一下 » 

    软件序列号式的输入框(完整版)：

    实例

    <script for="Submit" event="onclick">

    var sn=new Array();

    for(i=0;i<T.length;i++)

    sn=T.value;

    alert(sn.join("—"));

    </script>

    <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">

    <input type="submit" name="Submit">


    尝试一下 »

    html文本框常见操作技巧

    1、html 文本框怎么用 css 变圆角

    border-radius 属性可以实现元素的圆角。如下 css 可以实现文本框（单行、多行）的圆角：
    input[type=text],textarea{border-radius:3px;border:1px solid #000;}

    border-radius 用法如下：
    border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
    该属性允许为元素添加圆角边框
    语法：

    border-radius: 1-4 length|% / 1-4 length|%;

    按此顺序设置每个 radius 的四个值。
    如果省略 bottom-left，则与 top-right 相同。
    如果省略 bottom-right，则与 top-left 相同。
    如果省略 top-right，则与 top-left 相同。
    单位一般用px和百分比较多，其他单位也可


    w3c


    2、HTML中如何设置文本框的大小

    边框的大小，可以使用CSS样式控制，如：
    <textarea id="txtCon" >content</textarea>
    <style type="text/css">
    #txtCon{width:100px; height:20px;}
    </style>

    也可以使用文本框自己的属性，定义文本框的行和列控制大小，如：
    <textarea id="txtCon" rows="100" cols="100" >content</textarea>


    3、在html中如何实现将本网页中文本框中的值传递到另一个网页的用户名密码框中，并实现登陆

    在html网页中，一个按钮，两个文本框，在<SCRIPT language=JavaScript> /SCRIPT>当中如何写代码能够实现将这两个文本框中的值传递到另一个制定地址的网页中的用户名和密码处，并实现登陆？


    页面必须是跳转过去的才行。例如另一个页面是page.html那么你跳转的时候 page.html?username=tony&password=123 跳转到这个地址，

    然后到另一个页面的时候在脚本里面写
    <SCRIPT language=JavaScript>
    var url = window.location.href;
    然后var username = url.split("?")[1].split("&")[0].split("=")[1] //这样就获取到用户名了。
    var password = url.split("&")[1].split("=")[1];

    然后把值赋给你的密码文本框
    document.getElementById("txtpassword").value = password;
    document.getElementById("txtusername").value=username;
    < /SCRIPT>

    然后验证用户名和密码就可以了。


    html


    4、HTML中让表单input等文本框为只读不可编辑的方法

    有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。 

    方法1: onfocus=this.blur() 当鼠标放不上就离开焦点
    <input type="text" name="input1" value="中国" onfocus=this.blur()> 

    方法2:readonly 
    <input type="text" name="input1" value="中国" readonly> 
    <input type="text" name="input1" value="中国" readonly="true"> 

    方法3: disabled 
    <input type="text" name="input1" value="中国" disabled="true">

    完整的例子:

    <input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true"　readOnly="true" /> 

    disabled="true" 此果文字会变成灰色，不可编辑。 
    readOnly="true" 文字不会变色，也是不可编辑的

    css屏蔽输入：<input style="ime-mode: disabled"> 

    有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本；


    5、您还可以为您将要创建的文本框预设置一个想要显示的值，具体的设置方法您可以参考本站的编程测试！


    在 html 网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在 html 网页中添加一个带有滚动条的文本框，就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，下面就是相关语法：

    实例

    color: #ffffff;
    background-color: #000000;
    border: solid 2px black;
    width: 120px;
    height: 200px;
    overflow: scroll;
    scrollbar-face-color: #889B9F;
    scrollbar-shadow-color: #3D5054;
    scrollbar-highlight-color: #C3D6DA;
    scrollbar-3dlight-color: #3D5054;
    scrollbar-darkshadow-color: #85989C;
    scrollbar-track-color: #95A6AA;
    scrollbar-arrow-color: #FFD6DA;

    上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。


    html中滚动条属性设置

    ​scrollbar​属性、样式详解

    1、​overflow​内容溢出时的设置（设定被设定对象是否显示滚动条）
        ​overflow-x​水平方向内容溢出时的设置
        ​overflow-y​垂直方向内容溢出时的设置
        以上三个属性设置的值为​visible​(默认值)、​scroll​、​hidden​​、auto​。


    2、​ scrollbar-3d-light-color​立体滚动条亮边的颜色（设置滚动条的颜色）
        ​scrollbar-arrow-color​上下按钮上三角箭头的颜色
        ​scrollbar-base-color​滚动条的基本颜色
        ​scrollbar-dark-shadow-color​立体滚动条强阴影的颜色
        ​scrollbar-face-color​立体滚动条凸出部分的颜色
        ​scrollbar-highlight-color​滚动条空白部分的颜色
        ​scrollbar-shadow-color​立体滚动条阴影的颜色

    html滚动条


    我们通过几个实例来讲解上述的样式属性：


    1.让浏览器窗口永远都不出现滚动条

    没有水平滚动条
    <body style="overflow-x:hidden">
    没有垂直滚动条
    <body style="overflow-y:hidden">
    没有滚动条
    <body style="overflow-x:hidden;overflow-y:hidden">或<body
    style="overflow:hidden">


    2.设定多行文本框的滚动条

    没有水平滚动条
    <textarea style="overflow-x:hidden"></textarea>

    没有垂直滚动条
    <textarea style="overflow-y:hidden"></textarea>

    没有滚动条
    <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
    或<textarea style="overflow:hidden"></textarea>


    3.设定窗口滚动条的颜色

    设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
    scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
    加上一点特别的效果：
    <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">


    4.在样式表文件中定义好一个类，调用样式表。

    <style>
    .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
    </style>

    这样调用：
    <textarea class="coolscrollbar"></textarea>

    ​Scrollbar-Face-Color​为滚动条表面颜色设定；
    ​Scrollbar-Highlight-Color​为滚动条上斜面和左斜面颜色设定；
    ​Scrollbar-Shadow-Color​为滚动条下斜面和右斜面颜色设定；
    ​Scrollbar-3Dlight-Color​为滚动条上边和左边的边沿颜色设定；
    ​Scrollbar-Arrow-Color​为滚动条两端箭头颜色设定。
    ​Scrollbar-Track-Color​为滚动条底板颜色设定；
    ​Scrollbar-Darkshadow​为滚动条下边和右边边沿颜色设定。

    举例：

     <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>


    备注框

    HTML各种滚动属性代码

    <marquee>普通卷动</marquee> <br />   
    <marquee behavior=slide>滑动</marquee>  <br />  
    <marquee behavior=alternate>来回卷动 </marquee><br /> 
    <marquee direction=down>向下卷动</marquee> <br /> 
    <marquee direction=up>向上卷动</marquee> <br /> 
    <marquee direction=right>向右卷动</marquee> <br /> 
    <marquee direction=left>向左卷动</marquee> <br /> 
    <marquee loop=2>卷动次数</marquee> <br />   
    <marquee scrollamount=30>设定卷动距离</marquee> <br /> 

    html滚动条颜色设置方法介绍

    ​scrollbar-arrow-color: color; ​/*三角箭头的颜色*/
    ​scrollbar-face-color: color;​ /*立体滚动条的颜色（包括箭头部分的背景色）*/
    ​scrollbar-3dlight-color: color; ​/*立体滚动条亮边的颜色*/
    ​scrollbar-highlight-color: color;​ /*滚动条的高亮颜色（左阴影？）*/
    ​scrollbar-shadow-color: color;​ /*立体滚动条阴影的颜色*/
    ​scrollbar-darkshadow-color: color;​ /*立体滚动条外阴影的颜色*/
    ​scrollbar-track-color: color; ​/*立体滚动条背景颜色*/
    ​scrollbar-base-color: color; ​/*滚动条的基色*/


    ​webkit​不再是用简单的几个CSS属性，而是一坨的CSS伪元素：
    ​-webkit-scrollbar ​滚动条整体部分
    ​-webkit-scrollbar-button​ 滚动条两端的按钮
    ​-webkit-scrollbar-track ​外层轨道
    ​-webkit-scrollbar-track-piece​ 内层轨道，滚动条中间部分（除去）
    ​-webkit-scrollbar-thumb​ （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
    ​-webkit-scrollbar-corner​ 边角
    ​-webkit-resizer ​定义右下角拖动块的样式

    代码

    通过这些伪元素，可以完全的重写一个网站的滚动条样式。
    当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

    ​:horizontal – horizontal​伪类应用于水平方向的滚动条
    ​:vertical – vertical​伪类应用于竖直方向的滚动条
    ​:decrement – decrement​伪类应用于按钮和内层轨道（track piece）。它用来指示按钮或者内层轨道是否会减小视窗的位置（比如，垂直滚动条的上面，水平滚动条的左边。）
    ​:increment – increment​伪类和​decrement​类似，用来指示按钮或内层轨道是否会增大视窗的位置（比如，垂直滚动条的下面和水平滚动条的右边。）
    ​:start – start​伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
    ​:end  ​类似于start伪类，标识对象是否放到滑块的后面。
    ​:double-button  ​该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
    ​:single-button​  类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
    ​:no-button​ 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
    ​:corner-present ​ 用于所有滚动条轨道，指示滚动条圆角是否显示。
    ​:window-inactive​  用于所有的滚动条轨道，指示应用滚动条的某个页面容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以用于：：selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类）
    另外，​:enabled​、​:disabled​、​:hover​ 和 ​:active​ 等伪类同样可以用于滚动条中。

    html滚动条的使用技巧

    (1)隐藏滚动条

    <bodystyle="overflow-x:hidden;overflow-y:hidden">

     

    (2)如何在单元格或图层中出现滚动条

    <divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

     

    (3)javascript改变框架中滚动条的样式，比如改变颜色、改为平面效果等

    <STYLE> 

    BODY   {SCROLLBAR-FACE-COLOR:   #ffcc99;

                  SCROLLBAR-HIGHLIGHT-COLOR:   #ff0000; 

                  SCROLLBAR-SHADOW-COLOR:   #ffffff; 

                  SCROLLBAR-3DLIGHT-COLOR:   #000000; 

                  SCROLLBAR-ARROW-COLOR:   #ff0000; 

                  SCROLLBAR-TRACK-COLOR:   #dee0ed; 

                  SCROLLBAR-DARKSHADOW-COLOR:   #ffff00;} 

    </STYLE> 

      

    说明：  

    ​scrollbar-3dlight-color:color​;设置或检索滚动条亮边框颜色；  

    ​scrollbar-highlight-color:color​;设置或检索滚动条3D界面的亮边颜色；  

    ​scrollbar-face-color:colo​r​;设置或检索滚动条3D表面的颜色；  

    ​scrollbar-arrow-color:color​;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；   

    ​scrollbar-shadow-color:color​;设置或检索滚动条3D界面的暗边颜色；  

    ​scrollbar-darkshadow-color:color​;设置或检索滚动条暗边框颜色；  

    ​scrollbar-base-color:color​;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。   

    ​scrollbar-track-color:color​;设置或检索滚动条的拖动区域颜色   


    备注：  

    color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。

     

    (4)javascript 中的页面元素定位

    ​clientX​、​clientY​是鼠标当前相对于网页的位置，当鼠标位于页面左上角时 clientX=0, clientY=0；

    ​offsetX​、​offsetY​是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时 offsetX=0, offsetY=0；

    ​screenX​、​screenY​是鼠标相对于用户整个屏幕的位置；

    x、y 是鼠标当前相对于当前浏览器的位置

    ​scrollLeft​：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（因为有滚动条的产生，所以目前页面可见内容是不定的）。

    ​scrollTop​：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

    ​left​：对象相对于页面的X坐标。

    ​top​：对象相对于页面的Y坐标

     

    (5)屏蔽选择,右键等

    <body oncontextmenu=self.event.returnValue=falseonselectstart="return false">


      html


    下面的这个小例子是 实现滚动条根据窗体的大小自动设置

    [html]
    <SPAN style="FONT-SIZE: 18px"><html> 
    <head> 
    <style type="text/css"> 
      .TopDIV  
      {   
         position:absolute;  
         left:130px; 
         top:10px; 
         width:105; 
         height:30; 
         overflow-x:hidden; 
         overflow-y:auto; 
         float: right; 
         border-style.:solid; 
         border-width:;  
         border-color:red 
      } 
      .LeftDIV  
      {   
         position:absolute;  
         left:10px; 
         top:40px; 
         width:120; 
         height:60; 
         overflow-x:hidden; 
         overflow-y:hidden; 
         float: right; 
         border-style.:solid; 
         border-width:;  
         border-color:yellow 
      } 
      .MainDIV  
      {   
         position:absolute;  
         left:130px; 
         top:40px; 
         width:120;; 
         height:80; 
         overflow-x:auto; 
         overflow-y:auto; 
         float: right; 
         border-style.:solid; 
         border-width:;  
         border-color:blue 
      } 
    </style> 
    <script type="text/javascript" language="javascript"> 
    function setStyle() 
    { 
    //145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
    document.getElementById("a").style.width=document.body.clientWidth - 145; 
    //130的由来LeftDiv的left+width 
    document.getElementById("c").style.width=document.body.clientWidth - 130; 
    //55的由来TopDIV的top+height+15（15是滚动条的宽度） 
    document.getElementById("b").style.height=document.body.clientHeight - 55; 
    //40的由来TopDIV的top+height 
    document.getElementById("c").style.height=document.body.clientHeight - 40; 
    } 
    </script> 
      
    </head> 
    <body onresize="setStyle();" onLoad="setStyle();"> 
      
    <div id='a' class="TopDIV"> 
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </div> 
      
    <div id='b' class="LeftDIV"> 
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </div> 
    <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"  
     class="MainDIV"> 
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </div> 
    </body> 
    </html> 
    </SPAN> 

    <html>
    <head>
    <style type="text/css">
      .TopDIV
      { 
         position:absolute;
         left:130px;
         top:10px;
         width:105;
         height:30;
         overflow-x:hidden;
         overflow-y:auto;
         float: right;
         border-style.:solid;
         border-width:;
         border-color:red
      }
      .LeftDIV
      { 
         position:absolute;
         left:10px;
         top:40px;
         width:120;
         height:60;
         overflow-x:hidden;
         overflow-y:hidden;
         float: right;
         border-style.:solid;
         border-width:;
         border-color:yellow
      }
      .MainDIV
      { 
         position:absolute;
         left:130px;
         top:40px;
         width:120;;
         height:80;
         overflow-x:auto;
         overflow-y:auto;
         float: right;
         border-style.:solid;
         border-width:;
         border-color:blue
      }
    </style>
    <script type="text/javascript" language="javascript">
    function setStyle()
    {
    //145的由来LeftDiv的left+width+15（15是滚动条的宽度）
    document.getElementById("a").style.width=document.body.clientWidth - 145;
    //130的由来LeftDiv的left+width
    document.getElementById("c").style.width=document.body.clientWidth - 130;
    //55的由来TopDIV的top+height+15（15是滚动条的宽度）
    document.getElementById("b").style.height=document.body.clientHeight - 55;
    //40的由来TopDIV的top+height
    document.getElementById("c").style.height=document.body.clientHeight - 40;
    }
    </script>
     
    </head>
    <body onresize="setStyle();" onLoad="setStyle();">
     
    <div id='a' class="TopDIV">
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </div>
     
    <div id='b' class="LeftDIV">
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </div>
    <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
     class="MainDIV">
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </div>
    </body>
    </html>

    滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.



    在网站的最底端我们都可以看到类似于这样的一句话：“Copyright©2016 51coolma.cn All Rights Reserved”，这就是网站的版权说明，虽然那只是一小行字，不过作为设计师也好，作为个人的爱好也好，版权的标志都是满重要的。从法律角度看，版权保护是随着作品（无论是文字作品还是图片作品）的完成即刻获得的，并不是必须要声明或进行登记后才可获得。这行文字可以多少提醒浏览者，所看到的内容是受到保护的！ 


    规范的格式可以是：Copyright/© + [dates] + [author/owner]


    copyright

    © 通常可以代替Copyright, 但是不可以用(c)。 All Rights Reserved 在某些国家曾经是必须的，但是现在在大多数国家，都不是法律上必须有的字样。

    参见下面几个正确的格式：

    • ©1995-2004 Macromedia, Inc. All rights reserved.
    • ©2004 Microsoft Corporation. All rights reserved.
    • Copyright © 2004 Adobe Systems Incorporated. All rights reserved.
    • ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.


    请注意标点符号和大小写的用法，这也是专业精神的一种体现。

    现在流行some rights reserved：creativecommons.org

    {Copyright © 2004 Adobe Systems Incorporated. All rights reserved.}


    Copyright:版权 
    © 时间 2008-2009 授权时间
     XXX公司  有版权的公司
    All rights reserved.：版权所有


    在网页html里面版权符号可以直接写或者用符号来表示

    1. 可以打出来，如：©

    2. 可以这样写：©

    这两种显示效果都是一样的。

    直接写版权可能有点难看，你可以用CSS来定义它的布局如：<span style=”font-family:Arial;”>© 或 ©</span> 就可以了。

    1、那个 [dates] 是指起至日期还是其他的什么意思？

    一般的，只要显示最新的年份即可，也可以显示从某个起始日期开始，到现在为止。如果你加了这行字，请注意每年及时更新。

    2、日期后加网站名字？其他行吗？

    日期后面，只能跟网站，或者版权拥有者的名字，如果是个人网站，你可以用域名，也可以用你自己的名称。拼音的写法是你的名字的首字母，后面跟你的姓的全拼，首字母大写。很多人也用网名的，重要的是格式的次序，不加这个标注，你的版权也是同样被认可和保护的。


    版权


    Html中版权符号的字体选择问题

    ©是html的中版权的符号，但是字体选择的不对会带来一些问题。如果是宋体，这个符号显示的就是很奇怪的一个符号，所以有效的解决方法就是font-family:arial，遇到此问题的朋友可以参考下，希望对大家有所帮助。

    代码如下:

    <span style="font-family:arial;">Copyright &copy; </span> 

    HTML 特殊符号编码对照表

    特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;
    Δ&Delta;&#916;Ε&Epsilon;&#917;Ζ&Zeta;&#918;
    Η&Eta;&#919;Θ&Theta;&#920;Ι&Iota;&#921;
    Κ&Kappa;&#922;Λ&Lambda;&#923;Μ&Mu;&#924;
    Ν&Nu;&#925;Ξ&Xi;&#926;Ο&Omicron;&#927;
    Π&Pi;&#928;Ρ&Rho;&#929;Σ&Sigma;&#931;
    Τ&Tau;&#932;Υ&Upsilon;&#933;Φ&Phi;&#934;
    Χ&Chi;&#935;Ψ&Psi;&#936;Ω&Omega;&#937;
    α&alpha;&#945;β&beta;&#946;γ&gamma;&#947;
    δ&delta;&#948;ε&epsilon;&#949;ζ&zeta;&#950;
    η&eta;&#951;θ&theta;&#952;ι&iota;&#953;
    κ&kappa;&#954;λ&lambda;&#955;μ&mu;&#956;
    ν&nu;&#957;ξ&xi;&#958;ο&omicron;&#959;
    π&pi;&#960;ρ&rho;&#961;ς&sigmaf;&#962;
    σ&sigma;&#963;τ&tau;&#964;υ&upsilon;&#965;
    φ&phi;&#966;χ&chi;&#967;ψ&psi;&#968;
    ω&omega;&#969;ϑ&thetasym;&#977;ϒ&upsih;&#978;
    ϖ&piv;&#982;•&bull;&#8226;…&hellip;&#8230;
    ′&prime;&#8242;″&Prime;&#8243;‾&oline;&#8254;
    ⁄&frasl;&#8260;℘&weierp;&#8472;ℑ&image;&#8465;
    ℜ&real;&#8476;™&trade;&#8482;ℵ&alefsym;&#8501;
    ←&larr;&#8592;↑&uarr;&#8593;→&rarr;&#8594;
    ↓&darr;&#8595;↔&harr;&#8596;↵&crarr;&#8629;
    ⇐&lArr;&#8656;⇑&uArr;&#8657;⇒&rArr;&#8658;
    ⇓&dArr;&#8659;⇔&hArr;&#8660;∀&forall;&#8704;
    ∂&part;&#8706;∃&exist;&#8707;∅&empty;&#8709;
    ∇&nabla;&#8711;∈&isin;&#8712;∉&notin;&#8713;
    ∋&ni;&#8715;∏&prod;&#8719;∑&sum;&#8722;
    −&minus;&#8722;∗&lowast;&#8727;√&radic;&#8730;
    ∝&prop;&#8733;∞&infin;&#8734;∠&ang;&#8736;
    ∧&and;&#8869;∨&or;&#8870;∩&cap;&#8745;
    ∪&cup;&#8746;∫&int;&#8747;∴&there4;&#8756;
    ∼&sim;&#8764;≅&cong;&#8773;≈&asymp;&#8773;
    ≠&ne;&#8800;≡&equiv;&#8801;≤&le;&#8804;
    ≥&ge;&#8805;⊂&sub;&#8834;⊃&sup;&#8835;
    ⊄&nsub;&#8836;⊆&sube;&#8838;⊇&supe;&#8839;
    ⊕&oplus;&#8853;⊗&otimes;&#8855;⊥&perp;&#8869;
    ⋅&sdot;&#8901;⌈&lceil;&#8968;⌉&rceil;&#8969;
    ⌊&lfloor;&#8970;⌋&rfloor;&#8971;◊&loz;&#9674;
    ♠&spades;&#9824;♣&clubs;&#9827;♥&hearts;&#9829;
    ♦&diams;&#9830; &nbsp;&#160;¡&iexcl;&#161;
    ¢&cent;&#162;£&pound;&#163;¤&curren;&#164;
    ¥&yen;&#165;¦&brvbar;&#166;§&sect;&#167;
    ¨&uml;&#168;©&copy;&#169;ª&ordf;&#170;
    «&laquo;&#171;¬&not;&#172; &shy;&#173;
    ®&reg;&#174;¯&macr;&#175;°&deg;&#176;
    ±&plusmn;&#177;²&sup2;&#178;³&sup3;&#179;
    ´&acute;&#180;µ&micro;&#181"&quot;&#34;
    <&lt;&#60;>&gt;&#62;' &#39;


    嵌套错误可能引起的问题

    在我们使用各种浏览器时，时常发现即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？

    举个栗子1：开始与结束标签嵌套错误

    <div><h2>内容</div></h2>

    测试结果：

    开始与结束标签嵌套错误

    举个栗子2：<p>元素嵌套<div>元素

    <p><div>内容</div></p>

    测试结果：

    QQ图片20171117181634

    举个栗子3：列表元素<li>兄弟元素为<div>

    <ul><li>内容</li><div>内容</div></ul>

    测试结果：

    列表元素li兄弟元素为div

    举个栗子4：<h2>元素嵌套<div>元素

    <h2><div>内容</div></h2>

    测试结果：

    h2元素嵌套div元素

    举个栗子5：<a>元素嵌套<a>元素

    <a href=""><a href="">内容</a></a>

    测试结果：

    a元素嵌套a元素

    通过上述栗子，我们总结如下：

    • 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误
    • 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误
    • 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常
    • 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误
    • 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6IE7的解析错误

    其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。

    我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

    严格嵌套约束、语义嵌套约束

    通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

    严格嵌套约束规则：

    • a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
    • <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
    • 暂时没有发现更多，有的欢迎告诉我

    语义嵌套约束：

    每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。

    浏览器的容错机制

    并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。

    这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。

    拥抱WEB标准

    原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了HTML5，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。

    你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。

    WEB标准只会使我们吃饭变得更香，睡眠变得更好，新的技术或标准会推动我们去富有热情的coding，而不是每天在重复劳动。

    补充一些标准的常用链接：

    W3C国际站：http://www.w3.org/

    W3C中国：http://www.chinaw3c.org/

    W3C HTML5：http://www.w3.org/TR/html5/


    此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。

    开始

    hello.html

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>HTML5 Boilerplate</title></head><body><h1>Hello world, hello QuickRef.ME!</h1></body></html>

    注释

    <!-- this is a comment -->

    这段代码将会被注释掉。

    段落

    <p>I'm from QuickRef.ME</p><p>Share quick reference cheat sheet.</p>

    请参阅：<p>标签

    链接

    <a href="https://quickref.me" rel="external nofollow" target="_blank" >QuickRef</a><a href="mailto:jack@abc.com">Email</a><a href="tel:+12345678">Call</a><a href="sms:+12345678&body=ha%20ha">Msg</a>
    href超链接指向的 URL
    rel链接网址的关系
    target链接目标位置：
    _self, _blank, _top,_parent

    请参阅：<a> 标签

    图片

    <img loading="lazy" src="https://xxx.png" rel="external nofollow"  alt="Describe image here" width="400" height="400">
    src必需，图像位置（URL | 路径）
    alt图像描述
    width图像的宽度
    height图像的高度
    loading浏览器应该如何加载

    请参阅：<img>标签

    文本格式

    <b>Bold Text</b><strong>This text is important</strong><i>Italic Text</i><em>Emphasis - This text is emphasized</em><u>Underline Text</u><pre>Preformatted text</pre><code>Source code</code><del>Deleted text</del><mark>Marked/highlighted text</mark><ins>Inserted text</ins><sup>Makes text superscripted</sup><sub> Makes text subscripted</sub><small>Makes text smaller</small><pre>Pre-formatted Text</pre><kbd>Ctrl</kbd><blockquote>Text Block Quote</blockquote>

    标题

    <h1> This is Heading 1 </h1><h2> This is Heading 2 </h2><h3> This is Heading 3 </h3><h4> This is Heading 4 </h4><h5> This is Heading 5 </h5><h6> This is Heading 6 </h6>

    您的页面上应该只有一个 h1

    分区

    <div></div>页面内容的部分或部分
    <span></span>其他内容中的文本部分
    <p></p>文字段落
    <br>换行
    <hr>基本水平线

    这些是用于将您的页面划分为多个部分的标签

    JavaScript在HTML中

    <script type="text/javascript">    alert("Hello QuickRef.ME");</script>

    外部JavaScript

    <head>    ...    <script src="app.js"></script></head>

    CSS在HTML中

    <style type="text/css">    h1 {        color: purple;    }</style>

    外部CSS

    <body>...<link rel="stylesheet" href="style.css"/></body>

    内联框架

    <iframe id="inlineFrameExample"    title="YouTube video player"    width="560"    height="215"    src="https://www.youtube.com/embed/HmZKgaHa3Fg" rel="external nofollow"     allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>

    HTML 表格

    表格示例

    <table>    <thead>        <tr>            <td>name</td>            <td>age</td>        </tr>    </thead>    <tbody>        <tr>            <td>Roberta</td>            <td>39</td>        </tr>        <tr>            <td>Oliver</td>            <td>25</td>        </tr>    </tbody></table>

    表格标签

    <table>定义一个表
    <th>定义表格中的标题单元格
    <tr>定义表格中的一行
    <td>定义表格中的单元格
    <caption>定义表格标题
    <colgroup>定义一组列
    <col>定义表中的列
    <thead>分组标题内容
    <tbody>将正文内容分组
    <tfoot>将页脚内容分组

    <td> 属性

    colspan单元格应跨越的列数
    headers一个或多个与单元格相关的标题单元格
    rowspan单元格应跨越的行数

    请参阅：<td>属性

    <th> 属性

    colspan单元格应跨越的列数
    headers一个或多个与单元格相关的标题单元格
    rowspan单元格应跨越的行数
    abbr单元格内容的描述
    scope标题元素涉及

    请参阅：tth>属性

    HTML 列表

    无序列表

    <ul>    <li>I'm an item</li>    <li>I'm another item</li>    <li>I'm another item</li></ul>

    请参阅：无序列表元素

    有序列表

    <ol>    <li>I'm the first item</li>    <li>I'm the second item</li>    <li>I'm the third item</li></ol>

    请参阅：有序列表元素

    定义列表

    <dl>    <dt>A Term</dt>    <dd>Definition of a term</dd>    <dt>Another Term</dt>    <dd>Definition of another term</dd></dl>

    请参阅：描述列表元素

    HTML 表单

    表单标签

    <form method="POST" action="api/login">  <label for="mail">Email: </label>  <input type="email" id="mail" name="mail">  <br/>  <label for="pw">Password: </label>  <input type="password" id="pw" name="pw">  <br/>  <input type="submit" value="Login">  <br/>  <input type="checkbox" id="ck" name="ck">  <label for="ck">Remember me</label></form>



    HTML<form>元素用于收集信息并将其发送到外部源。

    表单属性

    name脚本形式的名称
    action表单脚本的 URL
    methodHTTP 方法，POST/ GET （默认）
    enctype媒体类型，请参见enctype
    onsubmit在提交表单时运行
    onreset当表单被重置时运行

    标签标签

    <!-- Nested label --><label>Click me <input type="text" id="user" name="name"/></label>
    <!-- 'for' attribute --><label for="user">Click me</label><input id="user" type="text" name="name"/>

    ​for在标签中引用输入的id属性

    输入标签

    <label for="Name">Name:</label><input type="text" name="Name" id="">

    请参阅：HTML 输入标签

    文本区域标签

    <textarea rows="2" cols="30" name="address" id="address"></textarea>

    textarea 是一个多行文本输入控件

    单选按钮

    <input type="radio" name="gender" id="m"><label for="m">Male</label><input type="radio" name="gender" id="f"><label for="f">Female</label>

    单选按钮用于让用户选择一个

    复选框

    <input type="checkbox" name="sports" id="soccer"><label for="soccer">Soccer</label><input type="checkbox" name="sports" id="baseball"><label for="baseball">Baseball</label>

    复选框允许用户选择一个或多个

    选择标签

    <label for="city">City:</label><select name="city" id="city">    <option value="1">Sydney</option>    <option value="2">Melbourne</option>    <option value="3">Cromwell</option></select>

    选择框是选项的下拉列表

    字段集标签

    <fieldset>    <legend>Choose your favorite monster</legend>    <input type="radio" id="kraken" name="monster">    <label for="kraken">Kraken</label><br/>    <input type="radio" id="sasquatch" name="monster">    <label for="sasquatch">Sasquatch</label><br/></fieldset>
    Choose your favorite monster


    数据列表标签

    <label for="b">Choose a browser: </label><input list="list" id="b" name="browser"/><datalist id="list">  <option value="Chrome">  <option value="Firefox">  <option value="Internet Explorer">  <option value="Opera">  <option value="Safari">  <option value="Microsoft Edge"></datalist>

    提交和重置按钮

    <form action="register.php" method="post">  <label for="foo">Name:</label>  <input type="text" name="name" id="foo">  <input type="submit" value="Submit">  <input type="reset" value="Reset"></form>

    Submit到服务器的数据；Reset默认值

    HTML 输入标签

    输入属性

    输入标签是一个空元素，标识要从用户那里获取的特定类型的字段信息。 

    <input type="text" name="?" value="?" minlength="6"	 required />

    type="…"

    输入的数据类型

    value="…"

    默认值

    name="…"

    用于在 HTTP 请求中描述此数据

    id="…"

    其他 HTML 元素的唯一标识符

    readonly

    阻止用户修改

    disabled

    停止任何交互

    checked

    单选或复选框选择与否

    required

    强制性

    placeholder="…"

    添加临时

    autocomplete="off"

    禁用自动完成

    autocapitalize="none"

    禁用自动大写

    inputmode="…"

    显示特定的键盘。见输入模式

    list="…"

    关联数据列表的 id

    maxlength="…"

    最大字符数

    minlength="…"

    最少字符数

    min="…"

    范围和数字上的最小数值

    max="…"

    范围和数字上的最大数值

    step="…"

    数字如何在范围和数字中递增

    pattern="…"

    指定正则表达式。查看模式

    multiple

    多个条目

    autofocus

    专注

    spellcheck

    执行拼写检查

    输入类型

    type="date"
    type="time"
    type="month"
    type="datetime-local"
    type="week"
    type="checkbox"
    type="radio"
    type="color"
    type="file"
    type="hidden"
    type="number"
    type="range"
    type="text"
    type="search"
    type="password"
    type="email"
    type="tel"
    type="url"
    type="image"
    type="reset"
    type="button"Button
    type="submit"

    输入 CSS 选择器

    :focus当它的键盘聚焦时

    另请参阅：CSS 备忘单的选择器

    HTML 元标签

    元标签

    元标记描述 HTML 文档中的元数据。它解释了有关 HTML 的附加材料。 

    <meta charset='utf-8'>
    <!-- title --><title>···</title><meta property='og:title'  content='···'><meta name='twitter:title' content='···'>
    <!-- url --><link rel='canonical'       href='https://···'><meta property='og:url'  content='https://···'><meta name='twitter:url' content='https://···'>
    <!-- description --><meta name='description'         content='···'><meta property='og:description'  content='···'><meta name='twitter:description' content='···'>
    <!-- image --><meta property="og:image"  content="https://···"><meta name="twitter:image" content="https://···">
    <!-- ua --><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <!-- viewport --><meta name='viewport' content='width=device-width'><meta name='viewport' content='width=1024'>

    OpenGraph

    <meta property="og:type" content="website"><meta property="og:locale" content="en_CA"><meta property="og:title" content="Title of this page, same as title tag"><meta property="og:url" content="http://fullurl.com/to-this/page/"><meta property="og:image" content="http://fullurl.com/to-this/image.jpg"><meta property="og:site_name" content="Name of your website"><meta property="og:description" content="Description of this page, same as meta description">

    被 Facebook、Instagram、Pinterest、LinkedIn 等使用。

    Twutter Cards 推特卡片

    <meta name="twitter:card" content="summary"><meta name="twitter:site" content="@yourtwitterhandle"><meta name="twitter:title" content="Title of this page, same as title tag"><meta name="twitter:url" content="http://fullurl.com/to-this/page/"><meta name="twitter:description" content="Description of this page, same as meta description"><meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">

    请参阅：推特卡片文档

    Geotagging 地理标记

    <meta name="ICBM" content="45.416667,-75.7"><meta name="geo.position" content="45.416667;-75.7"><meta name="geo.region" content="ca-on"><meta name="geo.placename" content="Ottawa">

    请参阅：地理标记

    另见


      HTML 教程导读- （HTML5标准）

      HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言，您可以使用 HTML 来建立自己的 WEB 站点。

      通过学习本教程，您可以使用 HTML 来创建站点。

      HTML 是非常容易学习的！相信您可以很快学会它！ 

      HTML 实例

      在本教程中的每个章节中都会提供一定量的实例，使用本站的编辑器，在线运行并修改这些实例，您可以深入掌握 HTML ！

      实例

      <!DOCTYPE html>
      <html>
      <body>
      <h1>我的第一个标题</h1>
      <p>我的第一个段落。</p>
      </body>
      </html>

      尝试一下»

      点击“尝试一下”按钮查看在线实例

      HTML 实战闯关

      我们为学习者准备逐步的 HTML 编程实战练习，供大家通过亲自编程实验来熟练编程操作。

      开始HTML编程闯关

      HTML 实例

      在HTML手册中包含了数千个在线实例，您可以在线编辑并查看运行结果。

      查看HTML实例！

      HTML 参考手册

      在 W3Cschool 教程中，我们提供了完整的 HTML 参考手册，其中包括标签，属性，颜色，实体等等。

      HTML标签参考手册


      HTML 编辑器

      HTML 编辑器是用于编写 HTML 的工具，使用 HTML 编辑器时以编辑主题，索引，自定义窗口，选择添加搜索页。

      使用 Notepad 或 TextEdit 来编写 HTML

      下列是三种专门用于编辑 HTML 的 HTML 编辑器：

      • Adobe Dreamweaver

      • Microsoft Expression Web

      • CoffeeCup HTML 编辑器

      不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad（PC）或 TextEdit（Mac）。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。

      我们可以使用 Notepad 工具来创建 HTML 文件，具体的步骤参考如下：

      步骤1：启动记事本

      打开 Notepad 的步骤（ Windows 系统中）：

      1. 打开“开始”菜单
      2. 选择“所有程序”
      3. 选择“附件”
      4. 选择“记事本”

      步骤2：使用记事本编辑 HTML

      在记事本中输入 HTML 代码：

      实例代码

      <html>
      <head>
      <meta charset="utf-8">
      <title>编程狮(51coolma.cn)</title>
      </head>
      <body>
      <h1>我的第一个标题</h1>
      <p>我的第一个段落。</p>
      </body>
      </html>

      尝试一下 »

      步骤3：保存你的 HTML

      在 Notepad 文件菜单中选择另存为。

      您可以以.htm或者.html扩展名保存您的 HTML 文件，两者没有区别，根据您的使用习惯即可。

      将该文件保存在您常用的文件夹中，比如 51coolma

      1459508307749495

      步骤4：在浏览器中运行这个 HTML 文件

      启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。

      运行显示结果类似如下：

      blob.png


      常用HTML编辑器下载

      1、UltraEdit（编辑工具）

      　UltraEdit 文本编辑器能够满足你一切编辑需要的编辑器。

      　UltraEdit 文本编辑器是一套功能强大的文本编辑器。

      　UltraEdit 文本编辑器内建英文单字检查，C ++ 及 VB 指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。

      　UltraEdit 软件附有 HTML 标签颜色显示，搜寻替换以及无限制的还原功能，一般大家喜欢用其来修改 EXE 或 DLL 文件。





      2、Notepad++ (代码编辑器）

      Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率，降低电脑系统能源消耗，但轻巧且执行效率高，使得 Notepad++ 可完美地取代微软视窗的记事本。



      3、Adobe Dreamweaver CC

      Dreamweaver CC 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建 Web 页面。其成熟的代码编辑工具更适用于 Web 开发高级人员的创作！


        


      点击下载 »



      4、EditPlus (文本编辑器)

      EditPlus（文字编辑器）一套功能强大，可取代记事本的文字编辑器，拥有无限制的 Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴簿的功能，能够同步于剪贴簿自动将文字贴进 EditPlus 的编辑窗口中，让你省去做贴上的步骤。另外它也是一个好用的 HTML 编辑器，除了可以颜色标记 HTML Tag （同时支持 C/C++、Perl、Java）外，还内建完整的 HTML 和 CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装 IE 3.0 以上版本，它还会结合 IE 浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装 IE，也可指定浏览器路径）。 

       

      点击下载»


      HTML 调试

      在编写 HTML 代码的时候通常会有以下两种主要类型的错误：

      • 语法错误：由于拼写错误导致程序无法运行；通常熟悉语法并理解错误信息后很容易修复。
      • 逻辑错误：不存在语法错误，但代码无法按预期运行；通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

      HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。

      注释：HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。

      实例

      我们通过一段含有错误的 HTML 代码来讨论一下：

      实例标题

      <h1>HTML 调试示例</h1>
      <p>什么使得 HTML 出错？
      <ul>
      <li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。
      <li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？
      </em>
      <li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.51coolma.cn/>W3Cschool 主页链接</a>
      </ul>

      尝试一下 »

      以下是上述代码出现的问题：

      • 段落（Paragraph） 和列表项（list item）元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来，因此上图中并没有太严重的渲染错误。
      • 第一个<strong>元素没有结束标签。这就严重了，因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。
      • 第二个<li>元素中存在嵌套问题：对于下面这个代码，在浏览器很难做出正确解析，理由同上。
        <strong> 重点（strong）<em> 重点强调（ strongly emphasised）？ </strong> 这又是什么鬼？ </em>
      • href属性缺少了一个双引号。从而导致了一个最严重的问题：整个链接完全没有渲染出来。

      　但是浏览器会尝试修补代码错误：

      • <p>和<li>元素加上了关闭标签。
      • 第一个<strong>没有明确的关闭标签，因此浏览器为之后所有独立块都补全了<strong></strong>。
      • 浏览器（以下代码节选自Chrome修补后的页面代码）是这样修补嵌套错误的：

      实例标题

      <h1>HTML 调试示例</h1>

      <p>什么使得 HTML 出错？</p>

      <ul>

          <li>未闭合的元素：如果元素

              <strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。</strong>

          </li>

          <li>

              <strong>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。

                  <strong>重点（strong）

                      <em>重点强调（strongly emphasised）？</em>

                  </strong>

                  <em>这又是什么鬼？

                  </em>

              </strong>

          </li>

          <li>

              <strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>

          </li>

      </ul>


      尝试一下 »
      • 删除整个缺少双引号的链接。最后一个列表项就成了：

      实例代码

      <li>
      <strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>
      </li>

      尝试一下 »

      阅读以上示例后，你会发现保持良好 HTML 格式的重要性。


      HTML 基础- 4个实例

      本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ 

      HTML 标题

      HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.

      h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

      这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

       <h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

      实例

       <h1>这是标题1</h1>

       <h2>这是标题2</h2>

       <h3>这是标题3</h3>

       <h4>这是标题4</h4>

       <h5>这是标题5</h5>

       <h6>这是标题6</h6>


      尝试一下 »

      你也可以通过实战实验来尝试挑战一个 h2 标题的设置：

      HTML标题实战实验

      HTML 段落

      HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战演练。

      实例

      <p>这是一个段落。</p>
      <p>这是另外一个段落。</p>

      尝试一下 »

          

      下面这个实例讲述了标题和段落的结构层次：

      实例

      <h1>三国演义</h1>

      <p>罗贯中</p>

      <h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

      <p>话说天下大势，分久必合，合久必分。</p>

      <h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

      <p>且说董卓字仲颖</p>

      <h3>却说张飞</h3>

      <p>却说张飞饮了数杯闷酒</p>


      尝试一下 »

      上述实例所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要确保层次结构是合理的。在创建此类结构时，您只需要记住以下几点：

      • 首先，您应该只对每个页面使用一次<h1>，这是主标题，所有其他标题位于层次结构中的下方。
      • 其次，请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题，这是没有意义的，会导致奇怪的结果。
      • 最后，在可用的六个标题级别中，您应该保证每个页面中标题级别的使用不超过三个，除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。 

      HTML 中的空格

      在代码中可能包含了很多的空格——这是没有必要的

      下面的两个代码片段是等价的：

      实例

      <p>狗 狗 很 呆 萌。</p>

      <p>狗 狗        很

             呆 萌。</p>


      尝试一下 »
      无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。

      为什么我们会使用那么多的空格呢? 

      答案就是为了可读性——如果你的代码被很好地进行格式化，那么就很容易理解你的代码，反之就会很混乱。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。

      你使用什么风格来格式化你的代码取决于你（比如所对于每层缩进使用多少个空格），但是记住你应该坚持使用某种风格。

      HTML 链接

      HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

      实例

      <a href="http://www.51coolma.cn">这是一个链接</a>

      尝试一下 »

       提示：在href属性中指定链接的地址。

       (您将在本教程稍后的章节中学习更多有关属性的知识)

       HTML链接实战测验

      HTML 图像

      HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

      举例如下：<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >

      请注意：img元素是自关闭元素，不需要结束标记。

      实例

      <img src="logonew2.png" width="206" height="36">

      尝试一下 »

      注意： 图像的名称和尺寸是以属性的形式提供的。

      HTML 图像实战测验 

      HTML 强调

      在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

      在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：

      实例

      <p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>


      尝试一下 »

      在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：

      实例

      <p>这种液体是<strong>高毒性的</strong>.</p>

      <p>我就指望你<strong>不会</strong> 迟到!</p>


      尝试一下 »

      注意：为了不同的字体风格，我们应该使用元素和一些 CSS 的样式.


      HTML 元素

      HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

      HTML 元素

      开始标签 *元素内容结束标签 *
      <p>这是一个段落</p>
      <a href="default.htm">这是一个链接</a>
      <br>这是一个换行标签 

      *开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

      HTML 元素语法

      • HTML 元素以开始标签起始
      • HTML 元素以结束标签终止
      • 元素的内容是开始标签与结束标签之间的内容
      • 某些 HTML 元素具有空内容（empty content）
      • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
      • 大多数 HTML 元素可拥有属性

      注释: 您将在本教程的 HTML 属性一章中学习更多有关属性的详细内容。

      嵌套的 HTML 元素

      HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。 

      HTML 文档实例

      实例

      <!DOCTYPE html>

      <html>

      <body>

      <p>这是第一个段落。</p>

      </body>

      </html>


      尝试一下 »

      上述的实例包含了三个 HTML 元素。

      HTML 实例解析

      <p> 元素:

      实例

      <p>这是第一个段落。</p>


      尝试一下 »

      这个 <p> 元素定义了 HTML 文档中的一个段落。
      这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。
      元素内容是: 这是第一个段落。

      打开实战测试开始学习 <p> 标签。

      <body> 元素:

      实例

      <body>

      <p>这是第一个段落。</p>

      </body>


      尝试一下 »

      <body> 元素定义了 HTML 文档的主体。
      这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
      元素内容是另一个 HTML 元素（p 元素）。

      <html> 元素：

      实例

      <html>

      <body>

      <p>这是第一个段落。</p>

      </body>

      </html>


      尝试一下 »

      <html> 元素定义了整个 HTML 文档。
      这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
      元素内容是另一个 HTML 元素（body 元素）。

      不要忘记结束标签

      如果您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

      实例

      <p>这是一个段落

      <p>这是一个段落


      尝试一下 »

      上述实例在浏览器中也能正常显示，因为关闭标签是可选的。

      但您不能对此产生依赖性，因为忘记使用结束标签会产生不可预料的结果或错误。

      HTML 空元素

      HTML 空元素即为没有内容的 HTML 元素。

      HTML 空元素应该在开始标签中关闭。

      HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。

      HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受这种方式。

      注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。

      HTML 提示：使用小写标签

      由于 HTML 标签对英文字母的大小写不敏感，所以 <P> 和 <p> 表达的意思相同，不过大部分网站喜欢使用大写的 HTML 标签。

      W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。


      HTML 属性

      属性是为 HTML 元素提供的附加信息。

      HTML 属性

      • HTML 元素可以设置属性
      • 属性可以在元素中添加附加信息
      • 属性一般描述于开始标签
      • 属性总是以名称/值对的形式出现，比如：name="value"。

      属性实例

      HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

      实例

      <a href="https://www.51coolma.cn">这是一个链接使用了 href 属性</a>

      尝试一下 »

      HTML 属性常用引用属性值

      属性值应该始终被包括在引号内。

      双引号是最常用的，不过使用单引号也没有问题。

      Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

      HTML 提示：使用小写属性

      属性和属性值对大小写不敏感。

      不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

      而新版本的 (X)HTML 要求使用小写属性。

      HTML 属性参考手册

      查看完整的 HTML 属性列表: HTML 标签参考手册。

      下面列出了适用于大多数 HTML 元素的属性：

      属性描述
      class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
      id定义元素的唯一id
      style规定元素的行内样式（inline style）
      title描述了元素的额外信息 (作为工具条使用)

      更多 HTML 标准属性说明： HTML 标准属性参考手册.


      HTML 标题

      在 HTML 文档中，标题很重要。

      HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。

      HTML 标题

      标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

      <h1>定义最大的标题。<h6> 定义最小的标题。

      实例

      <h1>这是标题1</h1>

      <h2>这是标题2</h2>

      <h3>这是标题3</h3>

      <h4>这是标题4</h4>

      <h5>这是标题5</h5>

      <h6>这是标题6</h6>


      尝试一下 »

      注释: 浏览器会自动地在标题的前后添加空行。

      注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

      标题很重要

      请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

      搜索引擎使用标题为您的网页的结构和内容编制索引。

      因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

      应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

      您可以在实战练习中学习编辑<h2>标签！

      HTML 水平线

      <hr> 标签在 HTML 页面中创建水平线。

      hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

      实例

      <p>hr 标签定义水平线：</p>

      <hr />

      <p>这是段落。</p>

      <hr />

      <p>这是段落。</p>

      <hr />

      <p>这是段落。</p>


      尝试一下 »


      HTML 注释

      可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

      HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

      注释写法如下:

      实例

      <!-- 这是一个注释 -->

      尝试一下 »

      注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

      您可以在实战练习中学习 HTML 注释语句！

      HTML 提示 - 如何查看源代码

      你是否看过一些网页然后惊叹它是如何实现的的。

      如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

      本站实例

      标题
      如何在 HTML 文档中显示标题。

      隐藏注释
      如何在 HTML 源代码中插入注释。

      水平线
      如何插入水平线。

      HTML 标签参考手册

      W3CSchool 的标签参考手册提供了有关这些标题及其属性的更多信息。

      您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。

      标签描述
      <html>定义 HTML 文档
      <body>定义文档的主体
      <h1> - <h6>定义 HTML 标题
      <hr>定义水平线
      <!--...-->定义注释


      HTML 开头

      HTML 可以将文档分割为多个层次。

      HTML 初步

      开头是通过 <p> 标签定义的。

      实例

      <p>这是一个段落</p> 

      <p>这是另一个段落</p>


      尝试一下»

      注意：浏览器会自动地在先前的前后添加空行。（</p>是块级元素）

      不要忘记结束标签

      即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

      实例

      <p>这是一个段落 
      <p>这是另一个段落

      尝试一下»

      上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

      注释：在未来的 HTML 版本中，重复省略结束标签。

      HTML 折行

      如果您希望在不产生一个新起点的情况下进行换行（新行），请使用 <br /> 标签。

      在 HTML 语言中，<br /> 标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行拆分：

      实例

      <p>这个<br>段落<br>演示了分行的效果</p>


      尝试一下»


      <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

      HTML 输出-使用提醒

      我们无法确定 HTML 被显示的效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

      对于 HTML，您无法通过在 HTML 代码中添加额外的空间或换行来改变输出的效果。

      当显示页面时，浏览器会可移动源代码中多余的空间和空行。所有连续的空间或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行） ）也被显示为一个空格。

      尝试一下

      （这个示例演示了一些 HTML 格式化方面的问题）

      本站实例

      HTML初步

      如何在浏览器中显示 HTML 进行。

      换行

      在 HTML 文档中使用换行。

      在 HTML 代码中的布局一首唐诗

      浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。

      更多实例

      更多起点

      随之而来的行为。

      HTML 标签参考手册

      W3CSchool 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。

      标签描述
      <p>

      		定义一个段落
      <br>插入单个折行（换行）


      HTML 文本格式化

      HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

      实例

      <b>加粗文本</b><br><br>

      <i>斜体文本</i><br><br>

      <code>电脑自动输出</code><br><br>

      这是 <sub> 下标</sub> 和 <sup> 上标</sup>


      尝试一下 »

      HTML 格式化标签

      HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体 or 斜体

      这些 HTML 标签被称为格式化标签（请查看底部完整标签参考手册）。

      lamp通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。
      然而，这些标签的含义是不同的：
      <b> 与<i> 定义粗体或斜体文本。
      <strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。
      现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

      本站实例

      文本格式化
      此例演示如何在一个 HTML 文件中对文本进行格式化

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

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

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

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

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

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

      删除字效果和插入字效果
      此例演示如何标记删除文本和插入文本。

      HTML 文本格式化标签

      标签描述
      <b>定义粗体文本
      <em>定义着重文字
      <i>定义斜体字
      <small>定义小号字
      <strong>定义加重语气
      <sub>定义下标字
      <sup>定义上标字
      <ins>定义插入字
      <del>定义删除字

      HTML "计算机输出" 标签

      标签描述
      <code>定义计算机代码
      <kbd>定义键盘码
      <samp>定义计算机代码样本
      <var>定义变量
      <pre>定义预格式文本

      HTML 引文, 引用, 及标签定义

      标签描述
      <abbr>定义缩写
      <address>定义地址
      <bdo>定义文字方向
      <blockquote>定义长的引用
      <q>定义短的引用语
      <cite>定义引用、引证
      <dfn>定义一个定义项目。


      HTML 链接

      HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

      尝试一下 - 实例

      HTML 链接
      如何在 HTML 文档中创建链接。

      (可以在本页底端找到更多实例)

      HTML 超链接（链接）

      HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。

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

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

      在标签 <a> 中使用了 href 属性来描述链接的地址。

      默认情况下，链接将以以下形式出现在浏览器中：

      • 一个未访问过的链接显示为蓝色字体并带有下划线
      • 访问过的链接显示为紫色并带上下划线
      • 点击链接时，链接显示为红色并带上下划线
      注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示

        HTML 空链接

        HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

        临时加的空链接，主要为了能更好的看到最终的效果。

        基本语法：

        <a href="#">链接文字</a>

        其中“ # ”表示空链接。

        实例

        <a href="#">W3CSchool</a>

        HTML 链接语法

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

        <a href="url">Link text</a>

        href 属性描述了链接的目标。.

        实例

        <a href="//www.51coolma.cn/">Visit W3Cschool</a>

        上面这行代码显示为：: Visit W3Cschool

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

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

        HTML 链接 - target 属性

        使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

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

        实例

        <a href="https://www.51coolma.cn/" target="">访问W3Cschool教程!</a>

        <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>


        尝试一下 »

        提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。


        HTML 链接 - id 属性

        id 属性可用于在一个 HTML 文档中创建书签标记。

        提示: 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。

        实例

        在 HTML 文档中插入 ID：

        <a id="tips">Useful Tips Section</a>

        在 HTML 文档中创建一个链接到"有用的提示部分 (id="tips"）"：

        <a href="#tips">Visit the Useful Tips Section</a>

        或者，从另一个页面创建一个链接到"有用的提示 (id="tips"）部分"：

        <a href="//www.51coolma.cn/html_links.html#tips"> Visit the Useful Tips Section</a>


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

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

        更多实例

        图片链接
        如何使用图片链接。

        在当前页面链接到指定位置 如何使用书签

        跳出框架
        本例演示如何跳出框架，假如你的页面被固定在框架之内。

        创建电子邮件链接
        本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

        创建电子邮件链接 2
        本例演示更加复杂的邮件链接。

        HTML 链接标签

        标签描述
        <a>定义一个超级链接


        本章为大家带来的是HTML引用的使用方法教程，内含引用实例及常用引用方式介绍。

        这是摘自 WWF 网站的引文：

        五十年来，WWF 一直致力于保护自然界的未来。 世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

        HTML <q> 用于短的引用

        HTML <q> 元素定义短的引用。

        浏览器通常会为 <q> 元素包围引号。

        实例

        <p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

        用于长引用的 HTML <blockquote>

        HTML <blockquote> 元素定义被引用的节。

        浏览器通常会对 <blockquote> 元素进行缩进处理。

        实例

        <p>以下内容引用自 WWF 的网站：</p><blockquote cite="http://www.worldwildlife.org/who/index.html">五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。</blockquote>

        用于缩略词的 HTML <abbr>

        HTML <abbr> 元素定义缩写或首字母缩略语。

        对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

        实例

        <p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

        用于定义的 HTML <dfn>

        HTML <dfn> 元素定义项目或缩写的定义。

        <dfn> 的用法，按照 HTML5 标准中的描述，有点复杂：

        1. 如果设置了 <dfn> 元素的 title 属性，则定义项目：

        实例

        <p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

        2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：

        实例

        <p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

        3. 否则，<dfn> 文本内容即是项目，并且父元素包含定义。

        实例

        <p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

        注释：如果您希望简而化之，请使用第一条，或使用 <abbr> 代替。

        用于联系信息的 HTML <address>

        HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

        此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

        实例

        <address>Written by Donald Duck.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>

        用于著作标题的 HTML <cite>

        HTML <cite> 元素定义著作的标题。

        浏览器通常会以斜体显示 <cite> 元素。

        实例

        <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

        用于双向重写的 HTML <bdo>

        HTML <bdo> 元素定义双流向覆盖（bi-directional override）。

        <bdo> 元素用于覆盖当前文本方向：

        实例

        <bdo dir="rtl">This text will be written from right to left</bdo>

        HTML 引文、引用和定义元素

        标签描述
        <abbr>定义缩写或首字母缩略语。
        <address>定义文档作者或拥有者的联系信息。
        <bdo>定义文本方向。
        <blockquote>定义从其他来源引用的节。
        <dfn>定义项目或缩略词的定义。
        <q>定义短的行内引用。
        <cite>定义著作的标题。


        本章为大家带来的是HTML注释标签 ​<!--​ 与 ​--> ​用于在 HTML 插入注释。

        HTML 注释标签

        您能够通过如下语法向 HTML 源代码添加注释：

        实例

        <!-- 在此处写注释 -->

        注释：在开始标签中有一个惊叹号，但是结束标签中没有。

        浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

        您可以利用注释在 HTML 中放置通知和提醒信息：

        实例

        <!-- 这是一段注释 --><p>这是一个段落。</p><!-- 记得在此处添加信息 -->

        注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误：

        实例

        <!-- 此刻不显示图片：<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">-->

        条件注释

        您也许会在 HTML 中偶尔发现条件注释：

        <!--[if IE 8]>    .... some HTML here ....<![endif]-->

        条件注释定义只有 Internet Explorer 执行的 HTML 标签。

        软件程序标签

        各种 HTML 软件程序也能够生成 HTML 注释。

        例如 <!--webbot bot--> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

        作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

        HTML ​id​ 属性用于 为HTML 元素指定唯一的 id。

        一个 HTML文档中不能存在多个有相同 id 的元素。

        使用 id 属性

        ​id​ 属性指定 HTML 元素的唯一 ID。 ​id​ 属性的值在 HTML 文档中必须是唯一的。

        ​id​ 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

        id 的语法是：写一个井号 (#)，后跟一个 ​id​ 名称。然后，在花括号 {} 中定义 CSS 属性。

        下面的例子中我们有一个 ​<h1>​ 元素，它指向 ​id​ 名称 "myHeader"。这个 ​<h1>​ 元素将根据 head 部分中的 ​#myHeader​ 样式定义进行样式设置：

        实例

        <!DOCTYPE html><html><head><style>#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}</style></head><body><h1 id="myHeader">My Header</h1></body></html>

        注释：id 名称对大小写敏感！

        注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

        Class 与 ID 的差异

        同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

        实例

        <style>/* 设置 id 为 "myHeader" 的元素的样式 */#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}/* 设置类名为 "city" 的所有元素的样式 */.city {  background-color: tomato;  color: white;  padding: 10px;}</style><!-- 拥有唯一 id 的元素 --><h1 id="myHeader">My Cities</h1><!-- 拥有相同类名的多个元素 --><h2 class="city">London</h2><p>London is the capital of England.</p><h2 class="city">Paris</h2><p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2><p>Tokyo is the capital of Japan.</p>

        提示：请在我们的 CSS教程 中学习更多 CSS 知识。

        通过 ID 和链接实现 HTML 书签

        HTML 书签用于让读者跳转至网页的特定部分。

        如果页面很长，那么书签可能很有用。

        要使用书签，您必须首先创建它，然后为它添加链接。

        然后，当单击链接时，页面将滚动到带有书签的位置。

        实例

        首先，用 ​id​ 属性创建书签：

        <h2 id="C4">第四章</h2>

        然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

        实例

        <a href="#C4">跳转到第四章</a>

        或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

        <a href="html_demo.html#C4">Jump to Chapter 4</a>

        在 JavaScript 中使用 id 属性

        JavaScript 也可以使用 id 属性为特定元素执行某些任务。

        JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素：

        实例

        使用 id 属性通过 JavaScript 来处理文本：

        <script>function displayResult() {  document.getElementById("myHeader").innerHTML = "Have a nice day!";}</script>

        提示：请在我们的 JavaScript教程 中学习 JavaScript。

        本章总结

        • ​id​ 属性用于为 HTML 元素指定唯一的 id
        • ​id​ 属性的值在 HTML 文档中必须是唯一的
        • CSS 和 JavaScript 可使用 ​id​ 属性来选取元素或设置特定元素的样式
        • ​id​ 属性的值区分大小写
        • ​id​ 属性还可用于创建 HTML 书签
        • JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素

        HTML <head>

        HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

        查看在线实例

        <title> - 定义了HTML文档的标题
        使用 <title> 标签定义HTML文档的标题

        <base> - 定义了所有链接的URL
        使用 <base> 定义页面中所有链接默认的链接目标地址。

        <meta> - 提供了HTML文档的meta标记
        使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

        HTML <head> 元素

        <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

        可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

        <head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

        HTML <title> 元素

        <title> 标签定义了不同文档的标题。

        title 在 HTML/XHTML 文档中是必须的。

        title 元素:

        • 定义了浏览器工具栏的标题
        • 当网页添加到收藏夹时，显示在收藏夹中的标题
        • 显示在搜索引擎结果页面的标题

        一个简单的 HTML 文档:

        实例

        <!DOCTYPE html>      

        <html>        

        <head>        

        <title>编程狮(51coolma.cn)</title>        

        </head>                

        <body>       

        51coolma随时随地学编程！         

        </body>                

        </html>


        尝试一下 »

        HTML <base> 元素

        <base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接 规定默认地址或默认目标（target）:

        <head>       

        <base href="//www.51coolma.cn/images/" target="_blank">      

        </head>

        提示：在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

        HTML <link> 元素

        <link> 标签定义了文档与外部资源之间的关系。

        <link> 标签通常用于链接到样式表:

        <head>       

        <link rel="stylesheet" type="text/css" href="mystyle.css">        

        </head>

        HTML <style> 元素

        <style> 标签定义了HTML文档的样式文件引用地址.

        在<style> 元素中你需要指定样式文件来渲染HTML文档:

        实例

        <head>        

        <style type="text/css">        

        body {background-color:yellow}        

        p {color:blue}        

        </style>        

        </head>


        尝试一下 »

        HTML <meta> 元素

        元数据（metadata）是关于数据的信息。

        <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

        典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

        <meta> 标签始终位于 head 元素中。

        元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

        针对搜索引擎的关键词

        一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

        下面的 meta 元素定义页面的描述：

        <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

        下面的 meta 元素定义页面的关键词：

        <meta name="keywords" content="HTML, CSS, XML" />

        name 和 content 属性的作用是描述页面的内容。

        HTML <script> 元素

        <script> 标签用于加载脚本文件，如： JavaScript。

        <script> 元素在以下章节会详细描述。

        HTML head 元素

        标签描述
        <head>定义了文档的信息
        <title>定义了文档的标题
        <base>定义了页面链接标签的默认链接地址
        <link>定义了一个文档和外部资源之间的关系
        <meta>定义了HTML文档中的元数据
        <script>定义了客户端的脚本文件
        <style>定义了HTML文档的样式文件


        HTML 样式- CSS

        CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用 CSS 实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在 <head> 部分或存储在 外部 CSS 文件中。作为网页标准化设计的趋势，CSS 取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

        网页现在的新标准是 W3C 。目前的模式是 Html + Css + Javascript ，如何理解呢，就是 Html 是网页的结构，CSS 是网页的样式，Javascript是行为。结构就是盖房子先要把结构建出来，然后用 CSS 来装饰。其实你在用 Dreamweaver 做网页时就已经用到了 CSS，比如你用 DW 的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个 .style1 的红色代码，在 <style></style> 之间不知道你注意过没有，这就是 CSS。

        CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式.

        Look! Styles and colors

        Manipulate Text
        Colors,  Boxes
        and more...


        尝试一下 - 实例

        HTML 使用样式
        本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

        本例演示如何使用样式属性做一个没有下划线的链接。
        如何使用 style 属性制作一个没有下划线的链接。

        链接到一个外部样式表
        本例演示如何 标签链接到一个外部样式表。

        如何使用 CSS

        CSS 是在 HTML 4 开始使用的,是为了更好的渲染 HTML 元素而引入的.

        CSS 可以通过以下方式添加到 HTML 中:

        • 内联样式- 在 HTML 元素中使用 "style" 属性
        • 内部样式表 -在 HTML 文档头部 <head> 区域使用 <style> 元素 来包含 CSS
        • 外部引用 - 使用外部 CSS 文件

        最好的方式是通过外部引用 CSS 文件.

        在本站的 HTML 教程中我们使用了内联 CSS 样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

        你可以通过本站的 CSS 教程 CSS 教程学习更多的CSS知识,或者学习更容易理解的 CSS 微课.

        内联样式

        当特殊的样式需要应用到个别元素时，就可以使用内联样式，你可以在 <head> 部分通过 <style> 标签定义内部样式表。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色。

        Example

        <head>

        <style type="text/css">

        body {background-color:yellow;}

        p {color:blue;}

        </style>

        </head> 

        学习更多样式，请访问 CSS 教程.

        HTML样式实例 - 背景颜色

        背景色属性（background-color）定义一个元素的背景颜色：

        Example

        <!DOCTYPE html>
        <html>
        <body style="background-color:yellow;">
        <h2 style="background-color:red;">This is a heading</h2>
        <p style="background-color:green;">This is a paragraph.</p>
        </body>
        </html>

        尝试一下 »

        早期背景色属性（background-color）是使用 bgcolor 属性定义。

        尝试一下: 旧版HTML来设置背景方式

        HTML 样式实例 - 字体, 字体颜色 ，字体大小

        我们可以使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义字体的样式:

        实例

        <!DOCTYPE html>
        <html>
        <body>
        <h1 style="font-family:verdana;">A heading</h1>
        <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
        </body>
        </html>

        尝试一下 »

        现在通常使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义文本样式，而不是使用 <font> 标签。

        HTML 样式实例 - 文本对齐方式

        使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

        实例

        <!DOCTYPE html>
        <html>
        <body>
        <h1 style="text-align:center;">Center-aligned heading</h1>
        <p>This is a paragraph.</p>
        </body>
        </html>

        尝试一下 »

        文本对齐属性 text-align 取代了旧标签 <center> 。

        尝试一下

        内部样式表

        当单个文件需要特别样式时，就可以使用内部样式表。你可以在 <head> 部分通过 <style> 标签定义内部样式表:

        实例

        <head>

        <style type="text/css">

        body {background-color:yellow;}

        p {color:blue;}

        </style>

        </head> 


        尝试一下 »

        外部样式表

        当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

        <head>

        <link rel="stylesheet" type="text/css" href="mystyle.css">

        </head> 

        HTML 样式标签

        标签描述
        <style>定义文本样式
        <link>定义资源引用地址

        已弃用的标签和属性

        在 HTML 4, 原来支持定义 HTML 元素样式的标签和属性已被弃用。这些标签将不支持新版本的 HTML 标签。

        不建议使用的标签有: <font>, <center>, <strike>

        不建议使用的属性: color 和 bgcolor.

        学习 HTML + CSS 的书籍推荐

        1、《 CSS那些事儿 》
        CSS那些事儿
        本书专注于 CSS 技巧实例的讲解，由浅入深地分析了 CSS 样式在布局时所需要理解的原理。绕开随处可见的基础知识、网络中能随意搜索到的 hack 技巧，侧重原理分析，拓展读者使用 CSS 布局的思维方式，通过本书的阅读读者将会了解到使用 CSS 布局的强大功能。

        全书以传达 CSS 布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用 CSS 布局。尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。

        无论是 CSS 布局的初学者还是具有一定水准的读者，阅读本书之后将会发现，原来 CSS 样式居然是这么好玩的东西。本书适合网站开发人员、网页设计人员参考学习，同时也适合作为相关培训机构的教材。


        2、《 Head First HTML and CSS 2nd Edition 》
             《 Head First HTML5 》
              这两本应该都有翻译，但是建议看原版


        3、《 Eric Meyer 谈 CSS 》（上下册）
        Eric Meyer谈CSS
        《 Eric Meyer 谈 CSS (卷1) 》融汇了世界级专家 Eric Meyer 极富价值的 CSS 实战经验，运用 13 个典型实际项目，采取手把手的方式来指导读者如何使用 CSS 来解决实际问题。项目包括转换现有网页、设置新闻网页的样式、设置日历样式、设置菜单样式、创建打印样式多列布局等。


        4、《 CSS 禅意花园 》
        CSS禅意花园
        这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS 禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS 禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括 6 章，占据了书中的大部分篇幅。

        每章剖析“CSS 禅意花园”收录的 6 件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索 36 件设计作品面临的挑战和解决的问题，读者将洞悉主要的 Web 设计原则以及它们运用的CSS 布局技巧，理解 CSS 设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
        5、《精通 HTML 》
        精通HTML
        本书深入地探讨了 (X)HTML 及相关技术包括 CSS、微格式、语义网等，重点阐述了如何在恰当的时候使用恰当的标签，全书始终贯彻现代的 Web 设计理念，从而使读者可以学习如何充分利用各种标记提供的多样性，创建语义丰富和结构合理的网站。

        本书适合具备初步 HTML 和 CSS 知识的 Web 设计开发人员阅读。
        6、《精通 CSS: 高级 Web 标准解决方案》
        精通CSS
        本书将最有用的 CSS 技术汇总在一起，在介绍基本的 CSS 概念和最佳实践之后，讨论了核心的 CSS 技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯 CSS 布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug 和 bug 修复，最后由 Simon Collison 和 Cameron Moll 两位杰出的 CSS 设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补 CSS 知识欠缺不可或缺的参考书。

        本书适合具有 (X)HTML 和 CSS 基本知识的任何网页设计人员阅读。    


        7、《 深入浅出 html 》
        深入浅出HTML
        本书是一部讲述现代 web 标准的优秀教程，彻底摒弃了过时的内容，始终贯彻三层分离的思想。书中结合实例讲述如何使用 html、css 设计符合现代web标准的网页，并讲解了如何使用 javascript 添加动态行为。书中的主体部分让读者接触 html、xhtml 的各种主题，逐渐熟悉各种元素。最后一章将书中讲述的各种技术付诸应用，带领读者一步步地创建一个实用的网站。


        8、《 CSS 权威指南 》（第3版）
        CSS权威指南（第三版）
        你是否既想获得丰富复杂的网页样式，同时又想节省时间和精力？本书为你展示了如何遵循 CSS 最新规范（ CSS2 和 CSS2.1 ）将层叠样式表的方方面面应用于实践。

        通过本书提供的诸多示例，你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观，以及如何得到 HTML 力不能及的更丰富的表现效果。

        资深 CSS 专家 Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实现做了深入的研究，另外在浏览器支持和设计原则等实际问题上也有独到的见解。你所需要的就是 HTML 4.0 的知识即可以为网站布局和分页创建简明而且易于维护的脚本，同时兼具桌面系统的美观性和可控性。


        9、《 网站重构 》（第 3 版）
        网站重构（第3版）
        《网站重构:应用 Web 标准进行设计(第3版)》内容简介：畅销书作家、设计师、网页标准教父 jeffrey zeldman 再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构：应用 Web 标准进行设计(第 3 版)》的第 3 版了,此次更新基本涵盖了随着环境和技术的变化，Web 标准所面临的挑战以及因此而发生的改善。第 3 版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。

        一如既往,《网站重构:应用 Web 标准进行设计(第 3 版)》提供了更多明确的见解和新的例子,来阐述基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。

        与前两版不同的是,在第3版,除了有很多的“why”来提出问题,也提供了大量的“how”来解决问题。另外,在写作方法上作者力图用诙谐的、有吸引力的写作风格,使复杂的技术更易于理解消化,帮助你轻松创建一个访问快速、低成本维护和开发、更多用户的网站,帮助你用新技术使 css 布局适应多个浏览器,使网站内容更容易被搜索和访问到。


        10、《 html+css+js 网页制作从入门到精通》
        HTML、CSS、JavaScript网页制作从入门到精通
        《 HTMLCSSJavaScript 网页制作从入门到精通》共分为 18 章和 4 个附录，重点介绍使用 HTML 进行网页制作的方方面面，同时讲解了目前流行的 Web 标准与 CSS 网页布局实例，以及基于 JavaScript 语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧 60 多例。


        HTML 符号实体

        在上一章中已经讲解了 HTML 实体。

        普通键盘上不存在众多数学、技术和货币符号。

        如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。

        如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

        实例

        <p>我将显示 &</p><p>我将显示 &#8364;</p><p>我将显示 &#x20AC;</p>

        HTML 支持的一些数学符号

        字符数字实体描述
        ∀&#8704;&forall;FOR ALL
        ∂&#8706;&part;PARTIAL DIFFERENTIAL
        ∃&#8707;&exist;THERE EXISTS
        ∅&#8709;&empty;EMPTY SETS
        ∇&#8711;&nabla;NABLA
        ∈&#8712;&isin;ELEMENT OF
        ∉&#8713;&notin;NOT AN ELEMENT OF
        ∋&#8715;&ni;CONTAINS AS MEMBER
        ∏&#8719;&prod;N-ARY PRODUCT
        ∑&#8721;&sum;N-ARY SUMMATION

        完整的数学参考

        HTML 支持的一些希腊字母

        字符数字实体描述
        Α&#913;&Alpha;GREEK CAPITAL LETTER ALPHA
        Β&#914;&Beta;GREEK CAPITAL LETTER BETA
        Γ&#915;&Gamma;GREEK CAPITAL LETTER GAMMA
        Δ&#916;&Delta;GREEK CAPITAL LETTER DELTA
        Ε&#917;&Epsilon;GREEK CAPITAL LETTER EPSILON
        Ζ&#918;&Zeta;GREEK CAPITAL LETTER ZETA

        完整的希腊参考

        HTML 支持的一些其他实体。

        字符数字实体描述
        ©&#169;&copy;COPYRIGHT SIGN
        ®&#174;&reg;REGISTERED SIGN
        €&#8364;&euro;EURO SIGN
        ™&#8482;&trade;TRADEMARK
        ←&#8592;&larr;LEFTWARDS ARROW
        ↑&#8593;&uarr;UPWARDS ARROW
        →&#8594;&rarr;RIGHTWARDS ARROW
        ↓&#8595;&darr;DOWNWARDS ARROW
        ♠&#9824;&spades;BLACK SPADE SUIT
        ♣&#9827;&clubs;BLACK CLUB SUIT
        ♥&#9829;&hearts;BLACK HEART SUIT
        ♦&#9830;&diams;BLACK DIAMOND SUIT

        HTML 图像

        　使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

        实例

        <h2>挪威山旅行</h2>

        <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock">


        尝试一下 »

        在线实例

        　插入图像
        　本例演示如何在网页中显示图像。

        　从不同的位置插入图片
        　本例演示如何将其他<>文件夹或服务器的图片显示到网页中。

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


        HTML 图像- 图像标签（<img>）和源属性（Src）

        　在 HTML 中，图像由<img>标签定义。

        　<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

        　要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。

        　定义图像的语法是：

        <img src="url" alt="some_text">

        　URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.51coolma.cn 的 images 目录中，那么其 URL 为 //www.51coolma.cn/images/boat.gif。

        　浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。


        HTML 图像- Alt属性

        　alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。

        　替换文本属性的值是用户定义的。

        <img src="boat.gif" alt="Big Boat">

        　在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。


        HTML 图像- 设置图像的高度与宽度

        　height（高度）与width（宽度）属性用于设置图像的高度与宽度。您可以在编程测试中调整一张图像的大小。

        　属性值默认单位为像素:

        <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

        提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。


        设置图像边框

        　在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

        <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">


        设置图像对齐

        　默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

        <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">


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

        注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

        注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

        更多实例

        　排列图片
        　本例演示如何在文字中排列图像。

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

        　设置图像链接
        　本例演示如何将图像作为一个链接使用。

        　创建图像映射
        　本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


        HTML 图像标签

        标签描述
        <img>定义图像
        <map>定义图像地图
        <area>定义图像地图中的可点击区域


        HTML 表格

        HTML 表格实例

        First NameLast NamePoints
        JillSmith50
        EveJackson94
        JohnDoe80
        AdamJohnson67



        在线实例

        　表格
        　这个例子演示如何在 HTML 文档中创建表格。

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


        HTML 表格

        　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

        　HTML 表格的基本结构：

        <table>…</table>：定义表格

        <th>…</th>：定义表格的标题栏（文字加粗）

        <tr>…</tr>：定义表格的行

        <td>…</td>：定义表格的列


        表格实例

        实例

        <table border="1">

        <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

        </tr>

        <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

        </tr>

        </table>


        尝试一下 »

        　在浏览器显示如下：

        row 1, cell 1row 1, cell 2
        row 2, cell 1row 2, cell 2

        HTML 表格和边框属性

        　如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

        　使用边框属性border来显示一个带有边框的表格：

        实例

        <table border="1">

        <tr>

        <td>Row 1, cell 1</td>

        <td>Row 1, cell 2</td>

        </tr>

        </table>


        尝试一下 »


        HTML 表格表头单元格

        　表格的表头单元格使用<th>标签进行定义。

        　表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

        　大多数浏览器会把表头显示为粗体居中的文本：

        实例

        <table border="1">

        <tr>

        <th>Header 1</th>

        <th>Header 2</th>

        </tr>

        <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

        </tr>

        <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

        </tr>

        </table>


        尝试一下 »

        　在浏览器显示如下：

        Header 1Header 2
        row 1, cell 1row 1, cell 2
        row 2, cell 1row 2, cell 2


        表格标题 <caption>

        　在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。

        注：此标签在较新版本的HTML / XHTML中已弃用

        实例

        <table border = "1">

        <caption>这是标题</caption>

        <tr>

        <td>row 1, column 1</td><td>row 1, columnn 2</td>

        </tr>         

        <tr>

        <td>row 2, column 1</td><td>row 2, columnn 2</td>

        </tr>

        </table>


        尝试一下 »


        HTML 表格高度和宽度

        　在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

        实例

        <table border = "1" width = "400" height = "150">

        <tr>

        <td>Row 1, Column 1</td>

        <td>Row 1, Column 2</td>

        </tr>

        <tr>

        <td>Row 2, Column 1</td>

        <td>Row 2, Column 2</td>

        </tr>

        </table>


        尝试一下 »


        HTML 表格背景

        　您可以使用以下方法之一设置 HTML 表格的背景 

        • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
        • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
        • bordercolor属性 - 可以设置边框颜色。

        注：HTML5 中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。 

        实例

        <body>

        <table border = "1" bordercolor = "green" bgcolor = "yellow">

        <tr>

        <th>Column 1</th>

        <th>Column 2</th>

        <th>Column 3</th>

        </tr>

        </table>

        </body>


        尝试一下 »

        　使用background属性需要提供图像 URL 地址：

        实例

        <table border = "1" bordercolor = "green" background = "/images/test.png">

        <tr>

        <th>Column 1</th>

        <th>Column 2</th>

        <th>Column 3</th>

        </tr>

        </table>


        尝试一下 »


        HTML 表格空间

        　有以下两个属性，用于调整 HTML 表格中单元格的空间：

        • cellspacing属性-定义表格单元格之间的空间 
        • cellpadding属性-表示单元格边框与单元格内容之间的距离

        实例

        <table border = "1" cellpadding = "5" cellspacing = "5">

        <tr>

        <th>Name</th>

        <th>Salary</th>

        </tr>

        <tr>

        <td>其琛</td>

        <td>5000</td>

        </tr>

        <tr>

        <td>曼迪</td>

        <td>7000</td>

        </tr>

        </table>


        尝试一下 »

        HTML 合并单元格

        • 如果要将两个或多个列合并为一个列，将使用colspan属性 
        • 如果要合并两行或更多行，则将使用rowspan属性。

        实例

        <table border = "1">

        <tr>

        <th>Column 1</th>

        <th>Column 2</th>

        <th>Column 3</th>

        </tr>

        <tr>

        <td rowspan = "2">Row 1 Cell 1</td>

        <td>Row 1 Cell 2</td>

        <td>Row 1 Cell 3</td>

        </tr>

        <tr>

        <td>Row 2 Cell 2</td>

        <td>Row 2 Cell 3</td>

        </tr>

        <tr>

        <td colspan = "3">Row 3 Cell 1</td>

        </tr>

        </table>


        尝试一下 »


        效果如下：

        Column 1Column 2Column 3
        Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
        Row 2 Cell 2Row 2 Cell 3
        Row 3 Cell 1

        HTML 表格头部、主体、页脚

        　表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

        　头部，主体和页脚的对应的三个标签是：

        • <thead> - 创建单独的表头。
        • <tbody> - 表示表格的主体。
        • <tfoot> - 创建一个单独的表页脚。

        　表可以包含多个<tbody>元素以指示不同的页面。

        　但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：

        实例

        <table border = "1" width = "100%">

        <thead>

        <tr>

        <td colspan = "4">This is the head of the table</td>

        </tr>

        </thead>       

        <tfoot>

        <tr>

        <td colspan = "4">This is the foot of the table</td>

        </tr>

        </tfoot>     

        <tbody>

        <tr>

        <td>Cell 1</td>

        <td>Cell 2</td>

        <td>Cell 3</td>

        <td>Cell 4</td>

        </tr>

        </tbody>         

        </table>


        尝试一下 »

        HTML 表格的嵌套

        　您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

        实例

        <table border = "1" width = "100%">

        <tr>

        <td>

        <table border = "1" width = "100%">

        <tr>

        <th>Name</th>

        <th>Salary</th>

        </tr>

        <tr>

        <td>其琛</td>

        <td>5000</td>

        </tr>

        <tr>

        <td>曼迪</td>

        <td>7000</td>

        </tr>

        </table>

        </td>

        </tr>       

        </table>


        尝试一下 »



        更多实例

        　没有边框的表格
        　本例演示一个没有边框的表格。

        　表格中的表头 ( Heading )
        　本例演示如何显示表格表头。

        　带有标题的表格
        　本例演示一个带标题  ( caption ) 的表格

        　跨行或跨列的表格单元格
        　本例演示如何定义跨行或跨列的表格单元格。

        　表格内的标签
        　本例演示如何显示在不同的元素内显示元素。

        　单元格边距 ( Cell padding )
        　本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

        　单元格间距 ( Cell spacing )
        　本例演示如何使用 Cell spacing 增加单元格之间的距离。


        HTML 表格标签

        标签描述
        <table>定义表格
        <th>定义表格的表头
        <tr>定义表格的行
        <td>定义表格单元
        <caption>定义表格标题
        <colgroup>定义表格列的组
        <col>定义用于表格列的属性
        <thead>定义表格的页眉
        <tbody>定义表格的主体
        <tfoot>定义表格的页脚


        HTML 列表

        HTML 支持有序、无序和定义列表:

        HTML 列表

        有序列表

        1. The first list item
        2. The second list item
        3. The third list item

        无序列表

        • List item
        • List item
        • List item

        在线实例

        无序列表
        本例演示无序列表。

        有序列表
        本例演示有序列表。

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

        HTML无序列表

        无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

        无序列表适合成员之间无级别顺序关系的情况。

        无序列表使用 <ul> 标签：

        实例

        <ul>

        <li>Coffee</li>

        <li>Milk</li>

        </ul>


        尝试一下 »

        浏览器显示如下：

        • Coffee
        • Milk

        HTML 有序列表

        同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

        有序列表适合各项目之间存在顺序关系的情况。

        列表项项使用数字来标记。您可以通过本站的编程测试来练习创建有序列表。

        实例

        <ol>       

        <li>Coffee</li>      

        <li>Milk</li>       

        </ol>


        尝试一下 »

        浏览器中显示如下：

        1. Coffee
        2. Milk

        HTML 自定义列表

        自定义列表不仅仅是一列项目，而是项目及其注释的组合。  

        自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

        自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

        实例

        <dl>

        <dt>Coffee</dt>

        <dd>- black hot drink</dd>

        <dt>Milk</dt>

        <dd>- white cold drink</dd>

        </dl>


        尝试一下 »

        浏览器显示如下：

        Coffee
        - black hot drink
        Milk
        - white cold drink

        注意事项 - 有用提示

        提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

        更多实例

        不同类型的有序列表
        本例演示不同类型的有序列表。

        不同类型的无序列表
        本例演示不同类型的无序列表。

        嵌套列表
        本例演示如何嵌套列表。

        嵌套列表 2
        本例演示更复杂的嵌套列表。

        自定义列表
        本例演示一个定义列表。

        HTML 列表标签

        标签描述
        <ol>定义有序列表
        <ul>定义无序列表
        <li>定义列表项
        <dl>定义列表
        <dt>自定义列表项目
        <dd>定义自定义列表的描述


        HTML <div> 和<span>

        HTML 可以通过 <div> 和 <span> 将元素组合起来。

        HTML 区块元素

        大多数 HTML 元素被定义为块级元素或内联元素。

        块级元素在浏览器显示时，通常会以新行来开始（和结束）。

        实例: <h1>, <p>, <ul>, <table>

        HTML 内联元素

        内联元素在显示时通常不会以新行开始。

        实例: <b>, <td>, <a>, <img>

        HTML <div> 元素

        <div> 标签可以把文档分割为独立的、不同的部分。

        HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

        <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

        如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

        <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

        如果要熟悉 <div> 元素是如何进行文档布局的，您可以在编程测试中进行练习使用 <div> 元素组合其他 HTML 元素！

        HTML <span> 与元素

        HTML <span> 元素是内联元素，可用作文本的容器

        <span> 元素也没有特定的含义。

        当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

        HTML 分组标签

        标签描述
        <div>定义了文档的区域，块级 (block-level)
        <span>用来组合文档中的行内元素， 内联元素(inline)

        <span>实例

        HTML  <span> 实例

        <p>我有一双

        <span style="color:gold">金色</span> 的

        <span style="font-size:50px">大眼睛</span>和 

        <span style="color:blue">蓝色的头发</span>。

        </p> 


        尝试一下 »

        <div>实例

        HTML  <div> 实例

        <p>这是一些文本。</p>

        <div style="color:#00FFFF">

        <h3>这是一个在 div 元素中的标题。</h3>

        <p>这是一个在 div 元素中的文本。</p>

        </div>

        <p>这是一些文本。</p>


        尝试一下 »



        内容就在这里内容就在这里HTML 布局

        网页布局对改善网站的外观非常重要。

        请慎重设计您的网页布局。

        Examples

        在线实例

        使用 <div> 元素的网页布局
        如何使用 <div> 元素添加布局。

        使用 <table> 元素的网页布局
        如何使用 <table> 元素添加布局。

        网站布局

        大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

        大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

        lamp虽然我们可以使用HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。

        HTML 布局 - 使用<div> 元素

        div 元素是用于分组 HTML 元素的块级元素。

        下面的例子使用五个 div 元素来创建多列布局：

        实例

        <!DOCTYPE html>
        <html>
        <body>
        <div id="container" style="width:500px">
        <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">网页的主标题</h1></div>
        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript</div>
        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容就在这里</div>
        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        Copyright © W3Cschools.com</div>
        </div>
        </body>
        </html>

        尝试一下 »

        上面的 HTML 代码会产生如下结果：

        网页的主标题

        Menu
        HTML
        CSS
        JavaScript

        内容就在这里

        Copyright © W3CSchool.cc

        HTML 布局 - 使用表格

        使用 HTML <table> 标签是创建布局的一种简单的方式。

        大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

        lamp即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

        下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

        实例

        <!DOCTYPE html>
        <html>
        <body>
        <table width="500" border="0">
        <tr>
        <td colspan="2" style="background-color:#FFA500;">
        <h1>网页的主标题</h1>
        </td>
        </tr>
        <tr>
        <td style="background-color:#FFD700;width:100px;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
        </td>
        <td style="background-color:#EEEEEE;height:200px;width:400px;">
        内容就在这里</td>
        </tr>
        <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
        Copyright © W3Cschools.com</td>
        </tr>
        </table>
        </body>
        </html>

        尝试一下 »

        上面的 HTML 代码会产生以下结果：

        网页的主标题

        Menu
        HTML
        CSS
        JavaScript        		内容就在这里
        Copyright © W3CSchool.cc/td>

        HTML 布局 - 有用的提示

        Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程.

        Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

        HTML 布局标签

        标签描述
        <div>定义文档区块，块级(block-level)
        <span>定义 span，用来组合文档中的行内元素。


        HTML 表单和输入

        HTML 表单用于收集不同类型的用户输入。

        Examples

        在线实例

        创建文本字段 (Text field)
        本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

        创建密码字段
        本例演示如何创建 HTML 的密码域。

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

        HTML 表单

        表单是一个包含表单元素的区域。

        表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

        表单使用表单标签 <form> 来设置:

        <form>

        .   

        input elements        

        .

        </form>

        HTML 表单 - 输入元素

        多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

        输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

        文本域（Text Fields）

        文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在编程测试中创建文本输入框！

        实例

        <form>

        姓名: <input type="text" name="firstname"><br>       

        电话号码: <input type="text" name="lastname">      

        </form>


        尝试一下 »

        浏览器显示如下：

        姓名:


        电话号码:

        注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

        密码字段

        密码字段通过标签 <input type="password"> 来定义:

        实例

        <form>        

        密码: <input type="password" name="pwd">        

        </form>


        尝试一下 »

        浏览器显示效果如下:

        密码:

        注意:密码字段字符不会明文显示，而是以星号或圆点替代。

        单选按钮（Radio Buttons）

        <input type="radio"> 标签定义了表单单选框选项。在编程测试中练习使用单选按钮！

        实例

        <form>        

        <input type="radio" name="sex" value="male">男<br>      

        <input type="radio" name="sex" value="female">女       

        </form>


        尝试一下 »

        浏览器显示效果如下:

        男


        女

        复选框（Checkboxes）

        <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在实战测试中学习使用复选框！

        实例

        <form>      

        <input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      

        <input type="checkbox" name="vehicle" value="Car">我有小车

        </form>


        尝试一下 »

        浏览器显示效果如下:

        我有自行车


        我有小车

        提交按钮 (Submit Button)

        <input type="submit"> 定义了提交按钮.

        当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

        实例

        <form name="input" action="html_form_action.php" method="get">

        Username: <input type="text" name="user">

        <input type="submit" value="Submit">

        </form>


        尝试一下 »

        尝试一下 »

        浏览器显示截图效果如下:


        假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

        Try it 更多实例

        单选按钮 (Radio buttons)
        本例演示如何在 HTML 中创建单选按钮。

        复选框 (Checkboxes)
        本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。

        简单的下拉列表
        本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

        预选下拉列表
        本例演示如何创建一个简单的带有预选值的下拉列表。

        文本域 (Textarea)
        本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

        创建按钮
        本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

        Try it 表单实例

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

        带有输入框和确认按钮的表单
        本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

        带有复选框的表单
        此表单包含两个复选框和一个确认按钮。

        带有单选按钮的表单
        此表单包含两个单选框和一个确认按钮。

        从表单发送电子邮件
        此例演示如何从表单发送电子邮件。

        HTML 表单标签

        New : HTML5 新标签

        标签描述
        <form>定义供用户输入的表单
        <input>定义输入域
        <textarea>定义文本域 (一个多行的输入控件)
        <label>定义了 <input> 元素的标签，一般为输入标题
        <fieldset>定义了一组相关的表单元素，并使用外框包含起来
        <legend>定义了 <fieldset> 元素的标题
        <select>定义了下拉选项列表
        <optgroup>定义选项组
        <option>定义下拉列表中的选项
        <button>定义一个点击按钮
        New指定一个预先定义的输入控件选项列表
        New定义了表单的密钥对生成器字段
        New定义一个计算结果


        HTML 框架

        <iframe>标签规定一个内联框架。

        　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

        　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

        　iframe 语法：

        <iframe src="URL"></iframe>

        　该URL指向不同的网页，将窗口内容显示为URL地址指向页面。


        Iframe - 设置高度与宽度

        height和width属性用来定义iframe标签的高度与宽度。

        属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

        实例

        <iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

        尝试一下 »

        Iframe - 移除边框

        frameborder属性用于定义iframe表示是否显示边框。

        　设置属性值为 "0" 移除iframe的边框:

        实例

        <iframe src="demo_iframe.htm" frameborder="0"></iframe>

        尝试一下 »

        使用 iframe 来显示目录链接页面

        iframe可以显示一个目标链接的页面

        　目标链接的属性必须使用iframe的属性，如下实例：

        实例

        <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
        <p><a href="http://www.51coolma.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

        尝试一下 »

        HTML iframe 标签

        标签说明
        <iframe>定义一个内联的 iframe

        iframe 标准属性

        属性说明
        class
        		规定元素的类名（classname）
        id规定元素的唯一 id
        style规定元素的行内样式（inline style）
        title规定元素的额外信息（可在工具提示中显示）


        HTML <frameset>标签 - HTML5 不支持

        <frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。

        　<frameset> 语法：

        <frameset>

        <frame src="menu.html">

        <frame src="content.html">

        </frameset>

        • frameset- 建立框架的标记，将在其中定义各个框架。
        • frame src- 指示框架显示内容URL地址。

        <frameset> - 设置行列比例

        <frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。

        实例

        <frameset rows="20%,*">

        <frame src="title.html">

        <frameset cols="30%,*">

        <frame src="menu.html">

        <frame src="content.html">

        </frameset>

        </frameset>


        尝试一下 »
        • frameset cols- 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的 30％，并且我们使用“*”符号来指示剩余百分比。
        • frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为 20％，剩下的剩余空间将在menu.html和content.html之间划分。

        <frameset> - 设置边框 

        　框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。

        注意：frameset和frameborder是相同的属性。

        实例

        <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

        <frame src="title.html">

        <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

        <frame src="menu.html">

        <frame src="content.html">

        </frameset>

        </frameset>


        尝试一下 »
        • frameborder-设置边框， 0 值表示没有边框
        • border- 修改边框的粗细（由 Netscape 浏览器使用）
        • framespacing- 修改边框的粗细（由 Internet Explorer 浏览器使用）

        <frame> - 设置名字 - HTML5 不支持 

        <frame>标签中我们使用name属性命名每个框架，而不是内容页面。

        实例

        <frameset rows="20%,*">

        <frame name="title" src="title.html">

        <frameset cols="30%,*">

        <frame name="menu" src="menu.html">

        <name="content" src="content.html">

        </frameset>

        </frameset>


        尝试一下 »

        <frame> - 设置滚动

        <frame>标签中我们使用noresize设置禁止用户拖拉框架大小；scrolling用于设置滚动条是否显示。

        实例

        <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

        <frame src="title.html" noresize scrolling="no">

        <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

        <frame src="menu.html" scrolling="auto" noresize>

        <frame src="content.html" scrolling="yes" noresize>

        </frameset>

        </frameset>


        尝试一下 »
        • noresize- 不允许用户更改其尺寸。
        • scrolling- 设置滚动条是否显示。


        HTML 颜色

        HTML 颜色采用的是 RGB 颜色，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色。

        Color Values

        HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

        每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

        这个表格给出了由三种颜色混合而成的具体效果：

        颜色值

        颜色(Color) 颜色十六进制 (Color HEX) 颜色 RGB (Color RGB)
          #000000 rgb(0,0,0)
          #FF0000 rgb(255,0,0)
          #00FF00 rgb(0,255,0)
          #0000FF rgb(0,0,255)
          #FFFF00 rgb(255,255,0)
          #00FFFF rgb(0,255,255)
          #FF00FF rgb(255,0,255)
          #C0C0C0 rgb(192,192,192)
          #FFFFFF rgb(255,255,255)

        尝试一下 »

        1600 万种不同颜色

        三种颜色 红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 (256 x 256 x 256)。您可以在编程测试中练习使用 RGB 红色表达方式！

        在下面的颜色表中你会看到不同的结果，从 0 到 255 的红色，同时设置绿色和蓝色的值为 0 ，随着红色的值变化，不同的值都显示了不同的颜色。

        Red Light Color HEX Color RGB
          #000000  rgb(0,0,0)
          #080000 rgb(8,0,0)
          #100000 rgb(16,0,0)
          #180000 rgb(24,0,0)
          #200000 rgb(32,0,0)
          #280000 rgb(40,0,0)
          #300000 rgb(48,0,0)
          #380000 rgb(56,0,0)
          #400000 rgb(64,0,0)
          #480000 rgb(72,0,0)
          #500000 rgb(80,0,0)
          #580000 rgb(88,0,0)
          #600000 rgb(96,0,0)
          #680000 rgb(104,0,0)
          #700000 rgb(112,0,0)
          #780000 rgb(120,0,0)
          #800000 rgb(128,0,0)
          #880000 rgb(136,0,0)
          #900000 rgb(144,0,0)
          #980000 rgb(152,0,0)
          #A00000 rgb(160,0,0)
          #A80000 rgb(168,0,0)
          #B00000 rgb(176,0,0)
          #B80000 rgb(184,0,0)
          #C00000 rgb(192,0,0)
          #C80000 rgb(200,0,0)
          #D00000 rgb(208,0,0)
          #D80000 rgb(216,0,0)
          #E00000 rgb(224,0,0)
          #E80000rgb(232,0,0)
          #F00000 rgb(240,0,0)
          #F80000 rgb(248,0,0)
          #FF0000 rgb(255,0,0)

        灰暗色调

        以下展示了灰色到黑色的渐变

        Gray Shades Color HEX Color RGB
          #000000  rgb(0,0,0) 
          #080808  rgb(8,8,8) 
          #101010  rgb(16,16,16) 
          #181818  rgb(24,24,24) 
          #202020  rgb(32,32,32) 
          #282828  rgb(40,40,40) 
          #303030  rgb(48,48,48) 
          #383838  rgb(56,56,56) 
          #404040  rgb(64,64,64) 
          #484848  rgb(72,72,72) 
          #505050  rgb(80,80,80) 
          #585858  rgb(88,88,88) 
          #606060  rgb(96,96,96) 
          #686868  rgb(104,104,104) 
          #707070  rgb(112,112,112) 
          #787878  rgb(120,120,120) 
          #808080  rgb(128,128,128) 
          #888888  rgb(136,136,136) 
          #909090  rgb(144,144,144) 
          #989898  rgb(152,152,152) 
          #A0A0A0  rgb(160,160,160) 
          #A8A8A8  rgb(168,168,168) 
          #B0B0B0  rgb(176,176,176) 
          #B8B8B8  rgb(184,184,184) 
          #C0C0C0  rgb(192,192,192) 
          #C8C8C8  rgb(200,200,200) 
          #D0D0D0  rgb(208,208,208) 
          #D8D8D8  rgb(216,216,216) 
          #E0E0E0  rgb(224,224,224) 
          #E8E8E8  rgb(232,232,232) 
          #F0F0F0  rgb(240,240,240) 
          #F8F8F8  rgb(248,248,248) 
          #FFFFFF  rgb(255,255,255) 

        Web 安全色?

        数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

        我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

        最初，216 跨平台 Web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

        000000 000033 000066 000099 0000CC 0000FF
        003300 003333 003366 003399 0033CC 0033FF
        006600 006633 006666 006699 0066CC 0066FF
        009900 009933 009966 009999 0099CC 0099FF
        00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
        00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
        330000 330033 330066 330099 3300CC 3300FF
        333300 333333 333366 333399 3333CC 3333FF
        336600 336633 336666 336699 3366CC 3366FF
        339900 339933 339966 339999 3399CC 3399FF
        33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
        33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
        660000 660033 660066 660099 6600CC 6600FF
        663300 663333 663366 663399 6633CC 6633FF
        666600 666633 666666 666699 6666CC 6666FF
        669900 669933 669966 669999 6699CC 6699FF
        66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
        66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
        990000 990033 990066 990099 9900CC 9900FF
        993300 993333 993366 993399 9933CC 9933FF
        996600 996633 996666 996699 9966CC 9966FF
        999900 999933 999966 999999 9999CC 9999FF
        99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
        99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
        CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
        CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
        CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
        CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
        CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
        CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
        FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
        FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
        FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
        FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
        FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
        FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

        HTML 常用颜色代码表

          #000000   #2F0000   #600030   #460046   #28004D
          #272727   #4D0000   #820041   #5E005E   #3A006F
          #3C3C3C   #600000   #9F0050   #750075   #4B0091
          #4F4F4F   #750000   #BF0060   #930093   #5B00AE
          #5B5B5B   #930000   #D9006C   #AE00AE   #6F00D2
          #6C6C6C   #AE0000   #F00078   #D200D2   #8600FF
          #7B7B7B   #CE0000   #FF0080   #E800E8   #921AFF
          #8E8E8E   #EA0000   #FF359A   #FF00FF   #9F35FF
          #9D9D9D   #FF0000   #FF60AF   #FF44FF   #B15BFF
          #ADADAD   #FF2D2D   #FF79BC   #FF77FF   #BE77FF
          #BEBEBE   #FF5151   #FF95CA   #FF8EFF   #CA8EFF
          #d0d0d0   #ff7575   #ffaad5   #ffa6ff   #d3a4ff
          #E0E0E0   #FF9797   #FFC1E0   #FFBFFF   #DCB5FF
          #F0F0F0   #FFB5B5   #FFD9EC   #FFD0FF   #E6CAFF
          #FCFCFC   #FFD2D2   #FFECF5   #FFE6FF   #F1E1FF
          #FFFFFF   #FFECEC   #FFF7FB   #FFF7FF   #FAF4FF
          #000079   #000079   #003E3E   #006030   #006000
          #000093   #003D79   #005757   #01814A   #007500
          #0000C6   #004B97   #007979   #019858   #009100
          #0000C6   #005AB5   #009393   #01B468   #00A600
          #0000E3   #0066CC   #00AEAE   #02C874   #00BB00
          #2828FF   #0072E3   #00CACA   #02DF82   #00DB00
          #4A4AFF   #0080FF   #00E3E3   #02F78E   #00EC00
          #6A6AFF   #2894FF   #00FFFF   #1AFD9C   #28FF28
          #7D7DFF   #46A3FF   #4DFFFF   #4EFEB3   #53FF53
          #9393FF   #66B3FF   #80FFFF   #7AFEC6   #79FF79
          #AAAAFF   #84C1FF   #A6FFFF   #96FED1   #93FF93
          #B9B9FF   #97CBFF   #BBFFFF   #ADFEDC   #A6FFA6
          #CECEFF   #ACD6FF   #CAFFFF   #C1FFE4   #BBFFBB
          #DDDDFF   #C4E1FF   #D9FFFF   #D7FFEE   #CEFFCE
          #ECECFF   #D2E9FF   #ECFFFF   #E8FFF5   #DFFFDF
          #FBFBFF   #ECF5FF   #FDFFFF   #FBFFFD   #F0FFF0
          #467500   #424200   #5B4B00   #844200   #642100
          #548C00   #5B5B00   #796400   #9F5000   #842B00
          #64A600   #737300   #977C00   #BB5E00   #A23400
          #73BF00   #8C8C00   #AE8F00   #D26900   #BB3D00
          #82D900   #A6A600   #C6A300   #EA7500   #D94600
          #8CEA00   #C4C400   #D9B300   #FF8000   #F75000
          #9AFF02   #E1E100   #EAC100   #FF9224   #FF5809
          #A8FF24   #F9F900   #FFD306   #FFA042   #FF8040
          #B7FF4A   #FFFF37   #FFDC35   #FFAF60   #FF8F59
          #C2FF68   #FFFF6F   #FFE153   #FFBB77   #FF9D6F
          #CCFF80   #FFFF93   #FFE66F   #FFC78E   #FFAD86
          #D3FF93   #FFFFAA   #FFED97   #FFD1A4   #FFBD9D
          #DEFFAC   #FFFFB9   #FFF0AC   #FFDCB9   #FFCBB3
          #E8FFC4   #FFFFCE   #FFF4C1   #FFE4CA   #FFDAC8
          #EFFFD7   #FFFFDF   #FFF8D7   #FFEEDD   #FFE6D9
          #F5FFE8   #FFFFF4   #FFFCEC   #FFFAF4   #FFF3EE
          #613030   #616130   #336666   #484891   #6C3365
          #743A3A   #707038   #3D7878   #5151A2   #7E3D76
          #804040   #808040   #408080   #5A5AAD   #8F4586
          #984B4B   #949449   #4F9D9D   #7373B9   #9F4D95
          #AD5A5A   #A5A552   #5CADAD   #8080C0   #AE57A4
          #B87070   #AFAF61   #6FB7B7   #9999CC   #B766AD
          #C48888   #B9B973   #81C0C0   #A6A6D2   #C07AB8
          #CF9E9E   #C2C287   #95CACA   #B8B8DC   #CA8EC2
          #D9B3B3   #CDCD9A   #A3D1D1   #C7C7E2   #D2A2CC
          #E1C4C4   #D6D6AD   #B3D9D9   #D8D8EB   #DAB1D5
          #EBD6D6   #DEDEBE   #C4E1E1   #E6E6F2   #E2C2DE
          #F2E6E6   #E8E8D0   #D1E9E9   #F3F3FA   #EBD3E8


        HTML 颜色名

        目前所有浏览器都支持以下颜色名。

        141 个颜色名称是在 HTML 和 CSS 颜色规范定义的（ 17 标准颜色，再加 124 ）。下表列出了所有颜色的值，包括十六进制值。

        Remark 提示: 17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。：

        按颜色名排序

        按十六进制的值排序

        单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

        Color Name HEX Color
        AliceBlue  #F0F8FF  
        AntiqueWhite  #FAEBD7  
        Aqua  #00FFFF  
        Aquamarine  #7FFFD4  
        Azure  #F0FFFF  
        Beige  #F5F5DC  
        Bisque  #FFE4C4  
        Black  #000000  
        BlanchedAlmond  #FFEBCD  
        Blue  #0000FF  
        BlueViolet  #8A2BE2  
        Brown  #A52A2A  
        BurlyWood  #DEB887  
        CadetBlue  #5F9EA0  
        Chartreuse  #7FFF00  
        Chocolate  #D2691E  
        Coral  #FF7F50  
        CornflowerBlue  #6495ED  
        Cornsilk  #FFF8DC  
        Crimson  #DC143C  
        Cyan  #00FFFF  
        DarkBlue  #00008B  
        DarkCyan  #008B8B  
        DarkGoldenRod  #B8860B  
        DarkGray  #A9A9A9  
        DarkGreen  #006400  
        DarkKhaki  #BDB76B  
        DarkMagenta  #8B008B  
        DarkOliveGreen  #556B2F  
        DarkOrange  #FF8C00  
        DarkOrchid  #9932CC  
        DarkRed  #8B0000  
        DarkSalmon  #E9967A  
        DarkSeaGreen  #8FBC8F  
        DarkSlateBlue  #483D8B  
        DarkSlateGray  #2F4F4F  
        DarkTurquoise  #00CED1  
        DarkViolet  #9400D3  
        DeepPink  #FF1493  
        DeepSkyBlue  #00BFFF  
        DimGray  #696969  
        DodgerBlue  #1E90FF  
        FireBrick  #B22222  
        FloralWhite  #FFFAF0  
        ForestGreen  #228B22  
        Fuchsia  #FF00FF  
        Gainsboro  #DCDCDC  
        GhostWhite  #F8F8FF  
        Gold  #FFD700  
        GoldenRod  #DAA520  
        Gray  #808080  
        Green  #008000  
        GreenYellow  #ADFF2F  
        HoneyDew  #F0FFF0  
        HotPink  #FF69B4  
        IndianRed   #CD5C5C  
        Indigo   #4B0082  
        Ivory  #FFFFF0  
        Khaki  #F0E68C  
        Lavender  #E6E6FA  
        LavenderBlush  #FFF0F5  
        LawnGreen  #7CFC00  
        LemonChiffon  #FFFACD  
        LightBlue  #ADD8E6  
        LightCoral  #F08080  
        LightCyan  #E0FFFF  
        LightGoldenRodYellow  #FAFAD2  
        LightGray  #D3D3D3  
        LightGreen  #90EE90  
        LightPink  #FFB6C1  
        LightSalmon  #FFA07A  
        LightSeaGreen  #20B2AA  
        LightSkyBlue  #87CEFA  
        LightSlateGray  #778899  
        LightSteelBlue  #B0C4DE  
        LightYellow  #FFFFE0  
        Lime  #00FF00  
        LimeGreen  #32CD32  
        Linen  #FAF0E6  
        Magenta  #FF00FF  
        Maroon  #800000  
        MediumAquaMarine  #66CDAA  
        MediumBlue  #0000CD  
        MediumOrchid  #BA55D3  
        MediumPurple  #9370DB  
        MediumSeaGreen  #3CB371  
        MediumSlateBlue  #7B68EE  
        MediumSpringGreen  #00FA9A  
        MediumTurquoise  #48D1CC  
        MediumVioletRed  #C71585  
        MidnightBlue  #191970  
        MintCream  #F5FFFA  
        MistyRose  #FFE4E1  
        Moccasin  #FFE4B5  
        NavajoWhite  #FFDEAD  
        Navy  #000080  
        OldLace  #FDF5E6  
        Olive  #808000  
        OliveDrab  #6B8E23  
        Orange  #FFA500  
        OrangeRed  #FF4500  
        Orchid  #DA70D6  
        PaleGoldenRod  #EEE8AA  
        PaleGreen  #98FB98  
        PaleTurquoise  #AFEEEE  
        PaleVioletRed  #DB7093  
        PapayaWhip  #FFEFD5  
        PeachPuff  #FFDAB9  
        Peru  #CD853F  
        Pink  #FFC0CB  
        Plum  #DDA0DD  
        PowderBlue  #B0E0E6  
        Purple  #800080  
        Red  #FF0000  
        RosyBrown  #BC8F8F  
        RoyalBlue  #4169E1  
        SaddleBrown  #8B4513  
        Salmon  #FA8072  
        SandyBrown  #F4A460  
        SeaGreen  #2E8B57  
        SeaShell  #FFF5EE  
        Sienna  #A0522D  
        Silver  #C0C0C0  
        SkyBlue  #87CEEB  
        SlateBlue  #6A5ACD  
        SlateGray  #708090  
        Snow  #FFFAFA  
        SpringGreen  #00FF7F  
        SteelBlue  #4682B4  
        Tan  #D2B48C  
        Teal  #008080  
        Thistle  #D8BFD8  
        Tomato  #FF6347  
        Turquoise  #40E0D0  
        Violet  #EE82EE  
        Wheat  #F5DEB3  
        White  #FFFFFF  
        WhiteSmoke  #F5F5F5  
        Yellow  #FFFF00  
        YellowGreen  #9ACD32  

        HTML 颜色值

        颜色由红 (R)、绿 (G)、蓝 (B) 组成。

        颜色值

        颜色值由十六进制来表示红、绿、蓝（RGB）。

        每个颜色的最低值为 0 (十六进制为 00 )，最高值为 255 (十六进制为 FF )。

        十六进制值的写法为#号后跟三个或六个十六进制字符。

        三位数表示法为：#RGB，转换为 6 位数表示为：#RRGGBB。

        颜色实例

        颜色 3 位十六进制颜色值 6 位十六进制颜色值 RGB
          #000 #000000 rgb(0,0,0)
          #F00 #FF0000 rgb(255,0,0)
          #0F0 #00FF00 rgb(0,255,0)
          #00F #0000FF rgb(0,0,255)
          #FF0 #FFFF00 rgb(255,255,0)
          #0FF #00FFFF rgb(0,255,255)
          #F0F #FF00FF rgb(255,0,255)
          #888 #888888 rgb(136,136,136)
          #FFF #FFFFFF rgb(255,255,255)

        尝试一下 »

        通过十六进制（Hex）的颜色值排序

        查看以颜色名称排序的颜色列表

        Color Name HEX Color
        Black  #000000  
        Navy  #000080  
        DarkBlue  #00008B  
        MediumBlue  #0000CD  
        Blue  #0000FF  
        DarkGreen  #006400  
        Green  #008000  
        Teal  #008080  
        DarkCyan  #008B8B  
        DeepSkyBlue  #00BFFF  
        DarkTurquoise  #00CED1  
        MediumSpringGreen  #00FA9A  
        Lime  #00FF00  
        SpringGreen  #00FF7F  
        Aqua  #00FFFF  
        Cyan  #00FFFF  
        MidnightBlue  #191970  
        DodgerBlue  #1E90FF  
        LightSeaGreen  #20B2AA  
        ForestGreen  #228B22  
        SeaGreen  #2E8B57  
        DarkSlateGray  #2F4F4F  
        LimeGreen  #32CD32  
        MediumSeaGreen  #3CB371  
        Turquoise  #40E0D0  
        RoyalBlue  #4169E1  
        SteelBlue  #4682B4  
        DarkSlateBlue  #483D8B  
        MediumTurquoise  #48D1CC  
        Indigo   #4B0082  
        DarkOliveGreen  #556B2F  
        CadetBlue  #5F9EA0  
        CornflowerBlue  #6495ED  
        MediumAquaMarine  #66CDAA  
        DimGray  #696969  
        SlateBlue  #6A5ACD  
        OliveDrab  #6B8E23  
        SlateGray  #708090  
        LightSlateGray  #778899  
        MediumSlateBlue  #7B68EE  
        LawnGreen  #7CFC00  
        Chartreuse  #7FFF00  
        Aquamarine  #7FFFD4  
        Maroon  #800000  
        Purple  #800080  
        Olive  #808000  
        Gray  #808080  
        SkyBlue  #87CEEB  
        LightSkyBlue  #87CEFA  
        BlueViolet  #8A2BE2  
        DarkRed  #8B0000  
        DarkMagenta  #8B008B  
        SaddleBrown  #8B4513  
        DarkSeaGreen  #8FBC8F  
        LightGreen  #90EE90  
        MediumPurple  #9370DB  
        DarkViolet  #9400D3  
        PaleGreen  #98FB98  
        DarkOrchid  #9932CC  
        YellowGreen  #9ACD32  
        Sienna  #A0522D  
        Brown  #A52A2A  
        DarkGray  #A9A9A9  
        LightBlue  #ADD8E6  
        GreenYellow  #ADFF2F  
        PaleTurquoise  #AFEEEE  
        LightSteelBlue  #B0C4DE  
        PowderBlue  #B0E0E6  
        FireBrick  #B22222  
        DarkGoldenRod  #B8860B  
        MediumOrchid  #BA55D3  
        RosyBrown  #BC8F8F  
        DarkKhaki  #BDB76B  
        Silver  #C0C0C0  
        MediumVioletRed  #C71585  
        IndianRed   #CD5C5C  
        Peru  #CD853F  
        Chocolate  #D2691E  
        Tan  #D2B48C  
        LightGray  #D3D3D3  
        Thistle  #D8BFD8  
        Orchid  #DA70D6  
        GoldenRod  #DAA520  
        PaleVioletRed  #DB7093  
        Crimson  #DC143C  
        Gainsboro  #DCDCDC  
        Plum  #DDA0DD  
        BurlyWood  #DEB887  
        LightCyan  #E0FFFF  
        Lavender  #E6E6FA  
        DarkSalmon  #E9967A  
        Violet  #EE82EE  
        PaleGoldenRod  #EEE8AA  
        LightCoral  #F08080  
        Khaki  #F0E68C  
        AliceBlue  #F0F8FF  
        HoneyDew  #F0FFF0  
        Azure  #F0FFFF  
        SandyBrown  #F4A460  
        Wheat  #F5DEB3  
        Beige  #F5F5DC  
        WhiteSmoke  #F5F5F5  
        MintCream  #F5FFFA  
        GhostWhite  #F8F8FF  
        Salmon  #FA8072  
        AntiqueWhite  #FAEBD7  
        Linen  #FAF0E6  
        LightGoldenRodYellow  #FAFAD2  
        OldLace  #FDF5E6  
        Red  #FF0000  
        Fuchsia  #FF00FF  
        Magenta  #FF00FF  
        DeepPink  #FF1493  
        OrangeRed  #FF4500  
        Tomato  #FF6347  
        HotPink  #FF69B4  
        Coral  #FF7F50  
        DarkOrange  #FF8C00  
        LightSalmon  #FFA07A  
        Orange  #FFA500  
        LightPink  #FFB6C1  
        Pink  #FFC0CB  
        Gold  #FFD700  
        PeachPuff  #FFDAB9  
        NavajoWhite  #FFDEAD  
        Moccasin  #FFE4B5  
        Bisque  #FFE4C4  
        MistyRose  #FFE4E1  
        BlanchedAlmond  #FFEBCD  
        PapayaWhip  #FFEFD5  
        LavenderBlush  #FFF0F5  
        SeaShell  #FFF5EE  
        Cornsilk  #FFF8DC  
        LemonChiffon  #FFFACD  
        FloralWhite  #FFFAF0  
        Snow  #FFFAFA  
        Yellow  #FFFF00  
        LightYellow  #FFFFE0  
        Ivory  #FFFFF0  
        White  #FFFFFF  

        HTML 脚本

        JavaScript 是可插入 HTML 页面的编程代码。

        JavaScript 使 HTML 页面具有更强的动态和交互性。

        JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

        Examples

        在线实例

        插入一段脚本
        如何将脚本插入 HTML 文档。

        使用 <noscript> 标签
        如何应对不支持脚本或禁用脚本的浏览器。

        HTML <script> 标签

        <script> 标签用于定义客户端脚本，比如 JavaScript。

        <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

        JavaScript 最常用于图片操作、表单验证以及内容动态更新。

        下面的脚本会向浏览器输出 "Hello World!"：

        实例

        <script>
        document.write("Hello World!")
        </script>

        尝试一下 »

        注释：如果使用 "src" 属性，则 <script> 元素必须是空的。

        RemarkTip: 学习更多关于 Javascript 教程，请查看 JavaScript 教程!

        HTML<noscript> 标签

        <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

        <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

        只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

        实例

        <script>
        document.write("Hello World!")
        </script>
        <noscript>Sorry, your browser does not support JavaScript!</noscript>

        尝试一下 »

        RemarkTip: <noscript> 标签支持全局属性，查看完整属性表 HTML全局属性！

        JavaScript 体验(来自本站 JavaScript 教程)

        JavaScript 实例代码:

        JavaScript 可以直接在 HTML 输出:

        document.write("<p>This is a paragraph</p>");

        尝试一下 »

        JavaScript 事件响应:

        <button type="button" onclick ="myFunction()">Click Me!</button>

        尝试一下 »

        JavaScript 处理 HTML 样式:

        document.getElementById("demo").style.color ="#ff0000";

        尝试一下 »

        如何应付老式的浏览器

        如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

        实例

        JavaScript :

        <script type="text/javascript">

        <!--

        document.write("Hello World!")

        //-->

        </script>

        HTML 脚本标签

        标签描述
        <script>定义了客户端脚本
        <noscript>定义了不支持脚本浏览器输出的文本


        HTML 字符实体

        HTML 中的预留字符必须被替换为字符实体。

        一些在键盘上找不到的字符也可以使用字符实体来替换。

        HTML 实体

        在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。

        在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

        如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

        &entity_name;     

        或

        &#entity_number;

        如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

        Remark提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

        不间断空格 (Non-breaking Space)

        HTML 中的常用字符实体是不间断空格( )。

        浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp;字符实体。

        结合音标符

        发音符号是加到字母上的一个"glyph(字形)"。

        一些变音符号, 如 尖音符 (  ̀) 和 抑音符 (  ́) 。

        变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

        变音符号可以与字母、数字字符的组合来使用。

        以下是一些实例:

        音标符字符Construct输出结果
          ̀aàà
          ́aáá
        ̂aa&#770;â
          ̃aa&#771;ã
          ̀OO&#768;Ò
          ́OO&#769;Ó
        ̂OO&#770;Ô
          ̃OO&#771;Õ

        HTML 字符实体

        Note

         实体名称对大小写敏感！


        显示结果描述实体名称实体编号
         空格&nbsp;&#160;
        <小于号&lt;&#60;
        >大于号&gt;&#62;
        &和号&amp;&#38;
        "引号&quot;&#34;
        '撇号 &apos; (IE不支持)&#39;
        ￠分&cent;&#162;
        £镑&pound;&#163;
        ¥人民币/日元&yen;&#165;
        €欧元&euro;&#8364;
        §小节&sect;&#167;
        ©版权&copy;&#169;
        ®注册商标&reg;&#174;
        ™商标&trade;&#8482;
        ×乘号&times;&#215;
        ÷除号&divide;&#247;

        查看本站完整的 HTML 实体：请点击 HTML 实体参考手册。


        HTML 统一资源定位器 (Uniform Resource Locators)

        URL 是一个网页地址。

        URL 可以由字母组成，如 "51coolma.cn"，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

        URL - 统一资源定位器

        Web 浏览器通过 URL 从 Web 服务器请求页面。

        当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

        一个统一资源定位器 (URL) 用于定位万维网上的文档。

        一个网页地址实例: //www.51coolma.cn/html/html-tutorial.html 语法规则:

        scheme://host.domain:port/path/filename 

        说明:

          • scheme - 定义因特网服务的类型。最常见的类型是 http

          • host - 定义域主机（http 的默认主机是 www ）

          • domain - 定义因特网域名，比如 51coolma.cn

          • :port - 定义主机上的端口号（http 的默认端口号是 80 ）

          • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

          • filename - 定义文档 / 资源的名称

        常见的 URL Schemes

        以下是一些 URL scheme：

        Scheme访问用于...
        http超文本传输协议以 http:// 开头的普通网页。不加密。
        https安全超文本传输协议安全网页，加密所有信息交换。
        ftp文件传输协议用于将文件下载或上传至网站。
        file 您计算机上的文件。


        URL 字符编码

        URL 只能使用 ASCII 字符集。

        URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

        URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

        URL 不能包含空格。URL 编码通常使用 + 来替换空格。

        在线实例

        实例

        如果您点击"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

        <form name="input" target="_blank" action="form_action.php" method="get">
          <input type="text" value="51coolma.cn" name="text" size="30">
          <input type="submit" value="提交">
        </form>

        尝试一下 »

        点击 "尝试一下" 按钮查看在线实例

        Remark提示：JavaScript、PHP、ASP 都提供了对字符串进行 URL 编码的函数。

        URL 编码实例

        字符URL 编码
        €%80
        £%A3
        ©%A9
        ®%AE
        À%C0
        Á%C1
        Â%C2
        Ã%C3
        Ä%C4
        Å%C5

        如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。


        HTML 速查列表

        HTML 速查列表. 你可以打印它，以备日常使用。

        HTML 基本文档

        <!DOCTYPE html>

        <html>

        <head>

        <title>文档标题</title>

        </head>

        <body> 可见文本... </body>

        </html>

        基本标签（Basic Tags）

        <h1>最大的标题</h1>

         <h2> . . . </h2>

         <h3> . . . </h3>

         <h4> . . . </h4>

         <h5> . . . </h5>

         <h6>最小的标题</h6>

         

         <p>这是一个段落。</p>

         <br> （换行）

         <hr> （水平线）

         <!-- 这是注释 -->

        文本格式化（Formatting）

        <b>粗体文本</b>

        <code>计算机代码</code>

        <em>强调文本</em>

        <i>斜体文本</i>

        <kbd>键盘输入</kbd> 

        <pre>预格式化文本</pre>

        <small>更小的文本</small>

        <strong>重要的文本</strong>

         

        <abbr> （缩写）

        <address> （联系信息）

        <bdo> （文字方向）

        <blockquote> （从另一个源引用的部分）

        <cite> （工作的名称）

        <del> （删除的文本）

        <ins> （插入的文本）

        <sub> （下标文本）

        <sup> （上标文本）

        链接（Links）

        普通的链接：<a href="链接地址">链接文本</a>

        图像链接： <a href="http://www.example.com/" rel="external nofollow" target="_blank" ><img src="URL" alt="替换文本"></a> 

        邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

        书签： <a id="tips">

        提示部分</a> <a href="#tips">跳到提示部分</a>

        图片（Images）

        <img src="URL" alt="替换文本" height="42" width="42">

        样式/区块（Styles/Sections）

        <style type="text/css">

        h1 {color:red;}

        p {color:blue;}

         </style>

          

         <div>文档中的块级元素</div>

         <span>文档中的内联元素</span>

        无序列表

        <ul>

           <li>项目</li>

           <li>项目</li>

         </ul>

        有序列表

        <ol>

           <li>第一项</li>

           <li>第二项</li>

         </ol>

        定义列表

        <dl>

           <dt>项目 1</dt>

             <dd>描述项目 1</dd>

           <dt>项目 2</dt>

             <dd>描述项目 2</dd>

         </dl>

        表格（Tables）

        <table border="1">

           <tr>

             <th>表格标题</th>

             <th>表格标题</th>

           </tr>

           <tr>

             <td>表格数据</td>

             <td>表格数据</td>

           </tr>

         </table>

        框架（Iframe）

        <iframe src="demo_iframe.htm"></iframe>

        表单（Forms）

        <form action="demo_form.php" method="post/get">

        <input type="text" name="email" size="40" maxlength="50"> 

        <input type="password"> 

        <input type="checkbox" checked="checked"> 

        <input type="radio" checked="checked"> 

        <input type="submit" value="Send"> 

        <input type="reset"> 

        <input type="hidden"> 

        <select> 

        <option>苹果</option> 

        <option selected="selected">香蕉</option> 

        <option>樱桃</option> 

        </select>

        <textarea name="comment" rows="60" cols="20">

        </textarea> 

        </form>

        实体（Entities）

        < 等同于 &lt;

        > 等同于 &gt;

        © 等同于 &copy;


        JavaScript 使 HTML 页面更具动态性和交互性

        实例

        <!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><button type="button"onclick="document.getElementById('demo').innerHTML = Date()">点击我来显示日期和时间</button><p id="demo"></p></body></html>

        HTML <script> 标签

        HTML ​<script>​ 标签用于定义客户端脚本（JavaScript）。

        ​<script>​ 元素即可包含脚本语句，也可通过 ​src​ 属性指向外部脚本文件。

        JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

        如需选取 HTML 元素，JavaScript 最常用 ​document.getElementById()​ 方法。

        这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!"：

        实例

        <script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>

        提示：您可在我们的 JavaScript教程 中学习更多 JavaScript 知识。

        JavaScript 的味道

        以下是展示 JavaScript 能力的一些例子：

        实例

        JavaScript 能够更改内容：

        document.getElementById("demo").innerHTML = "Hello JavaScript!";

        实例

        JavaScript 能够更改样式：

        document.getElementById("demo").style.fontSize = "25px";document.getElementById("demo").style.color = "red";document.getElementById("demo").style.backgroundColor = "yellow";

        实例

        JavaScript 能够更改属性：

        document.getElementById("image").src = "picture.gif";

        HTML <noscript> 标签

        HTML ​<noscript>​ 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：

        实例

        <script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script><noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

        HTML Script 标签

        标签描述
        ​<script>​定义客户端脚本。
        ​<noscript>​为不支持客户端脚本的用户定义替代内容。

        如需所有可用的 HTML 标签的完整列表，请访问我们的 HTML标签手册。

        你已经完成了 HTML 的学习，下一步该学习什么呢？

        HTML 总结

        本教程已教你如何使用 HTML 创建站点。

        HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

        HTML 的关键是标签，其作用是指示将出现的内容。

        如需更多关于 HTML 的信息，请查看我们的 HTML 教程 和 HTML 参考手册 。

        为了能够巩固您对 HTML 的熟练度，您可以进行一些基础的 HTML 测试！

        现在，你已学完 HTML，接下来该学习什么呢？

        学习 CSS

        CSS 被用来同时控制多重网页的样式和布局。

        通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。 

        通过使用 CSS 来我们可以大大提升网页开发的工作效率！

        如需学习如何创建样式表，请访问我们的 CSS 教程 。

        学习 JavaScript

        JavaScript 可以让你的网页更加生动。

        如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到 Javascript。

        JavaScript 是互联网上最流行的脚本语言，目前所有主流浏览器都支持 Javascript。

        如果你想学习更多关于Javascript 的知识，可以访问本站的 JavaScript 教程.

        站点服务器

        在自己的服务器上托管网站始终是一个选项。有几点需要考虑：

        硬件支出

        如果要运行"真正"的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。

        软件支出

        请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。

        人工费

        不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

        使用因特网服务提供商（ISP）

        从 ISP 租用服务器也很常见。

        大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：

        连接速度

        大多数 ISP 都拥有连接因特网的高速连接。

        强大的硬件

        ISP 的 Web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。

        安全性和可靠性

        ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。

        选择 ISP 时的注意事项

        24 小时支持

        确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。

        每日备份

        确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。

        流量

        研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。

        带宽或内容限制

        研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。

        E-mail 功能

        请确保 ISP 支持您需要的 e-mail 功能。

        数据库访问

        如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。

        在您选取一家 ISP 之前，请务必阅读 W3Cschool 的 Web 主机教程。

        学完本教程之后，W3Cschool 推荐您进行Html实战来巩固你刚学习的新知识。

        路径描述
        <img src="logo.jpg">logo.jpg 位于与当前网页相同的文件夹
        <img src="logo/logo.jpg">logo.jpg 位于当前文件夹的 logo文件夹中
        <img src="/logo/logo.jpg">logo.jpg 当前站点根目录的 images 文件夹中
        <img src="../logo.jpg">logo.jpg 位于当前文件夹的上一级文件夹中

        HTML 文件路径

        文件路径描述了网站文件夹结构中某个文件的位置。

        文件路径会在链接外部文件时被用到：

        • 网页
        • 图像
        • 样式表
        • JavaScript

        绝对文件路径

        绝对文件路径是指向一个因特网文件的完整 URL：

        实例

        <img src="https://www.51coolma.cn/statics/img/logo/indexlogo@2x.png" alt="Logo">

        <img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

        相对路径

        相对路径指向了相对于当前页面的文件。

        在本例中，文件路径指向了位于当前网站根目录中 logo 文件夹里的一个文件：

        实例

        <img src="/statics/img/logo/indexlogo@2x.png" alt="Logo">

        在本例中，文件路径指向了位于当前文件夹中 logo 文件夹里的一个文件：

        实例

        <img src="/statics/img/logo/indexlogo@2x.png" alt="Logo">

        在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 logo 文件夹里的一个文件：

        实例

        <img src="../statics/img/logo/indexlogo@2x.png" alt="Logo">

        好习惯

        使用相对路径是个好习惯（如果可能）。

        如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。


        在 HTML 中使用表情符号

        表情符号（Emoji）是来自 UTF-8 字符集的字符：

        为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。

        从 ASCII 到 UTF-8

        ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

        ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

        ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

        HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

        HTML charset 属性

        为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

        这在 ​<meta>​ 标签中指定：

        <meta charset="UTF-8">

        字符集之间的差异

        下表展示了上述字符集之间的区别：

        NumbASCIIANSI8859UTF-8Description
        32space
        33!!!!exclamation mark
        34""""quotation mark
        35####number sign
        36$$$$dollar sign
        37%%%%percent sign
        38&&&&ampersand
        39''''apostrophe
        40((((left parenthesis
        41))))right parenthesis
        42****asterisk
        43++++plus sign
        44,,,,comma
        45----hyphen-minus
        46....full stop
        47////solidus
        480000digit zero
        491111digit one
        502222digit two
        513333digit three
        524444digit four
        535555digit five
        546666digit six
        557777digit seven
        568888digit eight
        579999digit nine
        58::::colon
        59;;;;semicolon
        60<<<<less-than sign
        61====equals sign
        62>>>>greater-than sign
        63????question mark
        64@@@@commercial at
        65AAAALatin capital letter A
        66BBBBLatin capital letter B
        67CCCCLatin capital letter C
        68DDDDLatin capital letter D
        69EEEELatin capital letter E
        70FFFFLatin capital letter F
        71GGGGLatin capital letter G
        72HHHHLatin capital letter H
        73IIIILatin capital letter I
        74JJJJLatin capital letter J
        75KKKKLatin capital letter K
        76LLLLLatin capital letter L
        77MMMMLatin capital letter M
        78NNNNLatin capital letter N
        79OOOOLatin capital letter O
        80PPPPLatin capital letter P
        81QQQQLatin capital letter Q
        82RRRRLatin capital letter R
        83SSSSLatin capital letter S
        84TTTTLatin capital letter T
        85UUUULatin capital letter U
        86VVVVLatin capital letter V
        87WWWWLatin capital letter W
        88XXXXLatin capital letter X
        89YYYYLatin capital letter Y
        90ZZZZLatin capital letter Z
        91[[[[left square bracket
        92reverse solidus
        93]]]]right square bracket
        94^^^^circumflex accent
        95____low line
        96````grave accent
        97aaaaLatin small letter a
        98bbbbLatin small letter b
        99ccccLatin small letter c
        100ddddLatin small letter d
        101eeeeLatin small letter e
        102ffffLatin small letter f
        103ggggLatin small letter g
        104hhhhLatin small letter h
        105iiiiLatin small letter i
        106jjjjLatin small letter j
        107kkkkLatin small letter k
        108llllLatin small letter l
        109mmmmLatin small letter m
        110nnnnLatin small letter n
        111ooooLatin small letter o
        112ppppLatin small letter p
        113qqqqLatin small letter q
        114rrrrLatin small letter r
        115ssssLatin small letter s
        116ttttLatin small letter t
        117uuuuLatin small letter u
        118vvvvLatin small letter v
        119wwwwLatin small letter w
        120xxxxLatin small letter x
        121yyyyLatin small letter y
        122zzzzLatin small letter z
        123{{{{left curly bracket
        124||||vertical line
        125}}}}right curly bracket
        126~~~~tilde
        127DEL    
        128 €  euro sign
        129 NOT USED
        130 ‚  single low-9 quotation mark
        131 ƒ  Latin small letter f with hook
        132 „  double low-9 quotation mark
        133 …  horizontal ellipsis
        134 †  dagger
        135 ‡  double dagger
        136 ˆ  modifier letter circumflex accent
        137 ‰  per mille sign
        138 Š  Latin capital letter S with caron
        139 ‹  single left-pointing angle quotation mark
        140 Œ  Latin capital ligature OE
        141 NOT USED
        142 Ž  Latin capital letter Z with caron
        143 NOT USED
        144 NOT USED
        145 ‘  left single quotation mark
        146 ’  right single quotation mark
        147 “  left double quotation mark
        148 ”  right double quotation mark
        149 •  bullet
        150 –  en dash
        151 —  em dash
        152 ˜  small tilde
        153 ™  trade mark sign
        154 š  Latin small letter s with caron
        155 ›  single right-pointing angle quotation mark
        156 œ  Latin small ligature oe
        157 NOT USED
        158 ž  Latin small letter z with caron
        159 Ÿ  Latin capital letter Y with diaeresis
        160    no-break space
        161 ¡¡¡inverted exclamation mark
        162 ¢¢¢cent sign
        163 £££pound sign
        164 ¤¤¤currency sign
        165 ¥¥¥yen sign
        166 ¦¦¦broken bar
        167 §§§section sign
        168 ¨¨¨diaeresis
        169 ©©©copyright sign
        170 ªªªfeminine ordinal indicator
        171 «««left-pointing double angle quotation mark
        172 ¬¬¬not sign
        173 ­­­soft hyphen
        174 ®®®registered sign
        175 ¯¯¯macron
        176 °°°degree sign
        177 ±±±plus-minus sign
        178 ²²²superscript two
        179 ³³³superscript three
        180 ´´´acute accent
        181 µµµmicro sign
        182 pilcrow sign
        183 ···middle dot
        184 ¸¸¸cedilla
        185 ¹¹¹superscript one
        186 ºººmasculine ordinal indicator
        187 »»»right-pointing double angle quotation mark
        188 ¼¼¼vulgar fraction one quarter
        189 ½½½vulgar fraction one half
        190 ¾¾¾vulgar fraction three quarters
        191 ¿¿¿inverted question mark
        192 ÀÀÀLatin capital letter A with grave
        193 ÁÁÁLatin capital letter A with acute
        194 ÂÂÂLatin capital letter A with circumflex
        195 ÃÃÃLatin capital letter A with tilde
        196 ÄÄÄLatin capital letter A with diaeresis
        197 ÅÅÅLatin capital letter A with ring above
        198 ÆÆÆLatin capital letter AE
        199 ÇÇÇLatin capital letter C with cedilla
        200 ÈÈÈLatin capital letter E with grave
        201 ÉÉÉLatin capital letter E with acute
        202 ÊÊÊLatin capital letter E with circumflex
        203 ËËËLatin capital letter E with diaeresis
        204 ÌÌÌLatin capital letter I with grave
        205 ÍÍÍLatin capital letter I with acute
        206 ÎÎÎLatin capital letter I with circumflex
        207 ÏÏÏLatin capital letter I with diaeresis
        208 ÐÐÐLatin capital letter Eth
        209 ÑÑÑLatin capital letter N with tilde
        210 ÒÒÒLatin capital letter O with grave
        211 ÓÓÓLatin capital letter O with acute
        212 ÔÔÔLatin capital letter O with circumflex
        213 ÕÕÕLatin capital letter O with tilde
        214 ÖÖÖLatin capital letter O with diaeresis
        215 ×××multiplication sign
        216 ØØØLatin capital letter O with stroke
        217 ÙÙÙLatin capital letter U with grave
        218 ÚÚÚLatin capital letter U with acute
        219 ÛÛÛLatin capital letter U with circumflex
        220 ÜÜÜLatin capital letter U with diaeresis
        221 ÝÝÝLatin capital letter Y with acute
        222 ÞÞÞLatin capital letter Thorn
        223 ßßßLatin small letter sharp s
        224 àààLatin small letter a with grave
        225 áááLatin small letter a with acute
        226 âââLatin small letter a with circumflex
        227 ãããLatin small letter a with tilde
        228 äääLatin small letter a with diaeresis
        229 åååLatin small letter a with ring above
        230 æææLatin small letter ae
        231 çççLatin small letter c with cedilla
        232 èèèLatin small letter e with grave
        233 éééLatin small letter e with acute
        234 êêêLatin small letter e with circumflex
        235 ëëëLatin small letter e with diaeresis
        236 ìììLatin small letter i with grave
        237 íííLatin small letter i with acute
        238 îîîLatin small letter i with circumflex
        239 ïïïLatin small letter i with diaeresis
        240 ðððLatin small letter eth
        241 ñññLatin small letter n with tilde
        242 òòòLatin small letter o with grave
        243 óóóLatin small letter o with acute
        244 ôôôLatin small letter o with circumflex
        245 õõõLatin small letter o with tilde
        246 öööLatin small letter o with diaeresis
        247 ÷÷÷division sign
        248 øøøLatin small letter o with stroke
        249 ùùùLatin small letter u with grave
        250 úúúLatin small letter u with acute
        251 ûûûLatin small letter with circumflex
        252 üüüLatin small letter u with diaeresis
        253 ýýýLatin small letter y with acute
        254 þþþLatin small letter thorn
        255 ÿÿÿLatin small letter y with diaeresis

        ASCII 字符集

        ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

        ASCII 使用 32 到 126 的值表示字母、数字和符号。

        ASCII 不使用 128 到 255 之间的值。

        ANSI 字符集 (Windows-1252)

        对于 0 到 127 的值，ANSI 与 ASCII 相同。

        ANSI 有一组专有的字符，其值从 128 到 159。

        对于 160 到 255 的值，ANSI 与 UTF-8 相同。

        ISO-8859-1 字符集

        对于 0 到 127 的值，8859-1 与 ASCII 相同。

        8859-1 不使用 128 到 159 之间的值。

        对于从 160 到 255 的值，8859-1 与 UTF-8 相同。

        UTF-8 字符集

        对于 0 到 127 的值，UTF-8 与 ASCII 相同。

        UTF-8 不使用 12 8到 159 之间的值。

        对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

        UTF-8 从值 256 继续，包含超过 10000 个不同字符。

        如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

        @charset CSS 规则

        您可以使用 CSS @charset 规则来指定样式表中使用的字符编码：

        实例

        将样式表的编码设置为 Unicode UTF-8：

        @charset "UTF-8";

        一个富有美感的背景会让站点看上去更加高级、更有吸引力。本篇为大家来的是 HTML 背景相关内容。

        背景（Backgrounds）

        <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

        背景颜色（Bgcolor）

        背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

        <body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">

        以上的代码均将背景颜色设置为黑色。

        背景（Background）

        背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

        <body background="clouds.gif"><body background="http://www.w3school.com.cn/clouds.gif">

        URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

        提示：如果你打算使用背景图片，你需要紧记一下几点：

        • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
        • 背景图像是否与页面中的其他图象搭配良好。
        • 背景图像是否与页面中的文字颜色搭配良好。
        • 图像在页面中平铺后，看上去还可以吗？
        • 对文字的注意力被背景图像喧宾夺主了吗？

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

        <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

        应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

        Web 浏览器通过 URL 从 web 服务器请求页面。

        URL 是网页的地址，比如 http://www.51coolma.cn。

        URL 编码

        URL 只能使用 ASCII 字符集来通过因特网进行发送。

        由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

        URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

        URL 不能包含空格。URL 编码通常使用 + 来替换空格。

        亲自试一试

        如果您点击下面的“提交”按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

        试着输入一些字符，然后再次点击提交按钮。

        URL 编码示例

        字符URL 编码
        €%80
        £%A3
        ©%A9
        ®%AE
        À%C0
        Á%C1
        Â%C2
        Ã%C3
        Ä%C4
        Å%C5

        <!DOCTYPE> 声明帮助浏览器正确地显示网页。

        <!DOCTYPE> 声明

        Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

        HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

        <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

        实例

        带有 HTML5 DOCTYPE 的 HTML 文档：

        <!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

        HTML 版本

        从 Web 诞生早期至今，已经发展出多个 HTML 版本：

        版本年份
        HTML1991
        HTML+1993
        HTML 2.01995
        HTML 3.21997
        HTML 4.011999
        XHTML 1.02000
        HTML52012
        XHTML52013

        常用的声明

        HTML5

        <!DOCTYPE html>

        HTML 4.01

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

        XHTML 1.0

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        HTML - XHTML

        XHTML 是以 XML 格式编写的 HTML。

        什么是 XHTML?

        • XHTML 指的是可扩展超文本标记语言

        • XHTML 与 HTML 4.01 几乎是相同的

        • XHTML 是更严格更纯净的 HTML 版本

        • XHTML 是以 XML 应用的方式定义的 HTML

        • XHTML 是 2001 年 1 月发布的 W3C 推荐标准

        • XHTML 是大小写敏感的，标准的 XHTML 标签应该使用小写。

        • XHTML 得到所有主流浏览器的支持

        为什么使用 XHTML?

        因特网上的很多页面包含了"糟糕"的 HTML。

        如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

        <html>        

        <head>       

        <title>This is bad HTML</title>       

        <body>      

        <h1>Bad HTML        

        <p>This is a paragraph        

        </body>

        XML 是一种必须正确标记且格式良好的标记语言。

        如果希望学习 XML，请阅读我们的 XML 教程。

        今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

        所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

        与 HTML 相比最重要的区别：

        文档结构

        • XHTML DOCTYPE 是强制性的

        • <html> 中的 XML namespace 属性是强制性的

        • <html>、<head>、<title> 以及 <body> 也是强制性的

        元素语法

        • XHTML 元素必须正确嵌套

        • XHTML 元素必须始终关闭

        • XHTML 元素必须小写

        • XHTML 文档必须有一个根元素

        属性语法

        • XHTML 属性必须使用小写

        • XHTML 属性值必须用引号包围

        • XHTML 属性最小化也是禁止的

        <!DOCTYPE ....>是强制性的

        XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

        您可以在 W3Cschool 的标签参考手册中找到完整的 XHTML 文档类型。

        <html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

        下面的例子展示了带有最少的必需标签的 XHTML 文档：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">               

        <html xmlns="http://www.w3.org/1999/xhtml">     

                  

        <head>       

        <title>Title of document</title>        

        </head>   

                    

        <body>     

        ......        

        </body>  

                     

        </html>


        XHTML 元素必须合理嵌套

        在 HTML 中，一些元素可以不互相嵌套，像这样：

        <b><i>This text is bold and italic</b></i>

        在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

        <b><i>This text is bold and italic</i></b>


        XHTML 元素必须有关闭标签

        错误示例：

        <p>This is a paragraph     

        <p>This is another paragraph

        正确示例：

        <p>This is a paragraph</p>        

        <p>This is another paragraph</p>


        空元素必须包含关闭标签

        错误示例：

        A break: <br>

        A horizontal rule: <hr>        

        An image: <img src="happy.gif" alt="Happy face">

        正确示例：

        A break: <br />        

        A horizontal rule: <hr />        

        An image: <img src="happy.gif" alt="Happy face" />


        XHTML 元素必须是小写

        错误示例:

        <BODY>        

        <P>This is a paragraph</P>        

        </BODY>

        正确示例：

        <body>        

        <p>This is a paragraph</p>        

        </body>


        属性名称必须是小写

        错误示例：

        <table WIDTH="100%">

        正确示例:

        <table width="100%">


        属性值必须有引号

        错误示例：

        <table width=100%>

        正确示例：

        <table width="100%">


        不允许属性简写

        错误示例：

        <input checked>        

        <input readonly>        

        <input disabled>        

        <option selected>

        正确示例：

        <input checked="checked">        

        <input readonly="readonly">        

        <input disabled="disabled">        

        <option selected="selected">


        如何将 HTML 转换为 XHTML

        1. 添加一个 XHTML <!DOCTYPE> 到你的网页中

        2. 添加 xmlns 属性添加到每个页面的html元素中。

        3. 改变所有的元素为小写

        4. 关闭所有的空元素

        5. 修改所有的属性名称为小写

        6. 所有属性值添加引号

        使用 W3C 验证器来测试你的 XHTML

        尝试一下 »

        XHTML 元素是以 XML 格式编写的 HTML 元素。

        XHTML 元素 - 语法规则

        • XHTML 元素必须正确嵌套
        • XHTML 元素必须始终关闭
        • XHTML 元素必须小写
        • XHTML 文档必须有一个根元素

        XHTML 元素必须正确嵌套

        在 HTML 中，某些元素可以不正确地彼此嵌套在一起，就像这样：

        <b><i>This text is bold and italic</b></i>

        在 XHTML 中，所有元素必须正确地彼此嵌套，就像这样：

        <b><i>This text is bold and italic</i></b>

        XHTML 元素必须始终关闭

        这是错误的：

        <p>This is a paragraph<p>This is another paragraph

        这是正确的：

        <p>This is a paragraph</p><p>This is another paragraph</p>

        空元素也必须关闭

        这是错误的：

        A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">

        这是正确的：

        A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />

        XHTML 元素必须小写

        这是错误的：

        <BODY><P>This is a paragraph</P></BODY>

        这是正确的：

        <body><p>This is a paragraph</p></body>

        XHTML 属性是以 XML 格式编写的 HTML 属性。

        XHTML 属性 - 语法规则

        • XHTML 属性必须使用小写
        • XHTML 属性值必须用引号包围
        • XHTML 属性最小化也是禁止的

        XHTML 属性必须使用小写

        这是错误的：

        <table WIDTH="100%">

        这是正确的：

        <table width="100%">

        XHTML 属性值必须用引号包围

        这是错误的：

        <table width=100%>

        这是正确的：

        <table width="100%">

        禁止属性简写

        这是错误的：

        <input checked><input readonly><input disabled><option selected>

        这是正确的：

        <input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" />

        HTML 多媒体

        Web 上的多媒体指的是音效、音乐、视频和动画。

        现代网络浏览器已支持很多多媒体格式。

        什么是多媒体？

        多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

        在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

        在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。

        浏览器支持

        第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。

        不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。

        您将在下面的章节学习更多有关插件的知识。

        多媒体格式

        格式 多媒体元素（比如视频和音频）存储于媒体文件中。

        确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

        多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

        视频格式

        pic_videoMP4是互联网推出新的视频格式。

        YouTube 推荐使用 MP4 。

        Flash Players 支持 MP4

        HTML5 支持 MP4。
        格式文件描述
        AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
        WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
        MPEG
        • .mpg
        • .mpeg
        		MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
        QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
        RealVideo
        • .rm
        • .ram
        		RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
        Flash
        • .swf
        • .flv
        		Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
        Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

        Note最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。

        声音格式

        MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。

        格式文件描述
        MIDI
        • .mid
        • .midi

        MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。

        点击这里播放 The Beatles。

        因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。

        RealAudio
        • .rm
        • .ram
        		RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
        Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
        WMA.wmaWMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
        MP3
        • .mp3
        • .mpga
        		MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

        NoteHTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。

        HTML 插件

        插件的功能是扩展 HTML 浏览器的功能。

        HTML 助手（插件）

        辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

        辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

        使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

        插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。 

        大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

        Note我们可以使用 <video> 和 <audio> 标签来显示视频和音频

        <object> 元素

        所有主流浏览器都支持 <object> 标签。

        <object> 元素定义了在 HTML 文档中嵌入的对象。

        <object> 元素具有局部属性:data，type，height，width，usemap，name，form。

        该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

        实例

        <object width="400" height="50" data="bookmark.swf"></object>

        尝试一下 »

        <object> 元素同样可用于包含HTML文件：

        实例

        <object width="100%" height="500px" data="snippet.html"></object>

        尝试一下 »

        或者插入一张图片:

        实例

        <object data="logo.png"></object>

        尝试一下 »

        <embed> 元素

        所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。

        <embed> 元素表示一个 HTML Embed 对象 。

        <embed> 元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。

        实例

        <embed width="400" height="50" src="bookmark.swf">

        尝试一下 »

        Note注意 <embed> 元素没有关闭标签。 不能使用替代文本。

        <embed> 元素同样可用于包含 HTML 文件：

        实例

        <embed width="100%" height="500px" src="snippet.html">

        尝试一下 »

        或者插入一张图片:

        Example

        <embed src="logo.png">

        尝试一下 »

        HTML 音频(Audio)

        声音在HTML中可以以不同的方式播放.

        问题以及解决方法

        在 HTML 中播放音频并不容易！

        您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

        在本章，W3Cschool为您总结了问题和解决方法。

        您可以参考本站的 HTML 参考手册的 <audio> 标签一节来获得更多详细信息！

        使用插件

        浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

        插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上. 

        这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

        使用 <embed> 元素

        <embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

        下面的代码片段能够显示嵌入网页中的 MP3 文件：

        实例

        <embed height="50" width="100" src="horse.mp3">

        尝试一下 »

        问题:

        • <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。

        • 不同的浏览器对音频格式的支持也不同。

        • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

        • 如果用户的计算机未安装插件，无法播放音频。

        • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

        使用 <object> 元素

        <object> 标签也可以定义外部（非 HTML）内容的容器。

        下面的代码片段能够显示嵌入网页中的 MP3 文件：

        实例

        <object height="50" width="100" data="horse.mp3"></object>

        尝试一下 »

        问题:

        • 不同的浏览器对音频格式的支持也不同。

        • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

        • 如果用户的计算机未安装插件，无法播放音频。

        • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

        使用 HTML5 <audio> 元素

        HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

        The <audio> element works in all modern browsers.

        浏览器兼容

        格中的数字表示支持该属性的第一个浏览器版本号。


        以下我们将使用 <audio> 标签来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

        实例

        <audio controls>
          <source src="horse.mp3" type="audio/mpeg">
          <source src="horse.ogg" type="audio/ogg">
          Your browser does not support this audio format.
        </audio>

        尝试一下 »

        问题:

        • <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。

        • 您必须把音频文件转换为不同的格式。

        • <audio> 元素在老式浏览器中不起作用。

        最好的 HTML 解决方法

        下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

        实例

        <audio controls height="100" width="100">
          <source src="horse.mp3" type="audio/mpeg">
          <source src="horse.ogg" type="audio/ogg">
          <embed height="50" width="100" src="horse.mp3">
        </audio>

        尝试一下 »

        问题:

        • 您必须把音频转换为不同的格式。

        • <embed> 元素无法回退来显示错误消息。

        雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

        使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

        雅虎播放器可以播放 MP3 以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的 HTML 页面制作成专业的播放列表：

        实例

        <a href="horse.mp3">Play Sound</a>

        <script src="http://mediaplayer.yahoo.com/latest" rel="external nofollow" rel="external nofollow" ></script>

        尝试一下 »

        如果你要使用它，您需要把这段 JavaScript 代码插入网页底部：

        <script src="http://mediaplayer.yahoo.com/latest" rel="external nofollow" rel="external nofollow" ></script>

        然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

        <a href="song1.mp3">Play Song 1</a>
        <a href="song2.wav">Play Song 2</a>
        ...
        ...

        雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

        请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

        使用超链接

        如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

        以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

        实例

        <a href="horse.mp3">Play the sound</a>

        尝试一下 »


        内联的声音说明

        当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

        如果您打算在 Web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

        我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

        HTML 多媒体标签

        New : HTML5 新标签

        标签描述
        <embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
        <object>定义内嵌对象。
        <param>定义对象的参数。
        <audio>New定义了声音内容
        <video>New定义一个视频或者影片
        <source>New定义了media元素的多媒体资源(<video> 和 <audio>)
        <track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)


        HTML 视频（Videos）

        在 HTML 中播放视频的方法有很多种。

        可以使用 <embed> 标签、<object> 标签以及 <video> 标签（HTML 5中启用）。

        HTML视频（Videos）播放

        实例

        <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          <source src="movie.webm" type="video/webm">
          <object data="movie.mp4" width="320" height="240">
            <embed src="movie.swf" width="320" height="240">
          </object>
        </video>

        尝试一下 »

        问题以及解决方法

        在 HTML 中播放视频并不容易！

        您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

        在本章，W3CSchool 为您总结了问题和解决方法。

        使用 <embed> 标签

        <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

        下面的 HTML 代码显示嵌入网页的 Flash 视频：

        实例

        <embed src="intro.swf" height="200" width="200">

        尝试一下 »

        问题

        • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
        • 如果浏览器不支持 Flash，那么视频将无法播放
        • iPad 和 iPhone 不能显示 Flash 视频。
        • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

        使用 <object> 标签

        <object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

        下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

        实例

        <object data="intro.swf" height="200" width="200"></object>

        尝试一下 »

        问题:

        • 如果浏览器不支持 Flash，将无法播放视频。
        • iPad 和 iPhone 不能显示 Flash 视频。
        • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

        使用 HTML5 <video> 元素

        HTML5 <video> 标签定义了一个视频或者影片.

        <video> 元素在所有现代浏览器中都支持。

        以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

        实例

        <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          <source src="movie.webm" type="video/webm">
        Your browser does not support the video tag.
        </video>

        尝试一下 »

        RemarkTip: 

        ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
        mp4：带有 H.264 视频编码和 AAC 音频编码的 mp4 文件 
        webm：带有 VP8 视频编码和 Vorbis 音频编码的 webm 文件 

        问题:

        • 您必须把视频转换为很多不同的格式。
        • <video> 元素在老式浏览器中无效。

        最好的 HTML 解决方法

        以下实例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

        HTML 5 + <object> + <embed>

        <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          <source src="movie.webm" type="video/webm">
          <object data="movie.mp4" width="320" height="240">
            <embed src="movie.swf" width="320" height="240">
          </object>
        </video>

        尝试一下 »

        问题:

        • 您必须把视频转换为很多不同的格式

        优酷解决方案

        在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

        如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

        <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" rel="external nofollow"  width="480" height="400" type="application/x-shockwave-flash"> </embed>

        使用超链接

        如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

        以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

        实例

        <a href="intro.swf">Play a video file</a>

        尝试一下 »

        关于内联视频的说明

        当视频被包含在网页中时，它被称为内联视频。

        如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

        同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

        我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

        HTML 多媒体标签

        New : HTML5新标签.

        标签描述
        <embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
        <object>定义内嵌对象。
        <param>定义对象的参数。
        <audio>New定义了声音内容
        <video>New定义一个视频或者影片
        <source>New定义了media元素的多媒体资源(<video> 和 <audio>)
        <track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)


        HTML 实例

        HTML 基础

        非常简单的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> 标签

        实例解析

        您可以通过 W3Cschool 的测验程序来测试您的 HTML 技能。

        关于本测验

        本测验包含 20 道题，每道题的最长答题时间是 20 分钟（这是由于每个 session 的默认有效时间是20钟）。

        本测验是非官方的测试，它仅仅提供了一个了解您对 HTML 的掌握程度的工具。

        测验会被记分

        每道题的分值是 1 分。在您完成全部的 20 道题之后，系统会为您的测验打分，并提供您做错的题目的正确答案。其中，绿色为正确答案，而红色为错误答案。

        现在就开始测验！祝您好运。


        HTML5 & CSS 课程列表

        为了帮助广大学习者，做到学以致用，我们为大家准备了大量的 HTML 编程实战题，通过这些实战题，您可以一边学习一边操作，来达到巩固学习的作用。

        请选择你喜欢的实战提，开始进行编程闯关。

        HTML简介

        HTML是用于创建网页的语言。我们通过使用HTML标记标签创建html文档来创建网页。HTML代表超文本标记语言。HTML是一种标记语言，它具有标记标签的集合。

        HTML标签是由尖括号括起来的词，如<html>， <body>。标签通常成对出现，例如<html>和</html>。

        一对中的第一个标签是开始标签;第二个标签是结束标签。在上面的示例中，<html>是开始标签，而</html>是结束标签。

        我们还可以将开始标签称为起始标签，结束标签称为闭合标签。


        PHP Date() 函数

        PHP date() 函数用于格式化时间/日期。

        date() 函数返回将整数timestamp按照给定的格式字串而产生的字符串。

        PHP Date() 函数

        PHP date() 函数可把时间戳格式化为可读性更好的日期和时间。

        Tip时间戳是一个字符序列，表示一定的事件发生的日期/时间。

        语法

        string date ( string $format [, int $timestamp ] )


        参数描述
        format必需。规定时间戳的格式。
        timestamp可选。规定时间戳。默认是当前的日期和时间。


        PHP Date() - 格式化日期

        date() 函数的第一个必需参数 format 规定了如何格式化日期/时间。

        这里列出了一些可用的字符：

        • d - 代表月中的天 (01 - 31)

        • m - 代表月 (01 - 12)

        • Y - 代表年 (四位数)

        如需了解 format 参数中可用的所有字符列表，请查阅我们的 PHP Date 参考手册，date() 函数。

        可以在字母之间插入其他字符，比如 "/"、"." 或者 "-"，这样就可以增加附加格式了：

        <?php echo date("Y/m/d") . "<br>"; echo date("Y.m.d") . "<br>"; echo date("Y-m-d"); ?>

        上面代码的输出如下所示：

         2009/05/11 2009.05.11 2009-05-11

        格式字串可以识别以下 format 参数的字符串：

        format 字符说明返回值例子
        日------
        d月份中的第几天，有前导零的 2 位数字01 到 31
        D星期中的第几天，文本表示，3 个字母Mon 到 Sun
        j月份中的第几天，没有前导零1 到 31
        l（"L"的小写字母）星期几，完整的文本格式Sunday 到 Saturday
        NISO-8601 格式数字表示的星期中的第几天（PHP 5.1.0 新加）1（表示星期一）到 7（表示星期天）
        S每月天数后面的英文后缀，2 个字符st，nd，rd 或者 th。可以和 j 一起用
        w星期中的第几天，数字表示0（表示星期天）到 6（表示星期六）
        z年份中的第几天0 到 365
        星期------
        WISO-8601 格式年份中的第几周，每周从星期一开始（PHP 4.1.0 新加的）例如：42（当年的第 42 周）
        月------
        F月份，完整的文本格式，例如 January 或者 MarchJanuary 到 December
        m数字表示的月份，有前导零01 到 12
        M三个字母缩写表示的月份Jan 到 Dec
        n数字表示的月份，没有前导零1 到 12
        t给定月份所应有的天数28 到 31
        年------
        L是否为闰年如果是闰年为 1，否则为 0
        oISO-8601 格式年份数字。这和 Y 的值相同，只除了如果 ISO 的星期数（W）属于前一年或下一年，则用那一年。（PHP 5.1.0 新加）Examples: 1999 or 2003
        Y4 位数字完整表示的年份例如：1999 或 2003
        y2 位数字表示的年份例如：99 或 03
        时间------
        a小写的上午和下午值am 或 pm
        A大写的上午和下午值AM 或 PM
        BSwatch Internet 标准时000 到 999
        g小时，12 小时格式，没有前导零1 到 12
        G小时，24 小时格式，没有前导零0 到 23
        h小时，12 小时格式，有前导零01 到 12
        H小时，24 小时格式，有前导零00 到 23
        i有前导零的分钟数00 到 59>
        s秒数，有前导零00 到 59>
        u毫秒 （PHP 5.2.2 新加）。需要注意的是 date() 函数总是返回000000 因为它只接受 integer 参数， 而 DateTime::format() 才支持毫秒。示例: 654321
        时区------
        e时区标识（PHP 5.1.0 新加）例如：UTC，GMT，Atlantic/Azores
        I是否为夏令时如果是夏令时为 1，否则为 0
        O与格林威治时间相差的小时数例如：+0200
        P与格林威治时间（GMT）的差别，小时和分钟之间有冒号分隔（PHP 5.1.3 新加）例如：+02:00
        T本机所在的时区例如：EST，MDT（【译者注】在 Windows 下为完整文本格式，例如"Eastern Standard Time"，中文版会显示"中国标准时间"）。
        Z时差偏移量的秒数。UTC 西边的时区偏移量总是负的，UTC 东边的时区偏移量总是正的。-43200 到 43200
        完整的日期／时间------
        cISO 8601 格式的日期（PHP 5 新加）2004-02-12T15:19:21+00:00
        rRFC 822 格式的日期例如：Thu, 21 Dec 2000 16:01:07 +0200
        U从 Unix 纪元（January 1 1970 00:00:00 GMT）开始至今的秒数参见 time()


        PHP Date() - 添加时间戳

        date() 函数的第二个可选参数 timestamp 规定了一个时间戳。如果您没有提供时间戳，将使用当前的日期和时间。

        mktime() 函数可为指定的日期返回 Unix 时间戳。

        Unix 时间戳包含了 Unix 纪元（1970-01-01 00:00:00 GMT）和指定时间之间的秒数。

        mktime() 语法

        mktime(hour,minute,second,month,day,year,is_dst)

        如需获得某一天的时间戳，我们只要设置 mktime() 函数的 day 参数就可以了：

        <?php        $tomorrow = mktime(0,0,0,date("m"),date("d")+1,date("Y"));        echo "Tomorrow is ".date("Y/m/d", $tomorrow);        ?>

        上面代码的输出如下所示：

        Tomorrow is 2009/05/12


        完整的 PHP Date 参考手册

        如需查看所有日期函数的完整参考手册，请访问我们的 完整的 PHP Date 参考手册。

        该参考手册提供了每个函数的简要描述和应用实例！

        在下一节内容中，我们将继续了解 PHP date() 函数。


            Photoshop 是图像处理领域中的佼佼者，它的霸主地位是不容置疑的，尤其是在个人家用电脑领域。同时，Photoshop也是一个不折不扣的“硬件杀手”，在我 64MB内存＋Pentium Ⅱ450＋7200转硬盘的电脑上处理稍微大一点的图像就象老牛拉破车一样，实在是……因为对Photoshop的衷爱，我不肯放弃它，但却也难以忍受这种痛苦。经过大量资料的查阅和实践，我发现要想让Photoshop跑起来，关键不仅仅是硬件配置的高低，还要看设置。同样的硬件配置，优化的设置至少可以获得50%甚至更高的性能提升，这种对比尤其表现在处理较大的图像时。下面，看看我是怎么来优化Photoshop的。

        　

        如何提高Photoshop的性能

        　程序的“性能”是指程序完成某些操作需要的时间，如打开文件、应用滤镜效果或编辑图像之后重画屏幕。首先，Photoshop的性能很大程度上取决于你的硬件配置，尤其是它可用的内存数量；其次，对其影响很大的因素还有软件、虚拟内存以及文件的大小和复杂程度等设置。不过如果你不太缺钱的话，配置较多的内存可以使Photoshop性能大幅度提升。而我主要是从软件设置和操作方面对Photoshop进行了优化。

         

        一、确定Photoshop需要的内存数量

        　图像处理对内存的需求量远远超过其它应用程序，也远远超过了人们的估计。知道以300dpi的分辨率扫描一幅A4幅面的32位RGB图像，需要多大空间吗？告诉你，如果存储为BMP格式的话，24.9MB！这还不算什么，更令人吃惊的还在后面……

        　图像文件在Photoshop中打开后的大小并不同于在Windows浏览器中列出的文件的大小。例如，由于许多文件格式使用了压缩算法，打开的时候必须解压，这样就导致了打开后文件通常比原来大许多倍；如果你使用了许多图层和通道，则图像需要更多的内存。一般来说，你至少得为Photoshop提供所处理的图像文件大小3-5倍的可用内存，再加上5-10MB的额外量，这样才能基本发挥Photoshop的性能。

        　

        如何确定你的图像处理软件需要多大内存呢？

        1.启动Photoshop 5.0，并打开一幅图像（以Photo5.PSD为例）；
        2.单击“图像”菜单，选择“图像大小”，并将图片分辨率更改为“150像素/英寸”；
        3.将鼠标移到窗口左下方的箭头上，按住鼠标按钮；这时系统会弹出对话窗。
        4.在对话窗中选择“文档大小”，这时在状态栏上我们可以看到“（C）文档: 6.02M/23.5M”，其中前者为图像文件大小，后者为打开后的大小。

        5. 重复（3）的步骤并选择“暂存盘大小”。这时状态栏上显示“（C）挂网：64.6M/25.4M”。右边的数字表示系统分配给Photoshop处理图像的可用内存，此数字等于Photoshop可用的内存量减去运行Photoshop所需要的内存量。左边的数字则是Photoshop处理该图像需要的总内存量，当左边的数字大于右边的数字时，Photoshop除了使用内存外，还必须使用暂存盘。这时，你也许会觉察到Photoshop性能极大降低。

        6.重复（3）步骤并选择“效率”，这里将显示一个百分数，该数值显示低于100%则表示Photoshop正在使用暂存盘，引起处理性能下降是在所
        难免的。

         

        　从上面我们可以看出，仅仅是处理对一幅图像进行150dpi的取样（150dpi几乎是目前打印的最低要求），Photoshop竟然需要65M内存，这里还不包括操作系统和其他应用程序占用的内存。如果是将此处的分辨率更改为300dpi，需要的总内存数将会达到176M。为计算机添加如此多的内存显然是不太现实的。其实，除了添加物理内存，我们还可以通过让Photoshop需要更小内存和为Photoshop分配更多可用内存的办法来提高图像处理的速度。

         

        二、让Photoshop使用更小的内存

        　我们来举个例子，同样打开Photo5.PSD图像，先单击“图层”选取“合并图层”选项，然后再将其分辨率更改为150dpi。再按上面的步骤查看“文件”多少和“暂存盘大小”，什么？！该数值变为了 “6.02M/12.3M”和“36.7/25.4M”。处理同样一幅图像需要的总内存数量竟然减少了近1倍。这岂不意味着通过一个简单的优化步骤，你就可以在一定的内存上获得两倍内存容量的性能，这确实让人振奋。

        　为什么会出现这种情况呢？让我们再打开原始的Photo5.PSD图像，你可以看到它包含有较复杂的图层信息。Photoshop必须记录每一个图层的图像信息以及这些图层之间的关系等信息，这些信息需要占用大量的内存。合并图层后，Photoshop只需要记录一个图层的图像信息，所以需要的内存量也就大大减少。

         

        　哪些操作和信息会导致Photoshop需要更多的内存呢？主要有下面几个方面：

        1.像素尺寸
        　像素尺寸即位图图像高度和宽度的像素数目。屏幕上图像的显示尺寸是由图像的像素尺寸加上显示器的大小和设置确定的，图像的文件大小与其像素尺寸成正比。如果你要制作一张墙纸，只要根据你设定的显示器分辨率制作一个1024×768或800×600的图像就够了，更大的像素尺寸并不会获得图像质量的提高，只能使处理速度和计算机启动速度更慢。

        2.图像分辨率
        　图像分辨率即图像中每单位打印长度显示的像素数目，通常用像素／英寸 (dpi)表示。高分辨率的图像比相同打印尺寸的低分辨率图像包含较多的像素，因而像素点较小。例如，72dpi分辨率的1×1英寸图像包含总共5184 像素（72像素宽×72像素高＝5184）；同样 1×1英寸而分辨率为300dpi的图像则包含总共90000像素。图像的分辨率每增加一倍，图像的文件大小就会增大4倍。所以在对图像进行扫描和处理之前，首先要确定图像的最终发布媒介。

         

        　如果制作的图像用于网上显示，图像分辨率只需满足典型的显示器分辨率（72或96dpi）。显示器分辨率即指显示器上每单位长度显示的像素或点的数目，通常以点／英寸（dpi）为计量单位。显示器分辨率取决于显示器大小加上其像素设置。PC显示器的典型分辨率约为96dpi，MacOS显示器的典型分辨率约为72dpi。在Photoshop中，图像像素被直接转换成显示器像素，这意味着当图像分辨率高于显示器分辨率时，图像在屏幕上的显示比指定的打印尺寸大。例如，当在72dpi显示器上显示1×1英寸、144dpi的图像时，它会显示在屏幕上的2×2英寸区域内。因为显示器只能显示72像素／英寸，它需要2英寸才能显示组成图像一个边的144像素。因此，使用72dpi（或96dpi）以上的分辨率制作显示图像是完全没有必要的，它只会导致Photoshop性能的下降。

         

        　而对于打印图像则不同了，因为较高分辨率的图像使用更多的像素表示每单位区域，打印时它们通常比较低分辨率的图像重现更详细和更精细的颜色转变。因此，制作打印图像则就需要根据所用打印机的分辨率来确定图像分辨率，使用太低的分辨率打印图像会导致像素化──输出较大、显示粗糙的像素；使用太高的分辨率（像素比输出设备能够产生的还要小）会增加文件体积，并降低图像的打印速度。如何确定打印机分辨率和图像分辨率的关系呢？

         

        　对于照排机或激光打印机产生的每英寸的油墨点数（dpi），使用与打印机分辨率成正比（但不相同）的图像分辨率可以获得最佳效果。大多数激光打印机的输出分辨率为300dpi到600dpi，但对72dpi到 150dpi的图像打印效果较好。高档照排机能够以1200dpi甚至更高精度打印，对200dpi到300dpi的图像能产生较好的效果。

         

        　使用合适的分辨率来制作图像，我们可以取得最小的文件，从而使Photoshop需要的总内存数量大幅度减少，并大大提高其处理性能。

        3.图像颜色模式

        　在Photoshop中，颜色模式决定用来显示和打印Photoshop文档的色彩模型。Photoshop的颜色模式以建立好的描述和重现色彩的模型为基础。常见的模型包括HSB（表示色相、饱和度、亮度）、RGB（表示红、绿、蓝）、CMYK（表示青、洋红、黄、黑）、以及 CIEL*a*b*。Photoshop也包括为特别颜色输出的模式，比如索引颜色和双色调。除确定图像中能显示的颜色数之外，颜色模式还影响图像的通道数和文件大小。

        　Photoshop主要有8种颜色模式：

        　位图模式：该模式下图像由1位／像素的颜色（黑或白）组成，它所要求的磁盘空间是众多模式中最少的。

        　索引颜色模式：该模式下图像是单通道图像（8位／像素），使用包含256种颜色的颜色查照表。它要求的磁盘空间比较小，但只能应用有限的编辑。

        　灰度模式：该模式下图像由8位／像素的信息组成，并使用256级的灰色来模拟颜色的层次。

        　RGB模式：该模式下图像使用3种颜色在屏幕上重现多达1670万种颜色。RGB图像是3通道图像，所以它们包含24（8×3）位／像素。

        　双色调模式。该模式主要用于单色调、双色调、三色调和四色调，这些图像是8位／像素的灰度、单通道图像。
        CMYK模式：该模式图像由用于打印分色的4种颜色组成。它们是四通道图像，包含32（8×4）位／像素。

        　多通道模式：该模式下图像为8位／像素，主要并用于特殊打印用途。

        　Lab模式：该模式下图像使用3种分量表示颜色，它们是包含24（8×3）位／像素的3通道图像。
        同样的图像在不同的图像模式下所需要的磁盘空间是不同的

        　有了这些知识，你就可以根据需要来选择适合的颜色模式。如果在黑白的激光打印机上打印图像，那灰度模式可以获得更小的文件；如果要制作显示图像，RGB模式可以提供最佳的色彩效果；如果用于打印图像的打印机支持CMYK颜色模式，CMYK模式可以让你获得最佳的色彩还原效果；如果你准备图像用于分色，打印图像之前在RGB模式中处理也是不错的主意，因为它的图像大小约为CMYK图像的75%……

        4.图层和通道
        　
        　除了图像分辨率、颜色模式等之外，图像中的图层数和通道数也能在很大程度上增加文件大小。

         

        　决定图像文档大小的因素很多，状态栏中显示的“文档大小”，左边的数字代表图像拼合后的大小。打印文件时发送至打印机的数据量取决于文件是以二进制还是 ASCII发送。二进制文件通常是左边列出的大小，而ASCII文件可能是3-5倍大。其它因素，比如预览选项、路径、文件简介和磁盘类型，也能增加磁盘上文件的大小。

         

        　给图像增加不透明图层会增加其文件大小。为了节约硬盘空间，你可以删除图层、合并两个或多个图层或者将图像中的所有图层拼合为一个图层。


        什么是遍历？

        jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

        下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

        jQuery Dimensions

        图示解析：

        • <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
        • <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
        • 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
        • <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
        • 两个 <li> 元素是同胞（拥有相同的父元素）。
        • 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
        • <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

        lamp 祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

        遍历 DOM

        jQuery 提供了多种遍历 DOM 的方法。

        遍历方法中最大的种类是树遍历（tree-traversal）。

        下一章会讲解如何在 DOM 树中向上、下以及同级移动。


        　　在文档编辑过程中，用户经常会使用复制和粘贴功能，有时复制次数过多后，需要查看或删除剪贴板的内容，如何操作呢？
        　　执行“编辑”菜单上的“Office 剪贴板”命令，在弹出的对话框中列出了剪贴板中的所有内容，用户可以选择单个删除或者全部清空，如图1.8.37。

        blob.png
        图1.8.37 

        HTML中如何键入空格

        • 一个空格的键入

          在 html 网页中一个空格，我们可以键入“空格”键即可实现。

        • 多个 html 空格字符

          如果在 html 中想实现多个空格间隙，如果是键入多个“空格”键，但最终也只显示一个空格间隙。这个时候我们就需要真正的空格字符代码 &nbsp; 了。


        代码示例：

        实例

        学编程上51coolma&nbsp;学编程上51coolma&nbsp;&nbsp;学编程上51coolma&nbsp;
        &nbsp;&nbsp;

        尝试一下 »


        HTML中的空格


        HTML空格的多种转义字符

        • == 普通的英文半角空格 
        • == == == no-break space （普通的英文半角空格但不换行） 
        • == 中文全角空格 （一个中文宽度） 
        • ==   == en空格 （半个中文宽度）
        • ==   == em空格 （一个中文宽度） 
        • == 四分之一em空格 （四分之一中文宽度） 

        相比平时的空格（ ），nbsp 拥有不间断（non-breaking）特性。即连续的 nbsp 会在同一行内显示。即使有100个连续的 nbsp，浏览器也不会把它们拆成两行。

        如何用 JS 动态给 HTML 添加空格

        前端项目中有时需要动态用 JS 添加空格，例如为了照顾 CSS 的样式或者为了照顾特殊效果的实现。只要用下面这种方法就好了。
        HTML:

        如果你不单单想让div 之间是 null，而是想动态添加空格的话，这样(jquery)

        $("#id").innerHTML += " ";

        使用 HTML（超文本标记语言）添加段落间距
        如果你希望输入的文本形成一个段落，那么在段落前插入 <p> ，在段落内句与句之间插入 <p> 来分割句子。

        实例

        51coolma简介

        51coolma.cn注册并建站于2009年8月，是国内较早以w3c标准为教程材料的的技术在线教程类网站之一，后来经过原站长多年经营，成为广为人知的51coolma在线教程网站，2016年开始公司化运作。


        网站主要为初学者提供入门的学习内容和日常技术资料查询服务。


        为了能更好的服务大家，本站中提供了大量的在线实例，通过实例，您可以更好地学习如何建站。


        并且我们会根据当前互联网的变化实时更新内容。


        对于我们网站及内容如有不足的地方，欢迎广大技术爱好者在本站留言提供意见、建议。




        尝试一下 »



        HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网的时候，如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的，程序猿们需要掌握一些必须知道的 HTML 常用代码，因为只有熟悉掌握了常用的 HTML 代码，程序猿们在编写网页的时候才可以做到流畅美观，用细腻的思维和创意的细节效果打动并留住网页浏览者。


        HTML+CSS 代码

        文本设置

         font-size 字号大小
         font-style 字体格式
         font-weight  字体粗细
         color 文本颜色

        提示:注意使用网页安全色.

        超链接设置 

         text-decoration 参数
         underline 为文字加下划线
         overline 为文字加上划线
         line-through 为文字加删除线
         blink 使文字闪烁
         none 不显示上述任何效果

        背景 

         background-color 设置背景色 
         背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。
         背景图片重复 background-repeat: 参数 
         参数取值范围  
         no-repeat 不重复平铺背景图片 
         repeat-x 使图片只在水平方向上平铺 
         repeat-y 使图片只在垂直方向上平铺 如果不指定背景图片重复属性，浏览器默认的是背景图片向水平和垂直两个方向平铺
         背景图片固定 background-attachment: 参数 
         参数取值范围 fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
        区块
         单词间距  word-spacing
         字母间距  letter-spacing
         文本对齐  text-align
         参数的取值  left：左对齐
         right：右对齐
        justify：相对左右两端对齐
         垂直对齐  vertical-align
         参数  top：顶对齐
         bottom：底对齐
        text-top：相对文本顶对齐
        text-bottom：相对文本底对齐
         baseline：基准线对齐
        middle：中心对齐
        sub：以下标的形式显示
        super：以上标的形式显示
         文本缩进  text-indent: 缩进距离
         显示样式 display block：块级元素，在对象前后都换行
         inline：在对象前后都不换行
        list-item：在对象前后都换行，增加了项目符号 
        none：无显示



        方框

         height高度 
         width 宽度 
         padding 内边距 
         margin 外边距 
         float（浮动）可以让块级元素在一行中排列，例如横向菜单。
         clear 清除浮动

        边框

         样式border style none：无边框  
        dotted：边框为点线 
        dashed：边框为长短线 
        solid：边框为实线 
        double：边框为双线 
        宽度 border width
        颜色 border color

        列表

         list-style-type列表样式 不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示

        鼠标

         cursor鼠标形状参数  style="cursor:hand" 　　　　　手形 
        style="cursor:crosshair" 　　十字形 
        style="cursor:text" 　　　　　文本形 
        style="cursor:wait" 　　　　　沙漏形 
        style="cursor:move" 　　　　十字箭头形： 
        style="cursor:help" 　　　　　问号形 
        style="cursor:e-resize" 　　　右箭头形 
        style="cursor:n-resize" 　　　上箭头形 
        style="cursor:nw-resize" 　　左上箭头形 
        style="cursor:w-resize" 　　　左箭头形 
        style="cursor:s-resize" 　　　下箭头形  
        style="cursor:se-resize" 　　右下箭头形  
        style="cursor:sw-resize" 　　左下箭头形 

        HTML常用代码之：结构性定义

         文件类型 放在档案的开头与结尾<html></html>
         文件主题 必须放在「文头」区块内 <title></title>
         文头 描述性资料，像是「主题」<head></head>
         文体 文件本体<body></body>
        标题 从1到6，有六层选择 <h?></h?>
        标题的对齐  <h? align=left|center|right></h?>
        区分  <div></div>
        区分的对齐  <div align=left|right|center|justify></div>
        引文区块  <blockquote></blockquote>
        强调 通常会以斜体显示<em></em>
        特别强调 通常会以加粗显示<strong></strong>
        引文 通常会以斜体显示<cite></cite>
         码显示原始码之用 <code></code>
        样本  <samp></samp>
        键盘输入  <kbd></kbd>
        变数  <var></var>
        定义 有些浏览器不提供<dfn></dfn>
        地址  <address></address>
        大字  <big></big>
        小字  <small></small>
        加粗  <b></b>
        斜体  <I></I>
        底线  <u></u>
        删除线  <s></s>
        下标  <sub></sub>
        上标  <sup></sup>
        打字机体  <tt></tt> 
        预定格式  <pre></pre>
        向中看齐 文字与图片都可以<center></center> 
        闪耀 有史以来最被嘲弄的标签<blink></blink>


        HTML常用代码之：常常会遇到的问题

        点击关闭窗口

        实例

         <a href="javascript.:top.window.close();">点击关闭窗口</a>！

        尝试一下 »

        请问如何去掉主页右面的滚动条？

        实例

        <body scroll="no"> 

        <body style="overflow-y:hidden">


        尝试一下 »

        使用<object> 元素在 HTML 加入 Flash 文件

        实例

        <object width="300" height="300" data="helloworld.swf" >


        尝试一下 »

        如何在不刷新页面的情况下刷新css?

        实例

        <style> 

        button{color:#000000;} 

        </style> 

        <button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为　　红色</button> 


        尝试一下 »

        请问如何让网页自动刷新？

        实例

         方法一，用refresh

        HTML 代码片段如下: 

        <head> 

        <meta. http-equiv="refresh" content="3">  

        </head> 

        3表示刷新时间 

        方法二，使用setTimeout控制 

        <img src=/logo.gif> 

        <script> 

        function rl(){ 

        document.location.reload() 

        } 

        setTimeout(rl,2000) 

        </SCRIPT>


        尝试一下 »

        如何让超链接没有下划线

        实例

        <style> 

        a { text-decoration: none} 

         </style>


        尝试一下 »

        如何用html实现浏览器上后退按钮的功能？ 

        实例

        <a href="java script:history.go(-1)">点击后退</a> 

        尝试一下 »


        HTML常用代码之：你不一定知道的技巧

        实例

        <link rel="Shortcut Icon"href="favicon.icon"> IE地址栏前换成自己的图标

        <link rel="Bookmark"href="favicon.icon"> 可以在收藏夹中显示出你的图标

        <inputstyle="ime-mode:disabled"> 关闭输入法

        <body  oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 

        onselectstart="return false" 取消选取 

        onpaste="return false" 不准粘贴 

        oncopy="return false;" 防止复制

        oncut="return false;"> 防止剪切


        尝试一下 »

        永远都会带着框架 

        实例

        <script language="JavaScript">

        if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 

        </script>


        尝试一下 »

         防止被人frame.

        实例

        <script>

                if (top.location != self.location)top.location=self.location; 

        </script>


        尝试一下 »

         网页将不能被另存为

        实例

        <noscript><iframe src=*.html></iframe></noscript>

        尝试一下 »

         查看网页源代码

        实例

        <input type=button value=查看网页源代码 onclick="window.location = "view-source:"+"http://www.51coolma.cn"">

        尝试一下 »

        删除时确认

        实例

        <a href="" onclick="javascript:return del();">删除</a>

        <script> 

        function del() {

        var msg = "您真的确定要删除吗？ 请确认！";

        if (confirm(msg)==true){

        return true;

        }else{

        return false;}}

        </script>

        尝试一下 »

         网页不会被缓存 

        实例

        <META. HTTP-EQUIV="pragma" CONTENT="no-cache"> 

        <META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate"> 

        <META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 

        或者<META. HTTP-EQUIV="expires"CONTENT="0">


        尝试一下 »

        怎样让表单没有凹凸感？

        实例

        <input type=text style="border:1 solid #000000"> 

        <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

        <body style="overflow:scroll;overflow-y:hidden"> //滚动条竖条消失

        <body style="overflow:scroll;overflow-x:hidden"> //滚动条横条消失

        <body scroll="no"> //两种滚动条都消失


        尝试一下 »

        怎样去掉图片链接点击后，图片周围的虚线？

        实例

        <a href="#" onFocus="this.blur()">

        <img src="logo.jpg"border=0></a>


        尝试一下 »

        电子邮件处理提交表单

        实例

        <form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

        <input type=submit> 

        </form>


        尝试一下 »

        在打开的子窗口刷新父窗口的代码里如何写？

        实例

        window.opener.location.reload()

        如何设定打开页面的大小

        实例

        <body onload="top.resizeTo(300,200);"> 

        <body onload="top.moveBy(300,200);">    //打开页面的位置


        尝试一下 »

        在页面中,如何加入不是满铺的背景图片,拉动页面时背景图不动

        实例

        body {background-image:url(logo.gif);

        background-repeat:no-repeat; 

        background-position:center;

        background-attachment: fixed}


        尝试一下 »

         检查一段字符串是否全由数字组成

        实例

        <script>

        function checkNum(str){return str.match(/D/) == null}
        alert(checkNum("1232142141"))
        alert(checkNum("123214214a1"))

        </script>


        尝试一下 »

        获得一个窗口的大小

        实例

        document.body.clientWidth; 

        document.body.clientHeight;

        怎么判断是否是字符

        实例

        if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"); 

        else alert("全是字符");


        TEXTAREA自适应文字行数的多少

        实例

        <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> 

        </textarea>


        尝试一下 »

         日期减去天数等于第二个日期

        实例

        <script. language=Javascript> 

        function cc(dd,dadd) 

        { 

        //可以加上错误处理 

        var a = new Date(dd) 

        a = a.valueOf() 

        a = a - dadd * 24 * 60 * 60 * 1000 

        a = new Date(a) 

        alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日") 

        } cc("12/23/2002",2) 

        </script>


         选择了哪一个Radio

        实例

        <script> 

        function checkme() 

        for each ob in radio1 

        if ob.checked then window.alert ob.value 

        next 

        end function 

        </script>

        <body> 

        <input name="radio1" type="radio"value="style" checked>Style. 

        <input name="radio1" type="radio"value="barcode">Barcode 

        <input type="button" value="check"nclick="checkme()"> 

        </body>


        尝试一下 »

        脚本永不出错

        实例

        <SCRIPT> 

        <Hide function killErrors(){return true;} window.onerror = killErrors;> 

        </SCRIPT>


        尝试一下 »

        ENTER键可以让光标移到下一个输入框

        实例

        <input onkeydown="if(event.keyCode==13)event.keyCode=9">


        HTML 特殊符号编码对照表

        特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码
        Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;
        Δ&Delta;&#916;Ε&Epsilon;&#917;Ζ&Zeta;&#918;
        Η&Eta;&#919;Θ&Theta;&#920;Ι&Iota;&#921;
        Κ&Kappa;&#922;Λ&Lambda;&#923;Μ&Mu;&#924;
        Ν&Nu;&#925;Ξ&Xi;&#926;Ο&Omicron;&#927;
        Π&Pi;&#928;Ρ&Rho;&#929;Σ&Sigma;&#931;
        Τ&Tau;&#932;Υ&Upsilon;&#933;Φ&Phi;&#934;
        Χ&Chi;&#935;Ψ&Psi;&#936;Ω&Omega;&#937;
        α&alpha;&#945;β&beta;&#946;γ&gamma;&#947;
        δ&delta;&#948;ε&epsilon;&#949;ζ&zeta;&#950;
        η&eta;&#951;θ&theta;&#952;ι&iota;&#953;
        κ&kappa;&#954;λ&lambda;&#955;μ&mu;&#956;
        ν&nu;&#957;ξ&xi;&#958;ο&omicron;&#959;
        π&pi;&#960;ρ&rho;&#961;ς&sigmaf;&#962;
        σ&sigma;&#963;τ&tau;&#964;υ&upsilon;&#965;
        φ&phi;&#966;χ&chi;&#967;ψ&psi;&#968;
        ω&omega;&#969;ϑ&thetasym;&#977;ϒ&upsih;&#978;
        ϖ&piv;&#982;•&bull;&#8226;…&hellip;&#8230;
        ′&prime;&#8242;″&Prime;&#8243;‾&oline;&#8254;
        ⁄&frasl;&#8260;℘&weierp;&#8472;ℑ&image;&#8465;
        ℜ&real;&#8476;™&trade;&#8482;ℵ&alefsym;&#8501;
        ←&larr;&#8592;↑&uarr;&#8593;→&rarr;&#8594;
        ↓&darr;&#8595;↔&harr;&#8596;↵&crarr;&#8629;
        ⇐&lArr;&#8656;⇑&uArr;&#8657;⇒&rArr;&#8658;
        ⇓&dArr;&#8659;⇔&hArr;&#8660;∀&forall;&#8704;
        ∂&part;&#8706;∃&exist;&#8707;∅&empty;&#8709;
        ∇&nabla;&#8711;∈&isin;&#8712;∉&notin;&#8713;
        ∋&ni;&#8715;∏&prod;&#8719;∑&sum;&#8722;
        −&minus;&#8722;∗&lowast;&#8727;√&radic;&#8730;
        ∝&prop;&#8733;∞&infin;&#8734;∠&ang;&#8736;
        ∧&and;&#8869;∨&or;&#8870;∩&cap;&#8745;
        ∪&cup;&#8746;∫&int;&#8747;∴&there4;&#8756;
        ∼&sim;&#8764;≅&cong;&#8773;≈&asymp;&#8773;
        ≠&ne;&#8800;≡&equiv;&#8801;≤&le;&#8804;
        ≥&ge;&#8805;⊂&sub;&#8834;⊃&sup;&#8835;
        ⊄&nsub;&#8836;⊆&sube;&#8838;⊇&supe;&#8839;
        ⊕&oplus;&#8853;⊗&otimes;&#8855;⊥&perp;&#8869;
        ⋅&sdot;&#8901;⌈&lceil;&#8968;⌉&rceil;&#8969;
        ⌊&lfloor;&#8970;⌋&rfloor;&#8971;◊&loz;&#9674;
        ♠&spades;&#9824;♣&clubs;&#9827;♥&hearts;&#9829;
        ♦&diams;&#9830; &nbsp;&#160;¡&iexcl;&#161;
        ¢&cent;&#162;£&pound;&#163;¤&curren;&#164;
        ¥&yen;&#165;¦&brvbar;&#166;§&sect;&#167;
        ¨&uml;&#168;©&copy;&#169;ª&ordf;&#170;
        «&laquo;&#171;¬&not;&#172;­&shy;&#173;
        ®&reg;&#174;¯&macr;&#175;°&deg;&#176;
        ±&plusmn;&#177;²&sup2;&#178;³&sup3;&#179;
        ´&acute;&#180;µ&micro;&#181"&quot;&#34;
        <&lt;&#60;>&gt;&#62;' &#39;






        HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。

        初学者首先要知道 HTML 标签的一些特点：

        HTML 标签是与大小写无关的，例如“<BODY>”跟<body>表示的意思是一样的，推荐使用小写。类似“<p>”这样由尖括号包关键字组成，例如：

        实例

        <P>P 是段落标签,HTML标签不区分大小写</P>

        <p>意思是一样的，推荐使用小写。</p>


        尝试一下 »


        注：HTML 标签对大小写不敏感，但推荐使用小写！

        HTML 标签一般是成对出现的，由开始标签如<h1>，左边标签一般叫开始标签，右边</h1>叫结束标签，有始有终，除了一些个别是单闭合标签的，下面列举 HTML 单闭合标签。


        单闭合标签

        标签功能
        <br />插入一个换行简单的换行符
        <hr />定义水平线
        <area />定义图像映射内部的区域
        <base />定义页面中所有链接的默认地址或默认目标
        <img />定义图像
        <input />定义输入控件
        <link />定义文档与外部资源的关系
        <meta />定义关于 HTML 文档的元信息
        <basefont />不建议使用。定义页面中文本的默认字体、颜色或尺寸
        <param />定义对象的参数
        <col />定义表格中一个或多个列的属性值
        <frame />定义框架集的窗口或框架
        <embed />定义外部交互内容或插件

        字体效果

        标签

        功能

        <h1>...</h1>标题字(最大)
        <h6>...</h6>标题字(最小)
        <b>...</b>粗体字
        <strong>...</strong>粗体字(强调)
        <i>...</i>斜体字
        <em>...</em>斜体字(强调)
        <dfn>...</dfn>斜体字(表示定义)
        <u>...</u>底线
        <ins>...</ins>底线(表示插入文字)
        <strike>...</strike>横线
        <s>...</s>删除线
        <del>...</del>删除线(表示删除)
        <kbd>...</kbd>键盘文字
        <tt>...</tt>打字体
        <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
        <plaintext>...</plaintext>固定宽度字体(不执行标记符号)
        <listing>...</listing>固定宽度小字体
        <font color=00ff00>...</font>字体颜色
        <font size=1>...</font>最小字体
        <font style =font-size:100 px>...</font>无限增大

        区断标记

        标签

        功能

        <hr>水平线
        <hr size=9>水平线(设定大小)
        <hr width=80%>水平线(设定宽度)
        <hr color=ff0000>水平线(设定颜色)
        <br>(换行)
        <nobr>...</nobr>水域(不换行)
        <p>...</p>水域(段落)
        <center>...</center>置中

        链接

        标签

        功能

        <base href=地址>(预设好连结路径)
        <a href=地址></a>外部连结
        <a href=地址 target=_blank></a>外部连结(另开新窗口)
        <a href=地址 target=_top></a>外部连结(全窗口连结)
        <a href=地址 target=页框名></a>外部连结(在指定页框连结)

        图像/音乐

        标签

        功能

        <img src=图片地址>贴图
        <img src=图片地址 width=180>设定图片宽度
        <img src=图片地址 height=30>设定图片高度
        <img src=图片地址 alt=提示文字>设定图片提示文字
        <img src=图片地址 border=1>设定图片边框
        <bgsound src=MID音乐文件地址>背景音乐设定

        表格

        标签

        功能

        <table align=left>...</table>表格位置,置左
        <table align=center>...</table>表格位置,置中
        <table background=图片路径>...</table>背景图片的URL=就是路径网址
        <table border=边框大小>...</table>设定表格边框大小(使用数字)
        <table bgcolor=颜色码>...</table>设定表格的背景颜色
        <table borderclor=颜色码>...</table>设定表格边框的颜色
        <table borderclordark=颜色码>...</table>设定表格暗边框的颜色
        <table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
        <table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
        <table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
        <table cols=参数>...</table>指定表格的栏数
        <table frame=参数>...</table>设定表格外框线的显示方式
        <table width=宽度>...</table>指定表格的宽度大小(使用数字)
        <table height=高度>...</table>指定表格的高度大小(使用数字)
        <td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
        <td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

        分割窗口

        标签

        功能

        <frameset cols="20%,* ">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
        <frameset rows="20%,* ">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
        <frameset cols="20%,* ">分割左右两个框架
        <frameset cols="20%,*,20% ">分割左中右三个框架
        <frameset rows="20%,*,20% ">分割上中下三个框架
        <! - - ... - ->批注
        <a href target>指定超级链接的分割窗口
        <a href=#锚的名称>指定锚名称的超级链接
        <a href>指定超级链接
        <a name=锚的名称>被连结点的名称
        <address>....</address>用来显示电子邮箱地址
        <b>...</b>粗体字
        <base target>指定超级链接的分割窗口
        <basefont size>更改预设字形大小
        <bgsound src>加入背景音乐
        <big>显示大字体
        <blink>闪烁的文字
        <body text link vlink>设定文字颜色
        <body>显示本文
        <br>换行
        <caption align>设定表格标题位置
        <caption>...</caption>为表格加上标题
        <center>向中对齐
        <cite>...<cite>用于引经据典的文字
        <code>...</code>用于列出一段程序代码
        <comment>...</comment>加上批注
        <dd>设定定义列表的项目解说
        <dfn>...</dfn>显示"定义 "文字
        <dir>...</dir>列表文字卷标
        <dl>...</dl>设定定义列表的卷标
        <dt>设定定义列表的项目
        <em>强调之用
        <font face>任意指定所用的字形
        <font size>设定字体大小
        <form action>设定户动式窗体的处理方式
        <form method>设定户动式窗体之资料传送方式
        <frame marginheight>设定窗口的上下边界
        <frame marginwidth>设定窗口的左右边界
        <frame name>为分割窗口命名
        <frame noresize>锁住分割窗口的大小
        <frame scrolling>设定分割窗口的滚动条
        <frame src>将 HTML 文件加入窗口
        <frameset cols>将窗口分割成左右的子窗口
        <frameset rows>将窗口分割成上下的子窗口
        <frameset>...</frameset>划分分割窗口
        <h1>~<h6>设定文字大小
        <head>...</head>标示文件信息
        <hr>加上分网格线
        <html>...</html>文件的开始与结束
        <i>...</i>斜体字
        <img align>调整图形影像的位置
        <img alt>为你的图形影像加注
        <img dynsrc loop>加入影片
        <img height width>插入图片并预设图形大小
        <img hspace>插入图片并预设图形的左右边界
        <img lowsrc>预载图片功能
        <img src border>设定图片边界
        <img src>插入图片
        <img vspace>插入图片并预设图形的上下边界
        <input type name value>在窗体中加入输入字段
        <isindex>定义查询用窗体
        <kbd>...</kbd>表示使用者输入文字
        <li type>...</li>列表的项目 ( 可指定符号 )
        <marquee>跑马灯效果
        <menu>...</menu>条列文字卷标
        <meta name="refresh " content url>自动更新文件内容
        <multiple>可同时选择多项的列表栏
        <noframe>定义不出现分割窗口的文字
        <ol>...</ol>有序号的列表
        <option>定义窗体中列表栏的项目
        <p align>设定对齐方向
        <p>...</p>分段
        <person>...</person>显示人名
        <pre>使用原有排列
        <samp>...</samp>用于引用字
        <select>...</select>在窗体中定义列表栏
        <small>显示小字体
        <strike>文字加横线
        <strong>用于加强语气
        <sub>...</sup>下标字
        <sup>...</sup>上标字
        <table border=n>调整表格的宽线高度
        <table cellpadding>调整数据域位之边界
        <table cellspacing>调整表格线的宽度
        <table height>调整表格的高度
        <table width>调整表格的宽度
        <table>...</table>产生表格的卷标
        <td align>调整表格字段之左右对齐
        <td bgcolor>设定表格字段之背景颜色
        <td colspan rowspan>表格字段的合并
        <td nowrap>设定表格字段不换行
        <td valign>调整表格字段之上下对齐
        <td width>调整表格字段宽度
        <td>...</td>定义表格的数据域位
        <textarea name rows cols>窗体中加入多少列的文字输入栏
        <textarea wrap>决定文字输入栏是自动否换行
        <th>...</th>定义表格的标头字段
        <title>...</title>文件标题
        <tr>...</tr>定义表格美一行
        <tt>...</tt>打字机字体
        <u>...</u>文字加底线
        <ul type>...</ul>无序号的列表 ( 可指定符号 )
        <var>...</var>用于显示变量

        跑马灯

        标签

        功能

        <marquee>...</marquee>普通卷动
        <marquee behavior=slide>...</marquee>滑动
        <marquee behavior=scroll>...</marquee>预设卷动
        <marquee behavior=alternate>...</marquee>来回卷动
        <marquee direction=down>...</marquee>向下卷动
        <marquee direction=up>...</marquee>向上卷动
        <marquee direction=right>...</marquee>向右卷动
        <marquee direction=left>...</marquee>向左卷动
        <marquee loop=2>...</marquee>卷动次数
        <marquee width=180>...</marquee>设定宽度
        <marquee height=30>...</marquee>设定高度
        <marquee bgcolor=ff0000>...</marquee>设定背景颜色
        <marquee scrollamount=30>...</marquee>设定卷动距离
        <marquee scrolldelay=300>...</marquee>设定卷动时间



        近几年来，随着互联网的不断急剧发展，建站需求量激增，越来越多的个人和是企业都开设建设属于自己的网站，用来做电商营销或个人网站博客等用途。我们都知道正儿八经建设一个网站是耗时耗力的，所以，与其花费大量时间码出一个网站不如套用一个HTML模板再做修改就可以速成一个高逼格的网站，对于小型企业和不懂设计网站的个人来说使用HTML模板是最方便快捷的建站方式，下面51coolma就给大家推荐一些设计优秀的HTML模板，供君参考。

        THOMSOON

        适合个人或工作到作品展示的响应式模板

        THOMSOON


        SeFolio

        一个单页模板，透明设计风格，若搭配一个漂亮的全屏背景图像，一定会很有感觉。

        SeFolio


        Finec

        宫格式布局，用来展示作品、照片的个人网站比较适合。

        Finec

        Lithium

        网页布局很好的一个模板，UI设计可以用作自己的作品集展示，而且修改简单，把几个作品替换一下，写个简介神马的。

        Lithium


        Halcyon Days

        一个流行时尚的网页模板，CSS3动画渐显效果很棒。

        Halcyon Days

        Directive

        一个由HTML5+CSS3编写的网页模板，网页的头部设计很好看。

        Directive



        Dashgum

        配色美丽的管理后台界面模板。

        Dashgum


        Ophiuchus HTML5/CSS3 Template

        这网页无论是视觉设计还是交互设计都非常棒！完美把握设计趋势，是一个不错的HTML模板。

        Ophiuchus HTML5/CSS3 Template



        Iridum

        Iridum


        Infusion

        这模板除了包含HTML源码外，还附有该网页的PSD文件，新手们可以下载来学习学习啦。

        Infusion


        Magnetic

        导航固定在左侧的网站模板，适合展示图像、作品集。

        Magnetic


        Sssoon

        Coming soon、网站建设中类型模板，全屏背景，很有Feel，基于Bootstrap 3框架制作。这个免费的网站制作中模板有多个配色方案以及4个背景选择，每个都很漂亮，有的是全屏视屏背景，很不错！

        Sssoon




        Woo

        woo是一个干净、时尚的着陆页模板，全屏屏的设计，兼容流行的浏览器和移动端设备，适合用于APP、服务类网站。

        Woo


        图书介绍模板

        如果你正在推一本新书，那么这个图标介绍类模板就很适合你了

        图书介绍模板

        美食餐饮模板：MEAT KING

        现在流行使用微信订餐，美食餐饮类等餐厅的网站都火起来，都想做一个兼容手机浏览的网站，这个模板就非常适合了。

        MEAT KING

        Office

        一个欧美简约风格的企业站模板，响应式设计，兼容手机端浏览。

        Office

        Eco Travel

        适用于旅游类的网站模板


        使用HTML模板的优势？

        1、您可以轻松地修改网站模板，然后套用上自己的内容和图片变成自己的项目

        2、网站模板一般都建好了专业的HTML和CSS编码。任何人都可以轻松地设置自己的网站而不需要聘请专业的设计师和开发人员

        3、一些设计师也可以使用这些模板来为他们的客户创建具有专业外观的网站

        4、使用网站模板后的成本效益是最高的

        如何在Dreamweaver中使用网页模板

        不是每个模板都能在Dreamweaver中使用的!

         

        模板基本分为四大类:

         

        1、psd模版

        2、flash模版

        3、html模版

        4、PNG模版

         

        PSD模版需要专业的软件打开，不能像html模版那样直接使用。后缀名是.psd;这种类型的模版是最好的，也是我们重点推荐的。因为他把模版上的元素分为一个一个的层，设计起来十分方便。同时也可以任意切割成自己喜欢的布局！常用的打开软件fireworks、photoshop。

         

        flash模版如果包含.fla源文件，那么打开就需要flash软件。

         

        html模版就是平常的模版了,直接使用Frontpage或者Dreamweaver打开即可，这里就不介绍了。

        PNG模版的处理方法跟PSD模版类似，推荐使用Fireworks处理。



        在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？

        --------------------------------------------------------------


        W3Cschool文本输入框实例：


        --------------------------------------------------------------


        如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。首先我们需要在你的页面上添加一个文本框代码如下:


        实例

        W3Cschool文本输入框实例：<input type="text" value="请输入文本" >


        尝试一下 »


        这个是我们最常见到的按钮了，它没有任何的样式。现在我们来添加一些好看的样式，代码如下：

        实例

        .mytxt {

            color:#333;

            line-height:normal;

            font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;

            font-style:normal;

            font-variant:normal;

            font-size-adjust:none;

            font-stretch:normal;

            font-weight:normal;

            margin-top:0px;

            margin-bottom:0px;

            margin-left:0px;

            padding-top:4px;

            padding-right:4px;

            padding-bottom:4px;

            padding-left:4px;

            font-size:15px;

            outline-width:medium;

            outline-style:none;

            outline-color:invert;

            border-top-left-radius:3px;

            border-top-right-radius:3px;

            border-bottom-left-radius:3px;

            border-bottom-right-radius:3px;

            text-shadow:0px 1px 2px #fff;

            background-attachment:scroll;

            background-repeat:repeat-x;

            background-position-x:left;

            background-position-y:top;

            background-size:auto;

            background-origin:padding-box;

            background-clip:border-box;

            background-color:rgb(255,255,255);

            margin-right:8px;

            border-top-color:#ccc;

            border-right-color:#ccc;

            border-bottom-color:#ccc;

            border-left-color:#ccc;

            border-top-width:1px;

            border-right-width:1px;

            border-bottom-width:1px;

            border-left-width:1px;

            border-top-style:solid;

            border-right-style:solid;

            border-bottom-style:solid;

            border-left-style:solid;

        }


        当我们添加了样式以后，我们需要在文本框中引用此样式。修改文本框代码如下：


        实例

        <input type="text" value="" class="mytxt" />

        尝试一下 »


        好了我们基本的文本框样式完成了，现在我们需要再次添加 focus 按钮。首先简单的介绍一下 focus 按钮的作用：就是当我们箭头在文本框中的时候触发此样式。


        添加 css 样式如下：

        实例

        .mytxt:focus {

             border: 1px solid #fafafa;

            -webkit-box-shadow: 0px 0px 6px #007eff;

             -moz-box-shadow: 0px 0px 5px #007eff;

             box-shadow: 0px 0px 5px #007eff; 

        }


        尝试一下 »

        因为我们鼠标移进去的时候，需要修改边框的颜色和一些阴影，所以上面的代码就够了！希望你能从上面的例子中得到启发。


        现在，我们一起来看看几个好用的 html 表单文本框是如何实现的。表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。


        一、一个单行文本框的例子


        单行文本框

        本例的源代码如下：

        实例

        <p>您的姓名： <input type="text" name="text1" size="12" maxlength="20">

        您的E_mail： <input type="text" name="text2" size="20" maxlength="24" value="*****@*.*">

        输入口令： <input type="password" name="text3" size="8" maxlength="8"> </p>

        <p align="center"> 

        <input type="submit" name="提交" value="提 交">

        <input type="reset" name="重写" value="重 写">


        尝试一下 »

        本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息，在三个文本框中都设定文本框的宽度（size）和最大输入文本长度（maxlength），在第二个文本框中还设定了初始值（value），你可能注意到了，我把每个文本框的名称（name）都取成了英文名，这样对用于程序外理比较方便，因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理，那么用中文名比较直观。


        为了使其成为一个具有实际交互功能的表单，加上了一个提交按钮，并在<form>标记中设定了action参数为：action="mailto:3400982550@qq.com" ，同时把 method 参数设置为：method="post"，这样，一旦按下“提交”按钮将会把信息通过电子邮件发到“3400982550@qq.com”信箱。看来制作并不难！是吗？不过要注意：size 的值小于 maxlength 的值时，当内容超过输入窗口的长度时会自动滚动；反之，size的值大于maxlength的值，超过maxlength长度的内容无法输入。


        html文本框

        二、检验用户输入的信息

        在上例中，若是用户什么信息也不写就按提交按钮，那不是白收一份邮件吗？要避免这种情况出现，就要对用户的输入信息进行检验，这就要用到<input>标记的 onclick 参数，我们在“提交”按钮的<input>标记中把onclick 设置为：onclick="test(form1)"，而“test(form)”则是一个 Javascript 子程序，用来检验文本框的输入内容的，它的源代码如下：

        实例

        <script language="javascript">

        <!--

        function test(form){

        test1(form);

        test2(form);

        test3(form)}

        function test1(form){

        if (form.text1.value=="")

        alert("你没有写上你的姓名，请输入姓名！")

        }

        function test2(form){

        if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1)

        alert("E_mail地址不正确，请重新输入！")

        }

        function test3(form){

        if (form.text3.value！="12345678")

        alert("密码错误，请重新输入！")

        }

        -->

        </script>

        把这段程序复制在<head>与</head>之间，那么一旦用户按下提交按钮，就会调用这段程序对用户输入的信息进行检验，如果信息不正确就会给出提示，提醒用户输入正确的信息。注：在 <form> 标记中设置 onsubmit="test(form1)"也能达到同样的效果。

        三、制作一个留言簿


        留言簿


        这个留言簿虽简单，但已包含了留言簿的基本功能，它是通过邮件的方式接收用户的信息，无需 CGI 支持。它的制作也比较简单，它采用表格产生立体效果，在表单中先插入一个表格，并设置好表格的有关参数，在表单方面，只是比例一多了一个多行文本框。在<input>标记中设置 type="textarea"，不能得到一个多行文本框。我们用HTML的另一个标记<textarea>来设置一个多行文本框，若是默认的文本框大小不合适，可通过设定cols和rows参数来调整窗口的大小。其它标记参数的设置同例一。本例完成后的源代码如下：

        实例

        <table width="50%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" cellpadding="4" align="left">

        <tr><td colspan="2"> <div align="center"><b>留 言 簿</b></div> </td></tr>

        <tr><td>姓名： <input type="text" name="textfield" size="8"> </td>

        <td>E_mail: <input type="text" name="textfield2" size="10" maxlength="20"> </td>

        </tr>

        <tr><td colspan="2"> <div align="center">留 言<br> <textarea name="textfield3" cols="30" rows="3"></textarea></div></td></tr>

        <tr><td> <div align="right"> <input type="submit" name="Submit" value="提 交"> </div> </td>

        <td> <input type="reset" name="Submit2" value="重 写"> </td></tr></table>


        尝试一下 »

        html文本框参考样式

        输入框景背景透明：

        实例

        <input style="background:transparent;border:1px solid #ffffff">

        尝试一下 »

        鼠标划过输入框，输入框背景色变色：

        实例

        <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"

        style="width: 106; height: 21"

        onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">


        尝试一下 »

        输入字时输入框边框闪烁(边框为小方型)：

        实例

        <Script Language="JavaScript">

        function borderColor(){

        if(self['oText'].style.borderColor=='red'){

        self['oText'].style.borderColor = 'yellow';

        }else{

        self['oText'].style.borderColor = 'red';

        }

        oTime = setTimeout('borderColor()',400);

        }

        </Script>

        <input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">


        尝试一下 »
        输入字时输入框边框闪烁(边框为虚线)：

        实例

        <style>

        #oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};

        </style>

        <input type="text" id="oText">


        尝试一下 »


        自动横向廷伸的输入框：

        实例

        <input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

        尝试一下 »

        自动向下廷伸的文本框：

        实例

        <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

        尝试一下 »

        只有下划线的文本框：

        实例

        <input style="border:0;border-bottom:1px solid black;background:;">

        尝试一下 » 

        软件序列号式的输入框：

        实例

        <script for="T" event="onkeyup">

        if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();

        </script>

        <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">


        尝试一下 » 

        软件序列号式的输入框(完整版)：

        实例

        <script for="Submit" event="onclick">

        var sn=new Array();

        for(i=0;i<T.length;i++)

        sn=T.value;

        alert(sn.join("—"));

        </script>

        <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">

        <input type="submit" name="Submit">


        尝试一下 »

        html文本框常见操作技巧

        1、html 文本框怎么用 css 变圆角

        border-radius 属性可以实现元素的圆角。如下 css 可以实现文本框（单行、多行）的圆角：
        input[type=text],textarea{border-radius:3px;border:1px solid #000;}

        border-radius 用法如下：
        border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
        该属性允许为元素添加圆角边框
        语法：

        border-radius: 1-4 length|% / 1-4 length|%;

        按此顺序设置每个 radius 的四个值。
        如果省略 bottom-left，则与 top-right 相同。
        如果省略 bottom-right，则与 top-left 相同。
        如果省略 top-right，则与 top-left 相同。
        单位一般用px和百分比较多，其他单位也可


        w3c


        2、HTML中如何设置文本框的大小

        边框的大小，可以使用CSS样式控制，如：
        <textarea id="txtCon" >content</textarea>
        <style type="text/css">
        #txtCon{width:100px; height:20px;}
        </style>

        也可以使用文本框自己的属性，定义文本框的行和列控制大小，如：
        <textarea id="txtCon" rows="100" cols="100" >content</textarea>


        3、在html中如何实现将本网页中文本框中的值传递到另一个网页的用户名密码框中，并实现登陆

        在html网页中，一个按钮，两个文本框，在<SCRIPT language=JavaScript> /SCRIPT>当中如何写代码能够实现将这两个文本框中的值传递到另一个制定地址的网页中的用户名和密码处，并实现登陆？


        页面必须是跳转过去的才行。例如另一个页面是page.html那么你跳转的时候 page.html?username=tony&password=123 跳转到这个地址，

        然后到另一个页面的时候在脚本里面写
        <SCRIPT language=JavaScript>
        var url = window.location.href;
        然后var username = url.split("?")[1].split("&")[0].split("=")[1] //这样就获取到用户名了。
        var password = url.split("&")[1].split("=")[1];

        然后把值赋给你的密码文本框
        document.getElementById("txtpassword").value = password;
        document.getElementById("txtusername").value=username;
        < /SCRIPT>

        然后验证用户名和密码就可以了。


        html


        4、HTML中让表单input等文本框为只读不可编辑的方法

        有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。 

        方法1: onfocus=this.blur() 当鼠标放不上就离开焦点
        <input type="text" name="input1" value="中国" onfocus=this.blur()> 

        方法2:readonly 
        <input type="text" name="input1" value="中国" readonly> 
        <input type="text" name="input1" value="中国" readonly="true"> 

        方法3: disabled 
        <input type="text" name="input1" value="中国" disabled="true">

        完整的例子:

        <input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true"　readOnly="true" /> 

        disabled="true" 此果文字会变成灰色，不可编辑。 
        readOnly="true" 文字不会变色，也是不可编辑的

        css屏蔽输入：<input style="ime-mode: disabled"> 

        有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本；


        5、您还可以为您将要创建的文本框预设置一个想要显示的值，具体的设置方法您可以参考本站的编程测试！


        在 html 网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在 html 网页中添加一个带有滚动条的文本框，就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，下面就是相关语法：

        实例

        color: #ffffff;
        background-color: #000000;
        border: solid 2px black;
        width: 120px;
        height: 200px;
        overflow: scroll;
        scrollbar-face-color: #889B9F;
        scrollbar-shadow-color: #3D5054;
        scrollbar-highlight-color: #C3D6DA;
        scrollbar-3dlight-color: #3D5054;
        scrollbar-darkshadow-color: #85989C;
        scrollbar-track-color: #95A6AA;
        scrollbar-arrow-color: #FFD6DA;

        上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。


        html中滚动条属性设置

        ​scrollbar​属性、样式详解

        1、​overflow​内容溢出时的设置（设定被设定对象是否显示滚动条）
            ​overflow-x​水平方向内容溢出时的设置
            ​overflow-y​垂直方向内容溢出时的设置
            以上三个属性设置的值为​visible​(默认值)、​scroll​、​hidden​​、auto​。


        2、​ scrollbar-3d-light-color​立体滚动条亮边的颜色（设置滚动条的颜色）
            ​scrollbar-arrow-color​上下按钮上三角箭头的颜色
            ​scrollbar-base-color​滚动条的基本颜色
            ​scrollbar-dark-shadow-color​立体滚动条强阴影的颜色
            ​scrollbar-face-color​立体滚动条凸出部分的颜色
            ​scrollbar-highlight-color​滚动条空白部分的颜色
            ​scrollbar-shadow-color​立体滚动条阴影的颜色

        html滚动条


        我们通过几个实例来讲解上述的样式属性：


        1.让浏览器窗口永远都不出现滚动条

        没有水平滚动条
        <body style="overflow-x:hidden">
        没有垂直滚动条
        <body style="overflow-y:hidden">
        没有滚动条
        <body style="overflow-x:hidden;overflow-y:hidden">或<body
        style="overflow:hidden">


        2.设定多行文本框的滚动条

        没有水平滚动条
        <textarea style="overflow-x:hidden"></textarea>

        没有垂直滚动条
        <textarea style="overflow-y:hidden"></textarea>

        没有滚动条
        <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
        或<textarea style="overflow:hidden"></textarea>


        3.设定窗口滚动条的颜色

        设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
        scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
        加上一点特别的效果：
        <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">


        4.在样式表文件中定义好一个类，调用样式表。

        <style>
        .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
        </style>

        这样调用：
        <textarea class="coolscrollbar"></textarea>

        ​Scrollbar-Face-Color​为滚动条表面颜色设定；
        ​Scrollbar-Highlight-Color​为滚动条上斜面和左斜面颜色设定；
        ​Scrollbar-Shadow-Color​为滚动条下斜面和右斜面颜色设定；
        ​Scrollbar-3Dlight-Color​为滚动条上边和左边的边沿颜色设定；
        ​Scrollbar-Arrow-Color​为滚动条两端箭头颜色设定。
        ​Scrollbar-Track-Color​为滚动条底板颜色设定；
        ​Scrollbar-Darkshadow​为滚动条下边和右边边沿颜色设定。

        举例：

         <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>


        备注框

        HTML各种滚动属性代码

        <marquee>普通卷动</marquee> <br />   
        <marquee behavior=slide>滑动</marquee>  <br />  
        <marquee behavior=alternate>来回卷动 </marquee><br /> 
        <marquee direction=down>向下卷动</marquee> <br /> 
        <marquee direction=up>向上卷动</marquee> <br /> 
        <marquee direction=right>向右卷动</marquee> <br /> 
        <marquee direction=left>向左卷动</marquee> <br /> 
        <marquee loop=2>卷动次数</marquee> <br />   
        <marquee scrollamount=30>设定卷动距离</marquee> <br /> 

        html滚动条颜色设置方法介绍

        ​scrollbar-arrow-color: color; ​/*三角箭头的颜色*/
        ​scrollbar-face-color: color;​ /*立体滚动条的颜色（包括箭头部分的背景色）*/
        ​scrollbar-3dlight-color: color; ​/*立体滚动条亮边的颜色*/
        ​scrollbar-highlight-color: color;​ /*滚动条的高亮颜色（左阴影？）*/
        ​scrollbar-shadow-color: color;​ /*立体滚动条阴影的颜色*/
        ​scrollbar-darkshadow-color: color;​ /*立体滚动条外阴影的颜色*/
        ​scrollbar-track-color: color; ​/*立体滚动条背景颜色*/
        ​scrollbar-base-color: color; ​/*滚动条的基色*/


        ​webkit​不再是用简单的几个CSS属性，而是一坨的CSS伪元素：
        ​-webkit-scrollbar ​滚动条整体部分
        ​-webkit-scrollbar-button​ 滚动条两端的按钮
        ​-webkit-scrollbar-track ​外层轨道
        ​-webkit-scrollbar-track-piece​ 内层轨道，滚动条中间部分（除去）
        ​-webkit-scrollbar-thumb​ （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
        ​-webkit-scrollbar-corner​ 边角
        ​-webkit-resizer ​定义右下角拖动块的样式

        代码

        通过这些伪元素，可以完全的重写一个网站的滚动条样式。
        当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

        ​:horizontal – horizontal​伪类应用于水平方向的滚动条
        ​:vertical – vertical​伪类应用于竖直方向的滚动条
        ​:decrement – decrement​伪类应用于按钮和内层轨道（track piece）。它用来指示按钮或者内层轨道是否会减小视窗的位置（比如，垂直滚动条的上面，水平滚动条的左边。）
        ​:increment – increment​伪类和​decrement​类似，用来指示按钮或内层轨道是否会增大视窗的位置（比如，垂直滚动条的下面和水平滚动条的右边。）
        ​:start – start​伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
        ​:end  ​类似于start伪类，标识对象是否放到滑块的后面。
        ​:double-button  ​该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
        ​:single-button​  类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
        ​:no-button​ 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
        ​:corner-present ​ 用于所有滚动条轨道，指示滚动条圆角是否显示。
        ​:window-inactive​  用于所有的滚动条轨道，指示应用滚动条的某个页面容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以用于：：selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类）
        另外，​:enabled​、​:disabled​、​:hover​ 和 ​:active​ 等伪类同样可以用于滚动条中。

        html滚动条的使用技巧

        (1)隐藏滚动条

        <bodystyle="overflow-x:hidden;overflow-y:hidden">

         

        (2)如何在单元格或图层中出现滚动条

        <divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

         

        (3)javascript改变框架中滚动条的样式，比如改变颜色、改为平面效果等

        <STYLE> 

        BODY   {SCROLLBAR-FACE-COLOR:   #ffcc99;

                      SCROLLBAR-HIGHLIGHT-COLOR:   #ff0000; 

                      SCROLLBAR-SHADOW-COLOR:   #ffffff; 

                      SCROLLBAR-3DLIGHT-COLOR:   #000000; 

                      SCROLLBAR-ARROW-COLOR:   #ff0000; 

                      SCROLLBAR-TRACK-COLOR:   #dee0ed; 

                      SCROLLBAR-DARKSHADOW-COLOR:   #ffff00;} 

        </STYLE> 

          

        说明：  

        ​scrollbar-3dlight-color:color​;设置或检索滚动条亮边框颜色；  

        ​scrollbar-highlight-color:color​;设置或检索滚动条3D界面的亮边颜色；  

        ​scrollbar-face-color:colo​r​;设置或检索滚动条3D表面的颜色；  

        ​scrollbar-arrow-color:color​;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；   

        ​scrollbar-shadow-color:color​;设置或检索滚动条3D界面的暗边颜色；  

        ​scrollbar-darkshadow-color:color​;设置或检索滚动条暗边框颜色；  

        ​scrollbar-base-color:color​;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。   

        ​scrollbar-track-color:color​;设置或检索滚动条的拖动区域颜色   


        备注：  

        color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。

         

        (4)javascript 中的页面元素定位

        ​clientX​、​clientY​是鼠标当前相对于网页的位置，当鼠标位于页面左上角时 clientX=0, clientY=0；

        ​offsetX​、​offsetY​是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时 offsetX=0, offsetY=0；

        ​screenX​、​screenY​是鼠标相对于用户整个屏幕的位置；

        x、y 是鼠标当前相对于当前浏览器的位置

        ​scrollLeft​：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（因为有滚动条的产生，所以目前页面可见内容是不定的）。

        ​scrollTop​：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

        ​left​：对象相对于页面的X坐标。

        ​top​：对象相对于页面的Y坐标

         

        (5)屏蔽选择,右键等

        <body oncontextmenu=self.event.returnValue=falseonselectstart="return false">


          html


        下面的这个小例子是 实现滚动条根据窗体的大小自动设置

        [html]
        <SPAN style="FONT-SIZE: 18px"><html> 
        <head> 
        <style type="text/css"> 
          .TopDIV  
          {   
             position:absolute;  
             left:130px; 
             top:10px; 
             width:105; 
             height:30; 
             overflow-x:hidden; 
             overflow-y:auto; 
             float: right; 
             border-style.:solid; 
             border-width:;  
             border-color:red 
          } 
          .LeftDIV  
          {   
             position:absolute;  
             left:10px; 
             top:40px; 
             width:120; 
             height:60; 
             overflow-x:hidden; 
             overflow-y:hidden; 
             float: right; 
             border-style.:solid; 
             border-width:;  
             border-color:yellow 
          } 
          .MainDIV  
          {   
             position:absolute;  
             left:130px; 
             top:40px; 
             width:120;; 
             height:80; 
             overflow-x:auto; 
             overflow-y:auto; 
             float: right; 
             border-style.:solid; 
             border-width:;  
             border-color:blue 
          } 
        </style> 
        <script type="text/javascript" language="javascript"> 
        function setStyle() 
        { 
        //145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
        document.getElementById("a").style.width=document.body.clientWidth - 145; 
        //130的由来LeftDiv的left+width 
        document.getElementById("c").style.width=document.body.clientWidth - 130; 
        //55的由来TopDIV的top+height+15（15是滚动条的宽度） 
        document.getElementById("b").style.height=document.body.clientHeight - 55; 
        //40的由来TopDIV的top+height 
        document.getElementById("c").style.height=document.body.clientHeight - 40; 
        } 
        </script> 
          
        </head> 
        <body onresize="setStyle();" onLoad="setStyle();"> 
          
        <div id='a' class="TopDIV"> 
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        </div> 
          
        <div id='b' class="LeftDIV"> 
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        </div> 
        <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"  
         class="MainDIV"> 
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
        </div> 
        </body> 
        </html> 
        </SPAN> 

        <html>
        <head>
        <style type="text/css">
          .TopDIV
          { 
             position:absolute;
             left:130px;
             top:10px;
             width:105;
             height:30;
             overflow-x:hidden;
             overflow-y:auto;
             float: right;
             border-style.:solid;
             border-width:;
             border-color:red
          }
          .LeftDIV
          { 
             position:absolute;
             left:10px;
             top:40px;
             width:120;
             height:60;
             overflow-x:hidden;
             overflow-y:hidden;
             float: right;
             border-style.:solid;
             border-width:;
             border-color:yellow
          }
          .MainDIV
          { 
             position:absolute;
             left:130px;
             top:40px;
             width:120;;
             height:80;
             overflow-x:auto;
             overflow-y:auto;
             float: right;
             border-style.:solid;
             border-width:;
             border-color:blue
          }
        </style>
        <script type="text/javascript" language="javascript">
        function setStyle()
        {
        //145的由来LeftDiv的left+width+15（15是滚动条的宽度）
        document.getElementById("a").style.width=document.body.clientWidth - 145;
        //130的由来LeftDiv的left+width
        document.getElementById("c").style.width=document.body.clientWidth - 130;
        //55的由来TopDIV的top+height+15（15是滚动条的宽度）
        document.getElementById("b").style.height=document.body.clientHeight - 55;
        //40的由来TopDIV的top+height
        document.getElementById("c").style.height=document.body.clientHeight - 40;
        }
        </script>
         
        </head>
        <body onresize="setStyle();" onLoad="setStyle();">
         
        <div id='a' class="TopDIV">
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
         
        <div id='b' class="LeftDIV">
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
        <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
         class="MainDIV">
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
        </body>
        </html>

        滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.



        在网站的最底端我们都可以看到类似于这样的一句话：“Copyright©2016 51coolma.cn All Rights Reserved”，这就是网站的版权说明，虽然那只是一小行字，不过作为设计师也好，作为个人的爱好也好，版权的标志都是满重要的。从法律角度看，版权保护是随着作品（无论是文字作品还是图片作品）的完成即刻获得的，并不是必须要声明或进行登记后才可获得。这行文字可以多少提醒浏览者，所看到的内容是受到保护的！ 


        规范的格式可以是：Copyright/© + [dates] + [author/owner]


        copyright

        © 通常可以代替Copyright, 但是不可以用(c)。 All Rights Reserved 在某些国家曾经是必须的，但是现在在大多数国家，都不是法律上必须有的字样。

        参见下面几个正确的格式：

        • ©1995-2004 Macromedia, Inc. All rights reserved.
        • ©2004 Microsoft Corporation. All rights reserved.
        • Copyright © 2004 Adobe Systems Incorporated. All rights reserved.
        • ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.


        请注意标点符号和大小写的用法，这也是专业精神的一种体现。

        现在流行some rights reserved：creativecommons.org

        {Copyright © 2004 Adobe Systems Incorporated. All rights reserved.}


        Copyright:版权 
        © 时间 2008-2009 授权时间
         XXX公司  有版权的公司
        All rights reserved.：版权所有


        在网页html里面版权符号可以直接写或者用符号来表示

        1. 可以打出来，如：©

        2. 可以这样写：©

        这两种显示效果都是一样的。

        直接写版权可能有点难看，你可以用CSS来定义它的布局如：<span style=”font-family:Arial;”>© 或 ©</span> 就可以了。

        1、那个 [dates] 是指起至日期还是其他的什么意思？

        一般的，只要显示最新的年份即可，也可以显示从某个起始日期开始，到现在为止。如果你加了这行字，请注意每年及时更新。

        2、日期后加网站名字？其他行吗？

        日期后面，只能跟网站，或者版权拥有者的名字，如果是个人网站，你可以用域名，也可以用你自己的名称。拼音的写法是你的名字的首字母，后面跟你的姓的全拼，首字母大写。很多人也用网名的，重要的是格式的次序，不加这个标注，你的版权也是同样被认可和保护的。


        版权


        Html中版权符号的字体选择问题

        ©是html的中版权的符号，但是字体选择的不对会带来一些问题。如果是宋体，这个符号显示的就是很奇怪的一个符号，所以有效的解决方法就是font-family:arial，遇到此问题的朋友可以参考下，希望对大家有所帮助。

        代码如下:

        <span style="font-family:arial;">Copyright &copy; </span> 

        HTML 特殊符号编码对照表

        特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码
        Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;
        Δ&Delta;&#916;Ε&Epsilon;&#917;Ζ&Zeta;&#918;
        Η&Eta;&#919;Θ&Theta;&#920;Ι&Iota;&#921;
        Κ&Kappa;&#922;Λ&Lambda;&#923;Μ&Mu;&#924;
        Ν&Nu;&#925;Ξ&Xi;&#926;Ο&Omicron;&#927;
        Π&Pi;&#928;Ρ&Rho;&#929;Σ&Sigma;&#931;
        Τ&Tau;&#932;Υ&Upsilon;&#933;Φ&Phi;&#934;
        Χ&Chi;&#935;Ψ&Psi;&#936;Ω&Omega;&#937;
        α&alpha;&#945;β&beta;&#946;γ&gamma;&#947;
        δ&delta;&#948;ε&epsilon;&#949;ζ&zeta;&#950;
        η&eta;&#951;θ&theta;&#952;ι&iota;&#953;
        κ&kappa;&#954;λ&lambda;&#955;μ&mu;&#956;
        ν&nu;&#957;ξ&xi;&#958;ο&omicron;&#959;
        π&pi;&#960;ρ&rho;&#961;ς&sigmaf;&#962;
        σ&sigma;&#963;τ&tau;&#964;υ&upsilon;&#965;
        φ&phi;&#966;χ&chi;&#967;ψ&psi;&#968;
        ω&omega;&#969;ϑ&thetasym;&#977;ϒ&upsih;&#978;
        ϖ&piv;&#982;•&bull;&#8226;…&hellip;&#8230;
        ′&prime;&#8242;″&Prime;&#8243;‾&oline;&#8254;
        ⁄&frasl;&#8260;℘&weierp;&#8472;ℑ&image;&#8465;
        ℜ&real;&#8476;™&trade;&#8482;ℵ&alefsym;&#8501;
        ←&larr;&#8592;↑&uarr;&#8593;→&rarr;&#8594;
        ↓&darr;&#8595;↔&harr;&#8596;↵&crarr;&#8629;
        ⇐&lArr;&#8656;⇑&uArr;&#8657;⇒&rArr;&#8658;
        ⇓&dArr;&#8659;⇔&hArr;&#8660;∀&forall;&#8704;
        ∂&part;&#8706;∃&exist;&#8707;∅&empty;&#8709;
        ∇&nabla;&#8711;∈&isin;&#8712;∉&notin;&#8713;
        ∋&ni;&#8715;∏&prod;&#8719;∑&sum;&#8722;
        −&minus;&#8722;∗&lowast;&#8727;√&radic;&#8730;
        ∝&prop;&#8733;∞&infin;&#8734;∠&ang;&#8736;
        ∧&and;&#8869;∨&or;&#8870;∩&cap;&#8745;
        ∪&cup;&#8746;∫&int;&#8747;∴&there4;&#8756;
        ∼&sim;&#8764;≅&cong;&#8773;≈&asymp;&#8773;
        ≠&ne;&#8800;≡&equiv;&#8801;≤&le;&#8804;
        ≥&ge;&#8805;⊂&sub;&#8834;⊃&sup;&#8835;
        ⊄&nsub;&#8836;⊆&sube;&#8838;⊇&supe;&#8839;
        ⊕&oplus;&#8853;⊗&otimes;&#8855;⊥&perp;&#8869;
        ⋅&sdot;&#8901;⌈&lceil;&#8968;⌉&rceil;&#8969;
        ⌊&lfloor;&#8970;⌋&rfloor;&#8971;◊&loz;&#9674;
        ♠&spades;&#9824;♣&clubs;&#9827;♥&hearts;&#9829;
        ♦&diams;&#9830; &nbsp;&#160;¡&iexcl;&#161;
        ¢&cent;&#162;£&pound;&#163;¤&curren;&#164;
        ¥&yen;&#165;¦&brvbar;&#166;§&sect;&#167;
        ¨&uml;&#168;©&copy;&#169;ª&ordf;&#170;
        «&laquo;&#171;¬&not;&#172; &shy;&#173;
        ®&reg;&#174;¯&macr;&#175;°&deg;&#176;
        ±&plusmn;&#177;²&sup2;&#178;³&sup3;&#179;
        ´&acute;&#180;µ&micro;&#181"&quot;&#34;
        <&lt;&#60;>&gt;&#62;' &#39;


        嵌套错误可能引起的问题

        在我们使用各种浏览器时，时常发现即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？

        举个栗子1：开始与结束标签嵌套错误

        <div><h2>内容</div></h2>

        测试结果：

        开始与结束标签嵌套错误

        举个栗子2：<p>元素嵌套<div>元素

        <p><div>内容</div></p>

        测试结果：

        QQ图片20171117181634

        举个栗子3：列表元素<li>兄弟元素为<div>

        <ul><li>内容</li><div>内容</div></ul>

        测试结果：

        列表元素li兄弟元素为div

        举个栗子4：<h2>元素嵌套<div>元素

        <h2><div>内容</div></h2>

        测试结果：

        h2元素嵌套div元素

        举个栗子5：<a>元素嵌套<a>元素

        <a href=""><a href="">内容</a></a>

        测试结果：

        a元素嵌套a元素

        通过上述栗子，我们总结如下：

        • 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误
        • 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误
        • 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常
        • 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误
        • 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6IE7的解析错误

        其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。

        我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

        严格嵌套约束、语义嵌套约束

        通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

        严格嵌套约束规则：

        • a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
        • <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
        • 暂时没有发现更多，有的欢迎告诉我

        语义嵌套约束：

        每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。

        浏览器的容错机制

        并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。

        这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。

        拥抱WEB标准

        原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了HTML5，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。

        你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。

        WEB标准只会使我们吃饭变得更香，睡眠变得更好，新的技术或标准会推动我们去富有热情的coding，而不是每天在重复劳动。

        补充一些标准的常用链接：

        W3C国际站：http://www.w3.org/

        W3C中国：http://www.chinaw3c.org/

        W3C HTML5：http://www.w3.org/TR/html5/


        此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。

        开始

        hello.html

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>HTML5 Boilerplate</title></head><body><h1>Hello world, hello QuickRef.ME!</h1></body></html>

        注释

        <!-- this is a comment -->

        这段代码将会被注释掉。

        段落

        <p>I'm from QuickRef.ME</p><p>Share quick reference cheat sheet.</p>

        请参阅：<p>标签

        链接

        <a href="https://quickref.me" rel="external nofollow" target="_blank" >QuickRef</a><a href="mailto:jack@abc.com">Email</a><a href="tel:+12345678">Call</a><a href="sms:+12345678&body=ha%20ha">Msg</a>
        href超链接指向的 URL
        rel链接网址的关系
        target链接目标位置：
        _self, _blank, _top,_parent

        请参阅：<a> 标签

        图片

        <img loading="lazy" src="https://xxx.png" rel="external nofollow"  alt="Describe image here" width="400" height="400">
        src必需，图像位置（URL | 路径）
        alt图像描述
        width图像的宽度
        height图像的高度
        loading浏览器应该如何加载

        请参阅：<img>标签

        文本格式

        <b>Bold Text</b><strong>This text is important</strong><i>Italic Text</i><em>Emphasis - This text is emphasized</em><u>Underline Text</u><pre>Preformatted text</pre><code>Source code</code><del>Deleted text</del><mark>Marked/highlighted text</mark><ins>Inserted text</ins><sup>Makes text superscripted</sup><sub> Makes text subscripted</sub><small>Makes text smaller</small><pre>Pre-formatted Text</pre><kbd>Ctrl</kbd><blockquote>Text Block Quote</blockquote>

        标题

        <h1> This is Heading 1 </h1><h2> This is Heading 2 </h2><h3> This is Heading 3 </h3><h4> This is Heading 4 </h4><h5> This is Heading 5 </h5><h6> This is Heading 6 </h6>

        您的页面上应该只有一个 h1

        分区

        <div></div>页面内容的部分或部分
        <span></span>其他内容中的文本部分
        <p></p>文字段落
        <br>换行
        <hr>基本水平线

        这些是用于将您的页面划分为多个部分的标签

        JavaScript在HTML中

        <script type="text/javascript">    alert("Hello QuickRef.ME");</script>

        外部JavaScript

        <head>    ...    <script src="app.js"></script></head>

        CSS在HTML中

        <style type="text/css">    h1 {        color: purple;    }</style>

        外部CSS

        <body>...<link rel="stylesheet" href="style.css"/></body>

        内联框架

        <iframe id="inlineFrameExample"    title="YouTube video player"    width="560"    height="215"    src="https://www.youtube.com/embed/HmZKgaHa3Fg" rel="external nofollow"     allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>

        HTML 表格

        表格示例

        <table>    <thead>        <tr>            <td>name</td>            <td>age</td>        </tr>    </thead>    <tbody>        <tr>            <td>Roberta</td>            <td>39</td>        </tr>        <tr>            <td>Oliver</td>            <td>25</td>        </tr>    </tbody></table>

        表格标签

        <table>定义一个表
        <th>定义表格中的标题单元格
        <tr>定义表格中的一行
        <td>定义表格中的单元格
        <caption>定义表格标题
        <colgroup>定义一组列
        <col>定义表中的列
        <thead>分组标题内容
        <tbody>将正文内容分组
        <tfoot>将页脚内容分组

        <td> 属性

        colspan单元格应跨越的列数
        headers一个或多个与单元格相关的标题单元格
        rowspan单元格应跨越的行数

        请参阅：<td>属性

        <th> 属性

        colspan单元格应跨越的列数
        headers一个或多个与单元格相关的标题单元格
        rowspan单元格应跨越的行数
        abbr单元格内容的描述
        scope标题元素涉及

        请参阅：tth>属性

        HTML 列表

        无序列表

        <ul>    <li>I'm an item</li>    <li>I'm another item</li>    <li>I'm another item</li></ul>

        请参阅：无序列表元素

        有序列表

        <ol>    <li>I'm the first item</li>    <li>I'm the second item</li>    <li>I'm the third item</li></ol>

        请参阅：有序列表元素

        定义列表

        <dl>    <dt>A Term</dt>    <dd>Definition of a term</dd>    <dt>Another Term</dt>    <dd>Definition of another term</dd></dl>

        请参阅：描述列表元素

        HTML 表单

        表单标签

        <form method="POST" action="api/login">  <label for="mail">Email: </label>  <input type="email" id="mail" name="mail">  <br/>  <label for="pw">Password: </label>  <input type="password" id="pw" name="pw">  <br/>  <input type="submit" value="Login">  <br/>  <input type="checkbox" id="ck" name="ck">  <label for="ck">Remember me</label></form>



        HTML<form>元素用于收集信息并将其发送到外部源。

        表单属性

        name脚本形式的名称
        action表单脚本的 URL
        methodHTTP 方法，POST/ GET （默认）
        enctype媒体类型，请参见enctype
        onsubmit在提交表单时运行
        onreset当表单被重置时运行

        标签标签

        <!-- Nested label --><label>Click me <input type="text" id="user" name="name"/></label>
        <!-- 'for' attribute --><label for="user">Click me</label><input id="user" type="text" name="name"/>

        ​for在标签中引用输入的id属性

        输入标签

        <label for="Name">Name:</label><input type="text" name="Name" id="">

        请参阅：HTML 输入标签

        文本区域标签

        <textarea rows="2" cols="30" name="address" id="address"></textarea>

        textarea 是一个多行文本输入控件

        单选按钮

        <input type="radio" name="gender" id="m"><label for="m">Male</label><input type="radio" name="gender" id="f"><label for="f">Female</label>

        单选按钮用于让用户选择一个

        复选框

        <input type="checkbox" name="sports" id="soccer"><label for="soccer">Soccer</label><input type="checkbox" name="sports" id="baseball"><label for="baseball">Baseball</label>

        复选框允许用户选择一个或多个

        选择标签

        <label for="city">City:</label><select name="city" id="city">    <option value="1">Sydney</option>    <option value="2">Melbourne</option>    <option value="3">Cromwell</option></select>

        选择框是选项的下拉列表

        字段集标签

        <fieldset>    <legend>Choose your favorite monster</legend>    <input type="radio" id="kraken" name="monster">    <label for="kraken">Kraken</label><br/>    <input type="radio" id="sasquatch" name="monster">    <label for="sasquatch">Sasquatch</label><br/></fieldset>
        Choose your favorite monster


        数据列表标签

        <label for="b">Choose a browser: </label><input list="list" id="b" name="browser"/><datalist id="list">  <option value="Chrome">  <option value="Firefox">  <option value="Internet Explorer">  <option value="Opera">  <option value="Safari">  <option value="Microsoft Edge"></datalist>

        提交和重置按钮

        <form action="register.php" method="post">  <label for="foo">Name:</label>  <input type="text" name="name" id="foo">  <input type="submit" value="Submit">  <input type="reset" value="Reset"></form>

        Submit到服务器的数据；Reset默认值

        HTML 输入标签

        输入属性

        输入标签是一个空元素，标识要从用户那里获取的特定类型的字段信息。 

        <input type="text" name="?" value="?" minlength="6"	 required />

        type="…"

        输入的数据类型

        value="…"

        默认值

        name="…"

        用于在 HTTP 请求中描述此数据

        id="…"

        其他 HTML 元素的唯一标识符

        readonly

        阻止用户修改

        disabled

        停止任何交互

        checked

        单选或复选框选择与否

        required

        强制性

        placeholder="…"

        添加临时

        autocomplete="off"

        禁用自动完成

        autocapitalize="none"

        禁用自动大写

        inputmode="…"

        显示特定的键盘。见输入模式

        list="…"

        关联数据列表的 id

        maxlength="…"

        最大字符数

        minlength="…"

        最少字符数

        min="…"

        范围和数字上的最小数值

        max="…"

        范围和数字上的最大数值

        step="…"

        数字如何在范围和数字中递增

        pattern="…"

        指定正则表达式。查看模式

        multiple

        多个条目

        autofocus

        专注

        spellcheck

        执行拼写检查

        输入类型

        type="date"
        type="time"
        type="month"
        type="datetime-local"
        type="week"
        type="checkbox"
        type="radio"
        type="color"
        type="file"
        type="hidden"
        type="number"
        type="range"
        type="text"
        type="search"
        type="password"
        type="email"
        type="tel"
        type="url"
        type="image"
        type="reset"
        type="button"Button
        type="submit"

        输入 CSS 选择器

        :focus当它的键盘聚焦时

        另请参阅：CSS 备忘单的选择器

        HTML 元标签

        元标签

        元标记描述 HTML 文档中的元数据。它解释了有关 HTML 的附加材料。 

        <meta charset='utf-8'>
        <!-- title --><title>···</title><meta property='og:title'  content='···'><meta name='twitter:title' content='···'>
        <!-- url --><link rel='canonical'       href='https://···'><meta property='og:url'  content='https://···'><meta name='twitter:url' content='https://···'>
        <!-- description --><meta name='description'         content='···'><meta property='og:description'  content='···'><meta name='twitter:description' content='···'>
        <!-- image --><meta property="og:image"  content="https://···"><meta name="twitter:image" content="https://···">
        <!-- ua --><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
        <!-- viewport --><meta name='viewport' content='width=device-width'><meta name='viewport' content='width=1024'>

        OpenGraph

        <meta property="og:type" content="website"><meta property="og:locale" content="en_CA"><meta property="og:title" content="Title of this page, same as title tag"><meta property="og:url" content="http://fullurl.com/to-this/page/"><meta property="og:image" content="http://fullurl.com/to-this/image.jpg"><meta property="og:site_name" content="Name of your website"><meta property="og:description" content="Description of this page, same as meta description">

        被 Facebook、Instagram、Pinterest、LinkedIn 等使用。

        Twutter Cards 推特卡片

        <meta name="twitter:card" content="summary"><meta name="twitter:site" content="@yourtwitterhandle"><meta name="twitter:title" content="Title of this page, same as title tag"><meta name="twitter:url" content="http://fullurl.com/to-this/page/"><meta name="twitter:description" content="Description of this page, same as meta description"><meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">

        请参阅：推特卡片文档

        Geotagging 地理标记

        <meta name="ICBM" content="45.416667,-75.7"><meta name="geo.position" content="45.416667;-75.7"><meta name="geo.region" content="ca-on"><meta name="geo.placename" content="Ottawa">

        请参阅：地理标记

        另见


          HTML属性

          元素可以通过其属性进行配置。

          以下代码显示了适用于a元素的属性。

          I like <a href="/index.html">CSS</a> and HTML.

          a 元素允许您创建一个超链接，当它被点击时，加载不同的HTML文档。

          属性引用

          上面的代码使用双引号"/index.htm"来分隔属性值。您还可以使用单引号'/index.htm'。

          要为包含引号的属性指定值，您同时使用样式"my 'HTML' value"或'my "HTML" value'。

          属性有一个名称和一个值。在上面的代码中，属性的名称是 href 。其值为 /index.htm 。

          属性只能添加到起始标签或单个标签。

          属性永远不能添加到结束标记。

          有一组可应用于任何HTML元素的全局属性

          元素可以定义自己的属性，提供特定于元素的配置信息。

          例如， href 属性是 a 元素的局部属性。它配置超链接的URL。

          具有多个属性的元素

          您可以将多个属性应用于元素通过用一个或多个空格字符分隔它们。

          下面的代码将多个属性添加到 a 元素。

          I like <a class="myClass" href="/index.html" id="myID">HTML</a> and CSS.

          属性的顺序并不重要。

          在上面的代码中， class 和 id 是全局属性。

          您可以将全局属性与元素的特定属性混合使用。

          布尔属性

          布尔属性是没有值的属性。

          下面代码中的 disable 是一个布尔属性。

          Enter what you like:  <input disabled>

          disabled属性阻止用户输入数据。

          您可以通过分配空字符串(“")来定义相同的布尔属性或将该值设置为属性的名称。

          <input disabled=""><input disabled="disabled">


          HTML表单属性

          Form autocomplete

          有时候你不想让浏览器自动填写表单。我们可以使用 form 元素中的 autocomplete 属性来控制这个。

          autocomplete 属性有两个允许值:on和 off 。

          on 值允许浏览器填写表单，并且是默认值。

          以下代码显示了如何使用表单元素上的 autocomplete 属性。

          <!DOCTYPE HTML><html><body>  <form autocomplete="off"         method="post"         action="http://example.com/form">    <input name="fave" /> <input name="name" />    <button>Submit Vote</button>  </form></body></html>

          例1

          您可以通过将 autocomplete 属性应用于单个输入元素，可以更具体，如以下代码所示。

          <!DOCTYPE HTML><html><body>  <form autocomplete="off"         method="post"         action="http://example.com/form">    <input autocomplete="on" name="fave" />     <input name="name" />    <button>Submit Vote</button>  </form></body></html>

          form元素上的autocomplete 属性设置表单中输入元素的默认策略。

          您可以覆盖单个元素的该策略。

          在上面的代码中，表单元素上的属性禁用自动完成，但是应用于第一个输入元素的相同属性会将其重新打开。

          未应用 autocomplete 属性的第二个输入元素受制于表单范围策略。



          Form Target

          浏览器的默认行为是用响应服务器替换页面。

          您可以通过在表单元素上使用 target 属性来更改此行为。

          此属性的工作方式与 a 元素上的target属性相同，并且可以从目标范围中进行选择。

          • _blank - 在新窗口（或选项卡）中打开服务器响应
          • _parent - 打开父框架集中的服务器响应
          • _self - 在当前窗口中打开服务器响应（这是默认行为）
          • _top - 在当前窗口中打开服务器响应（这是默认行为）
          • <frame> - 在指定的框架中打开服务器响应

          以下代码显示如何使用 target 属性。

          <!DOCTYPE HTML><html><body>  <form target="_blank"         method="post"         action="http://example.com/form">    <input autocomplete="on" name="fave" />     <input name="name" />    <button>Submit Vote</button>  </form></body></html>

          Form Name

          name 属性设置表单的唯一标识符。

          下面的代码显示了一个带有 name 和 id 属性的form元素。它们具有相同的值。

          <!DOCTYPE HTML><html><body>  <form name="fruitvote"         id="fruitvote"         method="post"      action="http://example.com/form">    <input name="fave" />     <input name="name" />    <button>Submit Vote</button>  </form></body></html>

          发布表单时，name属性的值不会发送到服务器。此属性仅在客户端的DOM操作中有用，并且不像输入元素上的name属性那样重要。

          如果输入元素没有name属性，则在提交表单时，用户输入的数据将不会发送到服务器。

          表单属性

          在HTML5中，您可以使用由input，button和其他表单相关元素定义的form属性将元素与文档中任何位置的表单相关联。

          要将元素与不是先行的表单相关联，请将form属性设置为表单的id值。

          以下代码显示如何使用表单Attribute。

          <!DOCTYPE HTML><html><body>  <form id="voteform" method="post" action="http://example.com/form">    <p>      <label for="fave">Fruit: <input autofocus id="fave"        name="fave" /></label>    </p>  </form>  <p>    <label for="name">Name: <input form="voteform" id="name"      name="name" />    </label>  </p>  <button form="voteform" type="submit">Submit Vote</button>  <button form="voteform" type="reset">Reset</button></body></html>

          在上面的代码中，只有一个输入元素是 form 元素的后代。另一个input元素和两个button元素都在表单元素之外，并且他们使用 form 属性将自己与表单相关联。


          通义灵码是阿里云与通义实验室联合打造的智能编码辅助工具，基于通义大模型技术，为开发者提供多种编程辅助功能。它支持多种编程语言，包括 Java、Python、Go、 TypeScript、JavaScript、C/C++、PHP、 C#、Ruby 等200多种编码语言。

          通义灵码的主要功能包括代码智能生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等。它还支持图片多模态问答，可以根据图片内容生成代码建议或问题修复建议。此外，通义灵码还具备多文件代码修改和工具使用的能力，可以与开发者协同完成编码任务，如需求实现、问题解决、单元测试生成、批量代码修改等。

          目前，通义灵码内置Qwen模型以及DeepSeek满血版，欢迎按需使用。


          通义灵码


          目前对于 HTML 语言，通义灵码支持在多种文本编辑器或 IDE 上使用，接下来我们以 VS Code 为例来详细讲解通义灵码的安装与使用：


          一、Visual Studio Code 中安装指南

          本安装步骤适用于 macOS、Windows 或 Linux 的 Visual Studio Code 中安装通义灵码。

          步骤 1：准备工作

          • 操作系统：Windows 7 及以上、macOS、Linux；
          • 下载并安装 Visual Studio Code 1.68.0 及以上版本。

          步骤 2：在 Visual Studio Code 中安装通义灵码

          方法 1：从插件市场安装

          说明
          单击​立即安装​，唤起 Visual Studio Code 插件市场直接安装，安装后请重启 IDE，即可开启智能编码之旅。
          1. 打开 Visual Studio Code 扩展窗口，搜索 ​TONGYI Lingma​，找到通义灵码后单击​安装​。
          2. 安装完成后，请重启 Visual Studio Code。

          从插件市场安装通义灵码


          方法 2：下载安装包安装

          1. 单击下方链接，下载 Visual Studio Code 的 VSIX 安装包；
            ⇩ TONGYI Lingma-VS Code
          2. 下载完安装包后，打开 Visual Studio Code 后，单击扩展，单击更多按钮，在下拉菜单中单击 从 VSIX 安装，选择下载的 VSIX 文件后安装；
            Visual Studio Code
          3. 安装完成后，请重启 Visual Studio Code。

          步骤 3：登录并开启智能编码之旅

          1. 重启 Visual Studio Code 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。
            通义灵码 登录并开启智能编码之旅
            Tips：如果安装后在侧边导航上找不到通义灵码入口，可鼠标聚焦在侧边导航后右键查看，勾选通义灵码后即可将插件入口配置在侧边导航上。
            通义灵码登录并开启智能编码之旅2
          2. 单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。


          二、通义灵码配置指南

          Visual Studio Code 中配置通义灵码

          准备工作

          如果需要在 Visual Studio Code 中使用通义灵码，必须完成通义灵码插件安装及阿里云账号登录。

          查看快捷键

          操作

          macOS

          Windows

          打开/关闭智能问答窗口

          ⌘ ⇧ L

          Ctl Shift L

          接受行间代码建议

          Tab

          Tab

          废弃行间代码建议

          esc

          esc

          查看上一个行间推荐结果

          ⌥(option) [

          Alt [

          查看下一个行间推荐结果

          ⌥(option) ]

          Alt ]

          手动触发行间代码建议

          ⌥(option) P

          Alt P

          重新绑定快捷键

          步骤 1：在 Visual Studio Code 的首选项中，单击快捷键的设置入口；

          通义灵码重新绑定快捷键

          步骤 2：在快捷键管理窗口中，输入 TONGYI Lingma 搜索，单击编辑。在弹出的窗口中输入用于命令的按键，然后单击​Enter​/​Return​。

          通义灵码 重新绑定快捷键2

          启用或禁用行间生成

          可以通过 2 个方法启用或禁用行间生成功能：

          方法 1：单击状态栏的通义灵码图标，在弹出的窗口中可快速启用或禁用行间生成功能：

          • 可以配置本地离线模型、云端大模型是否启用；
          • 开启本地离线模型、云端大模型同时开启的情况下，行间生成时优先推荐云端大模型的代码建议；

          通义灵码 启用或禁用行间生成

          方法 2：插件设置页面启用或禁用行间生成，并支持设置生成的长度。

          通义灵码 插件设置页面启用或禁用行间生成，并支持设置生成的长度

          启用或禁用函数的行间快捷入口

          通义灵码的智能问答窗口中，单击设置，找到函数的行间快捷入口设置，可以进行启用或禁用该功能。

          通义灵码 启用或禁用函数的行间快捷入口

          配置 IDE 原生补全和行间生成的展示规则

          打开插件设置页面，可以设置是否同时展示行间自动生成建议和 IDE 原生下拉补全，默认不勾选。

          通义灵码 配置 IDE 原生补全和行间生成的展示规则


          查看帮助和分享反馈

          查看使用帮助

          通义灵码的智能问答窗口中，可以通过 2 种方式查看使用帮助：

          1. 通过智能问答的​ /help​ 指令快捷查看使用帮助；
            image (10)
          2. 单击智能问答窗口的帮助文档入口，可以快速来到当前帮助文档知识库。
            image (11)


          反馈回答质量

          在智能问答中，你可以对通义灵码所生成的回答内容进行评价，支持点赞和点踩，以不断优化回答效果。

          image (12)


          使用问题反馈

          当你在使用的过程有任何疑问、优化建议、功能诉求等，均可在通义灵码的智能问答窗口单击提交反馈，即可前往阿里云开发者社区-通义灵码问答专区 向我们提出问题。

          image (13)


          参与体验调研

          为了给你提供更好的智能编码体验，我们也期待收到你的使用体验反馈、优化建议以及你的期待，我们会不断努力和优化产品体验。

          image (14)

          三、通义灵码核心能力

          1. 智能补全使用指南

          通义灵码提供了多种智能补全的方式，可以根据当前代码文件、跨文件的上下文或企业代码规范等，为您生成行级/函数级代码，让您更专注在技术设计。

          说明

          在 IDE 环境中使用通义灵码，需要先完成通义灵码插件安装及阿里云账号登录。详细信息可查看下载安装指南 。


          1.1 行级/函数级实时补全

          当你在 IDE 编辑器区进行代码编写时

          ，在开启自动云端生成的模式下，通义灵码会根据当前代码文件及相关代码文件的上下文，自动为你生成行级/函数级的代码建议，此时你可以使用快捷键采纳、废弃，或查看不同的代码建议。

          同时，当你在编码的过程中，也可以通过快捷键 ​⌥​ ​P​ 手动触发生成代码建议。


          image (15)

          编辑器中代码建议相关操作的快捷键如下：

          操作

          macOS

          Windows

          接受行间代码建议

          Tab

          Tab

          废弃行间代码建议

          esc

          esc

          查看上一个行间推荐结果

          ⌥(option) [

          Alt [

          查看下一个行间推荐结果

          ⌥(option) ]

          Alt ]

          手动触发行间代码建议

          ⌥(option) P

          Alt P

          Tips：不同操作系统的快捷键配置可查看配置和反馈指南 。

          1.2 自然语言生成代码

          在编辑器中，可以直接通过自然语言的方式描述需要实现的需求，通义灵码可以在编辑器中生成代码建议，单击

          Tab 可直接采纳。


          image (16)

          1.3 企业代码生成增强

          企业管理员上传并启用行间代码生成知识库，并设置为组织内开发者可见成员后，开发者在 IDE 的代码编辑器中编写代码时，通过快捷键 ⌥ P 手动触发，通义灵码将根据知识库中的内容自动生成符合企业规范的代码建议。

          有关企业管理员如何准备代码库以及开发者，以及如何使用代码生成增强功能的详细介绍，可参考企业代码补全增强使用实践 。


          image (17)



          1.4离线单行补全

          通义灵码代码补全默认使用云端大模型进行智能续写， 当网络情况有限制时 ，可使用本地补全模式，单击状态栏图标切换至本地补全模式后，编辑器中进行编码时，通义灵码会给出单行的代码建议。


          image (18)


          2 智能问答使用指南

          通义灵码，作为您的智能编码助手，可以在您进行编码工作遇到疑问时帮您答疑解惑，并快速为您生成建议代码，能够帮您生成代码注释、生成单元测试、进行代码优化、解释工程和代码文件、修复代码问题、排查编译报错、生成提交信息等。

          说明

          在 IDE 环境中使用通义灵码，需要先完成通义灵码插件安装及阿里云账号登录。详细信息可查看下载安装指南 。

          2.1 研发智能问答

          使用通义灵码的智能问答时，为了通义灵码与您的对话能够更友好、高效，希望您能够在输入问题时：


          • 选中代码 ，开始输入您的问题，通义灵码将围绕着选中代码与您开展对话；
          • 精准表达问题 ，以及给出相对详细的上下文输入， 比如选中的代码、日志、报错信息等；
          • 多多互动 ，告诉通义灵码，所给出代码建议或回答是否满足您的预期，或生成内容存在的具体瑕疵，通义灵码也会不断改进。

          2.1.1 自由问答

          当您编码遇到问题，缺乏具体解决思路时 ，可单击 IDE 侧边工具导航或使用 ​⌘​ ​⇧​ ​L​ 唤起通义灵码智能问答助手，无需离开 IDE 客户端，即可快速获得答案和解决思路。

          操作

          macOS

          Windows

          打开/关闭 AI 程序员

          ⌘ ⇧ L

          Ctl Shift L

          image (19)


          2.1.2 代码问答

          当您对某段代码有疑问或期望针对代码进行一些问题解决时 ，选中代码后，在智能问答窗口的输入框中输入您的问题，通义灵码将围绕选中代码与您开展对话。


          image (20)

          2.1.3 @workspace 本地工程问答

          当您需要快速了解一个工程、查找工程内的实现逻辑，或有新的诉求需要进行代码变更时 ，可以在智能问答窗口中通过 ​@​ 可唤起 ​@workspace​ ，选中后输入您的问题或诉求，通义灵码可快速结合当前仓库进行工程理解、代码查询、代码问答等，同时可以通过自然语言描述需求，结合当前工程生成简单需求或缺陷的整体修改建议和相关建议代码。


          image (21)


          2.1.4@terminal 问答

          当您遇到执行指令不知道如何写，或者不清楚某个指令的意思时 ，可以在智能问答窗口中通过 ​@​ 可唤起 ​@terminal​ ，选择后使用自然语言描述您的需要指令诉求，通义灵码将可以生成您需要的命令。生成指令后，您可以一键插入到 terminal 中进行执行或让通义灵码继续解释。当然，您也可以在选择 ​@terminal​ 后，输入指令让通义灵码生成指令解释。


          image (22)


          2.1.5#teamDocs 知识库问答（企业版）

          当您需要结合企业内私域知识信息让通义灵码进行回答时 ，可以在智能问答窗口中通过 ​#​ 唤起 ​#teamDocs​ ，并输入问题，通义灵码将结合企业知识库（当前用户有权限的知识库）对问题进行回答，在回复中也可以单击查看引用的企业知识库内容。


          image (23)


          2.1.6清空会话上下文历史记忆

          当您在会话中时，在智能问答输入框中输入 ​/​ 即可看到 ​/clear context​ 指令，选择后即可清空当前会话的上下文历史记忆。


          image (24)


          2.1.7新建会话

          在智能问答窗口中，单击右上角的新建按钮即可新建会话窗口，单击后会话窗口将回到默认状态。


          image (25)


          2.1.8查看会话历史

          历史会话功能帮助您检索和回顾与通义灵码的交流记录，方便针对多次的建议进行对比和选择。不管您在哪个 IDE 客户端上、哪个工程中，均可以查看或搜索您和通义灵码的历史会话。


          image (26)


          2.2智能生成指令

          2.2.1指令触发方式

          通义灵码提供多处触发单元测试生成、代码解释、生成代码注释、代码优化功能的入口，当您选中的代码后，有 3 种触发方式：

          1. 在编辑器中，单击右键找到通义灵码功能操作入口，单击对应功能操作；
          2. 在智能问答中，直接单击对应功能操作；
          3. 在智能问答中，使用 ​/​ 查看快捷指令，单击对应功能操作。


          image (27)

          当需要针对一个方法实现生成单元测试、代码注释、代码解释、代码优化时，无需选中代码，可直接单击函数上方的快捷入口触发相关功能操作。


          image (28)


          2.2.2 选择指令后输入回答要求

          当您选中代码后，并通过在智能问答窗口的输入框输入 / 的方式选中指令后，可以继续输入附加的要求，比如：

          • 选择 ​/generate unit test​  后，继续输入您对单元测试生成的要求，比如 使用 ​JUnit 5​ 生成 ；
          • 选择 ​/generate comment​  后，继续输入生成注释的要求，比如 开头标明日期，并用英文注释 。

          image (29)

          2.2.2.1指令一：解释代码

          覆盖各种编程语言，选中代码后可自动识别编程语言并生成代码解释。跨越语言的边界，让您阅读代码更高效。


          image (30)



          2.2.2.2指令二：生成单元测试

          支持根据 JUnit、Mockito、Spring Test、unit test、pytest 等框架生成单元测试。

          image (31)


          2.2.2.3指令三：生成注释

          一键生成方法注释及行间注释，节省您写代码注释的时间，并能够有效提升代码可读性。


          image (32)


          2.2.2.4指令四：代码优化

          深度分析代码及其上下文，迅速识别潜在的编码问题，从简单的语法错误到复杂的性能瓶颈，均能够指出问题所在，并提供具体的优化建议代码。

          image (33)


          2.2.3生成回答后快捷操作

          针对不同的指令生成回答后，在智能问答区中，可以继续根据诉求进行操作，不同功能的对应操作如下：

          • 生成单元测试：
            • 采纳单元测试代码建议：支持一键插入、复制、或者新建代码文件，可快速采纳生成的单元测试代码建议；
            • 更换单元测试框架：提供基于 JUnit、Mockito、Spring Test、unit test、pytest 等框架生成单元测试代码建议，在回答完成后，可以根据需要切换框架重新生成；
            • 新建文件：支持一键保存单元测试代码为新文件，方便进行查看和修改。
          • 生成代码优化建议
            • 采纳代码优化建议：针对优化建议中的建议代码，支持一键插入、复制，快速采纳生成的建议代码；
            • 查看 Diff：单击查看 Diff 按钮，将快速唤起 IDE Diff 查看窗口，快速了解建议和源代码的变更；
          • 生成代码注释：
            • 采纳代码注释建议：支持一键插入、复制，可快速采纳生成的代码注释建议；
            • 查看 Diff：单击查看 Diff 按钮，将快速唤起 IDE Diff 查看窗口，快速了解建议和源代码的变更。
          • 解释代码：
            • 支持重试、更详细、更简单、中文/英文解释的追问。

          2.3 问题修复建议 

           2.3.1 代码问题（Problem）一键修复

          当您在编码过程中出现代码问题（Problem）需要进行修复时 ，通义灵码可以一键给出修复建议，帮您快速修复代码问题。可以通过编辑器中报错图标中下拉菜单中或 Problem 窗口中聚焦到报错信息后右键菜单中，单击通义灵码一键修复菜单，即可生成修复建议和相关建议代码。


          image (34)


          2.3.2 异常报错排查（IntelliJ IDEA）

          在 IntelliJ IDEA 中，当运行出现异常报错时，在运行标准输出窗口中，即可看到通义灵码的快捷操作按钮，单击后，通义灵码将结合运行代码、异常堆栈等报错上下文，快速给出排查思路或修复建议。


          image (34)


          2.3.3 执行报错、编译报错排查（Visual Studio Code）

          在 Visual Studio Code 中， 当 terminal 中执行指令后报错、编译或运行后有大量报错，需要进行解释或修复时 ，可以选中报错信息，右键选择使用通义灵码一键解释，也会为您生成相关命令解释及问题解决建议。


          image (35)


          2.4 提交信息生成

          当您有代码变更需要提交，需要写提交信息时 ，可以通过通义灵码一键生成 Git 提交信息，同时可以在插件设置中配置生成的语言（英文/中文）。


          image (35)


          3 AI程序员

          通义灵码 AI 程序员，具备 多文件代码修改（Multi-file Edit）和工具使用（Tool-use） 的能力，可以与开发者协同完成编码任务，如需求实现、问题解决、单元测试用例生成、批量代码修改等。

          说明

          使用通义灵码 AI 程序员，需要将通义灵码 IDE 插件升级到最新版本（2.0.0及以上版本）。

          AI 程序员可以帮助开发者快速完成一个研发任务的代码编写工作，在与 AI 程序员对话过程中，可以遵循以下几点建议：

          • 清晰的需求描述： 首先需要澄清我们需要 AI 程序员帮我们做什么，建议包含一个明确的目标，并通过步骤式的结构化描述，详细地描述你期望完成的开发任务要求；
          • 指定需要的上下文： 选择代码文件、图片、codebase、codeChanges 等上下文，可以帮助 AI 程序员获取需求相关的语境。同时，结合详细执行步骤和要求，AI 程序员更精准地了解你的意图，生成最佳的方案和建议代码；
          • 明确生成要求： 告诉 AI 程序员在生成代码修改建议时，你期望它遵循的要求，比如语言、规范、格式、变更目标等，如“生成变更时，同时为每个方法生成英文注释”；
          • 善用快照功能： 当 AI 生成内容不符合预期，或你的需求有变化时，可以通过快照功能回退到之前的对话轮次和代码变更，继续重新提问；
          • 审查和修改变更： AI 程序员完成多个文件的代码变更后，开发者可以通过变更对比查看视图（Diff View）进行审查，以及对局部代码片段进行接受、拒绝、修改，保证最后得到符合预期的代码变更。

          通义灵码，每天进步不止一点点，可以和开发者协同完成编码任务。


          3.1.1 唤起 AI 程序员（ Summon your AI Developer ）

          当开发者期望和 AI 程序员一起完成一个研发任务时，可以通过 IDE 扩展导航打开通义灵码插件的窗口，并切换到 AI 程序员模块，或使用快捷键 ⌘ ⇧ I 唤起 AI 程序员，即可开始使用。

          操作

          macOS

          Windows

          打开/关闭 AI 程序员

          ⌘ ⇧ I

          Ctl Shift I


          3.1.2 与 AI 程序员一起编程（Coding with AI Developer）

          AI 程序员与开发者一起围绕开发任务进行编码工作时，开发者需要输入清晰的需求描述和要求，AI 程序员可以为开发者在工程内进行多个文件的修改，开发者审查并接受相关代码变更即可。


          image (36)


          同时，通义灵码提供了相关的交互界面帮助开发者与 AI 程序员进行对话和交互，整体交互界面区域如下：


          image (37)


          • 新建会话 ：如果和 AI 程序员正在对话并有文件变更，单击后将出现二次确认，确认后会终止或取消当前文件变更，同时创建一个新的会话；
          • AI 程序员对话区域 ：展示开发者（问题）和 AI 程序员（回答）对话的过程，如果涉及到文件变更、计划确认等，也将在会话流的回答卡片中进行状态展示或操作；
          • 工作区 ：承载代码变更文件的展示，以及针对当前会话流中的多次对话产生的多次变更文件进行快照管理，同时提供查看、拒绝、接受代码变更的相关操作入口；
          • 需求描述输入区域 ：开发者进行需求描述输入的区域，提供了选择上下文、自然语言输入、自然语言和上下文组装的能力；
          • 变更对比查看和操作区域 ：当前快照下文件与其对应本地文件的变更差异查看视图，并提供针对代码变更片段进行修改、拒绝或接受的操作，以及文件级别的变更接受或拒绝操作。


          3.1.3 需求描述输入（User Input）

          打开 AI 程序员后，即可看到需求输入区域，在输入框内单击 ➕ 或者输入 # 即可选择需要的相关上下文。输入完成后发送即可，AI 程序员将根据需求描述自动进行需求理解、相关信息检索、任务拆解、编码实现等。


          image (38)

          image (39)


          3.1.4 多文件代码修改（Multi-file Edit）

          3.1.4.1 变更文件生成过程

          当 AI 程序员对工程内多个代码文件进行修改时，每一个文件的修改将至少经历生成、应用的过程，生成代码变更的过程中，可在 AI 程序员的回答卡片中和工作区中看到相关的变更文件，以及相应的状态：

          • 生成中（Generating）：根据任务拆解的修改计划生成对各个文件的代码片段修改建议的过程；
          • 应用中（Applying）：某文件的代码片段修改建议生成完成后，将自动结合原文件内容和代码片段修改建议，生成相关代码变更文件（非原文件）；
          • 应用完成（Applied）： 代码变更文件生成完成。

          回答卡片中的文件或工作区的文件在生成中、应用中的状态时，单击对应文件，即可看到对应文件的代码修改建议生成过程、代码变更文件与原文件变更对比（Diff）生成过程。

          AI 程序员完成的代码变更文件将聚合在 工作区 ，方便开发者进行查看和操作。


          image (41)


          3.1.4.2 审查、接受、拒绝代码变更

          单击工作区的查看变更按钮或单击文件列表中的某文件，即可看到对应文件的变更对比查看视图（Diff View），开发者在此视图中可以进行如下操作：

          • 单击上下键进行切换查看当前文件的多个变更点；
          • 单击某变更点上的拒绝、采纳按钮进行决策操作；
          • 单击文件级操作区的前后键进行多个变更文件的查看；
          • 单击文件级操作区的拒绝、采纳按钮进行决策操作；
          • 局部修改当前变更文件。

          JetBrains IDEs 的视图和操作位置，示意如下：：


          image (42)


          VS Code 的视图和操作位置，示意如下：


          image (43)


          说明
          1. 开发者基于当前快照的代码变更文件产生的修改，将统一进入当前快照的最新内容中，进行拒绝或接受操作时，将统一被拒绝或接受；
          2. 当单击接受某片段、某文件的代码变更时，变更内容将被合并到原文件代码内容中。


          当所有代码变更文件均被操作过拒绝或接受变更后， 当前快照 会变为已接受、部分接受、已拒绝状态，各个状态的相关释义如下：

          • 已接受： 某文件有代码变更接受，视为该文件为已接受状态；所有文件为已接受状态，当前快照为已接受状态；
          • 部分接受： 某文件有代码变更接受，视为该文件为已接受状态；有部分文件为已接受状态，当前快照为部分接受状态；
          • 已拒绝 ：某文件在无代码变更被接受，视为该文件为已拒绝状态；所有文件为已拒绝状态，当前快照为已拒绝状态。


          3.1.5多轮对话及变更快照（Multi-turns & Snapshot）
          3.1.5.1 进行多轮次需求对话

          当进行了一轮对话并生成代码变更文件后，如需继续补充需求或者修改需求，可在当前任务的会话流中继续提问，AI 程序员将结合前序轮次生成的代码变更分析补充的需求，并生成新的代码修改建议，产生一个或多个新的代码变更文件。


          image (44)


          3.1.5.2快照查看和变更回退

          当需要查看或回退到前序轮次的修改时，可单击下拉箭头查看当前会话任务中产生的多次代码变更快照，选择后，可以看到相关信息变化或进行切换操作：

          • 会话流中自动定位到产生该快照代码变更文件的回答卡片；
          • 快照下方文件列表自动切换到所选快照下的代码变更文件，单击后可查看代码变更内容；
          • 单击“切换”按钮，将当前代码变更回退到所选快照的代码变更状态。

          image (46)


          4单元测试生成（UnitTest Agent）

          单元测试智能体是 AI 程序员所具备的一种专项能力，可以 针对代码变更（​#codeChanges​）、单个或多个代码文件批量生成单元测试文件 。开发者输入被测内容、生成要求，AI 程序员即可自动生成测试计划、测试用例、编译、运行以及根据错误信息进行自动修复，大幅提升测试用例覆盖度和用例的生成质量，降低开发者编写单元测试用例的成本。


          4.1选择被测代码并输入测试要求

          打开 AI 程序员后，在输入框内单击 ➕ 或者输入 # 即可选择需要的相关上下文，并输入相关的指令要求（ 建议输入和生成单元测试相关要求的内容 ），输入完成后发送即可，AI 程序员会自动感知意图，开始进入生成单元测试的流程。


          image (47)


          4.2选择和确认环境信息

          收到测试要求后，AI 程序员会自动检测本地环境 Java 版本、构建工具、测试框架、Mock 框架等信息，如果检测到多个版本，开发者可主动选择需要的版本；如果无法识别，将看到提示错误，单击“如何修复”按钮，开发者可以进一步了解如何配置相关组件。


          image (48)


          4.3确定被测方法

          环境信息检查通过后，AI 程序员将自动分析被测文件，并生成测试计划，开发者可以主动选择需要覆盖的方法，选择并确认完成后，单击确定按钮，即可开始为每个方法生成单元测试用例。

          说明
          • 每次至少选择 1 个方法为其生成测试用例，最多选择 20 个方法；
          • 选择方法后，会提示整体生成过程预计需要的时间，以供参考。

          image (49)


          4.4查看生成进展

          在确定被测方法后，AI 程序员将自动根据开发者选择的被测方法进行单测用例生成工作，并自动对生成的结果进行编译、运行和自动修复。最终的结果会展示在界面中，状态及释义如下：

          状态

          图标含义

          image (50)

          代表运行通过的用例

          image (51)

          代表编译通过但运行失败的用例

          image (52)

          代表编译失败的用例


          image (53)


          当所有方法的用例生成完成后，AI 程序员自动将编译通过和运行通过的用例合并成最终测试用例文件，并根据被测文件自动进行命名。对于编译失败的测试用例代码，开发者可自行选择是否需要，所有用例代码确认后，可单击完成按钮，测试用例文件将自动与原测试用例文件进行差异对比。


          image (54)


          4.5审查、接受测试用例文件代码

          确认完成后，测试用例文件会出现在工作区中，开发者可单击工作区的查看变更按钮或单击文件列表中的某文件，即可看到对应文件的变更对比查看视图（Diff View），开发者可进行审查、局部修改、接受或拒绝部分代码等。确认所有代码变更后，单击接受按钮，，测试用例文件变更代码将正式进入到当前代码工程。


          image (55)


          4.6查看会话历史

          如果需要回顾历史的会话任务，可单击会话历史按钮。你与 AI 程序员的会话均有 @AI Developer 标签，单击后即可查看相关对话过程。


          image (56)


          四、登录通义灵码

          步骤 1：准备工作

          • 已成功注册阿里云账号，具体操作可参考：账号注册（PC端） 。如果你是某阿里云账号下的 RAM 用户，且你所在的阿里云主账号未开通企业标准版，也可以使用通义灵码个人版；
          • 已在 JetBrains IDEs、Visual Studio Code、Visual Studio 中安装通义灵码 IDE 插件，具体操作可参考：下载安装指南 。


          步骤 2：在 IDE 的通义灵码插件登录

          说明
           如果你的电脑安装多个 IDE 本地客户端，均安装通义灵码的情况，登录状态在多个 IDE 客户端的通义灵码插件中同步，你只需要登录一次即可。

          使用阿里云账号登录通义灵码有两种方式：

          • 前往阿里云登录页，登录通义灵码（推荐）；
          • 使用阿里云账号的 AK/SK 登录通义灵码。


          方式 1：前往阿里云登录页，登录通义灵码（推荐）

          安装完通义灵码插件后，通常情况下，你可以通过 IDE 客户端的插件上的登录按钮前往阿里云登录页完成登录，操作步骤如下：

          1 在 IDE 客户端的通义灵码插件中，找到登录按钮，不同 IDE 客户端中位置不一样（如下图所示），操作步骤如下：
          ○ 在 JetBrains IDEs、Visual Studio Code 中，单击通义灵码智能问答窗口中的登录按钮，即可前往阿里云登录页；
          ○ 在 Visual Studio 中，单击顶部导航工具-通义灵码，单击登录按钮，即可前往阿里云登录页；


          image (57)


          2 在阿里云登录页面中，完成阿里云登录（RAM 用户可在 RAM 用户登录页面中登录）后，即可看到登录完成的状态，此时即可前往插件端使用。


          image (58)


          1.2.2方式 2：使用阿里云账号的 AK/SK 登录通义灵码

          如果遇到无法打开浏览器的阿里云登录页面时，可使用阿里云账号的 AK/SK 登录通义灵码，情况如下：

          ● 当你进行远程开发时，如使用 Remote SSH、WSL、Docker 的开发环境，可以使用 AK/SK 的方式登录通义灵码；
          ● 当你使用 Visual Studio Code 的 Web IDE 时，可以使用 AK/SK 的方式登录通义灵码；
          ● 当你使用基于 Visual Studio Code 的 Web IDE 开源版本构建的 IDE 时，如果 IDE 提供方对接了 Open VSX 时，可以使用 AK/SK 的方式登录通义灵码，直达插件地址：https://open-vsx.org/extension/Alibaba-Cloud/tongyi-lingma ；
          ● 其他无法打开阿里云登录页面的情况。

          操作步骤如下：

          1 前往阿里云控制台获取 AccessKey，具体操作可参考：创建AccessKey 。


          image (59)

          属性

          class

          HTML 元素可以有一个或多个类，类之间用空格分隔。你可以使用 CSS 通过类来选择元素并为其设置样式。

          示例

          <div class="big-box yellow-box">这是一个大的黄色盒子。</div>

          id

          HTML 元素可以有一个 id 属性来标识它。id 应该是唯一的，每个元素最多只能有一个 id。

          示例

          <div id="my-box">这是我的盒子！请把你的文字放在其他盒子里。</div>

          href

          链接使用 href 属性告诉浏览器要去哪里，href 存储一个 URL。

          示例

          <a href="https://www.w3cschool.cn/">去 W3Cschool！</a>

          基本格式

          你可以使用简单的格式标签轻松地将文本设置为粗体、斜体或下划线。

          示例

          这段文字是 <b>粗体</b>，<i>斜体</i> 和 <u>下划线</u>。

          Body（主体）

          主体是页面所有内容的容器。它紧跟在 <head> 标签之后，位于整体 <html> 标签内。

          示例

          <html>  <head>    <title>主体标签的例子</title>  </head>  <body>    这是在主体里面！  </body></html>

          阅读更多

          使用

          几乎所有内容都应该放在主体标签内。主要例外是脚本和样式标签，以及页面标题标签。如你所见，在这个例子中，主体标签内有一个标题、一个图像和一个链接。头部标签只包含外部文件和页面标题。

          示例

          <html>  <head>    <title>我的主页</title>    <link rel="stylesheet" type="text/css" href="homepage.css" />    <script type="text/javascript" src="homepage.js"></script>  </head>  <body>    <h1>你好，这是一张我的猫的照片！</h1>    <img src="cat.jpg" />    <a href="mailto:cat@w3cschool.cn">给我发邮件</a>  </body></html>

          子元素

          一个元素是另一个元素的直接后代或嵌套在另一个元素内时，它被称为子元素。在使用 CSS 子选择器和伪元素时，这些概念非常有用。

          示例

          <ul id="parent">  <li id="child">我是 parent 的子元素！</li></ul>

          注释

          HTML 注释有时用于代码中以解释标记的部分。它们与其他语言中的注释类似。用户在浏览器中看不到注释。

          语法

          <!-- 这是一个注释 -->

          Div（分区）

          一个块级容器（或网页的“分区”），用于没有语义意义的内容。

          语法

          <div>这是一个 div 元素。</div>

          Head（头部）

          头部标签围绕对用户不可见但对浏览器重要的内容。此标签内的元素包含关于页面的元数据以及样式表、脚本等的链接。

          <html>  <head>  </head>  <body>  </body></html>

          标题

          标题元素如 <h1>、<h2>、<h3> 等允许你使用六级文档标题，从最大到最小，将文档分成逻辑部分。例如，上面的“标题”一词被包裹在一个 <h2> 标签中。

          语法

          <h1>这是一个标题！</h1>

          水平线

          此标签创建一条贯穿其容器的黑色 1 像素粗的线。你可以使用 CSS 使其看起来不同。

          示例

          这段文字被<hr>分隔... 从这段文字！

          阅读更多

          HTML

          HTML 是什么？

          HTML 代表超文本标记语言。它是用于创建所有网站的语言。

          阅读更多

          <html> 标签

          所有 HTML 文件都包含在一个总体的 html 标签内。这是定义 html 文档的基本标签。

          语法

          <html> 你的网页其余部分放在这里！</html>

          阅读更多

          超链接

          超链接（或链接）当用户点击时会将他们带到另一个网页。链接最常用的属性是 href，它告诉浏览器链接指向哪里。

          语法

          <a href="这个链接指向的网址">链接文本</a>

          示例

          以下文字 <a href="http://google.com" rel="external nofollow" target="_blank" >去 Google</a>。

          图像

          img 标签将图像嵌入到你的 HTML 中。总是与 'src' 属性一起使用，它告诉浏览器在哪里找到图像。注意 <img/> 标签是自闭合的。

          语法

          <img src='我的本地图像.jpg'/>

          换行

          此标签用于在文本块中强制换行。这适用于单个段落中需要此格式的情况，如诗歌或地址。要分隔段落，请将每个段落分成一个单独的 <p> 元素。结果元素在网页上将如下所示：

          示例

          <p>一些文本 <br/> 跨两行的文本</p>

          链接

          链接元素用于将你的文档连接到相关资源（与超链接非常不同，超链接当你点击它们时会带你到另一个网页）。链接只出现在文档的头部部分，因此它们不会改变内容，只改变呈现方式。链接最常用于连接到样式表、脚本、网站图标或页面的替代格式，如 RSS 源或 PDF。

          示例

          <link type="text/css" rel="stylesheet" href="styles.css" />

          列表

          HTML 支持两种列表：有序列表和无序列表。在列表中，每个列表项都有自己的标签。

          无序列表

          无序列表是项目以项目符号表示的列表。

          示例

          购物清单<ul>  <li>洗碗液</li>  <li>猫砂</li>  <li>番茄酱</li></ul>

          阅读更多

          有序列表

          有序列表的项目以数字表示。

          示例

          我的编号列表<ol>  <li>第一项！</li>  <li>第二项！</li>  <li>最后一项！</li></ol>

          阅读更多

          段落

          <p>

          HTML 中最常用的标签之一 - 它表示一个文本段落。它通常包含其他元素，如 <img/>、<a>、<strong> 和 <em>。

          语法

          <p>这是段落文本！</p>

          语义化格式

          这些标签与之前提到的格式标签类似，但它们有语义价值（意义）。<em> 用于你想要强调的内容，<strong> 用于重要的内容。通过嵌套这些元素，你可以传达文本的强调或重要性级别。嵌套的层数越多，文本的重要性就越高。

          示例

          <p><strong><strong>警告：</strong>酸会造成严重灼伤</strong></p>

          表格

          用于以行和列显示信息的元素。支持带有标签的列标题和列尾。将信息分为行（由 tr 标签表示），行中包含单元格（由 td 标签表示）。

          示例

          <table>  <thead>    <tr>      <th>项目</th>      <th>价格</th>    </tr>  </thead>  <tbody>    <tr>      <td>香蕉</td>      <td>￥8.00</td>    </tr>    <tr>      <td>酸奶</td>      <td>￥10.00</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>总计</td>      <td>￥18.00</td>    </tr>  </tfoot></table>

          标签和元素

          标签是基本的标签，用于将你的标记分成元素。它们由一个关键词组成，关键词被尖括号 <> 包围。内容位于两个标签之间，关闭标签前缀为斜杠（注意：有些 HTML 标签是自闭合的，如图像标签）。标签还可以有属性。

          语法

          <tag attribute='value'>内容</tag>

          标题

          此标签告诉浏览器在顶部显示页面标题，并告诉搜索引擎你的网站标题是什么。它位于 <head> 标签内。尽量使你的页面标题描述性，但不要太冗长。

          示例

          <title>HTML 术语词典</title>

          希望这篇文章能帮助你更好地理解 HTML！如果你有任何问题或需要进一步的帮助，请随时访问 编程狮。


          课程推荐：