HTML 快速指南

上一页
下一页

HTML - 概述

HTML 代表超文本标记语言 (HyperText Markup Language)，是编写网页最常用的语言。

  • 超文本指的是网页（HTML文档）相互链接的方式。因此，网页上的链接称为超文本。

  • 顾名思义，HTML 是一种标记语言，这意味着你使用 HTML 来简单地用标签“标记”文本文档，告诉 Web 浏览器如何构建它以进行显示。

最初，HTML 的开发目的是定义文档的结构，例如标题、段落、列表等等，以便于在研究人员之间共享科学信息。

现在，HTML 被广泛用于借助 HTML 语言中提供的不同标签来格式化网页。

基本的 HTML 文档

最简单的形式，下面是一个 HTML 文档的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

HTML 标签

如前所述，HTML 是一种标记语言，它使用各种标签来格式化内容。这些标签用尖括号括起来<标签名称>。除少数标签外，大多数标签都有相应的闭合标签。例如，<html>有其闭合标签</html>，<body>标签有其闭合标签</body>标签等。

上面的 HTML 文档示例使用了以下标签：

序号 标签和描述
1 <!DOCTYPE...>

此标签定义文档类型和 HTML 版本。
2 <html>

此标签包含完整的 HTML 文档，主要包括由 <head>...</head> 表示的文档头部和由 <body>...</body> 标签表示的文档主体。
3 <head>

此标签表示文档的头部，其中可以包含其他 HTML 标签，例如 <title>、<link> 等。
4 <title>

<title> 标签用于在 <head> 标签内指定文档标题。
5 <body>

此标签表示文档的主体，其中包含其他 HTML 标签，例如 <h1>、<div>、<p> 等。
6 <h1>

此标签表示标题。
7 <p>

此标签表示一个段落。

要学习 HTML，你需要学习各种标签并了解它们在格式化文本文档时的行为。学习 HTML 很简单，用户只需学习不同标签的使用方法即可格式化文本或图像以制作精美的网页。

万维网联盟 (W3C) 建议从 HTML 4 开始使用小写标签。

HTML 文档结构

典型的 HTML 文档将具有以下结构：

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

我们将在后续章节中学习所有头部和主体标签，但现在让我们看看文档声明标签是什么。

<!DOCTYPE> 声明

<!DOCTYPE> 声明标签用于让 Web 浏览器理解文档中使用的 HTML 版本。当前的 HTML 版本是 5，它使用以下声明：

<!DOCTYPE html>

根据使用的 HTML 版本，HTML 文档中可以使用许多其他声明类型。在讨论 <!DOCTYPE...> 标签以及其他 HTML 标签时，我们将看到更多详细信息。

HTML - 基本标签

标题标签

任何文档都以标题开头。您可以为标题使用不同的尺寸。HTML 还有六个级别的标题，它们使用元素<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。在显示任何标题时，浏览器会在该标题之前和之后添加一行。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下结果：

段落标签

<p>标签提供了一种将文本组织成不同段落的方法。每一段文本都应该放在一个起始 <p> 标签和一个结束 </p> 标签之间，如下例所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

这将产生以下结果：

换行标签

每当你使用<br />元素时，其后的任何内容都将从下一行开始。此标签是空元素的一个示例，你不需要起始和结束标签，因为它们之间没有任何内容。

<br /> 标签在字符br和正斜杠之间有一个空格。如果你省略此空格，旧版浏览器将难以渲染换行符，而如果你错过了正斜杠字符而只使用<br>，则在 XHTML 中无效。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

这将产生以下结果：

居中内容

您可以使用<center>标签将任何内容放在页面或任何表格单元格的中心。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

这将产生以下结果：

水平线

水平线用于视觉上分割文档的各个部分。<hr>标签从文档中的当前位置创建一条到右边缘的线，并相应地换行。

例如，你可能希望在两个段落之间添加一条线，如下面的示例所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

这将产生以下结果：

同样，<hr />标签是空元素的一个示例，你不需要起始和结束标签，因为它们之间没有任何内容。

<hr />元素在字符hr和正斜杠之间有一个空格。如果你省略此空格，旧版浏览器将难以渲染水平线，而如果你错过了正斜杠字符而只使用<hr>，则在 XHTML 中无效。

保留格式

有时，你希望文本遵循其在 HTML 文档中的确切格式。在这些情况下，您可以使用预格式化标签<pre>。

起始<pre>标签和结束</pre>标签之间的任何文本都将保留源文档的格式。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

这将产生以下结果：

尝试在不将其放在<pre>...</pre>标签内的相同代码

不换行空格

假设你想使用短语“12 Angry Men”。在这里，你不会希望浏览器将“12, Angry”和“Men”拆分成两行：

An example of this technique appears in the movie "12 Angry Men."

在不希望客户端浏览器换行的情况下，应使用不换行空格实体&nbsp;代替普通空格。例如，在段落中编码“12 Angry Men”时，应使用类似于以下代码的内容：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

这将产生以下结果：

HTML - 元素

HTML 元素由起始标签定义。如果元素包含其他内容，则它以结束标签结束，其中元素名称前面带有正斜杠，如下所示：

起始标签 内容 结束标签
<p> 这是段落内容。 </p>
<h1> 这是标题内容。 </h1>
<div> 这是分区内容。 </div>
<br />

所以这里<p>....</p>是一个HTML元素，<h1>...</h1>是另一个HTML元素。有些HTML元素不需要闭合，例如<img.../>、<hr />和<br />元素。这些被称为空元素。

HTML文档由这些元素组成的树构成，它们指定了HTML文档的构建方式以及应将哪种内容放置在HTML文档的哪个部分。

HTML标签与元素

HTML元素由一个起始标签定义。如果元素包含其他内容，则以一个结束标签结尾。

例如，<p>是段落的起始标签，</p>是同一段落的结束标签，但<p>这是一个段落</p>是一个段落元素。

嵌套HTML元素

完全允许将一个HTML元素放在另一个HTML元素内：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

这将显示以下结果：

HTML - 属性

我们已经看到了一些HTML标签及其用法，例如标题标签<h1>,<h2>，段落标签<p>和其他标签。到目前为止，我们以最简单的形式使用它们，但是大多数HTML标签也可以具有属性，这些属性是额外的信息。

属性用于定义HTML元素的特性，并放置在元素的起始标签内。所有属性都由两部分组成：一个名称和一个值。

  • 名称是您要设置的属性。例如，示例中的段落<p>元素包含一个名为align的属性，您可以使用它来指示段落在页面上的对齐方式。

  • 值是您希望将属性的值设置为，并且始终放在引号内。下面的示例显示了align属性的三个可能值：left、center和right。

属性名称和属性值不区分大小写。但是，万维网联盟（W3C）在其HTML 4建议中建议使用小写属性/属性值。

示例

在线演示 
<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

这将显示以下结果：

核心属性

可以在大多数HTML元素（尽管并非所有元素）上使用的四个核心属性是：

  • Id
  • Title
  • Class
  • Style

Id属性

HTML标签的id属性可用于唯一标识HTML页面中的任何元素。您可能想要在元素上使用id属性有两个主要原因：

  • 如果元素带有id属性作为唯一标识符，则可以识别该元素及其内容。

  • 如果网页（或样式表）中存在两个同名的元素，则可以使用id属性来区分具有相同名称的元素。

我们将在单独的教程中讨论样式表。现在，让我们使用id属性来区分下面显示的两个段落元素。

示例

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Title属性

title属性为元素提供建议的标题。title属性的语法与id属性的语法类似：

此属性的行为将取决于携带它的元素，尽管它通常在光标移到元素上方或元素加载时显示为工具提示。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

这将产生以下结果：

现在尝试将光标移到“带有标题的标题标签示例”上，您将看到在代码中使用的任何标题都将作为光标的工具提示显示。

Class属性

class属性用于将元素与样式表关联，并指定元素的类。学习级联样式表（CSS）时，您将了解class属性的更多用途。所以现在您可以避免它。

属性的值也可以是空格分隔的类名列表。例如：

class = "className1 className2 className3"

Style属性

style属性允许您在元素内指定级联样式表（CSS）规则。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

这将产生以下结果：

在这一点上，我们没有学习CSS，所以让我们继续学习，而不用过多地关注CSS。在这里，您需要了解什么是HTML属性以及如何在格式化内容时使用它们。

国际化属性

有三个国际化属性，可用于大多数（尽管并非所有）XHTML元素。

  • dir
  • lang
  • xml:lang

Dir属性

dir属性允许您指示浏览器文本的流动方向。dir属性可以取两个值中的一个，如下表所示：

值 含义
ltr 从左到右（默认值）
rtl 从右到左（对于从右到左阅读的语言，如希伯来语或阿拉伯语）

示例

在线演示 
<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

这将产生以下结果：

当dir属性用于<html>标签内时，它决定了整个文档中文本的呈现方式。当用在其他标签内时，它只控制该标签内容的文本方向。

