HTML简介及举例

浏览数：43 / 时间：2015年06月09日

超文本标记语言(Hyper Text Markup Language，简称HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息，也可用来在一定程度上描述文档的外观和语义。它是通向WEB技术世界的钥匙。

1、HTML简介：HTML是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言(markup language)，标记语言是一套标记标签(markup tag)，它使用标记标签来描述网页。

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

HTML文档描述网页，HTML文档包含HTML标签和纯文本，HTML文档也被称为网页。

Web浏览器的作用是读取HTML文档，并以网页的形式显示它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

2、HTML基础：HTML标题(Heading)是通过<h1>- <h6>等标签进行定义的。

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

HTML链接是通过<a>标签进行定义的。在href属性中指定链接的地址。

HTML图像是通过<img>标签进行定义的。图像的名称和尺寸是以属性的形式提供的。

3、HTML元素：HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签(starttag)到结束标签(end tag)的所有代码。开始标签常被称为开放标签(opening tag)，结束标签常称为闭合标签(closing tag)。

HTML元素语法：(1)、HTML元素以开始标签起始；(2)、HTML元素以结束标签终止；(3)、元素的内容是开始标签与结束标签之间的内容；(4)、某些HTML元素具有空内容(empty content)；(5)、空元素在开始标签中进行关闭(以开始标签的结束而结束)；(6)、大多数HTML元素可拥有属性。

嵌套的HTML元素：大多数HTML元素可以嵌套(可以包含其它HTML元素)。

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

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

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

不要忘记结束标签，即使忘记了使用结束标签，大多数浏览器也会正确地显示HTML。忘记使用结束标签会产生不可预料的结果或错误。未来的HTML版本不允许省略结束标签。

空的HTML元素：没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。<br>就是没有关闭标签的空元素(<br>标签定义换行)。在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。

HTML标签对大小写不敏感，<P>等同于<p>，许多网站都使用大写的HTML标签。在未来(X)HTML版本中强制使用小写。

4、HTML属性：属性为HTML元素提供附件信息。

HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值的形式出现，比如：name=”value”。属性总是在HTML元素的开始标签中规定。

属性和属性值对大小写不敏感。而新版本的(X)HTML要求使用小写属性。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别情况下，比如属性值本身就含有双引号，那么你必须使用单引号。

5、HTML标题：标题(Heading)是通过<h1>- <h6>等标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题。

浏览器会自动地在标题的前后添加空行。默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。请确保将HTML heading标签只用于标题。不用仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。

<hr/>标签在HTML页面中创建水平线。hr元素可用于分割内容。使用水平线(<hr>标签)来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML注释：可以将注释插入HTML代码中，这样可以提高其可读性，使代码更被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的： ，开始括号之后(左边的括号)需要紧跟一个叹号，结束括号之前(右边的括号)不需要。

查看源代码：只需要单击右键，然后选择”查看源文件”(IE)或”查看页面源代码”(Firefox)，其它浏览器的做法也是类似的。这么做会打开一个包含页面HTML代码的窗口。

6、HTML段落：可以把HTML文档分割为若干段落。段落是通过<p>标签定义的。浏览器会自动地在段落的前后添加空行(<p>是块级元素)。使用空的段落标记<p> </p>去插入一个空行是个坏习惯。用<br/>标签来代替它。但是不要用<br/>标签去创建列表。

如果你希望在不产生一个新段落的情况下进行换行(新行)，请使用<br/>标签。<br/>元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签。在XHTML、XML以及未来的HTML版本中，不允许使用没有结束标签(闭合标签)的HTML元素。即使<br>在所有浏览器中的显示都没有问题，使用<br/>也是更长远的保障。

对于HTML，你无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行(换行)也被显示为一个空格。

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

8、HTML编辑器：使用Notepad或TextEdit来编写HTML。

当保存HTML文件时，既可以使用.htm也可以使用.html扩展名，两种没有区别，完全根据你的喜好。

9、HTML样式(CSS)：当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有三种方式来插入样式表：(1)、外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。(2)、内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。(3)、内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。

10、HTML链接：HTML使用超级链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。通过使用<a>标签在HTML中创建链接。有两种使用<a>标签的方式：(1)、通过使用href属性：创建指向另一个文档的链接；(2)、通过使用name属性：创建文档内的书签。开始标签和结束标签之间的文字被作为超级链接来显示。”链接文本”不必一定是文本，图片或其他HTML元素都可以成为链接。

使用target属性，可以定义被链接的文档在何处显示。name属性规定锚(anchor)的名称。你可以使用name属性创建HTML页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚(named anchors)时，我们可以创建直接跳至该命名锚(比如页面中的某个小节)的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。加入浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会有错误发生。

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

图像标签(<img>)和源属性(src):在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性(src)，src指”source”，源属性的值是图像的URL地址。URL指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

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

加载图片是需要时间的，所以建议是：慎用图片。

12、HTML表格：可以使用HTML创建表格。

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

如果不定义边框属性，表格将不显示边框。表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

在一些浏览器中，没有内容的表格单元显示的不太好。如果某个单元格是空的(没有内容)，浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

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

无序列表：是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul>标签。每个列表项始于<li>。列表项内部可以使用段落、换行符、图片、链接以及其它列表等等。
有序列表：也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。列表项内部可以使用段落、换行符、图片、链接以及其它列表等等。

定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

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

大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始(和结束)。HTML<div>元素是块级元素，它是可用于组合其它HTML元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与CSS一同使用，<div>元素可用于对打的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

HTML<span>元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

15、HTML布局：可以使用<div>或者<table>元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。即使可以使用HTML表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据----表格不是布局工具。

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

使用CSS最大的好处是，如果把CSS代码存放到外部样式表中，那么站点会更易于维护。通过编译单一的文件，就可以改变所有页面的布局。

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。

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

表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如：文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义。

多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型：(1)、文本域(Text Fields)：当用户要在表单中键入字母、数字等内容时，就会用到文本域。表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。(2)、单选按钮：当用户从若干给定的选择中选取其一时，就会用到单选框。(3)、复选框：当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。(4)、表单的动作属性(action)和确认按钮：当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

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

每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：(1)、开发人员必须同时跟踪更多的HTML文档；(2)、很难打印整张页面。

框架结构标签(<frameset>)：(1)、定义如何将窗口分割为框架；(2)、每个frameset定义了一系列行或列；(3)、rows/columns的值规定了每行或每列占据屏幕的面积。

框架标签(<frame>)：定义了放置在每个框架中的HTML文档。

假如一个框架有可见边框，用户可以拖到边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize=”noresize”。为不支持框架的浏览器添加<noframes>标签。不能将<body> </body>标签与<frameset></frameset>标签同时使用。不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body> </body>标签内。

18、HTML内联框架：iframe用于在网页内显示网页。

height和width属性用于规定iframe的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定。frameborder属性规定是否显示iframe周围的边框。

19、HTML背景：<body>拥有两个配置背景的标签。背景可以是颜色或者图像。背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。URL可以是相对地址，也可以是绝对地址。

如果你打算使用背景图片，你需要紧记以下几点：(1)、背景图像是否增加了页面的加载时间，图像文件不应超过10k；(2)、背景图像是否与页面中的其它图像搭配良好；(3)、背景图像是否与页面中的文字颜色搭配良好；(4)、图像在页面中平铺后，看上去还可以吗？(5)、对文字的注意力被背景图像喧宾夺主了吗？

<body>标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的HTML标准(HTML4和XHTML)中已被废弃。应该使用层叠样式表(CSS)来定义HTML元素的布局和显示属性。

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

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

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

21、HTML文档类型：<!DOCTYPE>声明帮助浏览器正确地显示网页。

Web世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面。这就是<!DOCTYPE>的用处。<!DOCTYPE>不是HTML标签。它为浏览器提供一项信息(声明)，即HTML是用什么版本编写的。

22、HTML头部：<head>元素是所有头部元素的容器。<head>内的元素包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签可以添加到head部分：<title>、<base>、<link>、<meta>、<script>以及<style>。

<title>标签定义文档的标题。title元素在所有HTML/XHTML文档中都是必须的。title元素能够：(1)、定义浏览器工具栏中的标题；(2)、提供页面被添加到收藏夹时显示的标题；(3)、显示在搜索引擎结果中的页面标题。

<base>标签为页面上的所有链接规定默认地址或默认目标。

23、HTML脚本：JavaScript是HTML页面具有更强的动态和交互性。

如果浏览器压根没法识别<script>标签，那么<script>标签包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该讲脚本隐藏在注释标签中。

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

在HTML中，某些字符是预留的。在HTML中不能使用小于号(<)和大于号(>)，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体。如需显示小于号，我们必须这样写：<或#60; 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

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

实体名称对大小写敏感。

25、HTMLURL：HTML统一资源定位器。

URL也被称为网址。URL可以由单词组成或者是因特网协议(IP)地址。当你点击HTML页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。统一资源定位器(URL)用于定位万维网上的文档(或其他数据).

26、HTMLURL编码：URL编码会将字符转换为可通过因特网传输的格式。

URL只能使用ASCII字符集来通过因特网进行发送。由于URL常常会包含ASCII集合之外的字符，URL必须转换为有效的ASCII格式。URL编码使用”%”其后跟随两位的十六进制数来替换费ASCII字符。URL不能包含空格。URL编码通常使用+来替换空格。

27、HTMLWeb服务器：如果希望向世界发布你的网站，那么就必须把它存放在web服务器上。

28、HTML多媒体：Web上的多媒体指的是音效、音乐、视频和动画。现代网络浏览器已支持很多多媒体格式。

确定媒体类型的最常用的方法是查看文件扩展名。

29、HTML对象：<object>的作用是支持HTML助手(插件).

辅助应用程序是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频(以及其他).辅助程序是使用<object>标签来加载的。使用辅助程序播放视频和音频的一个优势是，你能够允许用户来控制部分或全部播放设置。大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停)的手工控制。

