简介

HTML代表超文本标记语言，它是编写网页最广泛使用的语言。

超文本指的是网页（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>

This is a heading

Document content goes here.....

HTML标签

如前所述，HTML是一种标记语言，它使用各种标记来格式化内容。这些标签包含在角撑括号<标签名称>中。除少数标签外，大多数标签都有相应的结束标签。例如，<html>有结束标记</ html>，<body>标记有结束标记</body>标记等。

上面的HTML文档示例使用以下标记−

序号	标签 & 描述
1	<!DOCTYPE...> 此标记定义文档类型和HTML版本。
2	<html> 此标记包含完整的HTML文档，主要包括由<head> ... </head>表示的文档标题和由<body> ... </body>标记表示的文档正文。
3	<head> 此标记表示文档的标题，可以保留其他HTML标记，如<title>，<link>等。
4	<title> 在<head>标记内使用<title>标记来提及文档标题。
5	<body> 此标记表示文档的正文，它保留其他HTML标记 <h1>, <div>, <p> etc.
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>声明

Web浏览器使用<!DOCTYPE>声明标记来了解文档中使用的HTML版本。当前版本的HTML为5，它使用以下声明 - −

<!DOCTYPE html>

还有许多其他声明类型可以在HTML文档中使用，具体取决于使用的HTML版本。在讨论<！DOCTYPE ...>标记以及其他HTML标记时，我们会看到更多有关此内容的详细信息。

基本标签

标题标签

任何文档都以标题开头。您可以为标题使用不同的大小。 HTML还有六个标题级别，使用元素<h1>, <h2>, <h3>, <h4>, <h5>, and <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>

这将产生以下结果 −

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

段标记

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

这将产生以下结果 −

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

换行标记

无论何时使用<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>

这将产生以下结果 −

Hello
You delivered your assignment on time.
Thanks
Mahnaz

放置内容到中心

您可以使用 <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>

这将产生以下结果 −

This text is not in the center.

This text is in the center.

水平线

水平线用于在视觉上分解文档的各个部分。 <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>

这将产生以下结果 −

This is paragraph one and should be on top

This is paragraph two and should be at bottom

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

这将产生以下结果 −

 
function testFunction( strText ){ 
   alert (strText) 
}

尝试使用相同的代码而不将其保留在<pre> ... </pre>标记内。

不间断空格

假设您要使用短语“12 Angry Men”。在这里，你不希望浏览器将“12 Angry”和“Men”分成两行 −

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

如果您不希望客户端浏览器中断文本，则应使用不间断空格而不是正常的空间。例如，在段落中对“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>

这将产生以下结果 −

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

元素

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>

这将显示以下结果 −

This is italic heading

This is underlined paragraph

属性

我们已经看到很少的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>

这将显示以下结果 −

This is left aligned

This is center aligned

This is right aligned

核心属性

可以在大多数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>

这将产生以下结果 −

Titled Heading Tag Example

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

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>

这将产生以下结果 −

Some text...

在这个时候，我们不是在学习CSS，所以让我们继续前进而不必担心CSS。在这里，您需要了解什么是HTML属性以及在格式化内容时如何使用它们。

国际化属性

有三种国际化属性，可用于大多数（尽管不是全部）XHTML元素。

dir
lang
xml:lang

dir属性

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

值	含义
ltr	从左到右（默认值）
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

例子

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

在<html>标记内使用dir属性时，它确定如何在整个文档中显示文本。在另一个标记中使用时，它仅控制该标记内容的文本方向。

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	numeric, hexidecimal, RGB values	在元素后面放置背景颜色
background	URL	在元素后面放置背景图像
id	User Defined	命名用于层叠样式表的元素。
class	User Defined	对用于层叠样式表的元素进行分类。
width	Numeric Value	指定表，图像或表格单元格的宽度。
height	Numeric Value	指定表，图像或表格单元格的高度。
title	User Defined	“弹出”元素的标题。

格式化

如果使用文字处理程序，则必须熟悉使文本变为粗体，斜体或带下划线的能力; 这些只是十个可用选项中的三个，用于指示文本在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>

这将产生以下结果 −

The following word uses a bold typeface.

斜体文字

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

这将产生以下结果 −

The following word uses an italicized typeface.

带下划线的文字

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

这将产生以下结果 −

The following word uses an underlined typeface.

罢工文本

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

这将产生以下结果 −

The following word uses a strikethrough typeface.

Monospaced字体

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

这将产生以下结果 −

The following word uses a monospaced typeface.

上标文本

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

这将产生以下结果 −

The following word uses a ^superscript typeface.

下标文本

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

这将产生以下结果 −

The following word uses a _subscript typeface.

插入的文字

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

这将产生以下结果 −

I want to drink ~~cola~~ wine

删除文字

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

这将产生以下结果 −

I want to drink ~~cola~~ wine

更大的文字

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

这将产生以下结果 −

The following word uses a big typeface.