Lang属性

lang属性允许您指示文档中使用的主要语言，但此属性仅为了向后兼容HTML的早期版本而保留在HTML中。在新XHTML文档中，此属性已被xml:lang属性取代。

lang属性的值是ISO-639标准的两位语言代码。查看HTML语言代码：ISO 639以获取完整的语言代码列表。

示例

在线演示 
<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

这将产生以下结果：

Xml:lang属性

xml:lang属性是lang属性的XHTML替代品。xml:lang属性的值应如上一节所述为ISO-639国家/地区代码。

通用属性

这是一个表，其中包含一些其他属性，这些属性可以很容易地与许多HTML标签一起使用。

属性 选项 功能
align right, left, center 水平对齐标签
valign top, middle, bottom 垂直对齐HTML元素内的标签。
bgcolor 数字、十六进制、RGB值 在元素后面放置背景颜色
background URL 在元素后面放置背景图像
id 用户定义 命名一个元素以用于级联样式表。
class 用户定义 对元素进行分类以用于级联样式表。
width 数值 指定表格、图像或表格单元格的宽度。
height 数值 指定表格、图像或表格单元格的高度。
title 用户定义 元素的“弹出”标题。

在我们继续学习其他HTML标签时，我们将看到相关的示例。有关HTML标签和相关属性的完整列表，请查看对HTML标签列表的引用。

HTML - 格式化

如果您使用文字处理器，您一定熟悉使文本加粗、斜体或下划线的功能；这只是十种可用选项中的三种，用于指示文本在HTML和XHTML中的显示方式。

粗体文本

出现在<b>...</b>元素中的任何内容都将以粗体显示，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

斜体文本

出现在<i>...</i>元素中的任何内容都将以斜体显示，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

下划线文本

出现在<u>...</u>元素中的任何内容都将显示下划线，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

删除线文本

出现在<strike>...</strike>元素中的任何内容都将显示删除线，即文本上的细线，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

等宽字体

<tt>...</tt>元素的内容以等宽字体编写。大多数字体被称为可变宽度字体，因为不同的字母具有不同的宽度（例如，字母“m”比字母“i”宽）。但是，在等宽字体中，每个字母的宽度相同。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

上标文本

<sup>...</sup>元素的内容以上标编写；使用的字体大小与周围的字符相同，但显示在其他字符上方半个字符的高度。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

下标文本

<sub>...</sub>元素的内容以下标编写；使用的字体大小与周围的字符相同，但显示在其他字符下方半个字符的高度。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

插入文本

出现在<ins>...</ins>元素中的任何内容都将显示为插入文本。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下结果：

删除文本

出现在<del>...</del>元素中的任何内容都将显示为删除文本。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下结果：

较大的文本

<big>...</big>元素的内容显示的字体大小比周围的其他文本大一号，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

较小的文本

<small>...</small>元素的内容显示的字体大小比周围的其他文本小一号，如下所示：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

这将产生以下结果：

分组内容

<div>和<span>元素允许您将多个元素组合在一起以创建页面的节或子节。

例如，您可能希望将页面上的所有脚注放在<div>元素内，以指示<div>元素中的所有元素都与脚注相关。然后，您可以将样式附加到此<div>元素，以便它们使用一组特殊的样式规则显示。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

这将产生以下结果：

另一方面，<span>元素只能用于对内联元素进行分组。因此，如果您有一部分句子或段落需要组合在一起，您可以按如下方式使用<span>元素。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

这将产生以下结果：

这些标签通常与CSS一起使用，允许您将样式附加到页面的某个部分。

HTML - 短语标签

短语标签已针对特定用途而设计，尽管它们的显示方式与其他基本标签（如<b>、<i>、<pre>和<tt>）类似，您在上一章中已经看到过。本章将引导您了解所有重要的短语标签，让我们开始逐一了解它们。

强调文本

出现在<em>...</em>元素中的任何内容都将显示为强调文本。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

标记文本

出现在<mark>...</mark>元素中的任何内容都将显示为用黄色墨水标记。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

这将产生以下结果：

强文本

出现在<strong>...</strong>元素中的任何内容都将显示为重要文本。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

这将产生以下结果：

文本缩写

您可以通过将文本放在起始<abbr>和结束</abbr>标签内来缩写文本。如果存在，title属性必须包含此完整描述，且仅此而已。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

这将产生以下结果：

首字母缩写词元素

<acronym>元素允许您指示<acronym>和</acronym>标签之间的文本是首字母缩写词。

目前，主要浏览器不会更改<acronym>元素内容的外观。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

这将产生以下结果：

文本方向

<bdo>...</bdo>元素代表双向覆盖，它用于覆盖当前文本方向。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

这将产生以下结果：

特殊术语

<dfn>...</dfn> 元素（或 HTML 定义元素）允许您指定您正在介绍一个特殊术语。它的用法类似于段落中间的斜体字。

通常，您会在第一次介绍关键词时使用 <dfn> 元素。大多数最新的浏览器会将 <dfn> 元素的内容呈现为斜体字体。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

这将产生以下结果：

引用文本

当您想引用其他来源的段落时，应将其放在<blockquote>...</blockquote>标签之间。

<blockquote> 元素内的文本通常会从周围文本的左右边缘缩进，有时还会使用斜体字体。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

这将产生以下结果：

短引用

当您想在一个句子中添加双引号时，可以使用<q>...</q>元素。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

这将产生以下结果：

文本引用

如果您正在引用文本，您可以通过将其放在一个开始的<cite>标签和结束的</cite>标签之间来指示来源。

正如您在印刷出版物中所期望的那样，<cite> 元素的内容默认情况下以斜体文本呈现。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

这将产生以下结果：

计算机代码

任何要在网页上显示的编程代码都应放在<code>...</code>标签内。通常，<code>元素的内容以等宽字体呈现，就像大多数编程书籍中的代码一样。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

这将产生以下结果：

键盘文本

当您谈论计算机时，如果您想告诉读者输入一些文本，您可以使用<kbd>...</kbd>元素来指示应该输入的内容，例如本例所示。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

这将产生以下结果：

编程变量

此元素通常与<pre>和<code>元素一起使用，以指示该元素的内容是一个变量。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

这将产生以下结果：

程序输出

<samp>...</samp>元素表示程序、脚本等的示例输出。同样，它主要用于记录编程或编码概念。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

这将产生以下结果：

地址文本

<address>...</address>元素用于包含任何地址。

示例

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

这将产生以下结果：

HTML - 元标签 (meta)

HTML 允许您以多种方式指定元数据——关于文档的其他重要信息。META 元素可用于包含描述 HTML 文档属性的名称/值对，例如作者、过期日期、关键字列表、文档作者等。

<meta>标签用于提供此类附加信息。此标签是一个空元素，因此没有结束标签，但它在其属性中携带信息。

您可以根据要在文档中保留的信息在文档中包含一个或多个 meta 标签，但总的来说，meta 标签不会影响文档的物理外观，因此从外观的角度来看，包含它们与否无关紧要。

向文档中添加 Meta 标签

您可以通过将 <meta> 标签放在由<head>和</head>标签表示的文档标题内来向网页添加元数据。除了核心属性外，meta 标签还可以具有以下属性：

序号 属性和描述
1

name

属性的名称。可以是任何内容。示例包括关键字、描述、作者、修改日期、生成器等。
2

content

指定属性的值。
3

scheme

指定一个方案来解释属性的值（如 content 属性中声明的那样）。
4

http-equiv

用于 http 响应消息头。例如，http-equiv 可用于刷新页面或设置 Cookie。值包括 content-type、expires、refresh 和 set-cookie。

指定关键字

您可以使用 <meta> 标签指定与文档相关的重要的关键字，搜索引擎以后会在索引您的网页以进行搜索时使用这些关键字。

示例

以下是一个示例，我们在此添加 HTML、Meta 标签、元数据作为关于文档的重要关键字。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

这将产生以下结果：

文档描述

您可以使用 <meta> 标签简要描述文档。各种搜索引擎在索引您的网页以进行搜索时也可以使用它。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

文档修订日期

您可以使用 <meta> 标签提供有关上次更新文档的时间的信息。各种 web 浏览器在刷新您的网页时可以使用此信息。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

文档刷新

<meta> 标签可用于指定网页自动刷新后的持续时间。

示例

如果希望您的页面每 5 秒刷新一次，请使用以下语法。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

页面重定向

您可以使用 <meta> 标签将页面重定向到任何其他网页。如果要经过一定时间后重定向页面，您也可以指定持续时间。

示例

以下是在 5 秒后将当前页面重定向到另一个页面的示例。如果要立即重定向页面，请不要指定content属性。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = https://tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

设置 Cookie

Cookie 是存储在您计算机上的小型文本文件中的数据，它在 web 浏览器和 web 服务器之间交换，以便根据您的 web 应用程序需求跟踪各种信息。