30、HTML音频、视频：在HTML中播放音频、视频的方法有很多种。

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件有很多用途：播放音乐、显示地图、验证银行账户，控制输入等等。可使用<object>或<embed>标签来将插件添加到HTML页面。

示例：

<!-- <!DOCTYPE>不是HTML标签。它为浏览器提供一项信息(声明)，即HTML是用什么版本编写的 -->
<!DOCTYPE html>
<html>

<!-- <head>元素是所有头部元素的容器。<head>内的元素包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等 -->
<head>
<!-- <title>标签定义文档的标题,title 元素的内容会显示在浏览器的标题栏中 -->
<title>我的第一个HTML页面</title>
<!-- <meta>标签提供关于HTML文档的元数据,元数据不会显示在页面上，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其它元数据。 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="author" content="http://blog.csdn.net/fengbingchun">

</head>

<!-- <body>元素定义了HTML文档的主体 -->
<body bgcolor="green">
<!-- 标题(Heading)是通过<h1> - <h6>等标签进行定义的 -->
<h1 align="center">HTML基础标签</h1>
<hr/>
<!--  段落是通过<p>标签进行定义的 -->
<p>My first paragraph.</p>
<br/>
<p>段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数.</p>
<p>中国<br/>北京</p>

<h1 align="center">HTML文本格式化</h1>
<hr/>
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
<br/>
<sup>superscript</sup>
<br/>
<!-- pre保留了空格和换行 -->
<pre>
for i = 1 to 10
     print i