较小的文字

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

这将产生以下结果 −

The following word uses a small typeface.

分组内容

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

例如，您可能希望将所有脚注放在

元素中的页面上，以指示该

元素中的所有元素都与脚注相关。然后，您可以将样式附加到此

元素，以便它们使用一组特殊的样式规则显示。

例子

<!DOCTYPE html>
<html>

   <head>
	  <title>Div Tag Example</title>
   </head>
	
   <body>

	  <div >
		 <h5>Content Articles</h5>
		 <p>Actual content goes here.....</p>
	  </div>
   </body>
	
</html>

这将产生以下结果 −

Content Articles

Actual content goes here.....

另一方面，<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>

这将产生以下结果 −

This is the example of span tag and the div tag alongwith CSS

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

词组标签

短语标签已经针对特定目的进行了解密，尽管它们的显示方式与其他基本标签类似，如<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>

这将产生以下结果 −

The following word uses an emphasized typeface.

标记文字

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

这将产生以下结果 −

The following word has been marked with yellow

strong文本

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

这将产生以下结果 −

The following word uses a strong typeface.

文字缩写

您可以通过将文本放在开始<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>

这将产生以下结果 −

My best friend's name is Abhy.

缩写元素

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

这将产生以下结果 −

This chapter covers marking up text in XHTML.

文字方向

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

例子

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

这将产生以下结果 −

This text will go left to right.

This text will go right to left.

特别项

<dfn>...</dfn>元素（或HTML定义元素）允许您指定引入特殊术语。它的用法类似于段落中的斜体字。

通常，在第一次引入关键术语时，您将使用元素。最新的浏览器以斜体字体呈现<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>

这将产生以下结果 −

The following word is a special term.

长文本引用

如果要引用其他来源的段落，则应将其置于<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>

这将产生以下结果 −

The following description of XHTML is taken from the W3C Web site:

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.

短语

如果要在句子中添加双引号，则使用 <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>

这将产生以下结果 −

Amit is in Spain, I think I am wrong.

文本引用

如果您引用文本，则可以指示将其放在开始<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>

这将产生以下结果 −

This HTML tutorial is derived from W3 Standard for 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>

这将产生以下结果 −

Regular text. This is code. Regular text.

键盘文字

当您谈论计算机时，如果您想告诉读者输入一些文本，您可以使用<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>

这将产生以下结果 −

Regular text. This is inside kbd element Regular text.

程序变量

此元素通常与<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>

这将产生以下结果 −

document.write("user-name")

程序输出

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

这将产生以下结果 −

Result produced by the program is Hello World!

地址文字

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

例子

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

这将产生以下结果 −

388A, Road No 22, Jubilee Hills - Hyderabad

元标记

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

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

您可以根据要保留在文档中的信息在文档中包含一个或多个元标记，但一般来说，元标记不会影响文档的外观，因此从外观的角度来看，如果包含元标记并不重要他们与否。

将元标记添加到您的文档中

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

序号	属性 & 描述
1	Name 属性名称。可以是任何东西。示例包括关键字，描述，作者，修订版，生成器等。
2	content 指定属性的值。
3	scheme 指定用于解释属性值的方案（在content属性中声明）。
4	http-equiv 用于http响应消息头。例如，http-equiv可用于刷新页面或设置cookie。值包括content-type，expires，refresh和set-cookie。

指定关键字

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

例子

以下是一个示例，我们将HTML，元标记，元数据添加为关于文档的重要关键字。

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

这将产生以下结果 −

Hello HTML5!

文档说明

您可以使用<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>

文档刷新

例子

如果您希望每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 = http://www.tutorialspoint.com" />
   </head>
	
   <body>
	  <p>Hello HTML5!</p>
   </body>
	
</html>

设置Cookies

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

您可以使用<meta>标记在客户端存储cookie，稍后Web服务器可以使用此信息来跟踪站点访问者。

例子

以下是在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 = "cookie" content = "userid = xyz;
		 expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
		 
   </head>
	
   <body>
	  <p>Hello HTML5!</p>
   </body>
	
</html>

如果您未包含到期日期和时间，则cookie将被视为会话cookie，并在用户退出浏览器时被删除。

设置作者姓名

您可以使用元标记在网页中设置作者姓名。请参阅下面的示例 −

例子

<!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）编码来处理Web页面。以下是设置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>

注释

注释是一段代码，任何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>

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

Document content goes here.....

有效和无效的注释

注释不嵌套，这意味着注释不能放在另一个注释中。其次，除了作为结束 - >标签的一部分之外，双短划线序列“ - ”可能不会出现在注释中。您还必须确保start-of注释字符串中没有空格。

例子

在这里，给定的注释是有效的注释，将被浏览器删除。

<!DOCTYPE html>
<html>

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

这将产生以下结果 −

Document content goes here.....

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

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

这将产生以下结果 −

< !-- This is not a valid comment -->

Document content goes here.....

多行注释