您可以使用 <meta> 标签在客户端存储 Cookie，web 服务器以后可以使用此信息来跟踪网站访问者。

示例

以下是在 5 秒后将当前页面重定向到另一个页面的示例。如果要立即重定向页面，请不要指定content属性。

在线演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

如果您不包含过期日期和时间，则 Cookie 被视为会话 Cookie，用户退出浏览器时将被删除。

注意 - 您可以查看 PHP 和 Cookie 教程以了解有关 Cookie 的完整详细信息。

设置作者姓名

您可以使用 meta 标签在网页中设置作者姓名。请参见下面的示例：

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

指定字符集

您可以使用 <meta> 标签指定网页中使用的字符集。

示例

默认情况下，Web 服务器和 Web 浏览器使用 ISO-8859-1 (Latin1) 编码来处理网页。以下是如何设置 UTF-8 编码的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

要使用繁体中文字符提供静态页面，网页必须包含一个 <meta> 标签来设置 Big5 编码：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

HTML - 注释

注释是任何 web 浏览器都会忽略的一段代码。最好在 HTML 代码中添加注释，尤其是在复杂的文档中，以指示文档的部分以及任何其他对查看代码的任何人有用的说明。注释可以帮助您和其他人理解您的代码，并提高代码的可读性。

HTML 注释位于<!-- ... -->标签之间。因此，在 <!-- ... --> 标签中放置的任何内容都将被视为注释，并将被浏览器完全忽略。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

这将产生以下结果，而不会显示作为注释一部分给出的内容：

有效与无效注释

注释不能嵌套，这意味着不能将注释放在另一个注释内。其次，双破折号序列“--”不能出现在注释内，除非它是作为结束 --> 标签的一部分。您还必须确保注释字符串的开头没有空格。

示例

此处，给定的注释是一个有效注释，将被浏览器清除。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

这将产生以下结果：

但是，以下行不是有效的注释，浏览器将显示它。这是因为左角括号和感叹号之间有一个空格。

在线演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

这将产生以下结果：

多行注释

到目前为止，我们已经看到了单行注释，但是 HTML 也支持多行注释。

您可以通过在第一行之前和最后一行结尾处放置特殊的开始标签 <!-- 和结束标签 --> 来注释多行，如下面的示例所示。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

这将产生以下结果：

条件注释

条件注释仅在 Windows 上的 Internet Explorer (IE) 中有效，但其他浏览器会忽略它们。它们从 Explorer 5 开始受支持，您可以使用它们向不同版本的 IE 提供条件指令。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

您会遇到需要根据不同版本的 Internet Explorer 应用不同样式表的情况，在这种情况下，条件注释将很有用。

使用注释标签

有一些浏览器支持 <comment> 标签来注释 HTML 代码的一部分。

注意 - <comment> 标签在 HTML5 中已弃用。请不要使用此元素。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

如果您使用的是 IE，则会产生以下结果：

但如果您不使用 IE，则会产生以下结果：

注释脚本代码

虽然您将在单独的教程中学习使用 HTML 的 JavaScript，但在此您必须注意，如果您在 HTML 代码中使用 Java Script 或 VB Script，则建议将该脚本代码放在正确的 HTML 注释中，以便旧浏览器可以正常工作。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

这将产生以下结果：

注释样式表

虽然您将在单独的教程中学习使用 HTML 的样式表，但在此您必须注意，如果您在 HTML 代码中使用层叠样式表 (CSS)，则建议将该样式表代码放在正确的 HTML 注释中，以便旧浏览器可以正常工作。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

这将产生以下结果：

HTML - 图片

图像对于美化以及以简单的方式在网页上描述许多复杂的概念非常重要。本教程将引导您完成在网页中使用图像的简单步骤。

插入图像

您可以使用<img>标签在网页中插入任何图像。以下是使用此标签的简单语法。

<img src = "Image URL" ... attributes-list/>

<img> 标签是一个空标签，这意味着它只能包含属性列表，并且没有结束标签。

示例

要尝试以下示例，让我们将 HTML 文件 test.htm 和图像文件 test.png 保留在同一目录中：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

这将产生以下结果：

您可以根据自己的喜好使用 PNG、JPEG 或 GIF 图像文件，但请确保在src属性中指定正确的图像文件名。图像名称始终区分大小写。

alt属性是必填属性，它指定图像的替代文本，如果图像无法显示。

设置图像位置

通常我们将所有图像保存在单独的目录中。因此，让我们将 HTML 文件 test.htm 保存在我们的主目录中，并在主目录中创建一个子目录images，我们将在此处保存我们的图像 test.png。

示例

假设我们的图像位置是“image/test.png”，请尝试以下示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

这将产生以下结果：

设置图像宽度/高度

您可以使用width和height属性根据需要设置图像宽度和高度。您可以根据像素或实际大小的百分比来指定图像的宽度和高度。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

这将产生以下结果：

设置图像边框

默认情况下，图像周围会有一个边框，您可以使用 border 属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

这将产生以下结果：

设置图像对齐

默认情况下，图像将对齐在页面的左侧，但是您可以使用align属性将其设置为居中或右侧。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

这将产生以下结果：

免费网络图形

有关免费网络图形（包括图案），您可以查看 免费网络图形

HTML - 表格

HTML 表格允许 web 作者将数据（如文本、图像、链接、其他表格等）排列到单元格的行和列中。

HTML 表格是使用<table>标签创建的，其中<tr>标签用于创建表格行，<td>标签用于创建数据单元格。<td>下的元素是常规的，默认情况下左对齐。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <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>
      
   </body>
</html>

这将产生以下结果：

此处，border 是 <table> 标签的一个属性，用于在所有单元格周围添加边框。如果不需要边框，可以使用 border = "0"。

表格标题

表格标题可以使用<th> 标签定义。此标签将替换 <td> 标签，后者用于表示实际的数据单元格。通常，您会将顶行设置为表格标题，如下所示，或者您可以在任何行中使用 <th> 元素。在 <th> 标签中定义的标题默认情况下居中且为粗体。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

这将产生以下结果：

单元格填充和单元格间距属性

有两个属性，cellpadding 和 cellspacing，用于调整表格单元格中的空白。cellspacing 属性定义表格单元格之间的间距，而 cellpadding 表示单元格边框与其内容之间的距离。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

这将产生以下结果：

Colspan 和 Rowspan 属性

如果要将两列或多列合并为一列，可以使用colspan 属性。类似地，如果要合并两行或多行，可以使用rowspan。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下结果：

表格背景

您可以通过以下两种方式之一设置表格背景：

  • bgcolor 属性 - 您可以为整个表格或单个单元格设置背景颜色。

  • background 属性 - 您可以为整个表格或单个单元格设置背景图像。

您还可以使用bordercolor 属性设置边框颜色。

注意 - bgcolor、background 和 bordercolor 属性在 HTML5 中已被弃用。请勿使用这些属性。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <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>
   </body>
	
</html>

这将产生以下结果：

这是一个使用background 属性的示例。这里我们将使用 /images 目录中提供的图像。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <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>
   </body>
	
</html>

这将产生以下结果。此处背景图像未应用于表格的标题。

表格高度和宽度

您可以使用width 和height 属性设置表格的宽度和高度。您可以以像素为单位或以可用屏幕区域的百分比来指定表格的宽度或高度。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下结果：

表格标题

caption 标签将作为表格的标题或说明，显示在表格顶部。此标签在较新版本的 HTML/XHTML 中已被弃用。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the 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>
   </body>
	
</html>

这将产生以下结果：

表格头部、主体和脚注

表格可以分为三个部分：头部、主体和脚注。头部和脚注类似于文字处理文档中的页眉和页脚，每个页面都相同，而主体是表格的主要内容容器。

用于分隔表格头部、主体和脚注的三个元素是：

  • <thead> - 创建单独的表格头部。

  • <tbody> - 指示表格的主体。

  • <tfoot> - 创建单独的表格脚注。

一个表格可以包含多个 <tbody> 元素来指示不同的页面或数据组。但值得注意的是，<thead> 和 <tfoot> 标签应该出现在 <tbody> 之前。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

这将产生以下结果：

嵌套表格

您可以在一个表格内使用另一个表格。不仅是表格，您几乎可以在表格数据标签 <td> 内使用所有标签。

示例

以下是使用另一个表格和在表格单元格内使用其他标签的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

这将产生以下结果：

HTML - 列表

HTML 为网页作者提供了三种指定信息列表的方式。所有列表都必须包含一个或多个列表元素。列表可能包含：

  • <ul> - 无序列表。这将使用普通项目符号列出项目。

  • <ol> - 有序列表。这将使用不同的数字方案来列出您的项目。

  • <dl> - 定义列表。这将以与字典中相同的顺序排列您的项目。

HTML 无序列表

