简介

HTML：超文本标记语言（Hyper Text Markup Language）

它不是一门编程语言，而是一种用于告知浏览器如何组织页面的标记语言。

HTML 元素

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> 元素定义了整个 HTML 文档，<body> 元素定义了 HTML 文档的主体，<p> 元素定义了 HTML 文档中的一个段落。

HTML 属性

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

属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。属性值应该始终被包括在引号内。

实例：

style 属性用于改变 HTML 元素的样式。

1
2
3
<p style="background-color:orange">背景颜色</p>
<p style="font-family:arial;color:red;font-size:20px;">字体、颜色和尺寸</p>
<p style="text-align:center">文本对齐</p>
效果

背景颜色

字体、颜色和尺寸

文本对齐

一些基本 HTML 元素

HTML 标题

通过 <h1> - <h6> 等标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。

1
2
3
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
效果

标题

标题

标题

HTML 段落

通过 <p> 标签进行定义。

1
2
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
效果

这是一个段落。

这是另外一个段落。

如果想要在不产生新段落的情况下进行换行，使用 <br /> 标签。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线，可用于分隔内容。

1
2
3
<p>段落1</p>
<hr />
<p>段落2</p>
效果

段落1

段落2

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。表格的表头使用 <th> 标签进行定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表头</th>
<th>另一表头</th>
</tr>
<tr>
<td>第一行第一个单元格</td>
<td>第一行第二个单元格</td>
</tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
</tr>
</table>
效果
表格标题
表头 另一表头
第一行第一个单元格 第一行第二个单元格
第二行第一个单元格 第二行第二个单元格

表格的边框用 border 属性进行设置。跨行和跨列的单元格分别用 rowspan 和 colspan 属性进行设置。单元格内容与其边框之间的空白和单元格之间的距离分别用 cellpadding 和 cellspacing 属性进行设置。

HTML 列表

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
效果
  • Coffee
  • Milk

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
效果
  1. Coffee
  2. Milk

HTML 链接

使用 <a> 标签在 HTML 中创建链接。

href 属性规定链接的目标。

target 属性定义被链接的文档在何处显示。

title 属性添加支持信息（当鼠标指针悬停在链接上时出现）。

实例：

1
<a href="https://wu-haitao.github.io/" title="链接到主页" target="_blank">在新窗口打开</a>
效果

在新窗口打开

HTML 图像

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

源属性（src）的值是图像的 URL 地址。

1
<img src="example.gif"/>
效果

替换文本属性（alt）用来为图像定义一串预备的可替换的文本。在无法载入图像时，浏览器将显示这个替代性的文本而不是图像。