前端三剑客
HTML

HTML 基础

# HTML 基础

# 1. 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。标题标签用于定义 HTML 文档的标题，它们依次变小，从 h1（最大的标题）到 h6（最小的标题）。使用标题标签可以提升文档的可读性和 SEO 友好性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2. 段落

HTML 段落是通过标签 <p> 来定义的。段落标签用于定义文本段落，并在段落前后自动插入空白。它是结构化文档内容的基本工具。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3. 链接

HTML 链接是通过标签 <a> 来定义的。链接标签用于创建超链接，使用户可以从一个页面跳转到另一个页面。超链接是 HTML 的基本功能之一，支持从本地文件到外部网站的导航。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# HTML 中的 `<a>` 标签

<a> 标签用于创建超链接，用户可以通过点击超链接跳转到指定的 URL 或者触发某些操作。最基本的用法如下：

<a href="https://www.example.com">这是一个链接使用了href属性</a>

href 属性：
- 定义：href 是 "hypertext reference" 的缩写，用于指定链接的目标 URL。
- 示例：<a href="https://www.example.com">这是一个链接</a>
- 注意事项：如果 href 属性为空 (href="")，则链接会指向当前页面。
target 属性：
- 定义：指定点击链接后打开页面的方式。
- 常见值：
  - _self：默认值，在当前窗口打开链接。
  - _blank：在新窗口或新标签页中打开链接。
  - _parent：在父框架中打开链接。
  - _top：在整个窗口中打开链接，取消所有框架。
- 示例：<a href="https://www.example.com" target="_blank">在新标签页中打开链接</a>
rel 属性：
- 定义：指定当前文档与链接目标之间的关系。
- 常见值：
  - nofollow：告知搜索引擎不要追踪该链接。
  - noopener：防止新页面能够获取到原始页面的 window 对象。
  - noreferrer：不传递 HTTP Referer 头信息。
- 示例：<a href="https://www.example.com" rel="nofollow">不被搜索引擎追踪的链接</a>
download 属性：
- 定义：提示浏览器下载链接目标而不是导航到该链接。
- 示例：<a href="/files/example.pdf" download>下载文件</a>
- 注意事项：href 属性必须指向有效的文件 URL，浏览器才会触发下载。
title 属性：
- 定义：为链接提供额外的信息，这些信息通常在鼠标悬停在链接上时显示为工具提示。
- 示例：<a href="https://www.example.com" title="访问 Example 网站">Example</a>
name 属性（已弃用，通常使用 id 替代）：
- 定义：定义锚点的名称，允许链接到页面中的特定部分。
- 示例：
```
<a name="section1"></a>
<a href="#section1">跳转到第一部分</a>
```
  1
  2
- 替代：现在通常使用 id 属性来创建锚点。
```
<a id="section1"></a>
<a href="#section1">跳转到第一部分</a>
```
  1
  2
id 属性：
- 定义：为元素定义唯一的 ID，可以用于 CSS、JavaScript 或创建页面锚点。
- 示例：
```
<a id="section1"></a>
<a href="#section1">跳转到第一部分</a>
```
  1
  2
文本和其他内容：
- 定义：在 <a> 和 </a> 标签之间的内容是用户可见并可点击的部分。
- 示例：<a href="https://www.example.com"><strong>这是一个粗体链接</strong></a>
- 注意事项：可以包含文本、图片、HTML 元素等。
伪协议：
- 定义：href 属性可以使用多种伪协议来实现不同功能。
- 常见值：
  - mailto:：创建邮件链接。
```
<a href="mailto:example@example.com">发送邮件</a>
```
    1
  - tel:：创建电话链接。
```
<a href="tel:+123456789">拨打电话</a>
```
    1
  - javascript:：执行 JavaScript 代码（不推荐使用）。
```
<a href="javascript:alert('Hello World')">点击显示提示</a>
```
    1

# 4. 图像

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src="/images/logo.png" width="258" height="39" />

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# HTML 中的 `<img>` 标签

<img> 标签用于在网页中嵌入图像。最基本的用法如下：

<img src="/images/logo.png" alt="描述文本" width="258" height="39" />

src 属性：
- 定义：指定图像的路径或 URL。
- 示例：<img src="/images/logo.png" alt="描述文本" />
- 注意事项：确保路径正确并且图像文件存在，否则浏览器将无法显示图像。
alt 属性：
- 定义：提供图像的替代文本，图像无法显示时会显示此文本。
- 示例：<img src="/images/logo.png" alt="描述文本" />
- 重要性：对于无障碍访问、搜索引擎优化（SEO）以及在图像加载失败时非常重要。
width 和 height 属性：
- 定义：指定图像的显示宽度和高度，可以是像素或百分比。
- 示例：<img src="/images/logo.png" width="258" height="39" />
- 注意事项：最好使用这两个属性来指定图像尺寸，以便浏览器在加载图像时能够预留相应的空间。
title 属性：
- 定义：为图像提供额外的信息，当用户将鼠标悬停在图像上时显示为工具提示。
- 示例：`<img src="/images/logo.png" alt="描述文本" title="这是一个工具提示"

/>`

loading 属性：
- 定义：延迟加载图像以提高页面性能。
- 常见值：
  - lazy：懒加载，仅在图像接近可视区域时加载。
  - eager：立即加载（默认）。
- 示例：<img src="/images/logo.png" alt="描述文本" loading="lazy" />

srcset 和 sizes 属性：

定义：提供响应式图像，根据屏幕尺寸和分辨率选择不同的图像。

示例：

<img 
  src="/images/logo.png"
  srcset="/images/logo-small.png 480w, /images/logo-medium.png 1024w, /images/logo-large.png 2048w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 2048px"
  alt="描述文本"
/>

1
2
3
4
5
6

解释：srcset 提供多种图像及其宽度，sizes 指定根据视口宽度选择的图像宽度。

usemap 属性：

定义：将图像与图像映射关联，创建可点击的热点区域。

示例：

<img src="/images/map.png" alt="地图" usemap="#imagemap" />
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="example1.html" alt="Example1" />
  <area shape="circle" coords="100,100,50" href="example2.html" alt="Example2" />
</map>

1
2
3
4
5

CSS 和样式：

定义：可以使用 CSS 对图像进行样式化。

示例：

<img src="/images/logo.png" alt="描述文本" style="border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.2);" />

ismap 属性：
- 定义：将图像转换为服务器端图像映射，每次点击都会发送点击位置的坐标到服务器。
- 示例：<img src="/images/map.png" alt="地图" ismap />
- 注意事项：通常与 <a> 标签一起使用，如：
```
<a href="mapserver.cgi"><img src="/images/map.png" alt="地图" ismap /></a>
```
  1
crossorigin 属性：
- 定义：处理跨域请求图像的 CORS（跨域资源共享）。
- 常见值：
  - anonymous：请求不需要凭据。
  - use-credentials：请求需要凭据（例如 cookies）。
- 示例：<img src="https://example.com/image.png" alt="描述文本" crossorigin="anonymous" />

通过以上介绍，您应该对 HTML 的基础知识有了初步的了解。这些基础标签和属性是构建网页的核心工具，掌握它们将有助于创建结构良好、易于维护的 HTML 文档。

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML 编辑器 HTML 元素→