无序列表是相关项目的一个集合，这些项目没有特殊的顺序或序列。此列表是使用 HTML <ul> 标签创建的。列表中的每个项目都用项目符号标记。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

这将产生以下结果：

type 属性

您可以对 <ul> 标签使用type 属性来指定您喜欢的项目符号类型。默认情况下，它是一个实心圆点。以下是可能的选项：

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

示例

以下是一个使用 <ul type = "square"> 的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

这将产生以下结果：

示例

以下是一个使用 <ul type = "disc"> 的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

这将产生以下结果：

示例

以下是一个使用 <ul type = "circle"> 的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

这将产生以下结果：

HTML 有序列表

如果需要将项目放在编号列表而不是项目符号列表中，则将使用 HTML 有序列表。此列表是使用<ol> 标签创建的。编号从一开始，并且每个连续的有序列表元素（用 <li> 标记）递增 1。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

这将产生以下结果：

type 属性

您可以对 <ol> 标签使用type 属性来指定您喜欢的编号类型。默认情况下，它是一个数字。以下是可能的选项：

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

示例

以下是一个使用 <ol type = "1"> 的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

这将产生以下结果：

示例

以下是一个使用 <ol type = "I"> 的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

这将产生以下结果：

示例

以下是一个使用 <ol type = "i"> 的示例。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

这将产生以下结果：

示例

以下是一个使用 <ol type = "A" > 的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

这将产生以下结果：

示例

以下是一个使用 <ol type = "a"> 的示例。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

这将产生以下结果：

start 属性

您可以对 <ol> 标签使用start 属性来指定所需的编号起点。以下是可能的选项：

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

示例

以下是一个使用 <ol type = "i" start = "4" > 的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

这将产生以下结果：

HTML 定义列表

HTML 和 XHTML 支持一种称为定义列表的列表样式，其中条目像在字典或百科全书中一样列出。定义列表是呈现词汇表、术语列表或其他名称/值列表的理想方式。

定义列表使用以下三个标签。

  • <dl> - 定义列表的开始
  • <dt> - 术语
  • <dd> - 术语定义
  • </dl> - 定义列表的结束

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

这将产生以下结果：

HTML - 文本链接

网页可以包含各种链接，这些链接可以将您直接带到其他页面，甚至可以带到给定页面的特定部分。这些链接称为超链接。

超链接允许访问者通过单击网页上的文字、短语和图像在网站之间导航。因此，您可以使用网页上提供的文本或图像创建超链接。

注意 - 我建议您阅读关于理解 URL的简短教程

链接文档

链接是使用 HTML 标签 <a> 指定的。此标签称为锚点标签，<a> 标签和 </a> 标签之间的任何内容都成为链接的一部分，用户可以单击该部分以到达链接的文档。以下是使用 <a> 标签的简单语法。

<a href = "Document URL" ... attributes-list>Link Text</a>

示例

让我们尝试以下示例，该示例在您的页面上链接 https://tutorialspoint.com：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

这将产生以下结果，您可以单击生成的链接以到达 Tutorials Point 的主页（在此示例中）。

target 属性

我们在之前的示例中使用了target 属性。此属性用于指定打开链接文档的位置。以下是可能的选项：

序号 选项 & 说明
1

_blank

在新窗口或选项卡中打开链接文档。
2

_self

在同一框架中打开链接文档。
3

_parent

在父框架中打开链接文档。
4

_top

在窗口的整个主体中打开链接文档。
5

targetframe

在名为targetframe的框架中打开链接文档。

示例

尝试以下示例以了解 target 属性的几个选项之间的基本区别。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

这将产生以下结果，您可以单击不同的链接以了解为 target 属性提供的各种选项之间的区别。

基本路径的使用

当您链接与同一网站相关的 HTML 文档时，不需要为每个链接提供完整的 URL。如果在 HTML 文档标题中使用<base> 标签，则可以摆脱它。此标签用于为所有链接提供基本路径。因此，您的浏览器将给定的相对路径与该基本路径连接起来，并将创建一个完整的 URL。

示例

以下示例使用 <base> 标签来指定基本 URL，稍后我们可以使用所有链接的相对路径，而不是为每个链接提供完整的 URL。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

这将产生以下结果，您可以单击生成的HTML 教程链接以到达 HTML 教程。

现在给定的 URL <a href = "/html/index.htm" 被视为 <ahref = "https://tutorialspoint.com/html/index.htm"

链接到页面部分

您可以使用name 属性创建指向给定网页特定部分的链接。这是一个两步过程。

注意 - name 属性在 HTML5 中已被弃用。请勿使用此属性。请改用id 和title 属性。

首先，创建一个链接到您想在网页中到达的位置，并使用 <a...> 标签对其命名，如下所示：

<h1>HTML Text Links <a name = "top"></a></h1>

第二步是创建一个超链接来链接文档以及您想要到达的位置：

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

这将生成以下链接，您可以单击生成的转到顶部链接以到达 HTML 文本链接教程的顶部。

Go to the Top

设置链接颜色

您可以使用 <body> 标签的link、alink 和vlink 属性设置链接、活动链接和已访问链接的颜色。

示例

将以下内容保存在 test.htm 中，并在任何 Web 浏览器中打开它，以查看link、alink 和vlink 属性的工作方式。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

这将产生以下结果。只需检查单击链接之前的颜色，然后检查激活链接时的颜色以及访问链接后的颜色。

下载链接

您可以创建文本链接以使您的 PDF、DOC 或 ZIP 文件可下载。这非常简单；您只需要提供可下载文件的完整 URL，如下所示：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

这将生成以下链接，并用于下载文件。

文件下载对话框

有时您可能希望提供一个选项，用户单击链接后，它会向用户弹出“文件下载”框，而不是显示实际内容。这非常容易实现，并且可以使用 HTTP 响应中的 HTTP 头来实现。

例如，如果您想使文件名文件可从给定链接下载，则其语法如下。

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

注意 - 有关 PERL CGI 程序的更多详细信息，请阅读教程PERL 和 CGI。

HTML - 图片链接

我们已经了解了如何使用文本创建超文本链接，并且我们还学习了如何在网页中使用图像。现在，我们将学习如何使用图像创建超链接。

示例

将图像用作超链接很简单。我们只需要在超链接中使用图像代替文本，如下所示：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

这将产生以下结果，您可以单击图像以到达 Tutorials Point 的主页。

这是使用图像创建超链接的最简单方法。接下来，我们将了解如何创建鼠标感应图像链接。

鼠标感应图像

HTML 和 XHTML 标准提供了一个功能，允许您在一个图像中嵌入许多不同的链接。您可以根据图像上提供的不同坐标在单个图像上创建不同的链接。一旦将不同的链接附加到不同的坐标，我们就可以单击图像的不同部分来打开目标文档。这种鼠标感应图像称为图像地图。

创建图像地图有两种方法：

  • 服务器端图像地图 - 这是由 <img> 标签的ismap 属性启用的，需要访问服务器和相关的图像地图处理应用程序。

  • 客户端图像映射 − 这使用``标签的`usemap`属性创建，以及相应的``和``标签。

服务器端图像映射

你只需将你的图像放在一个超链接中，并使用ismap属性，这使其成为一个特殊的图像，当用户点击图像中的某个位置时，浏览器会将鼠标指针的坐标以及``标签中指定的URL传递到Web服务器。服务器使用鼠标指针坐标来确定将哪个文档传回浏览器。

当使用ismap时，包含``标签的href属性必须包含服务器应用程序（如cgi或PHP脚本等）的URL，以根据传递的坐标处理传入的请求。

鼠标位置的坐标是从图像左上角开始计算的屏幕像素，从(0,0)开始。坐标前面加一个问号，添加到URL的末尾。

例如，如果用户点击以下图像左上角向右20像素，向下30像素的位置−

该图像由以下代码片段生成−

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

那么浏览器会将以下搜索参数发送到Web服务器，这些参数可以由ismap.cgi脚本或map文件处理，你可以将任何你喜欢的文档链接到这些坐标−

/cgi-bin/ismap.cgi?20,30

这样，你可以将不同的链接分配给图像的不同坐标，当点击这些坐标时，你可以打开相应的链接文档。要了解更多关于ismap属性的信息，你可以查看如何使用图像ismap？

注意 − 你将在学习Perl编程时学习CGI编程。你也可以使用PHP或任何其他脚本编写你的脚本以处理这些传递的坐标。现在，让我们专注于学习HTML，稍后你可以重新访问此部分。

客户端图像映射

客户端图像映射由``标签的usemap属性启用，并由特殊的``和``扩展标签定义。

将形成地图的图像作为普通图像插入页面中，使用``标签，除了它带有一个名为usemap的额外属性。usemap属性的值将在``标签中使用，以链接地图和图像标签。``标签以及``标签定义所有图像坐标和相应的链接。

``标签内的``标签指定形状和坐标，以定义图像上每个可点击热点的边界。这是一个来自图像地图的示例−

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