到目前为止，我们已经看到了单行注释，但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>

这将产生以下结果 −

Document content goes here.....

条件注释

条件注释仅适用于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标签

很少有浏览器支持<comment>标记来评论HTML代码的一部分。

注 − HTML5中不推荐使用<comment>标记。不要使用此元素。

例子

<!DOCTYPE html>
<html>

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

如果您使用IE，那么它将产生以下结果 −

This is Internet Explorer.

但是如果你不使用IE，那么它将产生以下结果 −

This is not Internet Explorer.

注释脚本代码

虽然您将在单独的教程中学习使用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>

图片

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

插入图片

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

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

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

例子

要尝试以下示例，让我们将HTML文件test.htm和image file 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保存在我们的主目录中，并在主目录中创建一个子目录图像，我们将保留图像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>

这将产生以下结果 −

Simple Image Insert

设置图像宽度/高度

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

例子

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

这将产生以下结果 −

Setting image width and height

设置图像边框

默认情况下，图像周围会有边框，您可以使用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>

这将产生以下结果 −

Setting image Border

设置图像对齐

默认情况下，图像将在页面左侧对齐，但您可以使用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>

这将产生以下结果 −

Setting image Alignment

表格

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>

这将产生以下结果 −

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

这里，边框是标签的属性，用于在所有单元格之间放置边框。如果您不需要边框，则可以使用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>

这将产生以下结果 −

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

Cellpadding和Cellspacing属性

有两个属性称为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>

这将产生以下结果 −

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

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>

这将产生以下结果 −

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

表背景

您可以使用以下两种方法之一设置表格背景 −

bgcolor 属性 − 您可以为整个表格或仅为一个单元格设置背景颜色。
background 属性 − 您可以为整个表格或仅为一个单元格设置背景图像。

您也可以使用设置边框颜色通过 bordercolor 属性.

例子

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

这将产生以下结果 −

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

以下是使用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>

这将产生以下结果。这里背景图片不适用于表格的标题。

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

表高度和宽度

您可以使用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>

这将产生以下结果 −

43'> Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2

表格标题

标题标记将用作表格的标题或说明，它显示在表格的顶部。此标记在较新版本的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>

这将产生以下结果 −

49'> This is the caption row 1, column 1row 1, column 2 row 2, column 1row 2, column 2

表头，正文和页脚

桌子可以分为三个部分 - 标题，正文和脚。头部和脚部与字处理文档中的页眉和页脚非常相似，每个页面保持相同，而正文是表格的主要内容持有者。

用于分离桌子的标题，正文和脚是 −

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

这将产生以下结果 −

58'> This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4

嵌套表

您可以在另一个表中使用一个表。表格中您不仅可以使用表格数据标签内的几乎所有标签 <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>

这将产生以下结果 −

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

列表

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

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

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

type属性

您可以使用<ul>标签的type属性来指定您喜欢的项目符号类型。默认情况下，它是disc。以下是可能的选择 −

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

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

HTML Ordered Lists

如果您需要将项目放入编号列表而不是项目符号，则将使用HTML有序列表。此列表是使用<ol>标签创建的。编号从1开始，并且对于用<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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

例子

以下是我们使用的示例 <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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

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>

这将产生以下结果 −

Beetroot
Ginger
Potato
Radish

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: This stands for Hyper Text Markup Language
HTTP: This stands for Hyper Text Transfer Protocol

文字链接

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

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

链接文件

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

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

例子

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

target属性

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

序号	选项 & 描述
1	_blank 在新窗口或选项卡中打开链接的文档。
2	_self 在同一帧中打开链接的文档。
3	_parent 在父框架中打开链接的文档。
4	_top 在窗口的整个正文中打开链接的文档。
5	targetframe 在指定的目标框架中打开链接的文档。

例子

尝试以下示例来了解为target属性提供的几个选项的基本差异。

<!DOCTYPE html>
<html>

   <head>
	  <title>Hyperlink Example</title>
	  <base href = "https://www.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>

使用基本路径

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

例子

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

<!DOCTYPE html>
<html>

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

链接到页面部分

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

首先使用<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://www.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://www.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");
}

图片链接

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

例子

将图像用作超链接很简单。我们只需要在文本位置的超链接内使用图像，如下所示 −

<!DOCTYPE html>
<html>

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

鼠标敏感图像

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

有两种方法可以创建图像映射 −

服务器端图像映射 - 这是由<img>标记的ismap属性启用的，需要访问服务器和相关的图像映射处理应用程序。
客户端图像映射 - 使用<img>标记的usemap属性以及相应的<map>和<area>标记创建。

服务器端图像映射

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

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

鼠标位置的坐标是从图像的左上角开始计算的屏幕像素，以（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脚本或映射文件处理，您可以将您喜欢的任何文档链接到这些坐标 −

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

客户端图像映射

客户端图像映射由<img />标记的usemap属性启用，并由特殊的<map>和<area>扩展标记定义。

