详细整理！！html5常用标签

文章目录

前言
一、HTML简介
- 1.HTML文件结构
- 2.各标签意义
二、HTML标签介绍
- 1.标题标签
- 2.段落标签
- 3. 换行标签
- 4.hr标签
- 5. span标签
- 6.div标签
- 7.img标签
- 8.超链接标签
- 9.注释标签
- 10.空格
- 11.格式化标签
- 12.sup上标和sub下标
- 13. pre预格式化标签
- 14.table 表格标签
- - table 标签基础内容
  - 合并单元格
- 15.列表标签
三、行内元素、行内块元素和块级元素
- 1. display 属性
- - 块级元素转行内元素示例
  - 行内元素转块级元素示例
- 2.什么是行内元素、块级元素和行内块元素？
- - 行内元素（inline element）
  - 行内块元素
  - 块元素（block element）

前言

在学习 HTM L之前，首先了解什么是 HTML：

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。

HTML代码是由标签构成的，标签名放到“< >”中。
大部分标签都是成对出现，例如：以<body>为开始标签，以</body>为结束标签。少数标签只有开始标签的被称为“单标签”。

一、HTML简介

1.HTML文件结构

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
    </body>
</html>

2.各标签意义

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、HTML标签介绍

1.标题标签

标题标签的默认样式是 自动加粗 的，字体一级标题最大，六级标题最小，每个标题标签独占一行；
标题标签是 块元素

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

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 HTML</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2> 
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

页面效果：
在这里插入图片描述

2.段落标签

段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；
它代表着一个自然段；
段落标签是 块元素。

<p></p>

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p>
        注意：doctype声明是不区分大小写的，用来告知web浏览器页面使用了那种HTML版本。
        对于中文网页需要使用 charset="utf-8" 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 charset="gbk" 。
        目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
    </p>

    <p>
        这是一个注意事项。
    </p>

    <p>
        这是一个注意事项。
    </p>
</body>

</html>

页面展示：
在这里插入图片描述

3. 换行标签

换行标签br的作用是，强制换行。br 是 单标签。

<br/>

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    第一行<br/>
	第二行<br/>
	第三行<br/>
</body>

</html>

页面展示：
在这里插入图片描述

4.hr标签

hr标签：给页面添加一个分割线
hr标签，可以添加样式

<hr>

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>
<style>
    div>hr {
        height: 20px;
        background-color: red;
    }
</style>

<body>
    第一行<br />
    <hr>
    <div>
        第二行<br />
        <hr>
    </div>
    第三行
</body>

</html>

页面展示：

在这里插入图片描述

5. span标签

<span></span>

span 用于对文档中的行内元素进行组合；
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span 应用样式，那么span 元素中的文本与其他文本不会任何视觉上的差异；
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式；
span 标签不同于p 标签是一个行内元素（不独占一行）

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <span>1234</span>
	<span>5678</span>
</body>

</html>

页面效果：
在这里插入图片描述

6.div标签

<div></div>

div 标签可以看出是一个盒子容器，这里面可以放别的标签
div 标签是一个块元素

页面效果：

在这里插入图片描述

如上图控制台所示（打开控制台的方式：F12）：div 标签里面可以包含 p 标签， p 标签，里面不可以放div 标签

7.img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src的路径分为：网上的图片路径和本地的图片路径

8.超链接标签

<a></a>

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>

</html>

作用：点击文字跳到链接的地方
a是行内元素
href：规定链接的目标URL
target：（链接窗口的打开方式）
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

9.注释标签

<!-- 这是一行注释 -->

10.空格

html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要特殊字符才能显示出空格效果。

html 的几种空格形式：

&nbsp;        
 
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了&nbsp;，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
 
&ensp;         
 
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其 占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
 
&emsp;        
 
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其 占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
 
&thinsp;         
 
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
 
&zwnj; 
 
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &#8204;
 
&zwj;
 
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &#8205; &zwj;）。

11.格式化标签

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <ins>下划线</ins>
    <u>下划线</u>
</body>

</html>

页面展示：

在这里插入图片描述

<strong> 和 <b> 都是加粗文本，但是<strong>的语义更加强列

12.sup上标和sub下标

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p>
        x<sup>2</sup>
    </p>
    <p>
        log<sub>2</sub>10
    </p>

