一篇文章带你学会HTML的常用标签

小波

2年前更新

520

文章目录[隐藏]

head中的一些标签
标题标签：
段落标签
☆链接标签☆：
☆图像标签☆：
列表标签：
表格标签：
表单标签：
其他常用标签：

head中的一些标签

<head> 标签是 HTML 文档中的一个元素，它位于 <html> 标签内部，并且在页面上不可见。

<title> 标签： <head> 内通常包含一个 <title> 标签，用于指定网页的标题，该标题显示在浏览器的标题栏或选项卡上。
```
<head>
  <title>网页标题</title>
</head>
```
<meta> 标签： <head> 内通常包含一系列 <meta> 标签，用于设置文档的元数据，如字符编码、关键词、描述等，这个主要是给蜘蛛看的，这些是关于SEO优化做的，具体学习SEO时候可以了解到。
```
<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">
  <meta name="description" content="网页描述">
</head>
```
<link>：用于引入外部样式表或其他资源文件，比如CSS或者icon图标，就是导航栏里面那个图标。
```
<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>
```
<style>：用于在文档中定义内部样式表，这个也不用特意去记，到时候学习CSS时候会有详细说明。
```
<head>
  <style>
    body {
      background-color: #f1f1f1;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
```

<script>：用于在文档中引入或定义JavaScript代码，这个也不用特意去记，到时候学习JavaScript时候会遇到。

<head>
  <script src="script.js"></script>
  <script>
    // 内联脚本
    function myFunction() {
      // JavaScript 代码
    }
  </script>
</head>

标题标签：

<h1>到<h6>：用于定义标题。<h1>是最高级别的标题，<h6>是最低级别的标题。

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

段落标签

<p>：用于定义段落。

我是没加段落标签的文本<br>我是没加段落标签的文本<br>我是没加段落标签的文本<br>
<p>我是加了段落标签的文本</p>
<p>我是加了段落标签的文本</p>
<p>我是加了段落标签的文本</p>

☆链接标签☆：

链接标签是 HTML 中的 <a> 标签，用于创建超链接，将文本或图像链接到其他页面、文件或位置。

href 属性：指定链接的目标地址。可以是一个 URL，另一个网页的文件路径，或者是网页内部的锚点。
```
<a href="https://blog.zmkj.website">造梦空间论坛</a>
<a href="#">返回顶部</a>
```
target 属性：指定链接在何处打开。常用取值有 _blank（在新窗口中打开）、_self（在当前窗口中打开）、_parent（在父级框架中打开）和 _top（在顶级框架中打开）等。
```
<a href="https://blog.zmkj.website" target="_blank">造梦空间论坛</a>
```
title 属性：提供关于链接的额外信息，当鼠标悬停在链接上时将显示为工具提示。
```
<a href="https://blog.zmkj.website" title="造梦空间论坛">造梦空间论坛</a>
```
download 属性：指示浏览器下载链接的目标文件，而不是在浏览器中打开它。
```
<a href="https://blog.zmkj.website/test.zip">下载测试</a>
```
rel 属性用于指定链接与当前文档之间的关系，nofollow告诉搜索引擎不要追踪链接，从而避免被搜索引擎认为是垃圾链接或者是 SEO 作弊行为。如果您在网站上放置了一些外链，但是您不想这些外链影响到您的网站排名，那么可以在这些链接中添加 rel="nofollow" 属性。
```
<a href="https://abc.com/" rel="nofollow">造梦空间论坛</a>
```

☆图像标签☆：

图像标签是 HTML 中的 <img> 标签，用于在网页上插入图像。

src 属性：指定图像文件的路径或 URL。它可以是相对路径（相对于当前 HTML 文件）或绝对路径。
```
<img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png">
```
alt 属性：提供替代文本，当图像无法显示时，或者用于辅助技术（如屏幕阅读器）无法解释图像时，将显示这段文本。
```
<img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png" alt="造梦空间论坛LOGO">
```
width 和 height 属性：指定图像的宽度和高度，以像素为单位。这些属性可以用于控制图像在网页上的显示尺寸。
```
<img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png" width="300" height="200">
```