将使用<img />标记作为普通图像将要形成地图的图像插入到页面中，除了它带有一个名为usemap的额外属性。 usemap属性的值是将在<map>标记中用于链接地图和图像标记的值。 <map>和<area>标签一起定义所有图像坐标和相应的链接

map标签内的<area>标签指定形状和坐标，以定义图像上可用的每个可点击热点的边界。这是图像映射的一个例子 −

<!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 = x₁ , y₁ , x₂ , y₂
x₁ 和 y₁ 是矩形左上角的坐标;; x₂ and y₂ 是右下角的坐标。
circle = x_c , y_c , radius
x_c 和 y_c 是圆心的坐标,radius是圆的半径。以200,50为中心，半径为25的圆将具有属性coords ="200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n
各种x-y对定义多边形的顶点（点），从一个点到下一个点绘制“线”。菱形多边形的顶点在其最宽点处为20,20和40像素，其属性为coords = "20,20,40,40,20,60,0,40"。

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

邮件链接

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

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

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

HTML电子邮件标签

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

<a href = "mailto: test@example.com">Send Email</a>

此代码将生成以下链接，您可以使用该链接发送电子邮件。

Send Email

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

默认设置

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

<a href = "mailto:test@example.com?subject = Feedback&body = Message">
Send Feedback
</a>

此代码将生成以下链接，您可以使用该链接发送电子邮件。

Send Feedback

框架

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

Frames的缺点

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

一些较小的设备经常无法应对帧，因为它们的屏幕不够大，无法分割。
由于屏幕分辨率不同，有时您的页面将在不同的计算机上以不同的方式显示
浏览器的后退按钮可能无法按用户的意愿运行。
仍然很少有浏览器不支持帧技术。

创建Frames

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

例子

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

<!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 此属性控制框架上显示的滚动条的外观。这取值为“是”，“否”或“自动”。例如，scrolling =“no”表示它不应该有滚动条。
8	longdesc 此属性允许您提供指向包含框架内容的长描述的另一个页面的链接。例如longdesc =“framedescription.htm”

浏览器支持框架

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

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

您可以为使用旧浏览器的用户添加一些好消息。例如，对不起!! 你的浏览器不支持框架。如上例所示。

框架的名称和目标属性

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

让我们看一下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 = "http://www.google.com" target = "main_page">Google</a>
	  <br />
	  <br />
	  
	  <a href = "http://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>

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

序号	选项 & 描述
1	_self 将页面加载到当前帧中。
2	_blank 将页面加载到新的浏览器窗口中。打开一个新窗口。
3	_parent 将页面加载到父窗口中，在单个框架集的情况下，该窗口是主浏览器窗口。
4	_top 将页面加载到浏览器窗口中，替换当前帧。
5	targetframe 将页面加载到命名的目标框架中。

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>

这将产生以下结果 −

Document content goes here...

Google

Microsoft

BBC News

Document content also go here...

<Iframe> 标签属性

序号	属性 & 描述
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 此属性控制框架上显示的滚动条的外观。这取值为“是”，“否”或“自动”。例如，scrolling =“no”表示它不应该有滚动条。
8	longdesc 此属性允许您提供指向包含框架内容的长描述的另一个页面的链接。例如longdesc =“framedescription.htm”
9	width 此属性指定<iframe>的宽度。

块

所有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>标签定义页面的不同部分（左，右，顶部等）。此标记不会对块提供任何可视更改，但在与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>

这将产生以下结果 −

This is first group

Following is a list of vegetables

Beetroot
Ginger
Potato
Radish

This is second group

Following is a list of fruits

Apple
Banana
Mango
Strawberry

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

这将产生以下结果 −

This is red and this is green

背景

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

HTML背景颜色
HTML背景图像

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

HTML背景颜色

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

以下是将bgcolor属性与任何HTML标记一起使用的语法。

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

这将产生以下结果 −

14'> This background is yellow 15'> This background is sky blue 16'> This background is green

HTML背景图像

background属性还可用于控制HTML元素的背景，特别是页面正文和表格背景。您可以指定图像以设置HTML页面或表格的背景。

以下是将background属性与任何HTML标记一起使用的语法。

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

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

例子

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

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML Background Images</title>
   </head>
	
   <body>
	  <!-- Set table background -->
	  <table background = "/images/test.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/test1.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/test2.gif" width = "100%" height = "100">
		 <tr>
			<td>
			   This background is filled up with a pattern image.
			</td>
		 </tr>
	  </table>
   </body>
   
</html>

颜色

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

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

bgcolor − 设置页面背景的颜色。
text − 为正文设置颜色。
alink − 为活动链接或选定链接设置颜色。
link − 为链接文本设置颜色。
vlink − 为已访问的链接设置颜色 - 即，对于您已单击的链接文本。

HTML颜色编码方法

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

