学习记录：HTML 标签(一)-CSDN博客

本文主要介绍了HTML标签相关知识。先概述了HTML标签的定义、特点和关系，接着详细讲解了div、span、p、h等基本标签的用途、特点及使用示例，包括表格、列表、图像等标签的属性和用法，最后记录学习过程以温故知新。

文章目录

一、HTML 标签概述
二、HTML 基本标签
三、总结

一、HTML 标签概述

1.1 HTML 标签简介

html 标签是指超文本标记语言的标记标签，html 标签是 html 语言中最基本的单位，html 标签是 html 最重要的组成部分。

1.2 HTML 标签特点

HTML 标签的特点：

HTML 标签是由尖括号包围的关键词，比如 < html >

HTML 标签分别有双标签和单标签，标签中有属性，属性具有属性值。比如 < b> 和 < /b>为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

HTML 标签是与大小写无关的，例如
< BODY>跟< body>表示的意思是一样的，推荐使用小写。

1.3 HTML 标签关系

1. 父子关系(嵌套关系)

<head>
  <title></title>
</head>

2. 兄弟关系(并列关系)

<head></head>
<body></body>

二、HTML 基本标签

2.1 div 标签

div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
<div>可定义文档中的分区或节（division/section）。
div 是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过 div 来布局定位网页中的每个区块。
<div>可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。

2.2 span 标签

在 html 中，span 标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。
span 标签本身并没有什么格式表现（比如：换行等），需要对它应用样式才会有视觉上的变化。
span 标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立的内容设置单独样式。

案例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html中span标签的详细介绍</title>
  </head>
  <body style="background-color: bisque;">
    <h3>span标签演示</h3>
    <p>
      html中
      <span style="color:blue;">span标签</span>
      的详细介绍
    </p>
  </body>
</html>

效果如下：

html中span标签的详细介绍
span标签演示

html中span标签的详细介绍

2.3 div 与 span 区别

由<div>与<span>引出块级元素与行内元素的区别

块级元素	行内元素
块级元素始终从新行开始	行内元素从不从换行开始
块级元素从左到右覆盖空间	行内元素仅覆盖由 HTML 元素中的标记所限定的空间
块级元素具有上边距和下边距	行内元素没有上边距和下边距

<div> 标签是一个块级元素。它用作 HTML 页面中的一个部分，用于对 HTML 元素的所有大部分进行分组。

<span>标签是一个行内元素。它用作突出显示或标记特定文本或文档部分的容器。

<div>与<span>对比代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>span与div对比</title>
    <style type="text/css"></style>
  </head>
  <body>
    <h3>span与div对比</h3>
    测试
    <span>span"测试"一行显示</span>
    <div>div"测试"另起一行显示</div>
  </body>
</html>

效果如下：

span与div对比
span与div对比
测试 span"测试"一行显示
div"测试"另起一行显示

总结<span>和<div>的区别在于:

<div>是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
而<span>是行内元素，<span>的前后是不会换行的，它没有结构的意义，纯粹是应用样式。

2.4 段落标签 p

<p>标签非常简单，只需要在 HTML 文件中插入<p> </p>即可

代码如下：
<p>这是一个段落</p>

<p>特点：

自动换行

段落和段落之间有空隙

案例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>古诗</title>
  </head>
  <body>
    <h3>锦瑟</h3>
    <p>锦瑟无端五十弦,一弦一柱思华年。</p>
    <p>庄生晓梦迷蝴蝶,望帝春心托杜鹃。</p>
    <p>沧海月明珠有泪,蓝田日暖玉生烟。</p>
    <p>此情可待成追忆,只是当时已惘然。</p>
  </body>
</html>

效果如下：

古诗

锦瑟

锦瑟无端五十弦,一弦一柱思华年。

庄生晓梦迷蝴蝶,望帝春心托杜鹃。

沧海月明珠有泪,蓝田日暖玉生烟。

此情可待成追忆,只是当时已惘然。

2.5 标题标签 h

h 标签通常用来表示创建一个标题

注意：创建标题只有 <h1> ~ <h6>，没有其它的

从<h1>~<h6>随数字增大，字体依次减小

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </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

2.6 换行标签 br

br 是 break 的缩写，表示换行。
<br> 是⼀个单标签 (不需要结束标签 )
<br/>是规范写法，不建议写成<br>

注意：<br>标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

案例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>古诗</title>
  </head>
  <body>
    <h3>锦瑟</h3>
    <br />
    锦瑟无端五十弦,一弦一柱思华年。
    <br />
    庄生晓梦迷蝴蝶,望帝春心托杜鹃。
    <br />
    沧海月明珠有泪,蓝田日暖玉生烟。
    <br />
    此情可待成追忆,只是当时已惘然。
  </body>
</html>