title 属性：提供关于图像的额外信息，当鼠标悬停在图像上时将显示为工具提示。

<img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png" title="造梦空间论坛LOGO">

loading 属性：指定图像的加载行为。常用取值有 "lazy"（延迟加载，当图像进入可视区域时再加载）和 "eager"（立即加载）等。
```
<img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png" alt="造梦空间论坛LOGO" loading="lazy">
```

列表标签：

有序列表： <ol> 和 <li>：用于创建有序列表。使用<ol>作为整个有序列表的容器，在其中使用<li>创建列表项。
```
<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
```
无序列表： <ul> 和 <li>：用于创建无序列表。使用<ul>作为整个无序列表的容器，在其中使用<li>创建列表项。
```
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>
```
定义列表： <dl>, <dt> 和 <dd>：用于创建定义列表。<dl>是整个定义列表的容器，<dt>用于定义术语，<dd>用于定义术语的描述。
```
<dl>
  <dt>术语一</dt>
  <dd>描述一</dd>
  <dt>术语二</dt>
  <dd>描述二</dd>
</dl>
```

表格标签：

<table>：用于创建表格。在<table>内部使用其他表格相关标签来定义表格的结构。

<table>
  <tr>
    <th>表头一</th>
    <th>表头二</th>
  </tr>
  <tr>
    <td>数据一</td>
    <td>数据二</td>
  </tr>
</table>

`<table>` 标签属性：

border：定义表格边框的宽度，取值为整数，默认值为 0。
width：定义表格的宽度，取值可以是像素或百分比。
cellpadding：定义单元格内边距的大小，取值为整数，默认值为 1。
cellspacing：定义单元格之间边距的大小，取值为整数，默认值为 1。
align：定义表格的水平对齐方式，取值可以是 left、right 或 center。
bgcolor：定义表格的背景颜色。

`<tr>` 标签属性：

用于定义表格中的行。

align：定义行中所有单元格的水平对齐方式，取值可以是 left、right 或 center。
valign：定义行中所有单元格的垂直对齐方式，取值可以是 top、bottom 或 middle。

`<th>` 和 `<td>` 标签属性：

<th>用于定义表格中的表头单元格，<td>用于定义表格中的数据单元格

colspan：定义单元格横向合并的列数，取值为整数。
rowspan：定义单元格纵向合并的行数，取值为整数。
align：定义单元格的水平对齐方式，取值可以是 left、right 或 center。
valign：定义单元格的垂直对齐方式，取值可以是 top、bottom 或 middle。
bgcolor：定义单元格的背景颜色。

表单标签：

<form>：用于创建表单。在<form>内部使用其他表单相关标签来定义表单的组件。
1. action：规定当提交表单时，向何处发送表单数据。
2. method：规定用于发送表单数据的 HTTP 方法（GET 或 POST）。
3. name：为表单定义名称，用于标识表单。
```
<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>
```
<input>：用于创建输入字段。通过type属性指定输入字段的类型，例如文本、密码等。
1. text：文本输入框
2. password：密码输入框
3. email：电子邮件地址输入框
4. tel：电话号码输入框
5. url：URL 输入框
6. search：搜索框
7. checkbox：复选框
8. radio：单选框
9. file：文件上传框
10. submit：提交按钮
11. reset：重置按钮
12. button：普通按钮
<textarea>：用于创建多行文本输入字段。
<select>：用于创建下拉菜单。
<button>：按钮用于创建。
<label>：用于定义表单标签。

其他常用标签：

<div>：用于定义文档中的块级元素。
<span>：用于定义文档中的行内元素。
<header>：用于定义文档头部。
<footer>：用于定义文档底部。
<nav>：用于定义导航链接的区域。
<section>：用于定义文档中的节（section）。

<article>：用于定义独立的文章内容。

<div>这是一个块级元素。</div>
<span>这是一个行内元素。</span>
<header>这是头部</header>
<footer>这是底部</footer>
<nav>这是导航链接</nav>
<section>这是一个节</section>
<article>这是一篇文章</article>