从零开始web前端（常用html标签）

千鹤浅鹤

已于 2022-04-28 22:05:32 修改

阅读量1.5k

点赞数

分类专栏：前端入门文章标签：前端

于 2022-04-28 20:45:24 首次发布

本文链接：https://blog.csdn.net/wangfengqichen/article/details/124459880

版权

前端入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

软件：vscode 技术：html

学习时所得，如有错误请指正。（框架下编写不需要<body><html>等标签）

总体介绍：大概来说，用户能看到的部分基本为前端所展示的内容，而html里又由一个个标签构成，可以把标签理解成展示内容的功能工具，举例来说，有专门播放音乐的标签，有专门换行的标签，专门画表格的标签等等。

<div> </div>

块标记，通常其后被默认换行，一般用于修饰的添加，无具体代表意思。一般占用一整矩形块。如果对div整体添加修饰，相当于整个矩形块添加修饰。

示例代码截图如下：

结果如下：

注意：标签中代码的所有默认所有换行行为都视为只空一个格，同时代码中的空格行为连着如果有多个都视为一个。（空格加换行也是视为一个空格）。

<span> </span>

内联标记，长度随内部元素长度的范围扩大而扩大，完整包住内部元素。长度到浏览器此时打开的的长度后自动换行。同样为矩形块。对span添加修饰相当于对矩形块添加修饰。

示例代码截图如下：

结果如下：

蓝色和绿色框体为当时span标签管辖范围。注意：相连的两个span连接之间如果都存在空格或换行符(包括"测试三"文字单独成段的那种前后换行)，两个span之间会出现一个空格，空格的被管辖范围为前一个span，如果相邻一边有空格或换行根据有的一边管辖，如果形如上例span标签之间文字紧密相连，就无空格出现。第一个span最前，最后一个span最后无影响，都是紧密相连。

如下（第一个大“四”后有空格，第二个小“测”前后空格）：

<h1> </h1>、<h2> </h2> ~~~~~~<h6></h6>

标题标签。固定文字大小的六个标签，格式同div相似，只不过字体大小从h1到h6逐级减少，一般此标签用作文章标题，次级标题等。占位同样与div一样占一行的矩形块。

示例代码截图如下：

结果如下：

注意：标题标签之间会默认存在间隙，而且默认间隙是下间隙，也就是说测试1，测试2之间的留白是由测试1产生的。取消留白只需把margin（框体外边距）设置成0即可。即：

<p> </p>

段落标签。与div标签基本一致，不过习惯上一般适用于文字分段，只专注于纯文字部分，一般不涉及布局框架等。同div一样，默认结尾换行，所以涉及分行的段一般每一行都有p标签包裹起来。

示例代码截图如下：

结果如下：

注意：由上图可以清楚的看出，段落与段落之间都存在一段留白，这也是p标签与div标签明显的区别所在，p标签自带margin（框体外边距，主要为margin-top和margin-bottom），而实际留白的大小取决于margin大的一方。

如下：

<br>

单标签，换行标签，解决上述标签出现的不能换行的问题，也可以写成<br />，标签中一般不出现修饰标签的风格。

示例代码截图如下：

结果如下：

<img src="" alt="">

单标签，负责插入图片并显示，其中src可以为绝对网址超链接（例如：https://www.runoob.com/images/compatible_safari.gif，这种带https类型），也可以为此文件的相对位置，倒到文件上一级为“../”，例如“../../../../assets/bar/discuss_back.png”，其他依次找到文件即可。alt里面内容为，如果图片加载失败，会出现一个固定的图标：破碎的图片，加上你输入的alt里面的部分。

示例代码截图如下：