颜色名称 - 您可以直接指定颜色名称，如绿色，蓝色或红色。
十六进制代码 - 六位代码，表示构成颜色的红色，绿色和蓝色的数量。
颜色小数或百分比值 - 使用rgb（）属性指定此值。

现在我们将逐一看到这些着色方案。

HTML颜色 - 颜色名称

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

W3C标准16色

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

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

例子

以下是按颜色名称设置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）获取十六进制值。

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

颜色HEX	颜色十六进制
	#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(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色调色板的计算机都支持这些颜色。

字体

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

字体标记有三个属性，称为大小，颜色和面，以自定义字体。要在网页中随时更改任何字体属性，只需使用<font>标记即可。在您使用</font>标记关闭之前，后面的文本将保持更改。您可以在一个<font>标记内更改一个或所有字体属性。

设置字体大小

您可以使用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 = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"

相对字体大小

您可以指定更大的尺寸或小于预设字体尺寸的尺寸。您可以将其指定为<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>

这将产生以下结果 −

Font size = "-1"
Font size = "+1"
Font size = "+2"
Font size = "+3"
Font size = "+4"

设置字体

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

例子

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

这将产生以下结果 −

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

指定备用字体

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

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

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

设置字体颜色

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

例子

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

这将产生以下结果 −

This text is in pink
This text is red

<basefont>元素

<basefont>元素应该为文档的任何部分设置默认字体大小，颜色和字体，否则这些部分不包含在<font>标记中。您可以使用<font>元素覆盖<basefont>设置。

<basefont>标签还具有颜色，大小和面部属性，并且它将支持相对字体设置，方法是，对于较大的尺寸，将尺寸设置为+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 <basefont> 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>

这将产生以下结果 −

This is the page's default font.

Example of the <basefont> Element

This is darkgray text with two sizes larger

It is a courier font, a size smaller and black in color.

表单

如果要从站点访问者收集一些数据，则需要HTML表单。例如，在用户注册期间，您希望收集姓名，电子邮件地址，信用卡等信息。

表单将从站点访问者获取输入，然后将其发布到后端应用程序，如CGI，ASP脚本或PHP脚本等。后端应用程序将根据内部定义的业务逻辑对传递的数据执行所需的处理应用程序。

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

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 − 这是大多数表单在简单场景中使用的标准方法。 mutlipart/form-data − 当您想要以图像，文件等文件的形式上传二进制数据时使用。

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 指示输入控件的类型，对于文本输入控件，它将设置为文本。
2	name 用于为控件命名，发送到服务器以进行识别并获取值。
3	value 这可用于在控件内提供初始值。
4	size 允许以字符形式指定文本输入控件的宽度。
5	maxlength 允许指定用户可以在文本框中输入的最大字符数。

密码输入控件

这也是单行文本输入，但只要用户输入它就会屏蔽该字符。它们也是使用HTML 标签创建的，但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 表示输入控件的类型，对于密码输入控件，它将设置为密码。
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 表示文本区域框的列数

序号

属性 & 描述

name

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

rows

表示文本区域框的行数。

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 指示输入控件的类型，对于复选框输入控件，它将设置为复选框.
2	name 用于为控件命名，发送到服务器以进行识别并获取值。
3	value 选中复选框时将使用的值。
4	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输入控件，它将设置为radio.
2	name 用于为控件命名，发送到服务器以进行识别并获取值。
3	value 选中单选框时将使用的值。
4	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 如果设置为“多个”，则允许用户从菜单中选择多个项目。

序号

属性 & 描述

name

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

size

这可以用于呈现滚动列表框。

multiple

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

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

序号	属性 & 描述
1	value 如果选中选择框中的选项，将使用的值。
2	selected 指定此选项应该是页面加载时最初选择的值。
3	label 标记选项的另一种方法

序号

属性 & 描述

value

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

selected

指定此选项应该是页面加载时最初选择的值。

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 指定服务器接受的文件类型。

序号

属性 & 描述

name

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

accept

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

按钮控件

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

序号	类型 & 描述
1	submit 这将创建一个自动提交表单的按钮。
2	reset 这将创建一个按钮，自动将表单控件重置为其初始值。
3	button 这将创建一个按钮，用于在用户单击该按钮时触发客户端脚本。
4	image 这会创建一个可点击的按钮，但我们可以使用图像作为按钮的背景。

例子

以下是具有三种类型按钮的表单的示例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>

这将产生以下结果 −

嵌入多媒体

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

您还可以为不识别<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>标记一起使用的重要属性列表。

序号	属性 & 描述
1	align 确定如何对齐对象。它可以设置为中央，左侧或右侧。
2	autostart 此布尔属性指示媒体是否应自动启动。您可以将其设置为true或false。
3	loop 指定声音是否应连续播放（设置循环为真），一定次数（正值）或根本不播放（假）
4	playcount 指定播放声音的次数。如果你是IE用户，这是循环的备用选项。
5	hidden 指定是否应在页面上显示多媒体对象。假值表示否，真值表示是。
6	width 对象的宽度（以像素为单位）
7	height 对象的高度（以像素为单位）
8	name 用于引用对象的名称。
9	src 要嵌入的对象的URL。
10	volume 控制声音的音量。可以从0（关闭）到100（完整卷）。

