HTML简单介绍及举例

浏览数：13 / 时间：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)、单选button：当用户从若干给定的选择中选取其一时，就会用到单选框。(3)、复选框：当用户须要从若干给定的选择中选取一个或若干选项时，就会用到复选框。(4)、表单的动作属性(action)和确认button：当用户单击确认button时，表单的内容会被传送到还有一个文件。表单的动作属性定义了目的文件的文件名称。由动作属性定义的这个文件一般会对接收到的输入数据进行相关的处理。

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、HTMLWebserver：假设希望向世界公布你的站点，那么就必须把它存放在webserver上。

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简单介绍及举例