这将产生以下结果：

坐标系

coords的实际值完全取决于所讨论的形状。以下是一个总结，随后是详细示例−

  • rect = x1 , y1 , x2 , y2

    x1和y1是矩形左上角的坐标；x2和y2是右下角的坐标。

  • circle = xc , yc , radius

    xc和yc是圆心的坐标，radius是圆的半径。一个以200,50为中心，半径为25的圆的属性为coords = "200,50,25"

  • poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

    各种x-y对定义多边形的顶点（点），从一个点到下一个点画一条“线”。一个菱形多边形，其顶点位于20,20，最宽处为40像素，其属性为coords = "20,20,40,40,20,60,0,40"。

所有坐标都是相对于图像左上角(0,0)。每个形状都有一个相关的URL。你可以使用任何图像软件来了解不同位置的坐标。

HTML - 邮件链接

在网页上放置HTML电子邮件链接并不难，但这可能会给你的电子邮件帐户造成不必要的垃圾邮件问题。有些人可以运行程序来收集这些类型的电子邮件，然后以各种方式将其用于垃圾邮件。

你可以有另一种选择来方便人们向你发送电子邮件。一种选择是使用HTML表单收集用户数据，然后使用PHP或CGI脚本发送电子邮件。

一个简单的例子，查看我们的联系我们表单。我们使用此表单获取用户反馈，然后我们使用一个CGI程序来收集这些信息并向给定的电子邮件ID发送电子邮件。

注意 − 你将在HTML表单中学习HTML表单，你将在我们的另一个教程Perl CGI编程中学习CGI。

HTML电子邮件标签

HTML<a>标签为你提供了指定电子邮件地址以发送电子邮件的选项。在使用<a>标签作为电子邮件标签时，你将使用mailto: 电子邮件地址以及href属性。以下是使用mailto代替http的语法。

<a href = "mailto: [email protected]">Send Email</a>

此代码将生成以下链接，你可以用它来发送电子邮件。

Send Email

现在，如果用户点击此链接，它将启动安装在用户计算机上的一个电子邮件客户端（如Lotus Notes、Outlook Express等）。使用此选项发送电子邮件还存在另一个风险，因为如果用户没有在其计算机上安装电子邮件客户端，则无法发送电子邮件。

默认设置

你可以指定默认的电子邮件主题和电子邮件正文以及你的电子邮件地址。以下是使用默认主题和正文的示例。

<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>

此代码将生成以下链接，你可以用它来发送电子邮件。

Send Feedback

HTML -框架

HTML框架用于将浏览器窗口分成多个部分，每个部分可以加载单独的HTML文档。浏览器窗口中的一组框架称为框架集。窗口的划分方式与表格的组织方式类似：分为行和列。

框架的缺点

使用框架有一些缺点，因此不建议在网页中使用框架−

  • 一些较小的设备往往无法处理框架，因为它们的屏幕不够大，无法进行分割。

  • 有时由于不同的屏幕分辨率，你的页面在不同的计算机上显示方式会有所不同。

  • 浏览器的后退按钮可能无法按用户期望的那样工作。

  • 仍然有一些浏览器不支持框架技术。

创建框架

要在页面上使用框架，我们使用<frameset>标签而不是<body>标签。<frameset>标签定义了如何将窗口划分为框架。<frameset>标签的rows属性定义水平框架，cols属性定义垂直框架。每个框架由<frame>标签指示，它定义哪个HTML文档应在框架中打开。

注意 − <frame>标签在HTML5中已弃用。不要使用此元素。

示例

以下是如何创建三个水平框架的示例−

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

这将产生以下结果：

示例

让我们将上面的例子改成如下，这里我们用cols替换了rows属性并改变了它们的宽度。这将垂直创建所有三个框架−

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

这将产生以下结果：

<frameset>标签属性

以下是<frameset>标签的重要属性−

序号 属性和描述
1

cols

指定框架集中包含多少列以及每列的大小。你可以通过以下四种方式之一指定每列的宽度−

像素的绝对值。例如，要创建三个垂直框架，请使用cols = "100, 500, 100"。

浏览器窗口的百分比。例如，要创建三个垂直框架，请使用cols = "10%, 80%, 10%"。

使用通配符。例如，要创建三个垂直框架，请使用cols = "10%, *, 10%"。在这种情况下，通配符占用窗口的其余部分。

作为浏览器窗口的相对宽度。例如，要创建三个垂直框架，请使用cols = "3*, 2*, 1*"。这是百分比的替代方法。你可以使用浏览器窗口的相对宽度。这里窗口被分成六分之一：第一列占用窗口的一半，第二列占用三分之一，第三列占用六分之一。
2

rows

此属性的工作方式与cols属性相同，并采用相同的值，但它用于指定框架集中的行。例如，要创建两个水平框架，请使用rows = "10%, 90%"。你可以按照上面针对列解释的方式指定每行的高度。
3

border

此属性以像素为单位指定每个框架边框的宽度。例如，border = "5"。值为零表示没有边框。
4

frameborder

此属性指定是否应在框架之间显示三维边框。此属性的值为1（是）或0（否）。例如，frameborder = "0"指定没有边框。
5

framespacing

此属性指定框架集中的框架之间的空间量。这可以采用任何整数值。例如，framespacing = "10"表示每个框架之间应有10像素的间距。

<frame>标签属性

以下是<frame>标签的重要属性−

序号 属性和描述
1

src

此属性用于给出应在框架中加载的文件名。它的值可以是任何URL。例如，src = "/html/top_frame.htm"将加载html目录中可用的HTML文件。
2

name

此属性允许你为框架命名。它用于指示应将文档加载到哪个框架中。当你想要在一个框架中创建链接并将页面加载到另一个框架中时，这尤其重要，在这种情况下，第二个框架需要一个名称来标识自己是链接的目标。
3

frameborder

此属性指定是否显示该框架的边框；如果给定，它将覆盖<frameset>标签中给定的frameborder属性的值，这可以取值为1（是）或0（否）。
4

marginwidth

此属性允许你指定框架边框的左右侧与框架内容之间的空间宽度。该值以像素为单位给出。例如marginwidth = "10"。
5

marginheight

此属性允许你指定框架边框的顶部和底部与其内容之间的空间高度。该值以像素为单位给出。例如marginheight = "10"。
6

noresize

默认情况下，你可以通过单击并拖动框架的边框来调整任何框架的大小。noresize属性可防止用户调整框架的大小。例如noresize = "noresize"。
7

scrolling

此属性控制出现在框架上的滚动条的外观。这取值为“yes”、“no”或“auto”。例如，scrolling = "no"表示它不应有滚动条。
8

longdesc

此属性允许你提供指向另一个页面的链接，该页面包含框架内容的详细描述。例如longdesc = "framedescription.htm"

浏览器对框架的支持

如果用户使用的是任何旧浏览器或任何不支持框架的浏览器，则应向用户显示<noframes>元素。

因此，你必须在<noframes>元素内放置一个<body>元素，因为<frameset>元素应该替换<body>元素，但是如果浏览器不理解<frameset>元素，那么它应该理解包含在<noframes>元素中的<body>元素中的内容。

你可以为使用旧浏览器的用户提供一些不错的消息。例如，对不起！你的浏览器不支持框架。如上例所示。

框架的名称和目标属性

框架最常用的用途之一是在一个框架中放置导航栏，然后将主页面加载到单独的框架中。

让我们看看下面的例子，test.htm文件有以下代码−

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

这里，我们创建了两列，用于填充两个框架。第一个框架宽度为 200 像素，将包含由menu.htm文件实现的导航菜单栏。第二列填充剩余空间，将包含页面的主要部分，它由main.htm文件实现。对于菜单栏中可用的所有三个链接，我们都将目标框架指定为main_page，因此，每当您单击菜单栏中的任何链接时，可用的链接都将在主页面中打开。

以下是 menu.htm 文件的内容

在线演示 
<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "https://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "https://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

以下是 main.htm 文件的内容：

在线演示 
<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

当我们加载test.htm文件时，会产生以下结果：

现在您可以尝试单击左侧面板中可用的链接并查看结果。targetattribute还可以取以下值：

序号 选项 & 说明
1

_self

将页面加载到当前框架中。
2

_blank

将页面加载到新的浏览器窗口中。打开一个新窗口。
3

_parent

将页面加载到父窗口中，对于单个框架集而言，父窗口就是主浏览器窗口。
4

_top

将页面加载到浏览器窗口中，替换任何当前框架。
5

targetframe

将页面加载到名为 targetframe 的目标框架中。

HTML - 内联框架 (iframe)

您可以使用 HTML 标签<iframe>定义内联框架。<iframe>标签与<frameset>标签没有直接关系，它可以出现在文档中的任何位置。<iframe>标签定义文档内的一个矩形区域，浏览器可以在其中显示单独的文档，包括滚动条和边框。内联框架用于将另一个文档嵌入到当前 HTML 文档中。

