详细整理！！html5常用标签

于 2024-09-30 21:15:00 发布
阅读量671 收藏 7
点赞数 12
分类专栏： 前端基础 文章标签： html5 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58680865/article/details/142651677
版权

文章目录

前言

在学习 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基础知识

YD_1989
关注
专栏目录
HTML5 标签大全笔记，用到的时候翻一下，百度都省了！
龙叔的博客
08-24 2万+
HTML标签大全，前端方向必备
HTML5知识点思维导图(手工整理）
10-16
1. **基本结构与标签**：HTML5文档的基础是`<!DOCTYPE html>`声明，它告诉浏览器使用HTML5规范解析文档。`<html>`标签定义了整个文档的根元素，而`<head>`和`<body>`分别代表元数据和实际内容。 2. **标题标签**：`...
HTML常用标签超详细整理
热门推荐
shengyin714959的博客
05-27 2万+
HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术 1.2 HTML概念 HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。 【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。
HTML常用标签--整理篇
程序员小章的博客
09-13 1万+
HTML常用标签 文章目录HTML常用标签文本标签HTML格式化标签HTML图像标签HTML表格标签HTML表单标签 文本标签 常⽤文本标签如下： <hn>...</hn>标题标签，其中n为1–6的值。 <i>...</i>斜体 ... 强调斜体 <b>...</b> 加粗 <strong>...</strong> 强调加粗 <cite></cite&
常用HTML标签及其属性-整理
qq_51593012的博客
07-12 1742
HTML不是一种编程语言，而是一种标记语言，是用来描述网页的一种语言，各种类型网页开发的基础型语言；HTML使用标签描述网页中图片、文本、音乐、视频、超链接等；
html整理，常用标签
chen983234416的博客
11-14 6287
  &lt;!DOCTYPE html&gt;    //指定文档的类型，为html类型 &lt;html&gt;        //开始标签，对应结束标签 &lt;head&gt;     //html必备标签，表示头部 &lt;title&gt;     //设置网页标题，最后显示在浏览器的头部 &lt;/title&gt; &lt;meta charset="utf-8" /&amp
HTML5 head头部 meta标签属性整理
Kris的博客
01-03 1535
移动前端开发中添加一些专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来 meta是html语言head区的一个辅助性标签。meta标签的作用有：搜索引擎优化（seo），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等等等！ meta标签的组成：共有两个属性，它们分别是name属性和h...
HTML5 常用 标签 锚 列表 用法
Designer 小郑的技术博客
01-22 8003
寒假已经过去15天了，html、css、javascript、vue都已经匆匆过了一遍。再过两天就要过年了，趁过年前把这些刚刚学过的知识整理一下，然后试着做几个具体项目练练手。本文是第一篇——html。将不定期更新，把接触到的内容及时填补到本文中。 IDE推荐使用HBuilder X，其次是VScode。 HTML5 总结 本文 CSS3 总结点击这里 首先HTML是超文本标记语言（简...
HTML5新增的9种常用的页面标签
让优秀成为一种习惯
12-04 4978
主要介绍HTML5新增的9种常用的页面标签以及相关的应用代码.
ECharts常用通用标签整理
心寒的博客
11-14 1万+
ECharts title配置标题 var option = { //标题 title : { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值t...
初识HTML（二）VsCode编辑器，常用标签
Simple子夜
03-13 4898
文章目录VS Code编辑器元素的概念HTML标题HTML段落HTML超链接HTML图片插入常用字体样式标签标签嵌套 HTML 编辑器推荐 可以使用专业的编辑器来编辑 HTML，其界面以及代码可观读都很高，为大家推荐以下两种常用的编辑器： VS Code：https://code.visualstudio.com/ Sublime Text：https://code.visualstudio.com/ 根据官网提示安装后，我们将使用该VsCode对html进行编辑 VS Code编辑器 Visual
html5标签整理
06-28
本文将详细介绍HTML5中常用的标签及其用途。 #### 二、按字母顺序排列的新标签 在HTML5中，新增了一些标签以适应现代网页的需求，这些标签包括： - `<article>`：用于表示文档、页面或应用中的独立内容块。 - `...
使用Dapper.net+c#+javascript+html5写一个问题记录的页面
软件行业技术文化交流。
09-27 571
以上步骤和代码示例展示了如何构建一个使用Dapper.net、C#、JavaScript和HTML5的问题记录小系统。这只是一个基础示例，实际项目中你可能需要添加更多的功能和错误处理逻辑。希望这能为你的项目开发提供一个良好的起点。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 87
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 654
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1281
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 671
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YD_1989

你的鼓励将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值