支持的视频类型

您可以在嵌入标记内使用各种媒体类型，如Flash影片（.swf），AVI（.avi）和MOV（.mov）文件类型。

.swf文件 - 是Macromedia的Flash程序创建的文件类型。
.wmv文件 - 是Microsoft的Window的媒体视频文件类型。
.mov文件 - 是Apple的Quick Time Movie格式。
.mpeg文件 - 是由Moving Pictures Expert Group创建的电影文件。

<!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标签音频来添加声音。但仍然为了学习目的，本章将详细解释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>

如果浏览器不支持对象标记，那么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小程序添加到HTML文档中，如下所示 −

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

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

Marquees

HTML选取框是一种滚动文本，可根据设置水平显示在网页上或垂直显示在网页上。这是使用HTML<marquees>标记创建的。

语法

使用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 这指定了选框的滚动类型。这可以具有滚动，滑动和替代等值。
5	scrolldelay 这指定了每次跳转之间的延迟时间。这将有一个像10等的值。
6	scrollamount 这指定了选框文本的速度。这个值可以是10等。
7	loop 这指定循环的次数。默认值为INFINITE，这意味着选取框无休止地循环。
8	bgcolor 它根据颜色名称或颜色十六进制值指定背景颜色。
9	hspace 这指定了选框周围的水平空间。这可以是10或20％等的值。
10	vspace 这指定了选框周围的垂直空间。这可以是10或20％等的值。

下面是一些演示marquee标签用法的示例。

例子 - 1

<!DOCTYPE html>
<html>

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

这将产生以下结果 −

This is basic example of marquee

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

这将产生以下结果 −

This example will take only 50% width

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

这将产生以下结果 −

This text will scroll from left to right

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

这将产生以下结果 −

This text will scroll from bottom to up

标题

我们了解到典型的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>

这将产生以下结果 −

Hello, World!

HTML <base> 标签

HTML<base>标记用于指定页面中所有相对URL的基本URL，这意味着在定位给定项目时，所有其他URL将连接到基本URL。

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML Base Tag Example</title>
	  <base href = "https://www.google.com/" />
   </head>

   <body>
	  <img src = "/images/logo.png" alt = "Logo Image"/>
	  <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

HTML <link> 标签

HTML<link>标记用于指定当前文档和外部资源之间的关系。以下是链接Web根目录下css子目录中可用的外部样式表文件的示例 −

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML link Tag Example</title>
	  <base href = "https://www.tutorialspoint.com/" />
	  <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
	  <p>Hello, World!</p>
   </body>
	
</html>

这将产生以下结果 −

Hello, World!

HTML <style> 标签

HTML<style>标记用于指定当前HTML文档的样式表。以下是在<style>标记内定义几个样式表规则的示例 −

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML style Tag Example</title>
	  <base href = "https://www.tutorialspoint.com/" />
	  
	  <style type = "text/css">
		 .myclass {
			background-color: #aaa;
			padding: 10px;
		 }
	  </style>
   </head>
	
   <body>
	  <p class = "myclass">Hello, World!</p>
   </body>

</html>

HTML <script> 标签

HTML<script>标记用于包含外部脚本文件或定义HTML文档的内部脚本。以下是我们使用JavaScript定义简单JavaScript函数的示例 −

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML script Tag Example</title>
	  <base href = "http://www.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>

样式表

层叠样式表（CSS）描述了如何在屏幕上，印刷品中显示文档，或者描述它们的发音方式。自该联盟成立于1994年以来，W3C积极推动在网上使用样式表。

层叠样式表（CSS）提供了简单有效的替代方法，可以为HTML标记指定各种属性。使用CSS，您可以为给定的HTML元素指定许多样式属性。每个属性都有一个名称和一个值，用冒号（:)分隔。每个属性声明都用分号（;）分隔。

例子

首先让我们考虑HTML文档的示例，它使用标记和相关属性来指定文本颜色和字体大小 −

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

这将产生以下结果 −

Hello, World!

您可以在HTML文档中以三种方式使用CSS −

外部样式表 - 在单独的.css文件中定义样式表规则，然后使用HTML<link>标记将该文件包含在HTML文档中。
内部样式表 - 使用<style>标记在HTML文档的标题部分中定义样式表规则。
内联样式表 - 使用样式属性直接与HTML元素一起定义样式表规则。

让我们在合适的例子的帮助下逐一看到所有这三个例子。

外部样式表

如果需要将样式表用于各种页面，则始终建议在单独的文件中定义公共样式表。级联样式表文件的扩展名为.css，它将使用<link>标记包含在HTML文件中。

例子

考虑我们定义样式表文件style.css，它具有以下规则 −

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