src属性用于指定占据内联框架的文档的 URL。

示例

以下是一个示例，说明如何使用<iframe>：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>
      <p>Document content goes here...</p>
      
      <iframe src = "/html/menu.htm" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
      
      <p>Document content also go here...</p>
   </body>
	
</html>

这将产生以下结果：

<Iframe> 标签属性

<iframe>标签的大多数属性，包括name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style,和title的行为与<frame>标签的相应属性完全相同。

注意 - frameborder, marginwidth, longdesc, scrolling, marginheight 属性在 HTML5 中已弃用。请勿使用这些属性。

序号 属性和描述
1

src

此属性用于给出应在框架中加载的文件名。它的值可以是任何URL。例如，src = "/html/top_frame.htm"将加载html目录中可用的HTML文件。
2

name

此属性允许你为框架命名。它用于指示应将文档加载到哪个框架中。当你想要在一个框架中创建链接并将页面加载到另一个框架中时，这尤其重要，在这种情况下，第二个框架需要一个名称来标识自己是链接的目标。
3

frameborder

此属性指定是否显示该框架的边框；如果给定，它将覆盖<frameset>标签中给定的frameborder属性的值，这可以取值为1（是）或0（否）。
4

marginwidth

此属性允许你指定框架边框的左右侧与框架内容之间的空间宽度。该值以像素为单位给出。例如marginwidth = "10"。
5

marginheight

此属性允许你指定框架边框的顶部和底部与其内容之间的空间高度。该值以像素为单位给出。例如marginheight = "10"。
6

height

此属性指定<iframe>的高度。
7

scrolling

此属性控制出现在框架上的滚动条的外观。这取值为“yes”、“no”或“auto”。例如，scrolling = "no"表示它不应有滚动条。
8

longdesc

此属性允许你提供指向另一个页面的链接，该页面包含框架内容的详细描述。例如longdesc = "framedescription.htm"
9

width

此属性指定<iframe>的宽度。

HTML - 块

所有 HTML 元素可以分为两类：(a) 块级元素 (b) 内联元素。

块级元素

块级元素在屏幕上显示时，其前后都会有换行符。例如，<p>，<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<ul>，<ol>，<dl>，<pre>，<hr />，<blockquote>和<address>元素都是块级元素。它们都从自己的新行开始，它们后面的任何内容都出现在它们自己的新行上。

内联元素

另一方面，内联元素可以出现在句子中，并且不必出现在自己的新行上。<b>，<i>，<u>，<em>，<strong>，<sup>，<sub>，<big>，<small>，<li>，<ins>，<del>，<code>，<cite>，<dfn>，<kbd>和<var>元素都是内联元素。

分组 HTML 元素

我们经常使用两个重要的标签来组合各种其他 HTML 标签：（i）<div>标签和（ii）<span>标签

<div> 标签

这是一个非常重要的块级标签，它在分组各种其他 HTML 标签和对元素组应用 CSS 方面发挥着重要作用。现在，<div>标签也可以用于创建网页布局，我们使用<div>标签定义页面的不同部分（左、右、顶部等）。此标签不会对块进行任何视觉更改，但在与 CSS 一起使用时意义更大。

示例

以下是一个简单的<div>标签示例。我们将在单独的章节中学习层叠样式表 (CSS)，但我们在这里使用它来演示<div>标签的用法：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

这将产生以下结果：

<span> 标签

HTML <span> 是一个内联元素，它可以用来在 HTML 文档中组合内联元素。此标签也不会对块进行任何视觉更改，但在与 CSS 一起使用时意义更大。

<span>标签和<div>标签的区别在于，<span>标签用于内联元素，而<div>标签用于块级元素。

示例

以下是一个简单的<span>标签示例。我们将在单独的章节中学习层叠样式表 (CSS)，但我们在这里使用它来演示<span>标签的用法：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

这将产生以下结果：

HTML - 背景

默认情况下，您的网页背景颜色为白色。您可能不喜欢它，但不用担心。HTML 提供了以下两种很好的方法来装饰您的网页背景。

  • 使用颜色设置 HTML 背景
  • 使用图像设置 HTML 背景

现在让我们使用适当的示例逐一查看这两种方法。

使用颜色设置 HTML 背景

bgcolor属性用于控制 HTML 元素的背景，特别是页面主体和表格背景。

注意 - bgcolor 属性在 HTML5 中已弃用。请勿使用此属性。

以下是使用任何 HTML 标签使用 bgcolor 属性的语法。

<tagname bgcolor = "color_value"...>

此 color_value 可以使用以下任何格式给出：

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

示例

以下是如何设置 HTML 标签背景的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

这将产生以下结果：

使用图像设置 HTML 背景

background属性也可以用于控制 HTML 元素的背景，特别是页面主体和表格背景。您可以指定一个图像来设置 HTML 页面或表格的背景。

注意 - background 属性在 HTML5 中已弃用。请勿使用此属性。

以下是使用任何 HTML 标签使用 background 属性的语法。

注意 - background 属性已弃用，建议使用样式表进行背景设置。

<tagname background = "Image URL"...>

最常用的图像格式是 JPEG、GIF 和 PNG 图像。

示例

以下是如何设置表格背景图像的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

这将产生以下结果：

图案化和透明背景

您可能在各种网站上看到过许多图案或透明背景。这只需在背景中使用图案图像或透明图像即可实现。

建议在创建图案或透明 GIF 或 PNG 图像时，使用尽可能小的尺寸，甚至小到 1x1，以避免加载缓慢。

示例

以下是如何设置表格背景图案的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

这将产生以下结果：

HTML - 颜色

颜色对于使您的网站具有良好的外观和感觉非常重要。您可以使用<body>标签在页面级别指定颜色，也可以使用bgcolor属性为各个标签设置颜色。

<body>标签具有以下属性，可用于设置不同的颜色：

  • bgcolor - 设置页面的背景颜色。

  • text - 设置正文文本的颜色。

  • alink - 设置活动链接或选定链接的颜色。

  • link - 设置链接文本的颜色。

  • vlink - 设置已访问链接的颜色 - 即您已单击的链接文本的颜色。

HTML 颜色编码方法

有以下三种不同的方法可以在您的网页中设置颜色：

  • 颜色名称 - 您可以直接指定颜色名称，例如绿色、蓝色或红色。

  • 十六进制代码 - 一个六位数代码，表示构成颜色的红色、绿色和蓝色的数量。

  • 颜色十进制或百分比值 - 此值使用 rgb( ) 属性指定。

现在我们将逐一查看这些配色方案。

HTML 颜色 - 颜色名称

您可以指定直接的颜色名称来设置文本或背景颜色。W3C 列出了 16 个基本颜色名称，这些名称将通过 HTML 验证器验证，但主要浏览器支持超过 200 个不同的颜色名称。

注意 - 查看HTML 颜色名称的完整列表。

W3C 标准 16 种颜色

以下是 W3C 标准 16 种颜色名称的列表，建议使用它们。

黑色 灰色 银色 白色
黄色 青柠色 水绿色 紫红色
红色 绿色 蓝色 紫色
栗色 橄榄色 海军蓝 蓝绿色

示例

以下是使用颜色名称设置 HTML 标签背景的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML 颜色 - 十六进制代码

十六进制是颜色的 6 位数表示。前两位数字 (RR) 表示红色值，接下来的两位是绿色值 (GG)，最后两位是蓝色值 (BB)。

十六进制值可以从任何图形软件（如 Adobe Photoshop、Paintshop Pro 或 MS Paint）中获取。

每个十六进制代码前面都会有一个井号或哈希符号 #。以下是使用十六进制表示法的几种颜色的列表。

颜色 颜色十六进制
  #000000
  #FF0000
  #00FF00
  #0000FF
  #FFFF00
  #00FFFF
  #FF00FF
  #C0C0C0
  #FFFFFF

示例

以下是使用十六进制颜色代码设置 HTML 标签背景的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML 颜色 - RGB 值

此颜色值使用rgb( )属性指定。此属性采用三个值，每个值分别代表红色、绿色和蓝色。该值可以是 0 到 255 之间的整数或百分比。

注意 -并非所有浏览器都支持颜色的 rgb() 属性，因此建议不要使用它。

以下是一个列表，显示使用 RGB 值的几种颜色。

颜色 颜色 RGB
  rgb(0,0,0)
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,255,0)
  rgb(0,255,255)
  rgb(255,0,255)
  rgb(192,192,192)
  rgb(255,255,255)

示例

以下是使用 rgb() 值使用颜色代码设置 HTML 标签背景的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

浏览器安全颜色

以下是 216 种颜色列表，这些颜色被认为是最安全的、与计算机无关的颜色。这些颜色从十六进制代码 000000 到 FFFFFF 不等，并且所有具有 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 - 字体

