有关html的学习

最新推荐文章于 2021-08-31 10:29:08 发布
最新推荐文章于 2021-08-31 10:29:08 发布
阅读量4.1k 收藏 3
点赞数
文章标签： html 浏览器 脚本 文档 javascript xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingzhaom/article/details/7614578
版权
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：
　　1 简易性，HTML版本升级采用超集方式，从而更加灵活方便。
　　2 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
　　3 平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。
　　编辑HTML
　　HTML其实是文本，它需要浏览器的解释，HTML的编辑器大体可以分为三种，
　　1 基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。
　　2 半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出HOMEPAGE，且可以学习HTML，这种类型的软件主要有 HOTDOG，还有国产的软件 网页作坊。

　　3 所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有FRONTPAGE2003，DREAMWEAVER。

 

.htm 还是 .html 文件后缀？

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。

不过对于新的软件，使用 .html 完全没有问题。

什么是 HTML 标签

  • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
  • HTML 标签由开始标签和结束标签组成
  • 开始标签是被括号包围的元素名
  • 结束标签是被括号包围的斜杠和元素名
  • 某些 HTML 元素没有结束标签，比如 <br />

HTML 标题

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

实例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

 

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

实例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

 

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

实例

<a href="http://www.w3school.com.cn">This is a link</a>

注释：在 href 属性中指定链接的地址。

 

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

实例

<img src="w3school.jpg" width="104" height="142" />

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

 

HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素

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

开始标签元素内容结束标签
<p>This is a paragraph</p>
<a href="default.htm" >This is a link</a>
<br />  

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

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

提示：您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

上面的例子包含三个 HTML 元素。

HTML 实例解释

<p> 元素：

<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph。

<body> 元素：

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

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

<p>This is a paragraph
<p>This is a paragraph

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

注释：未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素

没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。