next i
</pre>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
<bdo dir="rtl">北京海淀</bdo>
<abbr title="World Wide Web">WWW</abbr>
<p>一天工作<del>八</del> <ins>十</ins>个小时</p>

<h1 align="center">HTML链接</h1>
<hr/>
<!-- 链接是通过<a>标签进行定义的,在href属性中指定链接的地址 -->
<p><a href="http://blog.csdn.net/fengbingchun" target="_blank">Blog</a> CSDN Blog链接。</p>
<!-- 图像是通过<img>标签进行定义的,图像的名称和尺寸是以属性的形式提供的 -->
<p>使用图像作链接：<a href="http://blog.csdn.net/fengbingchun"> </a>
<img border="0", src="f:/lena.jpg" /></p>

<h1 align="center">HTML框架</h1>
<hr/>
<frameset cols="30%,40%,30%">
  <frame src="f:/1.html">
  <frame src="f:/2.html">
  <frame src="f:/3.html">
<noframes>
<p>您的浏览器无法处理框架！</p>
</noframes>
<iframe src="f:/baboon.jpg"></iframe>
</frameset>

<h1 align="center">HTML表格</h1>
<hr/>
<h2>两行三列：</h2>
<table border="8" background="f:/cat.jpg">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h1 align="center">HTML列表</h1>
<hr/>
<h2>水果列表：</h2>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h1 align="center">HTML表单与输入</h1>
<hr/>
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>

<h1 align="center">HTML图像</h1>
<hr/>
<img src="f:/lena.jpg" width="200" height="200">

<h1 align="center">HTML脚本</h1>
<hr/>
<script type="text/javascript">
document.write("JavaScript!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

</body>

</html>

以上内容摘自：http://www.w3school.com.cn/html/index.asp

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML简介及举例