在这里，我们定义了三个CSS规则，这些规则将适用于为HTML标记定义的三个不同的类。我建议您不要理会如何定义这些规则，因为您将在学习CSS时学习它们。现在让我们在下面的HTML文档中使用上面的外部CSS文件 −

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML External CSS</title>
	  <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
	  <p class = "red">This is red</p>
	  <p class = "thick">This is thick</p>
	  <p class = "green">This is green</p>
	  <p class = "thick green">This is thick and green</p>
   </body>

</html>

这将产生以下结果 −

This is red

This is thick

This is green

This is thick and green

内部样式表

如果要将样式表规则仅应用于单个文档，则可以使用<style>标记将这些规则包含在HTML文档的标题部分中。

内部样式表中定义的规则将覆盖外部CSS文件中定义的规则。

例子

让我们再次重写上面的例子，但是在这里我们将使用<style>标签在同一个HTML文档中编写样式表规则 −

<!DOCTYPE html> 
<html>
 
   <head> 
	  <title>HTML Internal CSS</title> 
	  
	  <style type = "text/css"> 
		 .red { 
			color: red; 
		 } 
		 .thick{ 
			font-size:20px; 
		 } 
		 .green { 
			color:green; 
		 } 
	  </style> 
   </head>
	
   <body> 
	  <p class = "red">This is red</p>  
	  <p class = "thick">This is thick</p>  
	  <p class = "green">This is green</p>  
	  <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

这将产生以下结果 −

This is red

This is thick

This is green

This is thick and green

内联样式表

您可以使用相关标记的样式属性将样式表规则直接应用于任何HTML元素。只有当您有兴趣在任何HTML元素中进行特定更改时，才应执行此操作。

与元素内联定义的规则将覆盖外部CSS文件中定义的规则以及<style>元素中定义的规则。

例子

让我们再次重写上面的例子，但是在这里我们将使用这些元素的样式属性来编写样式表规则以及HTML元素。

<!DOCTYPE html> 
<html>
 
   <head> 
	  <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
	  <p style = "color:red;">This is red</p>  
	  <p style = "font-size:20px;">This is thick</p>  
	  <p style = "color:green;">This is green</p>  
	  <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

这将产生以下结果 −

This is red

This is thick

This is green

This is thick and green

Javascript

脚本是一小段程序，可以为您的网站添加交互性。例如，脚本可以生成弹出警报框消息，或提供下拉菜单。可以使用JavaScript或VBScript编写此脚本。

您可以使用任何脚本语言编写各种小函数，称为事件处理程序，然后您可以使用HTML属性触发这些函数。

现在，大多数Web开发人员只使用JavaScript和相关框架，甚至各种主流浏览器都不支持VBScript。

您可以将JavaScript代码保存在单独的文件中，然后将其包含在任何需要的位置，或者您可以在HTML文档本身内定义功能。让我们通过合适的例子逐一看到这两个案例。

外部JavaScript

如果要定义将在各种HTML文档中使用的功能，则最好将该功能保存在单独的JavaScript文件中，然后将该文件包含在HTML文档中。 JavaScript文件的扩展名为.js，它将使用<script>标记包含在HTML文件中。

例子

考虑我们在script.js中使用JavaScript定义一个小函数，它具有以下代码 −

function Hello() {
   alert("Hello, World");
}

现在让我们在下面的HTML文档中使用上面的外部JavaScript文件 −

<!DOCTYPE html>
<html>

   <head>
	  <title>Javascript External Script</title>
	  <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
	  <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

内部脚本

您可以将脚本代码直接编写到HTML文档中。通常我们使用<script>标记将脚本代码保存在文档的标题中，否则没有限制，您可以将源代码放在文档中的任何位置，但放在<script>标记内。

例子

<!DOCTYPE html>
<html>

   <head>
	  <title>JavaScript Internal Script</title>
	  <base href = "https://www.tutorialspoint.com/" />
	  
	  <script type = "text/JavaScript">
		 function Hello() {
			alert("Hello, World");
		 }
	  </script>
   </head>

   <body>
	  <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

事件处理

事件处理程序只是简单定义的函数，可以针对任何鼠标或键盘事件进行调用。您可以在事件处理程序中定义业务逻辑，该逻辑可以从单行代码变为1000行。

以下示例说明如何编写事件处理程序。让我们在文档的标题中写一个简单的函数EventHandler（）。当任何用户将鼠标悬停在段落上时，我们将调用此函数。

<!DOCTYPE html>
<html>

   <head>
	  <title>Event Handlers Example</title>
	  <base href = "https://www.tutorialspoint.com/" />
	  
	  <script type = "text/JavaScript">
		 function EventHandler() {
			alert("I'm event handler!!");
		 }
	  </script>
   </head>

   <body>
	  <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

隐藏旧版浏览器的脚本

