HTML 基础教程

Posted on   |   In   |  

HTML 简介

1
2
3
4
5
6
7
8
9
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

效果如图：

HTML 基础

HTML 标题

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

1
2
3
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

效果图：

HTML 段落

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

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

效果如下：

This is a paragraph.


This is another paragraph.

HTML 链接

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

<a href="http://www.baidu.com">This is a link to baidu</a>

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

效果如下：

This is a link to baidu

HTML 图像

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

<img src="html1.jpg" width="250" height="200" />

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

HTML 元素

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

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

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

HTML 元素语法

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

嵌套的 HTML 元素

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

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

1
2
3
4
5
6
7
<html>

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

</html>

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

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

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

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

空的 HTML 元素

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

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

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

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

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

HTML 提示：使用小写标签

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

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

HTML 属性

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

HTML 属性

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

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

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

更多 HTML 属性实例

属性例子 1:

1
2
3
4
5
6
7
8
9
10
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）
<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示：使用小写属性

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

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

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

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

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

name='Bill "HelloWorld" Gates'

HTML 属性参考手册

完整的 HTML 参考手册

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

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

如需更多关于标准属性的信息，请访问：

HTML 标准属性参考手册

HTML 标题

HTML 标题

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

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

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

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

HTML 水平线

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

hr 元素可用于分隔内容．

1
2
3
4
5
6
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML 注释

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

注释是这样写的：

<!-- This is a comment -->

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

HTML 段落

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

HTML 段落

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

HTML 折行

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

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

效果如下：

This is
a para
graph with line breaks

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