<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。

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

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

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

    HTML 属性

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

    HTML 属性

    HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

    属性总是以名称/值对的形式出现，比如：name="value"。

    属性总是在 HTML 元素的开始标签中规定。

    属性实例

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

    <a href="http://www.w3school.com.cn">This is a link</a>

    更多 HTML 属性实例

    属性例子 1:

    <h1> 定义标题的开始。

    <h1 align="center"> 拥有关于对齐方式的附加信息。

    TIY : 居中排 列标题

    属性例子 2:

    <body> 定义 HTML 文档的主体。

    <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

    TIY : 背景颜色

    属性例子 3:

    <table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

    <table border="1"> 拥有关于表格边框的附加信息。

    HTML 提示：使用小写属性

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

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

    而 XHTML 要求使用小写的属性/属性值。

    始终为属性值加引号

    属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

    在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

    name='Bill "HelloWorld" Gates'

    HTML 属性参考手册

    我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：

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

    属性值描述
    classclassname规定元素的类名（classname）
    idid规定元素的唯一 id
    stylestyle_definition规定元素的行内样式（inline style）
    titletext规定元素的额外信息（可在工具提示中显示）

     

    HTML 标准属性

    下面列出了所有 HTML 和 XHTML 标签支持的标准属性，仅有少数例外。

    核心属性 (Core Attributes)

    以下标签不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素。

    属性值描述
    classclassname规定元素的类名（classname）
    idid规定元素的唯一 id
    stylestyle_definition规定元素的行内样式（inline style）
    titletext规定元素的额外信息（可在工具提示中显示）

    语言属性 (Language Attributes)

    以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。

    属性值描述
    dirltr | rtl设置元素中内容的文本方向。
    langlanguage_code设置元素中内容的语言代码。语言代码参考
    xml:langlanguage_code设置 XHTML 文档中元素内容的语言代码。语言代码参考

    键盘属性 (Keyboard Attributes)

    属性值描述
    accesskeycharacter设置访问元素的键盘快捷键。
    tabindexnumber设置元素的 Tab 键控制次序。
     

    HTML 事件属性

    HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

    在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

    事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作：

    <a href="/index.html" onmouseover="alert('Welcome');return false"></a>

    如需学习更多有关事件编程方面的知识，请访问 W3School 提供的 JavaScript 教程 和 DHTML 教程。

    下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。

    窗口事件 (Window Events)

    仅在 body 和 frameset 元素中有效。

    属性值描述
    onload脚本当文档被载入时执行脚本
    onunload脚本当文档被卸下时执行脚本

    表单元素事件 (Form Element Events)

    仅在表单元素中有效。

    属性值描述
    onchange脚本当元素改变时执行脚本
    onsubmit脚本当表单被提交时执行脚本
    onreset脚本当表单被重置时执行脚本
    onselect脚本当元素被选取时执行脚本
    onblur脚本当元素失去焦点时执行脚本
    onfocus脚本当元素获得焦点时执行脚本

    图像事件 (Image Events)

    该属性可用于 img 元素：

    属性值描述
    onabort脚本当图像加载中断时执行脚本

    键盘事件 (Keyboard Events)

    在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

    属性值描述
    onkeydown脚本当键盘被按下时执行脚本
    onkeypress脚本当键盘被按下后又松开时执行脚本
    onkeyup脚本当键盘被松开时执行脚本

    鼠标事件 (Mouse Events)

    在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

    属性值描述
    onclick脚本当鼠标被单击时执行脚本
    ondblclick脚本当鼠标被双击时执行脚本
    onmousedown脚本当鼠标按钮被按下时执行脚本
    onmousemove脚本当鼠标指针移动时执行脚本
    onmouseout脚本当鼠标指针移出某元素时执行脚本
    onmouseover脚本当鼠标指针悬停于某元素之上时执行脚本
    onmouseup脚本当鼠标按钮被松开时执行脚本
     

    HTML 元素与合法的 Doctype

    按功能类别排列

    下面的表格列出了所有的 HTML/XHTML 元素，并定义了每个元素可以出现在哪种文档类型声明 (DTD) 中 。

    标签HTML 4.01 / XHTML 1.0XHTML 1.1
    TransitionalStrictFrameset
    <a>YesYesYesYes
    <abbr>YesYesYesYes
    <acronym>YesYesYesYes
    <address>YesYesYesYes
    <applet>YesNoYesNo
    <area />YesYesYesNo
    <b>YesYesYesYes
    <base />YesYesYesYes
    <basefont />YesNoYesNo
    <bdo>YesYesYesNo
    <big>YesYesYesYes
    <blockquote>YesYesYesYes
    <body>YesYesYesYes
    <br />YesYesYesYes
    <button>YesYesYesYes
    <caption>YesYesYesYes
    <center>YesNoYesNo
    <cite>YesYesYesYes
    <code>YesYesYesYes
    <col />YesYesYesNo
    <colgroup>YesYesYesNo
    <dd>YesYesYesYes
    <del>YesYesYesNo
    <dfn>YesYesYesYes
    <dir>YesNoYesNo
    <div>YesYesYesYes
    <dl>YesYesYesYes
    <dt>YesYesYesYes
    <em>YesYesYesYes
    <fieldset>YesYesYesYes
    <font>YesNoYesNo
    <form>YesYesYesYes
    <frame />NoNoYesNo
    <frameset>NoNoYesNo
    <h1> to <h6>YesYesYesYes
    <head>YesYesYesYes
    <hr />YesYesYesYes
    <html>YesYesYesYes
    <i>YesYesYesYes
    <iframe>YesNoYesNo
    <img />YesYesYesYes
    <input />YesYesYesYes
    <ins>YesYesYesNo
    <isindex>YesNoYesNo
    <kbd>YesYesYesYes
    <label>YesYesYesYes
    <legend>YesYesYesYes
    <li>YesYesYesYes
    <link />YesYesYesYes
    <map>YesYesYesNo
    <menu>YesNoYesNo
    <meta />YesYesYesYes
    <noframes>YesNoYesNo
    <noscript>YesYesYesYes
    <object>YesYesYesYes
    <ol>YesYesYesYes
    <optgroup>YesYesYesYes
    <option>YesYesYesYes
    <p>YesYesYesYes
    <param />YesYesYesYes
    <pre>YesYesYesYes
    <q>YesYesYesYes
    <s>YesNoYesNo
    <samp>YesYesYesYes
    <script>YesYesYesYes
    <select>YesYesYesYes
    <small>YesYesYesYes
    <span>YesYesYesYes
    <strike>YesNoYesNo
    <strong>YesYesYesYes
    <style>YesYesYesYes
    <sub>YesYesYesYes
    <sup>YesYesYesYes
    <table>YesYesYesYes
    <tbody>YesYesYesNo
    <td>YesYesYesYes
    <textarea>YesYesYesYes
    <tfoot>YesYesYesNo
    <th>YesYesYesYes
    <thead>YesYesYesNo
    <title>YesYesYesYes
    <tr>YesYesYesYes
    <tt>YesYesYesYes
    <u>YesNoYesNo
    <ul>YesYesYesYes
    <var>YesYesYesYes

    注释：“文档类型声明”的英文译文是 doctype declaration。

    HTML 颜色名

    颜色名列表

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

    颜色名十六进制颜色值颜色
    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 
    Feldspar #D19275 
    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 
    LightGrey #D3D3D3 
    LightGreen #90EE90 
    LightPink #FFB6C1 
    LightSalmon #FFA07A 
    LightSeaGreen #20B2AA 
    LightSkyBlue #87CEFA 
    LightSlateBlue #8470FF 
    LightSlateGray #778899 
    LightSteelBlue #B0C4DE 
    LightYellow #FFFFE0 
    Lime #00FF00 
    LimeGreen #32CD32 
    Linen #FAF0E6 
    Magenta #FF00FF 
    Maroon #800000 
    MediumAquaMarine #66CDAA 
    MediumBlue #0000CD 
    MediumOrchid #BA55D3 
    MediumPurple #9370D8 
    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 #D87093 
    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 
    VioletRed #D02090 
    Wheat #F5DEB3 
    White #FFFFFF 
    WhiteSmoke #F5F5F5 
    Yellow #FFFF00 
    YellowGreen #9ACD32 

      HTML 字符集

      HTML 字符集

      如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。

      万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。

      完整的 ASCII 参考手册

      由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。

      完整的 ISO-8859-1 参考手册

      如果网页使用不同于 ISO-8859-1 的字符集，就应该在 <meta> 标签进行指定。

      ISO 字符集

      ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。

      下面列出了世界各地使用的不同字符集：

      字符集描述使用范围
      ISO-8859-1Latin alphabet part 1北美、西欧、拉丁美洲、加勒比海、加拿大、非洲
      ISO-8859-2Latin alphabet part 2东欧
      ISO-8859-3Latin alphabet part 3SE Europe、世界语、其他杂项
      ISO-8859-4Latin alphabet part 4斯堪的纳维亚/波罗的海（以及其他没有包括在 ISO-8859-1 中的部分）
      ISO-8859-5Latin/Cyrillic part 5使用古代斯拉夫语字母表的语言，比如保加利亚语、白俄罗斯文、俄罗斯语、马其顿语
      ISO-8859-6Latin/Arabic part 6使用阿拉伯字母的语言
      ISO-8859-7Latin/Greek part 7现代希腊语，以及有希腊语衍生的数学符号
      ISO-8859-8Latin/Hebrew part 8使用希伯来语的语言
      ISO-8859-9Latin 5 part 9土耳其语
      ISO-8859-10Latin 6拉普兰语、日耳曼语、爱斯基摩北欧语
      ISO-8859-15Latin 9 (aka Latin 0)与 ISO 8859-1 类似，欧元符号和其他一些字符取代了一些较少使用的符号
      ISO-2022-JPLatin/Japanese part 1日本语
      ISO-2022-JP-2Latin/Japanese part 2日本语
      ISO-2022-KRLatin/Korean part 1韩语

      Unicode 标准

      由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。

      Unicode 标准涵盖了世界上的所有字符、标点和符号。

      不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。

      Unicode 联盟

      Unicode 联盟开发了 Unicode 标准。他们的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集。

      Unicode 标准已经获得了成功，在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中，Unicode 已经得到了实现。在许多操作系统以及所有的现代浏览器中，Unicode 同样得到了支持。

      Unicode 联盟与领导性的标准发展组织进行合作，比如 ISO、W3C 以及 ECMA。

      Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16：

      UTF-8
      UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。
      UTF-16
      16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。

      提示：最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符。

      提示：所有 HTML 4 处理器均已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16。

       

       

      HTML ASCII 参考手册

      HTML 和 XHTML 用标准的 7 比特 ASCII 代码在网络上传输数据。

      7 比特 ASCII 代码可提供 128 个不同的字符值。

      7 比特 可显示的 ASCII 代码

      结果描述实体编号
       space&#32;
      !exclamation mark&#33;
      "quotation mark&#34;
      #number sign&#35;
      $dollar sign&#36;
      %percent sign&#37;
      &ampersand&#38;
      'apostrophe&#39;
      (left parenthesis&#40;
      )right parenthesis&#41;
      *asterisk&#42;
      +plus sign&#43;
      ,comma&#44;
      -hyphen&#45;
      .period&#46;
      /slash&#47;
      0digit 0&#48;
      1digit 1&#49;
      2digit 2&#50;
      3digit 3&#51;
      4digit 4&#52;
      5digit 5&#53;
      6digit 6&#54;
      7digit 7&#55;
      8digit 8&#56;
      9digit 9&#57;
      :colon&#58;
      ;semicolon&#59;
      <less-than&#60;
      =equals-to&#61;
      >greater-than&#62;
      ?question mark&#63;
      @at sign&#64;
      Auppercase A&#65;
      Buppercase B&#66;
      Cuppercase C&#67;
      Duppercase D&#68;
      Euppercase E&#69;
      Fuppercase F&#70;
      Guppercase G&#71;
      Huppercase H&#72;
      Iuppercase I&#73;
      Juppercase J&#74;
      Kuppercase K&#75;
      Luppercase L&#76;
      Muppercase M&#77;
      Nuppercase N&#78;
      Ouppercase O&#79;
      Puppercase P&#80;
      Quppercase Q&#81;
      Ruppercase R&#82;
      Suppercase S&#83;
      Tuppercase T&#84;
      Uuppercase U&#85;
      Vuppercase V&#86;
      Wuppercase W&#87;
      Xuppercase X&#88;
      Yuppercase Y&#89;
      Zuppercase Z&#90;
      [left square bracket&#91;
      \backslash&#92;
      ]right square bracket&#93;
      ^caret&#94;
      _underscore&#95;
      `grave accent&#96;
      alowercase a&#97;
      blowercase b&#98;
      clowercase c&#99;
      dlowercase d&#100;
      elowercase e&#101;
      flowercase f&#102;
      glowercase g&#103;
      hlowercase h&#104;
      ilowercase i&#105;
      jlowercase j&#106;
      klowercase k&#107;
      llowercase l&#108;
      mlowercase m&#109;
      nlowercase n&#110;
      olowercase o&#111;
      plowercase p&#112;
      qlowercase q&#113;
      rlowercase r&#114;
      slowercase s&#115;
      tlowercase t&#116;
      ulowercase u&#117;
      vlowercase v&#118;
      wlowercase w&#119;
      xlowercase x&#120;
      ylowercase y&#121;
      zlowercase z&#122;
      {left curly brace&#123;
      |vertical bar&#124;
      }right curly brace&#125;
      ~tilde&#126;

      7 比特 设备控制 ASCII代码

      ASCII设备控制代码最初被设计为用来控制诸如打印机和磁带驱动器之类的硬件设备。在HTML文档中这些代码不会起任何作用。

      结果描述实体编号
      NULnull character&#00;
      SOHstart of header&#01;
      STXstart of text&#02;
      ETXend of text&#03;
      EOTend of transmission&#04;
      ENQenquiry&#05;
      ACKacknowledge&#06;
      BELbell (ring)&#07;
      BSbackspace&#08;
      HThorizontal tab&#09;
      LFline feed&#10;
      VTvertical tab&#11;
      FFform feed&#12;
      CRcarriage return&#13;
      SOshift out&#14;
      SIshift in&#15;
      DLEdata link escape&#16;
      DC1device control 1&#17;
      DC2device control 2&#18;
      DC3device control 3&#19;
      DC4device control 4&#20;
      NAKnegative acknowledge&#21;
      SYNsynchronize&#22;
      ETBend transmission block&#23;
      CANcancel&#24;
      EMend of medium&#25;
      SUBsubstitute&#26;
      ESCescape&#27;
      FSfile separator&#28;
      GSgroup separator&#29;
      RSrecord separator&#30;
      USunit separator&#31;
      DELdelete (rubout)&#127;

        HTML 标题

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

        HTML 标题

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

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

        实例

        <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

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

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

        标题很重要

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

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

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

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

        HTML 水平线

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

        hr 元素可用于分隔内容。

        实例

        <p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

        提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

        HTML 注释

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

        注释是这样写的：

        实例

        <!-- This is a comment -->

        注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

        提示：合理地使用注释可以对未来的代码编辑工作产生帮助。

        HTML 提示 - 如何查看源代码

        您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”

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

        来自本页的实例

        标题
        如何在 HTML 文档中显示标题。
        隐藏的注释
        如何在 HTML 源代码中插入注释。
        水平线
        如何插入水平线。

        HTML 标签参考手册

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

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

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

        HTML 段落

        可以把 HTML 文档分割为若干段落。

        HTML 段落

        段落是通过 <p> 标题定义的。

        实例

        <p>This is a paragraph</p>
<p>This is another paragraph</p>

        亲自试一试

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

        提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

        不要忘记结束标签

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

        实例

        <p>This is a paragraph
<p>This is another paragraph

        亲自试一试

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

        注释：在未来的 HTML 版本中，不允许省略结束标签。

        提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

        HTML 折行

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

        <p>This is<br />a para<br />graph with line breaks</p>

        亲自试一试

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

        <br> 还是 <br />

        您也许发现 <br> 与 <br /> 很相似。

        在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

        即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

        HTML 输出 - 有用的提示

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

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

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

         

        HTML 文本格式化

        HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

        下面有很多例子，您可以亲自试试：

        HTML 文本格式化实例

        文本格式化
        此例演示如何在一个 HTML 文件中对文本进行格式化
        预格式文本
        此例演示如何使用 pre 标签对空行和空格进行控制。
        “计算机输出”标签
        此例演示不同的“计算机输出”标签的显示效果。
        地址
        此例演示如何在 HTML 文件中写地址。
        缩写和首字母缩写
        此例演示如何实现缩写或首字母缩写。
        文字方向
        此例演示如何改变文字的方向。
        块引用
        此例演示如何实现长短不一的引用语。
        删除字效果和插入字效果
        此例演示如何标记删除文本和插入文本。

        如何查看 HTML 源码

        您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？

        你有没有看过一些网页，并且想知道它是如何做出来的呢？

        要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。

        文本格式化标签

        标签描述
        <b>定义粗体文本。
        <big>定义大号字。
        <em>定义着重文字。
        <i>定义斜体字。
        <small>定义小号字。
        <strong>定义加重语气。
        <sub>定义下标字。
        <sup>定义上标字。
        <ins>定义插入字。
        <del>定义删除字。
        <s>不赞成使用。使用 <del> 代替。
        <strike>不赞成使用。使用 <del> 代替。
        <u>不赞成使用。使用样式（style）代替。

        “计算机输出”标签

        标签描述
        <code>定义计算机代码。
        <kbd>定义键盘码。
        <samp>定义计算机代码样本。
        <tt>定义打字机代码。
        <var>定义变量。
        <pre>定义预格式文本。
        <listing>不赞成使用。使用 <pre> 代替。
        <plaintext>不赞成使用。使用 <pre> 代替。
        <xmp>不赞成使用。使用 <pre> 代替。

        引用、引用和术语定义

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

        HTML 样式

        style 属性用于改变 HTML 元素的样式。

        This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

        HTML 的 style 属性

        style 属性的作用：

        提供了一种改变所有 HTML 元素的样式的通用方法。

        样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

        您可以在我们的 CSS 教程中学习关于样式和 CSS 的所有知识。

        在我们的 HTML 教程中，我们将使用 style 属性向您讲解 HTML 样式。

        不赞成使用的标签和属性

        在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。

        这里传达的信息很明确：请避免使用这些被废弃的标签和属性！

        应该避免使用下面这些标签和属性：

        标签描述
        <center>定义居中的内容。
        <font> 和 <basefont>定义 HTML 字体。
        <s> 和 <strike>定义删除线文本
        <u>定义下划线文本
        属性描述
        align定义文本的对齐方式
        bgcolor定义背景颜色
        color定义文本颜色

        对于以上这些标签和属性：请使用样式代替！

        HTML 样式实例 - 背景颜色

        background-color 属性为元素定义了背景颜色：

        <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>

        style 属性淘汰了“旧的” bgcolor 属性。

        HTML 样式实例 - 字体、颜色和尺寸

        font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

        <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>

        style 属性淘汰了旧的 <font> 标签。

        HTML 样式实例 - 文本对齐

        text-align 属性规定了元素中文本的水平对齐方式：

        <html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

        style 属性淘汰了旧的 "align" 属性。

         

         

        HTML 链接

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

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

        HTML 超链接（链接）

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

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

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

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

        1. 通过使用 href 属性 - 创建指向另一个文档的链接
        2. 通过使用 name 属性 - 创建文档内的书签

        HTML 链接语法

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

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

        href 属性规定链接的目标。

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

        实例

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

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

        HTML 链接 - target 属性

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

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

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

        HTML 链接 - name 属性

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

        name 属性用于创建 HTML 内部的书签。

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

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

        命名锚的语法：

        <a name="label">Text to be displayed</a>

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

        实例

        HTML 文档内部的已命名的锚：

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

        然后，我们创建指向相同文档中“有用的提示”部分的链接：

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

        或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：

        <a href="http://www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>

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

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

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

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

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

         

        HTML 链接标签
        标签描述
        <a>定义锚。
         
         

        HTML 表格

        你可以使用 HTML 创建表格。

        表格

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

        <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

        表格和边框属性

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

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

        <table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

        表格的表头

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

        <table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>

        在浏览器显示如下：

        HeadingAnother Heading
        row 1, cell 1row 1, cell 2
        row 2, cell 1row 2, cell 2

        表格中的空单元格

        在大多数浏览器中，没有内容的表格单元显示得不太好。

        <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></td>
</tr>
</table>

        在浏览器显示如下：

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

        注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

        <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>&nbsp;</td>
</tr>
</table>

        在浏览器中显示如下：

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

         

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

         

         

        HTML 列表

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

        无序列表

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

        无序列表始于 <ul> 标签。每个列表项始于 <li>。

        <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

        浏览器显示如下：

        • Coffee
        • Milk

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

        有序列表

        同样，有序列表也是一列项目，列表项目使用数字进行标记。

        有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

        <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

        浏览器显示如下：

        1. Coffee
        2. Milk

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

        定义列表

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

        自定义列表以 <dl> 标签开始。每个自定义列表项以 <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

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

        列表标签

        标签描述
        <ol>定义有序列表。
        <ul>定义无序列表。
        <li>定义列表项。
        <dl>定义定义列表。
        <dt>定义定义项目。
        <dd>定义定义的描述。
        <dir>已废弃。使用 <ul> 代替它。
        <menu>已废弃。使用 <ul> 代替它。

         

         
        HTML 表单和输入
         

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

         

         

        表单

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

        表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

        表单使用表单标签（<form>）定义。

        <form>
...
  input 元素
...
</form>

        输入

        多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

        文本域（Text Fields）

        当用户要在表单中键入字母、数字等内容时，就会用到文本域。

        <form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

        浏览器显示如下：

        First name:
        Last name:

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

        单选按钮（Radio Buttons）

        当用户从若干给定的的选择中选取其一时，就会用到单选框。

        <form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

        浏览器显示如下：

        Male
        Female

        注意，只能从中选取其一。

        复选框（Checkboxes）

        当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

        <form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

        浏览器显示如下：

        I have a bike
        I have a car

        表单的动作属性（Action）和确认按钮

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

        <form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

        浏览器显示如下：

        Username:

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

        表单标签

        标签描述
        <form>定义供用户输入的表单
        <input>定义输入域
        <textarea>定义文本域 (一个多行的输入控件)
        <label>定义一个控制的标签
        <fieldset>定义域
        <legend>定义域的标题
        <select>定义一个选择列表
        <optgroup>定义选项组
        <option>定义下拉列表中的选项
        <button>定义一个按钮
        <isindex>已废弃。有<input>代替。

        HTML 图像

        通过使用 HTML，可以在文档中显示图像

         

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

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

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

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

        定义图像的语法是：

        <img src="url" />

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

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

        替换文本属性（Alt）

        alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

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

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

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

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

        图像标签

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

         

         

        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 元素的布局和显示属性。

         

        HTML 颜色

        颜色值

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

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

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

        ColorColor HEXColor RGB
         #000000rgb(0,0,0)
         #FF0000rgb(255,0,0)
         #00FF00rgb(0,255,0)
         #0000FFrgb(0,0,255)
         #FFFF00rgb(255,255,0)
         #00FFFFrgb(0,255,255)
         #FF00FFrgb(255,0,255)
         #C0C0C0rgb(192,192,192)
         #FFFFFFrgb(255,255,255)

        颜色名

        大多数的浏览器都支持颜色名集合。

        提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

        如果需要使用其它的颜色，需要使用十六进制的颜色值。

        ColorColor HEXColor Name
         #F0F8FFAliceBlue
         #FAEBD7AntiqueWhite
         #7FFFD4Aquamarine
         #000000Black
         #0000FFBlue
         #8A2BE2BlueViolet
         #A52A2ABrown

        Web安全色

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

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

        216 跨平台色

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

        0000000000330000660000990000CC0000FF
        0033000033330033660033990033CC0033FF
        0066000066330066660066990066CC0066FF
        0099000099330099660099990099CC0099FF
        00CC0000CC3300CC6600CC9900CCCC00CCFF
        00FF0000FF3300FF6600FF9900FFCC00FFFF
        3300003300333300663300993300CC3300FF
        3333003333333333663333993333CC3333FF
        3366003366333366663366993366CC3366FF
        3399003399333399663399993399CC3399FF
        33CC0033CC3333CC6633CC9933CCCC33CCFF
        33FF0033FF3333FF6633FF9933FFCC33FFFF
        6600006600336600666600996600CC6600FF
        6633006633336633666633996633CC6633FF
        6666006666336666666666996666CC6666FF
        6699006699336699666699996699CC6699FF
        66CC0066CC3366CC6666CC9966CCCC66CCFF
        66FF0066FF3366FF6666FF9966FFCC66FFFF
        9900009900339900669900999900CC9900FF
        9933009933339933669933999933CC9933FF
        9966009966339966669966999966CC9966FF
        9999009999339999669999999999CC9999FF
        99CC0099CC3399CC6699CC9999CCCC99CCFF
        99FF0099FF3399FF6699FF9999FFCC99FFFF
        CC0000CC0033CC0066CC0099CC00CCCC00FF
        CC3300CC3333CC3366CC3399CC33CCCC33FF
        CC6600CC6633CC6666CC6699CC66CCCC66FF
        CC9900CC9933CC9966CC9999CC99CCCC99FF
        CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
        CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
        FF0000FF0033FF0066FF0099FF00CCFF00FF
        FF3300FF3333FF3366FF3399FF33CCFF33FF
        FF6600FF6633FF6666FF6699FF66CCFF66FF
        FF9900FF9933FF9966FF9999FF99CCFF99FF
        FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
        FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF
         
         
         
         
         

        HTML 颜色值

         

        颜色由红色、绿色、蓝色混合而成。

        颜色值

        颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

        关闭红色

        如果将红色完全关闭,绿色和蓝色的组合有 65536 种（256 x 256）。

        单击此处查看绿色和蓝色的不同组合。

        打开红色

        如果将红色设置为最大值,那么仍然存在 65536 种绿色和蓝色的不同组合。

        单击此处查看绿色和蓝色的不同组合。

        1600万种不同的颜色

        通过计算 256 x 256 x 256，从 0 到 255 的红色、绿色和蓝色的值一共可以组合出 1600 万种不同的颜色。

        大多数现代的显示器有能力显示出至少 16384 种不同的颜色。

        你可以查看下面的色表，你会看到当绿色和蓝色的值为零时，红色值从 0 到 255 时的具体的颜色。

        如需查看基于红色从 0 到 255 变化时的 16384 种不同的颜色，请单击下面的十六进制值或者 rgb 颜色值：

        Red LightHEXRGB
         #000000rgb(0,0,0)
         #080000rgb(8,0,0)
         #100000rgb(16,0,0)
         #180000rgb(24,0,0)
         #200000rgb(32,0,0)
         #280000rgb(40,0,0)
         #300000rgb(48,0,0)
         #380000rgb(56,0,0)
         #400000rgb(64,0,0)
         #480000rgb(72,0,0)
         #500000rgb(80,0,0)
         #580000rgb(88,0,0)
         #600000rgb(96,0,0)
         #680000rgb(104,0,0)
         #700000rgb(112,0,0)
         #780000rgb(120,0,0)
         #800000rgb(128,0,0)
         #880000rgb(136,0,0)
         #900000rgb(144,0,0)
         #980000rgb(152,0,0)
         #A00000rgb(160,0,0)
         #A80000rgb(168,0,0)
         #B00000rgb(176,0,0)
         #B80000rgb(184,0,0)
         #C00000rgb(192,0,0)
         #C80000rgb(200,0,0)
         #D00000rgb(208,0,0)
         #D80000rgb(216,0,0)
         #E00000rgb(224,0,0)
         #E80000rgb(232,0,0)
         #F00000rgb(240,0,0)
         #F80000rgb(248,0,0)
         #FF0000rgb(255,0,0)

        灰阶

        当所有颜色取相等的值时，灰色就可以被显示出来。为了使您更容易地选择合适的灰色，我们为您制作了一幅灰阶色表。

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

        HTML 颜色名

         

         

        颜色名列表

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

        颜色名十六进制颜色值颜色
        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 
        Feldspar #D19275 
        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 
        LightGrey #D3D3D3 
        LightGreen #90EE90 
        LightPink #FFB6C1 
        LightSalmon #FFA07A 
        LightSeaGreen #20B2AA 
        LightSkyBlue #87CEFA 
        LightSlateBlue #8470FF 
        LightSlateGray #778899 
        LightSteelBlue #B0C4DE 
        LightYellow #FFFFE0 
        Lime #00FF00 
        LimeGreen #32CD32 
        Linen #FAF0E6 
        Magenta #FF00FF 
        Maroon #800000 
        MediumAquaMarine #66CDAA 
        MediumBlue #0000CD 
        MediumOrchid #BA55D3 
        MediumPurple #9370D8 
        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 #D87093 
        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 
        VioletRed #D02090 
        Wheat #F5DEB3 
        White #FFFFFF 
        WhiteSmoke #F5F5F5 
        Yellow #FFFF00 
        YellowGreen #9ACD32 
         
         
         
         
         

        HTML 4.01 快速参考

         

        HTML Basic Document

        <html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

        Text Elements

        <p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

        Logical Styles

        <em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

        Physical Styles

        <b>This text is bold</b>
<i>This text is italic</i>

        Links, Anchors, and Image Elements

        <a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

        Unordered list

        <ul>
<li>First item</li>
<li>Next item</li>
</ul>

        Ordered list

        <ol>
<li>First item</li>
<li>Next item</li>
</ol>

        Definition list

        <dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

        Tables

        <table border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>

        Frames

        <frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

        Forms

        <form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

        Entities

        &lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

        Other Elements

        <!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
         
         
         

        HTML 布局

         

        在网络上，随处都可以看到像报纸那样的格式化分栏。

         

         

        HTML 框架

         

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

        框架

        通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

        使用框架的坏处：

        • 开发人员必须同时跟踪更多的HTML文档
        • 很难打印整张页面
        框架结构标签（<frameset>）
        • 框架结构标签（<frameset>）定义如何将窗口分割为框架
        • 每个 frameset 定义了一系列行或列
        • rows/columns 的值规定了每行或每列占据屏幕的面积

        编者注：frameset 标签也被某些文章和书籍译为框架集。

        框架标签（Frame）

        Frame 标签定义了放置在每个框架中的 HTML 文档。

        在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

        <frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

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

        假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

        为不支持框架的浏览器添加 <noframes> 标签。

        重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

         

         

        HTML 字体

        字体标签font

        使用类似下面的HTML代码，你可以定义浏览器输出的尺寸和类型：

        <p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

        TIY

        字体属性

        属性例子作用
        size="number"size="2"定义字体大小。
        size="+number"size="+1"增加字体的大小。
        size="-number"size="-1"减少字体的大小。
        face="face-name"face="Times"定义字体名称。
        color="color-value"color="#eeff00"定义字体颜色。
        color="color-name"color="red"定义字体颜色。

        请不要使用字体标签

        在最新的 HTML 版本（HTML 4 和 XHTML）中，字体标签已被废弃。

        万维网联盟已从其标准中删除了字体标签，在未来，样式表（CSS）将用来定义布局，以及显示 HTML 元素的属性。

         

         

         

         

        HTML CSS

        如何使用样式

        当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

        外部样式表

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

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

        内部样式表

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

        <head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

        内联样式

        当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

        <p style="color: red; margin-left: 20px">
This is a paragraph
</p>

        访问我们的 CSS 教程，学习更多有关样式的知识。

        标签描述
        <style>定义样式定义。
        <link>定义资源引用。
        <div>定义文档中的节或区域（块级）。
        <span>定义文档中的行内的小块或区域。
        <font>规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
        <basefont>定义基准字体。不赞成使用。请使用样式。
        <center>对文本进行水平居中。不赞成使用。请使用样式。

         

         

        HTML 字符实体

        为了在 HTML 中显示小于号 (<)，我们需要使用字符实体。

        字符实体

        一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

        字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。

        要在 HTML 文档中显示小于号，我们需要这样写：&lt; 或者 &#60;

        使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

        注意：实体对大小写敏感。

        亲手实验一下字符实体。（仅支持IE）

        空格

        空格是 HTML 中最普通的字符实体。

        通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用 &nbsp;，就可以在文档中增加空格。

        最常用的字符实体

        显示结果描述实体名称实体编号
         空格&nbsp;&#160;
        <小于号&lt;&#60;
        >大于号&gt;&#62;
        &和号&amp;&#38;
        "引号&quot;&#34;
        '撇号 &apos; (IE不支持)&#39;

        其他一些常用的字符实体

        显示结果描述实体名称实体编号
        ￠分&cent;&#162;
        £镑&pound;&#163;
        ¥日圆&yen;&#165;
        §节&sect;&#167;
        ©版权&copy;&#169;
        ®注册商标&reg;&#174;
        ×乘号&times;&#215;
        ÷除号&divide;&#247;
         
         
         

        HTML 头部

         

        头元素

        头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。

        可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。

        头元素内的信息

        头元素内的元素不会被浏览器显示出来。

        根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。

        这是一个不合法的结构：

        <head>
  <p>This is some text</p>
</head>

        在这个案例中，浏览器有两种选择：

        • 显示文本，因为它在段落元素中。
        • 隐藏文本，因为它在头元素中。

        假如你将 <h1> 或者 <p> 之类的 HTML 元素像这样置于头元素之中，大多数浏览器都会显示它，即使这是非法的。

        浏览器真的应该忽略这个的错误吗？我们不这么认为。即使别人这么认为。

        Head 标签

        标签描述
        <head>定义关于文档的信息。
        <title>定义文档标题。
        <base>定义页面中所有链接的基准 URL。
        <link>定义资源引用。
        <meta>定义元信息。
        标签描述
        <!DOCTYPE>定义文档类型。此标签须位于 html 标签之前。

         

         

         

        HTML 元信息

         

         

         

        Meta元素

        正如在上一章中我们所解释的，头元素包含着关于文档的概要信息。

        HTML 同样包含位于 head 元素内部的 meta 元素。Meta 元素的作用是提供文档的元信息。

        大多数情况下，meta 元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等。

        提示：W3C 声明说：某些用户程序支持使用 META 在设定好的几秒钟后来刷新当前的页面，并将之替换为另一个 url。开发人员不应使用此技术强迫用户转到不同的页面，因为这样会使页面的可用性变差。相反，应使用服务器端重定向来进行自动页面定向。

        参阅：http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv。

        针对搜索引擎的关键字

        某些万维网搜索引擎使用 meta 标签的 name 和 content 属性来索引页面。

        这个 Meta 元素定义了对页面的描述:

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

        这个 Meta 元素定义了页面的关键字:

        <meta name="keywords" 
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

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

        然而，由于非常多的网管们使用 meta 标签制造垃圾信息，比方说在页面重复关键词以达到提高排名的目的，一些搜索引擎已经彻底放弃了使用它们。

        请阅读我们的 网站构建教程，学习更多关于搜索引擎的知识。

        陌生的Meta属性

        有时你会发现一些对你来说很陌生的 meta 属性，比方说：

        <meta name="security" content="low">。

        其实你只需明白，这些东西对于站点或者开发人员来说具有某种特殊的意义，而也许对你来说没有什么关系。

         

         

         

        HTML URL（统一资源定位器）

         

         

        HTML链接

        当你单击 HTML 文档中的某个链接时，就像这个：最后一页，其中的 <a> 标签就会使用类似这样的 href 属性值指向一个网络上的地址：<a href="lastpage.htm">Last Page</a>

        在这个例子中，Last Page 的链接地址是相对于你所浏览的网站而言的，你的浏览器会自动构建一个完整的网址来访问这个页面，比如 http://www.w3school.com.cn/html/lastpage.html。

        URL（统一资源定位器）

        一个称为 URL（统一资源定位器）的东西用于对万维网上的文档（或其他数据）进行寻址。一个完整的网址，例如：http://www.w3school.com.cn/html/lastpage.html，遵守如下语法规则：

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

        Scheme 定义因特网服务的类型。最流行的类型是 http。

        domain（域）定义因特网域名，比如：w3school.com.cn。

        host（主机）定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www。

        :port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。

        path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。

        filename（文件名）定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html，或者依据 WEB 服务器设置的其他文件名。

        编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

        URL Schemes

        以下是其中一些最流行的 scheme：

        Schemes访问
        file本地 PC 上的文件。
        ftpFTP 服务器上的文件。
        httpWorld Wide Web 服务器上的文件。
        gopherGopher 服务器上的文件。
        newsUsenet 新闻组。
        telnetTelnet 连接。
        WAISWAIS 服务器上的文件。

        访问新闻组

        以下 HTML 代码创建一个指向新闻组的链接：

        <a href="news:alt.html">HTML Newsgroup</a>

        这个链接显示如下：HTML Newsgroup

        使用 FTP 进行下载

        以下 HTML 代码创建一个下载文件的链接：

        <a href="ftp://www.w3school.com.cn/ftp/winzip.exe">Download WinZip</a>

        这个链接显示如下：Download WinZip

        （这个链接是无法工作的，它仅仅是个例子，所以无需尝试。我们没有提供 FTP 目录。）

        链接到邮件系统

        以下 HTML 代码创建一个指向您的邮件系统的链接：

        <a href="mailto:someone@w3school.com.cn">someone@w3school.com.cn</a>
         
        HTML 脚本
         
         
         
        
            
            
        
             
             
        将脚本插入 HTML 页
        
             
             
        HTML 中的脚本使用 <script> 标签进行定义。请注意你可以使用 type 属性来指定脚本语言。
        
             
             
        <html>
<head>
</head>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>
        
             
             
        上面的脚本输出以下结果：
        
             
             
        Hello World!
        
             
             
        提示：如果需要学习更多有关在 HTML 中编写脚本的知识，请访问我们的《JavaScript 教程》
        
            
            
        
            
            
        
             
             
        如何应付老式的浏览器
        
             
             
        如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
        
             
             
        实例
        
             
             
        JavaScript:
        
             
             
        <script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

        
             
             
        VBScript:
        
             
             
        <script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
        
            
            
        
            
            
        
             
             
        <noscript> 标签
        
             
             
        除了将脚本隐藏于注释中，你还可以添加 <noscript> 标签。<noscript> 标签用于定义假如脚本没有执行时的替代文本。这个标签被用于以下情况：如果浏览器能够识别 <script> 标签，但是不支持其中的脚本，那么这些浏览器将显示出 <noscript> 标签内部的文本。不过，如果浏览器支持 <script> 内的脚本，那么浏览器将忽略 <noscript> 标签。
        
             
             
        JavaScript:
        
             
             
        <script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

        
             
             
        VBScript:
        
             
             
        <script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

        
            
            
        
            
            
        
             
             
        标签描述
        <script>定义脚本。
        <noscript>定义在脚本无法执行的情况下的替代文本。
        <object>定义嵌入的对象。
        <param>为对象定义
 run-time 设置(参数)。
        <applet>不赞成使用。请使用 <object>。
        
            
            
         
         
        HTML 4.0 标准属性
        
            
            
        
             
             
        核心属性 (Core Attributes)
        
             
             
        以下标签不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素。
        
             
             
        属性值描述
        classclassname规定元素的类名（classname）
        idid规定元素的唯一
 id
        stylestyle_definition规定元素的行内样式（inline style）
        titletext规定元素的额外信息（可在工具提示中显示）
        
            
            
        
            
            
        
             
             
        语言属性 (Language Attributes)
        
             
             
        以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。
        
             
             
        属性值描述
        dirltr
 | rtl设置元素中内容的文本方向。
        langlanguage_code设置元素中内容的语言代码。语言代码参考
        xml:langlanguage_code设置
 XHTML 文档中元素内容的语言代码。语言代码参考
        
            
            
        
            
            
        
             
             
        键盘属性 (Keyboard Attributes)
        
             
             
        属性值描述
        accesskeycharacter设置访问元素的键盘快捷键。
        tabindexnumber设置元素的
 Tab 键控制次序。
        
            
            
        
            
            
         
         
         
         
        HTML 4.0 事件属性
         
        
            
            
        
             
             
        HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
        
             
             
        在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。
        
             
             
        事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作：
        
             
             
        <a href="/index.html" onmouseover="alert('Welcome');return false"></a>
        
             
             
        如需学习更多有关事件编程方面的知识，请访问 W3School 提供的 JavaScript 教程 和 DHTML 教程。
        
             
             
        下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。
        
            
            
        
            
            
        
             
             
        窗口事件 (Window Events)
        
             
             
        仅在 body 和 frameset 元素中有效。
        
             
             
        属性值描述
        onload脚本当文档载入时执行脚本
        onunload脚本当文档卸载时执行脚本
        
            
            
        
            
            
        
             
             
        表单元素事件 (Form Element Events)
        
             
             
        仅在表单元素中有效。
        
             
             
        属性值描述
        onchange脚本当元素改变时执行脚本
        onsubmit脚本当表单被提交时执行脚本
        onreset脚本当表单被重置时执行脚本
        onselect脚本当元素被选取时执行脚本
        onblur脚本当元素失去焦点时执行脚本
        onfocus脚本当元素获得焦点时执行脚本
        
            
            
        
            
            
        
             
             
        图像事件 (Image Events)
        
             
             
        该属性可用于 img 元素：
        
             
             
        属性值描述
        onabort脚本当图像加载中断时执行脚本
        
            
            
        
            
            
        
             
             
        键盘事件 (Keyboard Events)
        
             
             
        在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
        
             
             
        属性值描述
        onkeydown脚本当键盘被按下时执行脚本
        onkeypress脚本当键盘被按下后又松开时执行脚本
        onkeyup脚本当键盘被松开时执行脚本
        
            
            
        
            
            
        
             
             
        鼠标事件 (Mouse Events)
        
             
             
        在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
        
             
             
        属性值描述
        onclick脚本当鼠标被单击时执行脚本
        ondblclick脚本当鼠标被双击时执行脚本
        onmousedown脚本当鼠标按钮被按下时执行脚本
        onmousemove脚本当鼠标指针移动时执行脚本
        onmouseout脚本当鼠标指针移出某元素时执行脚本
        onmouseover脚本当鼠标指针悬停于某元素之上时执行脚本
        onmouseup脚本当鼠标按钮被松开时执行脚本
        
            
            
        
            
            
        
             
             
          
            
            
           
           
          HTML URL 编码
           
           
          
            
            
          
             
             
          URL 编码的作用是把字符转换为可在因特网上安全传输的格式。
          
            
            
          
            
            
          
             
             
          URL - Uniform Resource Locator（统一资源定位符）
          
             
             
          Web 浏览器通过使用 URL 从 web 服务器上请求页面。
          
             
             
          URL 是网页的地址，比如：www.w3school.com.cn。
          
            
            
          
            
            
          
             
             
          URL 编码
          
             
             
          在因特网上传送 URL 的话，只能使用 ASCII 字符集。
          
             
             
          由于 URL 经常会包含 ASCII 字符集以外的字符，所以必须对 URL 进行转换。URL 编码所做的事情就是把 URL 转换为有效的 ASCII 格式。
          
             
             
          在进行 URL 编码时，每一个非安全的 ASCII 字符会被替换为 "%hh" 格式，其中 hh 是两位十六进制数，它对应于该字符在 ISO-8859-1 字符集里的字符编码值。
          
             
             
          URL 中不能含有空格，URL 编码通常会将空格替换为加号（+）。
          
            
            
           

           

           

           

             

             

             

             

                                     

                                     

                                     

                                     

                                    yingzhaom
                                    关注
                                    • 0
                                      点赞
                                    • 踩
                                    • 3
                                      收藏
                                      觉得还不错? 一键收藏
                                    • 0
                                      评论
                                    你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
                                    努力是为了站在万人之中，成为别人的光
                                    07-05 26万+
                                    HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
                                    HTML入门教程 - 4.段落(Paragraphs)
                                    BESTSG - 网页与网络技术相关
                                    08-10 830
                                    现在我们有了基本HTML结构的概念，我们可以开始编写关于内容的页面了。 关于段落 我们打开文本编辑器在我们的页面增加多一条代码： My first web page This is my first web page BestSG is here! 然后我们看到文件显示如下: This is my first web page BestSG is h
                                    HTML基础：我的第一个网页（1）
                                    weixin_30797027的博客
                                    12-31 354
                                    文件名：1-1.html <html> <head> <title>static page</title> </head> <body> <h1>this is static page!</h1> <h2>you can browser,but not ...
                                    01我的第一个网页----(Html基础)
                                    majiamin123的博客
                                    09-07 1375
                                    我的第一个网页 1. 基本的结构 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> 通过观察我们发现，HTML基本结构中所有的标签都是成对出现的， 这些成对出现的标签中有一...
                                    HTML <a> 标签的 href 属性
                                    heganlin的博客
                                    11-03 5004
                                    w3school页面的描述： HTML 标签的 href 属性 HTML 标签 实例 href 属性规定链接的目标： href="http://www.w3school.com.cn">W3School 亲自试一试 定义和用法 标签的 href 属性用于指定超链接目标的 URL。 href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段
                                    Html5 带来web新时代
                                    fengqingxin的专栏
                                    03-22 177
                                    http://directguo.com/html5/#slide1   http://www.w3school.com.cn/html5/   2010年上半年的苹果与Adobe的冲突，使HTML5的存在一夜之间被很多人所知晓。在乔布斯的煽动下，这一已经在科技界潜行数年的下一代 Web标准，被迅速拎到了台面上，苹果、谷歌、微软这科技界三巨...
                                    有关html和css学习的.zip
                                    最新发布
                                    03-20
                                    html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
                                    几个HTML5入门学习的好例子(代码)
                                    10-16
                                    HTML5是现代网页开发的核心，它为开发者提供了更强大、更灵活的功能，使得网页应用程序能够实现前所未有的交互性和用户体验。...每个特性都有其独特的应用场景，结合实际案例学习，将有助于快速掌握HTML5的精髓。
                                    Penguin:学习使用HTML，SASS和JavaScript制作企鹅
                                    05-10
                                    学习使用HTML，SASS和JavaScript制作企鹅 细节 该项目是有关JavaScript函数和关键帧动画的基本示例。 实时申请网址 :sparkles: 该应用程序部署在 单击链接以查看应用程序 克隆 :crystal_ball: 将项目克隆到本地...
                                    frontEndLearning:有关前端学习的一些注意事项和实践
                                    05-02
                                    前端学习笔记与练习 包括了学习过程的一些笔记与一些练习 有一些较大的案例 供自己preview时进行参考 标题中的链接是相关的学习视频，仅供参考，因为笔记里不只有这些内容 由于链接中的网站可能会对跨域请求拦截，...
                                    一文搞懂HTML+CSS+JavaScript
                                    weixin_43887883的博客
                                    08-31 6527
                                    #HTML超文本标记语言 1、定义 HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接（超文本：不止文本）等。超文本标记语言是标准通用标记语言下的一个应用，是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
                                    不怕死就上这些网站
                                    热门推荐
                                    临时工 Temporary's Space
                                    08-14 11万+
                                     1. hxxp:///www.dj3344.com 打开后，重启时你的主页就变成它的，并通过QQ向他人传播，现在正飙行，奇坏无比！2. hxxp:///www.qq168.net 打开后，重启时你的主页就变成它的，并通过QQ向他人传播，而且传波病毒，还狠些！现在正在飙行！3. hxxp:///www.777888.com 　4. hxxp:///WWW.5dsoft.com 　5. hx
                                    【破文标题】企业报表处理软件（2005版）免光盘破解
                                    走近程序员
                                    12-27 4032
                                    【破文标题】企业报表处理软件（2005版）免光盘破解【破文作者】gc801【作者邮箱】gc801@qq.com【作者主页】http://free4.e-168.cn/f1club【破解工具】OllyDbg,PEiD,W32Dasm,Hiew【破解平台】Win9x/NT/2000/XP【软件名称】企业报表处理软件（2005版）【软件大小】50.6m【原版下载】CDFACE.exe【保护方式】光盘保护
                                    网络文件共享服务（一）
                                    李凯的博客
                                    12-18 2298
                                    存储类型 存储类型分为三种 直连式存储：Direct-Attached Storage，简称DAS eg:家用电脑 网络附加存储：Network-Attached Storage，简称NAS 存储区域网络：Storage Area Network，简称SAN DAS存储 DAS存储是最常见的一种存储方式，尤其是在中小企业应用中。PC中的硬盘或只有一个外部SCSI接口的JBOD都属于DAS架构。...
                                    html 标签 http://www.w3school.com.cn/html/
                                    Forever_xudada的专栏
                                    11-10 2950
                                    This is head for test
                                    目前看到最牛的了，可以和[DOS下面看电影]媲美 http://www.cnblogs.com/sparon/articles/469603.html
                                    xu的blog
                                    11-18 8万+
                                    今天见了这段程序，嗷嗷佩服，以后继续努力学习！！！ 以下是程序代码 e100 33 f6 bf 0 20 b5 10 f3 a5 8c c8 5 0 2 50 68 13 1 cb e 1f be a1 1 bf 0 1 e11b 6 57 b8 11 1 bb 21 13 89 7 4b 4b 48 79 f9 ad 86 e0 8b c8 bd ff ff e8 20 e134 0 3d
                                    ScaleImageView图片缩放查看器
                                    蟹老板的博客
                                    07-29 1133
                                    ScaleImageView图片缩放查看器 仓库地址：https://github.com/yongjianx/ScaleImageView （使用方法详见github，源码附有详细注释，可供学习） 图片查看器支持单击、双击、长按、拖拽、多点触控缩放 效果如下： &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbs
                                    fffffffffffff
                                    auguasheng的专栏
                                    11-19 340
                                    <br />f f f f f f 无聊
                                    HTML学习心得：掌握table与input标签详解
                                    在本文档中，作者分享了他们的HTML学习心得，强调了HTML基础知识和一些关键元素的理解。主要讲解了两个核心部分：table和input元素。 1. **table**：表格是HTML中的重要组成部分，用于展示数据。学习者首先了解了...
                                    评论
                                    添加红包

                                    请填写红包祝福语或标题

                                    个

                                    红包个数最小为10个

                                    元

                                    红包金额最低5元

                                    当前余额3.43元 前往充值 >
                                    需支付：10.00元
                                    成就一亿技术人!
                                    领取后你会自动成为博主和红包主的粉丝 规则
                                    hope_wisdom
                                    发出的红包
                                    实付元
                                    使用余额支付
                                    点击重新获取
                                    扫码支付
                                    钱包余额 0

                                    抵扣说明：

                                    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
                                    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

                                    余额充值