虽然现在大多数（如果不是全部）浏览器都支持JavaScript，但仍有一些旧版浏览器不支持。如果浏览器不支持JavaScript，则会向用户显示代码，而不是运行脚本。为了防止这种情况，您可以简单地在脚本周围放置HTML注释，如下所示。

JavaScript Example:
<script type = "text/JavaScript">
   <!--
	  document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
	  document.write("Hello VBScript!")
   '-->
</script>

<noscript> 元素

您还可以向浏览器不支持脚本的用户以及已禁用脚本选项的用户提供替代信息。您可以使用<noscript>标记执行此操作。

JavaScript Example:
<script type = "text/JavaScript">
   <!--
	  document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
	  document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

可能存在包含多个脚本文件并最终使用多个<script>标记的情况。您可以为所有脚本标记指定默认脚本语言。这使您无需在每次在页面中使用脚本标记时指定语言。以下是示例 −

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

请注意，您仍可以通过在脚本标记中指定语言来覆盖默认值。

布局

网页布局对于更好地了解您的网站非常重要。设计一个具有良好外观和感觉的网站布局需要相当长的时间。

现在，所有现代网站都使用基于CSS和JavaScript的框架来提供响应式和动态网站，但您可以使用简单的HTML表格或分区标签以及其他格式标签来创建良好的布局。本章将为您提供有关如何使用纯HTML及其属性为网页创建简单但有效的布局的几个示例。

HTML布局 - 使用表格

创建布局的最简单和最流行的方法是使用HTML <table>标记。这些表按列和行排列，因此您可以按照自己喜欢的方式使用这些行和列。

例子

例如，使用包含3行和2列的表来实现以下HTML布局示例，但页眉和页脚列使用colspan属性跨越两列 −

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML Layout using Tables</title>
   </head>

   <body>
	  <table width = "100%" border = "0">
		 
		 <tr>
			<td colspan = "2" bgcolor = "#b5dcb3">
			   <h1>This is Web Page Main title</h1>
			</td>
		 </tr>
		 <tr valign = "top">
			<td bgcolor = "#aaa" width = "50">
			   <b>Main Menu</b><br />
			   HTML<br />
			   PHP<br />
			   PERL...
			</td>
			
			<td bgcolor = "#eee" width = "100" height = "200">
			   Technical and Managerial Tutorials
			</td>
		 </tr>
		 
	  </table>
   </body>

</html>

这将产生以下结果 −

9'>

This is Web Page Main title

Main Menu
HTML
PHP
PERL... Technical and Managerial Tutorials

多列布局 - 使用表格

您可以设计网页，将您的网页内容放在多个页面中。您可以将内容保留在中间列中，也可以使用左列使用菜单，右栏可以用于放置广告或其他内容。

例子

以下是创建三列布局的示例 −

<!DOCTYPE html>
<html>

   <head>
	  <title>Three Column HTML Layout</title>
   </head>

   <body>
	  <table width = "100%" border = "0">
		 
		 <tr valign = "top">
			<td bgcolor = "#aaa" width = "20%">
			   <b>Main Menu</b><br />
			   HTML<br />
			   PHP<br />
			   PERL...
			</td>
				
			<td bgcolor = "#b5dcb3" height = "200" width = "60%">
			   Technical and Managerial Tutorials
			</td>
				
			<td bgcolor = "#aaa" width = "20%">
			   <b>Right Menu</b><br />
			   HTML<br />
			   PHP<br />
			   PERL...
			</td>
		 </tr>
		 
	  <table>
   </body>

</html>

这将产生以下结果 −

16'> Main Menu
HTML
PHP
PERL... Technical and Managerial Tutorials Right Menu
HTML
PHP
PERL...

HTML布局 - 使用DIV，SPAN

<div>元素是用于对HTML元素进行分组的块级元素。虽然<div>标记是块级元素，但HTML<span>元素用于在内联级别对元素进行分组。

虽然我们可以使用HTML表格实现相当不错的布局，但是表格并没有真正设计为布局工具。表格更适合呈现表格数据。

注 − 此示例使用层叠样式表（CSS），因此在理解此示例之前，您需要更好地了解CSS的工作原理。

例子

在这里，我们将尝试使用<div>标记和CSS实现相同的结果，无论您在前面的示例中使用<table>标记实现了什么。

<!DOCTYPE html>
<html>

   <head>
	  <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
	  <div style = "width:100%">
		
		 <div style = "background-color:#b5dcb3; width:100%">
			<h1>This is Web Page Main title</h1>
		 </div>
			
		 <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
			<div><b>Main Menu</b></div>
			HTML<br />
			PHP<br />
			PERL...
		 </div>
			
		 <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
			<p>Technical and Managerial Tutorials</p>
		 </div>
		
		 <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
			<div><b>Right Menu</b></div>
			HTML<br />
			PHP<br />
			PERL...
		 </div>
			
	  </div>
   </body>

</html>

这将产生以下结果 −

This is Web Page Main title

Main Menu

HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu

HTML
PHP
PERL...

2021年 12月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31