</body>

</html>

页面展示：

在这里插入图片描述

13. pre预格式化标签

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <pre>
		我是一个 有样式
		的文字
	</pre>
</body>

</html>

页面展示：
在这里插入图片描述

可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

14.table 表格标签

table 标签基础内容

table标签包含 tr, tr 标签包含 td 和 th：

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域, 范围是比 th 大
tbody：表格得到主体区域

表格标签的属性可以用于设置边框大小等，但需要放到 table 标签中：

align：是表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)
border：表示边框，1表示有边框(数字越大, 边框越粗)，“” 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认为 2 像素
width / height：设置尺寸

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
    </table>
</body>

</html>

页面展示：

在这里插入图片描述

合并单元格

先确定跨行还是跨列，找好目标单元格(跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)，删除的多余的单元格。
跨行合并: rowspan=“n”
跨列合并: colspan=“n”

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <table width="100%" align="center" border="1">
        <tr align="center">
            <th colspan="6">
                财务周期表
            </th>
        </tr>
        <tr>
            <th colspan="3" align="left" style="border-right-style: hidden;">
                商品类型：JJJ
            </th>
            <th colspan="3" align="left" style="border-left-style: hidden;">
                商品编号：AAAA
            </th>
        </tr>
        <tr align="center">
            <th width="17%">
                成本
            </th>
            <th width="17%">
                损耗
            </th>
            <th width="17%">
                保全价值
            </th>
            <th width="17%">
                成本
            </th>
            <th width="17%">
                损耗
            </th>
            <th width="17%">
                保全价值
            </th>
        </tr>

        <tr align="center">
            <td width="17%">
                100
            </td>
            <td width="17%">
                233
            </td>
            <td width="17%">
                345
            </td>
            <td width="17%">
                467
            </td>
            <td width="17%">
                523
            </td>
            <td width="17%">
                64
            </td>
        </tr>
    </table>
</body>

</html>

页面展示：

在这里插入图片描述

15.列表标签

无序列表：ul，li

有序列表：ol，li

自定义列表：dl（总标签），dt（小标题），dd

注：元素之间是并列关系：

ul/ol中只能放li不能放其他标签
dl中只能放dt和dd
li中可以放其他标签

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <h2>无序列表</h2>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <h2>有序列表</h2>
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
    <h2>自定义列表</h2>
    <dl>
        <dt>111</dt>
        <dd>222</dd>
        <dd>333</dd>
        <dd>444</dd>
    </dl>
</body>

</html>

页面展示：

在这里插入图片描述

三、行内元素、行内块元素和块级元素

HTML 可以将元素分类方式分为 行内元素、块级元素和行内块元素。

1. display 属性

使用 display 属性能够将三者任意转换：

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

块级元素转行内元素示例

p 标签是块级元素：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p>第一段</p>
    <p>第二段</p>
</body>

</html>

上面代码的页面展示如图：
在这里插入图片描述
通过 display:inline; 将其转化为行内元素：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p style="display:inline">第一段</p>
    <p style="display:inline">第二段</p>
</body>

</html>

页面展示如图：
在这里插入图片描述

行内元素转块级元素示例

<span style="text-align: center;">这是行内元素</span>

此时的页面展示如下，因为 text-align 修饰的是块级元素：
在这里插入图片描述
当通过 display:block; 转化为块级元素时：

<span style="text-align: center;display: block;">这是行内元素</span>

页面展示如下：
在这里插入图片描述

text-indent/text-align 都是修饰块级元素

2.什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

特点：

         1.不会独占一行，它是自左向右排列，一行排满再换行

         2.行内元素的宽和高，默认是被内容撑开的

         3.对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效

         4.不会自动进行换行

常用行内元素：span em strong a i ......

行内块元素

特点：

         1.兼具块元素和行内元素特点

         2.不会独占一行，可自定义宽高

         3.默认排序方式为从左到右

块元素（block element）

特点：

        1.能够识别宽高

        2.margin 和 padding 的上下左右均对其有效

        3.独占一行

        4.多个块级元素标签写在一起，默认排序方式为从上至下

常用块元素：div h1-h6 p header footer nav......

拓展内容：

HTML5基础知识