字体在提高网站用户友好性和内容可读性方面起着非常重要的作用。字体和颜色完全取决于用于查看页面的计算机和浏览器，但是您可以使用HTML <font>标签来添加样式、大小和颜色到您网站上的文本。您可以使用<basefont>标签将所有文本设置为相同的大小、字体和颜色。

font标签具有三个属性，称为size、color和face，用于自定义字体。要随时更改网页中任何字体属性，只需使用<font>标签即可。接下来的文本将保持更改状态，直到您使用</font>标签关闭为止。您可以在一个<font>标签中更改一个或所有字体属性。

注意 −font和basefont标签已弃用，并且应该在HTML的未来版本中删除。因此，不应使用它们，建议使用CSS样式来操作字体。但出于学习目的，本章将详细解释font和basefont标签。

设置字体大小

您可以使用size属性设置内容字体大小。可接受值的范围是从1（最小）到7（最大）。字体的默认大小为3。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

这将产生以下结果：

相对字体大小

您可以指定比预设字体大小大多少或小多少。您可以像<font size = "+n">或<font size = "−n">那样指定。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

这将产生以下结果：

设置字体

您可以使用face属性设置字体，但请注意，如果查看页面的人没有安装该字体，他们将无法看到它。用户将看到适用于用户计算机的默认字体。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

这将产生以下结果：

指定备选字体

只有当访问者在其计算机上安装了该字体时，他们才能看到您的字体。因此，可以通过列出字体名称（用逗号分隔）来指定两种或多种字体替代方案。

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

页面加载后，其浏览器将显示第一个可用的字体。如果没有安装任何给定的字体，则将显示默认字体Times New Roman。

注意 − 查看HTML标准字体的完整列表。

设置字体颜色

您可以使用color属性设置任何您喜欢的字体颜色。您可以通过颜色名称或该颜色的十六进制代码来指定您想要的颜色。

注意 − 您可以查看带有代码的HTML颜色名称的完整列表。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

这将产生以下结果：

<basefont> 元素

<basefont>元素应该为文档中未包含在<font>标签内的任何部分设置默认字体大小、颜色和字体。您可以使用<font>元素来覆盖<basefont>设置。

<basefont>标签也采用color、size和face属性，它将通过将size的值设置为+1（更大）或−2（更小两个尺寸）来支持相对字体设置。

示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

这将产生以下结果：

HTML - 表单

当您想要从网站访问者那里收集一些数据时，需要使用HTML表单。例如，在用户注册期间，您可能想要收集姓名、电子邮件地址、信用卡等信息。

表单将接收来自网站访问者的输入，然后将其发布到后端应用程序，例如CGI、ASP脚本或PHP脚本等。后端应用程序将根据应用程序中定义的业务逻辑对传递的数据执行必要的处理。

有各种可用的表单元素，例如文本字段、文本区域字段、下拉菜单、单选按钮、复选框等。

HTML <form>标签用于创建HTML表单，其语法如下：

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

表单属性

除了常用属性外，以下是最常用的表单属性列表：

序号 属性和描述
1

action

准备好处理您传递数据的后端脚本。
2

method

用于上传数据的方法。最常用的方法是GET和POST方法。
3

target

指定显示脚本结果的目标窗口或框架。它采用_blank、_self、_parent等值。
4

enctype

您可以使用enctype属性指定浏览器在将数据发送到服务器之前如何对其进行编码。可能的值为：

application/x-www-form-urlencoded − 这是大多数表单在简单场景中使用的标准方法。

multipart/form-data − 当您想要上传二进制数据（例如图像、word文件等）时使用此方法。

注意 − 您可以参考Perl & CGI，了解表单数据上传的工作原理。

HTML表单控件

您可以使用不同的表单控件来使用HTML表单收集数据：

  • 文本输入控件
  • 复选框控件
  • 单选按钮控件
  • 选择框控件
  • 文件选择框
  • 隐藏控件
  • 可点击按钮
  • 提交和重置按钮

文本输入控件

表单中使用了三种类型的文本输入：

  • 单行文本输入控件 − 此控件用于只需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML <input>标签创建的。

  • 密码输入控件 − 这也是单行文本输入，但它会在用户输入后立即屏蔽字符。它们也是使用HTML <input>标签创建的。

  • 多行文本输入控件 − 当用户需要提供超过一句的详细信息时使用。多行输入控件是使用HTML <textarea>标签创建的。

单行文本输入控件

此控件用于只需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML <input>标签创建的。

示例

这是一个用于获取名字和姓氏的单行文本输入的基本示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是用于创建文本字段的<input>标签的属性列表。

序号 属性和描述
1

type

指示输入控件的类型，对于文本输入控件，它将设置为text。
2

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
3

value

这可以用来在控件中提供初始值。
4

size

允许以字符为单位指定文本输入控件的宽度。
5

maxlength

允许指定用户可以输入到文本框中的最大字符数。

密码输入控件

这同样是单行文本输入，但它会在用户输入后立即屏蔽字符。它们也是使用HTML <input>标签创建的，但type属性设置为password。

示例

这是一个用于获取用户密码的单行密码输入的基本示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是用于创建密码字段的<input>标签的属性列表。

序号 属性和描述
1

type

指示输入控件的类型，对于密码输入控件，它将设置为password。
2

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
3

value

这可以用来在控件中提供初始值。
4

size

允许以字符为单位指定文本输入控件的宽度。
5

maxlength

允许指定用户可以输入到文本框中的最大字符数。

多行文本输入控件

当用户需要提供超过一句的详细信息时使用。多行输入控件是使用HTML <textarea>标签创建的。

示例

这是一个用于获取项目说明的多行文本输入的基本示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是<textarea>标签的属性列表。

序号 属性和描述
1

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
2

rows

指示文本区域框的行数。
3

cols

指示文本区域框的列数。

复选框控件

当需要选择多个选项时使用复选框。它们也是使用HTML <input>标签创建的，但type属性设置为checkbox。

示例

这是一个包含两个复选框的表单的HTML代码示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是<checkbox>标签的属性列表。

序号 属性和描述
1

type

指示输入控件的类型，对于复选框输入控件，它将设置为checkbox。
2

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
3

value

如果选中复选框，将使用该值。
4

checked

如果要默认选中它，则设置为checked。

单选按钮控件

当在许多选项中只需要选择一个选项时使用单选按钮。它们也是使用HTML <input>标签创建的，但type属性设置为radio。

示例

这是一个包含两个单选按钮的表单的HTML代码示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

这将产生以下结果：

属性

以下是单选按钮的属性列表。

序号 属性和描述
1

type

指示输入控件的类型，对于复选框输入控件，它将设置为radio。
2

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
3

value

如果选中单选框，将使用该值。
4

checked

如果要默认选中它，则设置为checked。

选择框控件

选择框，也称为下拉框，它提供了一种以下拉列表的形式列出各种选项的方法，用户可以从中选择一个或多个选项。

示例

这是一个包含一个下拉框的表单的HTML代码示例

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是<select>标签的重要属性列表：

序号 属性和描述
1

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
2

size

这可以用来显示一个滚动列表框。
3

multiple

如果设置为“multiple”，则允许用户从菜单中选择多个项目。

以下是<option>标签的重要属性列表：

序号 属性和描述
1

value

如果选中选择框中的选项，将使用该值。
2

selected

指定此选项应在页面加载时初始选择的的值。
3

label

标记选项的另一种方法

文件上传框

如果您想允许用户将文件上传到您的网站，则需要使用文件上传框，也称为文件选择框。这也是使用<input>元素创建的，但type属性设置为file。

示例

这是一个包含一个文件上传框的表单的HTML代码示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

这将产生以下结果：

属性

以下是文件上传框的重要属性列表：

序号 属性和描述
1

name

用于为控件命名，该名称将发送到服务器以进行识别并获取值。
2

accept

指定服务器接受的文件类型。

按钮控件

HTML中有各种方法可以创建可点击按钮。您还可以通过将<input>标签的type属性设置为button来创建可点击按钮。type属性可以采用以下值：

序号 类型和说明
1

submit

这将创建一个自动提交表单的按钮。
2

reset

这将创建一个自动将表单控件重置为其初始值的按钮。
3

button

这将创建一个按钮，用户单击该按钮时会触发客户端脚本。
4

图片

这创建一个可点击的按钮，但我们可以使用图片作为按钮的背景。

示例

这是一个包含三种类型按钮的表单的 HTML 代码示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

这将产生以下结果：

隐藏表单控件

隐藏表单控件用于隐藏页面内的信息，这些信息稍后可以推送到服务器。此控件隐藏在代码中，不会出现在实际页面上。例如，以下隐藏表单用于保存当前页码。当用户点击下一页时，隐藏控件的值将被发送到 Web 服务器，服务器将根据传递的当前页码决定接下来显示哪个页面。

示例

这是一个显示隐藏控件用法的 HTML 代码示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

这将产生以下结果：

HTML - 嵌入多媒体

有时您需要在网页中添加音乐或视频。向网站添加视频或声音最简单的方法是包含名为<embed>的特殊 HTML 标签。此标签会导致浏览器本身自动包含多媒体控件，前提是浏览器支持<embed>标签和给定的媒体类型。

您还可以为不识别<embed>标签的浏览器包含<noembed>标签。例如，您可以使用<embed>显示您选择的电影，如果浏览器不支持<embed>标签，则可以使用<noembed>显示单个 JPG 图片。

示例

这是一个播放嵌入式 MIDI 文件的简单示例：

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

<embed> 标签属性

以下是可与<embed>标签一起使用的重要属性列表。

注意 −align和autostart属性在 HTML5 中已弃用。请勿使用这些属性。

序号 属性和描述
1

align

确定如何对齐对象。它可以设置为居中、左或右。
2

autostart

此布尔属性指示媒体是否应自动启动。您可以将其设置为 true 或 false。
3

loop

指定声音是否应连续播放（将 loop 设置为 true）、播放特定次数（正值）或根本不播放（false）。
4

playcount

指定播放声音的次数。如果您使用的是 IE，这是loop的替代选项。
5

hidden

指定是否应在页面上显示多媒体对象。false 值表示否，true 值表示是。
6

width

对象的宽度（以像素为单位）
7

height

对象的高度（以像素为单位）
8

name

用于引用对象的名称。
9

src

要嵌入的对象的 URL。
10

volume

控制声音的音量。可以从 0（关闭）到 100（全音量）。

支持的视频类型

您可以在 embed 标签中使用各种媒体类型，例如 Flash 电影（.swf）、AVI（.avi）和 MOV（.mov）文件类型。

  • .swf 文件 − 是 Macromedia Flash 程序创建的文件类型。

  • .wmv 文件 − 是 Microsoft 的 Windows Media Video 文件类型。

  • .mov 文件 − 是 Apple 的 Quick Time Movie 格式。

  • .mpeg 文件 − 是“动态影像专家小组”创建的电影文件。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

这将产生以下结果：

背景音频

您可以使用 HTML <bgsound> 标签在网页背景中播放音轨。此标签仅受 Internet Explorer 支持，大多数其他浏览器都会忽略此标签。当用户第一次下载并显示主机文档时，它会下载并播放音频文件。每当用户刷新浏览器时，背景声音文件也会重新播放。

注意 − bgsound 标签已弃用，预计将在 HTML 的未来版本中删除。因此，不应使用它们，建议使用 HTML5 标签 audio 来添加声音。但出于学习目的，本章仍将详细解释 bgsound 标签。

此标签只有两个属性loop和src。这两个属性的含义与上面解释的相同。

这是一个播放小型 MIDI 文件的简单示例：

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

这将生成空白屏幕。此标签不显示任何组件，并保持隐藏状态。

Internet Explorer 也只能处理三种不同的声音格式文件：wav（PC 的本机格式）；au（大多数 Unix 工作站的本机格式）；以及 MIDI（一种通用的音乐编码方案）。

HTML 对象标签

HTML 4 引入了<object>元素，它提供了一种通用的对象包含解决方案。<object>元素允许 HTML 作者指定用户代理呈现对象所需的一切。

以下是一些示例：

示例 - 1

您可以按如下方式将 HTML 文档嵌入 HTML 文档本身：

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

如果浏览器不支持object标签，则alt属性将发挥作用。

示例 - 2

您可以按如下方式将 PDF 文档嵌入 HTML 文档：

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

示例 - 3

您可以使用<param>标签指定与文档相关的某些参数。以下是如何嵌入 wav 文件的示例：

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

示例 - 4

您可以按如下方式添加 Flash 文档：

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

示例 - 5

您可以按如下方式将 Java Applet 添加到 HTML 文档：

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classid属性标识要使用的 Java 插件版本。您可以使用可选的codebase属性来指定是否以及如何下载 JRE。

HTML - 跑马灯

HTML 跑马灯是水平或垂直滚动显示在网页上的滚动文本片段，这取决于设置。这是通过使用 HTML <marquee>标签创建的。

注意 − <marquee>标签在 HTML5 中已弃用。请勿使用此元素，您可以使用 JavaScript 和 CSS 来创建此类效果。

语法

使用 HTML <marquee>标签的简单语法如下：

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

<marquee> 标签属性

以下是可与<marquee>标签一起使用的重要属性列表。

序号 属性和描述
1

width

这指定了跑马灯的宽度。这可以是 10 或 20% 等值。
2

height

这指定了跑马灯的高度。这可以是 10 或 20% 等值。
3

direction

这指定了跑马灯滚动的方向。这可以是向上、向下、向左或向右等值。
4

behavior

这指定了跑马灯的滚动类型。它可以具有scroll、slide和alternate等值。
5

scrolldelay

这指定了每次跳转之间的延迟时间。这将具有 10 等值。
6

scrollamount

这指定了跑马灯文本的速度。这可以具有 10 等值。
7

loop

这指定了循环的次数。默认值为 INFINITE，这意味着跑马灯会无限循环。
8

bgcolor

这指定了背景颜色（颜色名称或颜色十六进制值）。
9

hspace

这指定了跑马灯周围的水平空间。这可以是 10 或 20% 等值。
10

vspace

这指定了跑马灯周围的垂直空间。这可以是 10 或 20% 等值。

以下是一些演示跑马灯标签用法的示例。

示例 - 1

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

这将产生以下结果：

示例 - 2

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

这将产生以下结果：

示例 - 3

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
	
</html>

这将产生以下结果：

示例 - 4

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
	
</html>

这将产生以下结果：

HTML - 头部

我们已经了解到，典型的 HTML 文档将具有以下结构：

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

本章将更详细地介绍由 HTML <head>标签表示的头部部分。<head>标签是各种重要标签的容器，例如<title>、<meta>、<link>、<base>、<style>、<script>和<noscript>标签。

HTML <title> 标签

HTML <title>标签用于指定 HTML 文档的标题。以下是如何为 HTML 文档指定标题的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

这将产生以下结果：

HTML <meta> 标签

HTML <meta>标签用于提供有关 HTML 文档的元数据，其中包括有关页面过期、页面作者、关键词列表、页面描述等的信息。

以下是 HTML 文档中<meta>标签的一些重要用法：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

这将产生以下结果：

HTML <base> 标签

HTML <base>标签用于为页面中的所有相对 URL 指定基本 URL，这意味着在查找给定项目时，所有其他 URL 将连接到基本 URL。

例如，所有给定的页面和图像将在使用基本 URL https://tutorialspoint.com/目录作为前缀后进行搜索：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

这将产生以下结果：

但是，如果您将基本 URL 更改为其他内容，例如，如果基本 URL 是 https://tutorialspoint.com/home，则图像和其他给定链接将变为 https://tutorialspoint.com/home/images/logo.png 和 https://tutorialspoint.com/html/index.htm

HTML <link> 标签

HTML <link>标签用于指定当前文档和外部资源之间的关系。以下是如何链接 Web 根目录中css子目录中可用的外部样式表文件的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

这将产生以下结果：

HTML <style> 标签

HTML <style>标签用于指定当前 HTML 文档的样式表。以下是在<style>标签内定义一些样式表规则的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

这将产生以下结果：

注意 − 要了解级联样式表的工作原理，请查看css中提供的单独教程。

HTML <script> 标签

HTML <script>标签用于包含外部脚本文件或定义 HTML 文档的内部脚本。以下是一个使用 JavaScript 定义简单 JavaScript 函数的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "https://tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

这将产生以下结果，您可以在其中尝试单击给定的按钮：

注意 − 要了解 JavaScript 的工作原理，请查看javascript中提供的单独教程。

HTML - 样式表

级联样式表 (CSS) 描述了如何在屏幕上、打印输出中或可能如何朗读文档。自 1994 年成立以来，W3C 一直积极推广在 Web 上使用样式表。

层叠样式表 (CSS) 提供了指定 HTML 标签各种属性的简便有效的方法。使用 CSS，您可以为给定的 HTML 元素指定许多样式属性。每个属性都有一个名称和一个值，用冒号 (:) 分隔。每个属性声明用分号 (;) 分隔。

示例

首先，让我们考虑一个使用 `` 标签和相关属性来指定文本颜色和字体大小的 HTML 文档示例：

注意 − `` 标签已弃用，预计将在未来版本的 HTML 中移除。因此不应使用它们，建议使用 CSS 样式来操作字体。但出于学习目的，本章将使用 `` 标签的示例。

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

我们可以使用样式表如下重写上面的示例：

在线演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

这将产生以下结果：

您可以在 HTML 文档中以三种方式使用 CSS：

  • 外部样式表 − 在单独的 .css 文件中定义样式表规则，然后使用 HTML `` 标签将该文件包含在您的 HTML 文档中。

  • 内部样式表 − 使用 `