Web基础：HTML的基础标签（一）

最新推荐文章于 2024-04-22 14:22:36 发布

孤心_AUTO

最新推荐文章于 2024-04-22 14:22:36 发布

阅读量1.3k

点赞数 5

分类专栏： #web前端基础文章标签： html 前端 css javascript

本文链接：https://blog.csdn.net/m0_73058235/article/details/128452717

版权

#web前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

上篇文章已经讲述了HTML中的基本构架，这篇文章带大家看一下在HTML中的部分基础标签

一.HTML的标题标签：

在HTML中，文章标题标签一共有六个级别，从<h1></h1>到<h6></h6>分为六个级别，效果逐级减少，且每个标题都是独占一行空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>⼀号标题</h1> 
    <h2>⼆号标题</h2> 
    <h3>三号标题</h3> 
    <h4>四号标题</h4> 
    <h5>五号标题</h5>
    <h6>六号标题</h6>
</body>
</html>

注：在HTML中没有<h7></h7>标签

我们来执行一下上述代码

二.HTML中的空格与换行:

1.空格：

在HTML中，我们使用；表示一个空格，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello&nbsp;world
</body>
</html>

扩展：在HTML中，开发者为我们提供了5种空格，它们拥有不同的宽度，

非断行空格 ，是常规空格的宽度，可运行于所有主流浏览器。

其他几种空格&ensp; &emsp;   &zwnj;&zwj;，在不同浏览器中宽度各异。

称为不换行空格，它是最常见和我们使用最多的空格，它是按下space键产生的空格。

在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。

要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

&ensp;

它叫“半角空格”根据定义，占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp;

它叫“全角空格”，占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

它叫窄空格，占据的宽度比较小。它是em之六分之一宽。

&zwnj;

它叫零宽不连字，简称“ZWNJ”是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &zwnj;

&zwj;

它叫零宽连字，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &zwj; &zwj;）。

2.换行：

在HTML中我们使用<br/>表示换行，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello<br/>world
</body>
</html>

我们运行上述代码

到这里有的小伙伴会问，为什么HTML中的换行标签是<br/>而不是<br>*****<br/>，这就涉及到HTML的单标签与双标签。

在HTML基础中，单标签就是由一个标签组成的，例如<br>、<hr>、<img>、<input>、<param>、<meta>、<link>。

双标签则是由“开始标签”和“结束标签”两部分构成（这两部分是相同的）
例如<html></html><head>、<title></title>、<body></body>等。

三.HTML的段落：

在HTML中，HTML的段落是通过<p></p>标签定义的，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>我是一个段落哦</p>
</body>
</html>

默认情况下，一个段落中的文字会依据浏览器的大小自动换行，会有段前与段后。

作用：（1）虽然p标签的文字显示外观来看，和普通文字没有区别，但是它独占一行；

（2）标签语义化，便于定位；

【标签语义化】：在合适的地方显示合理的标签，搜索引擎也偏好于标签语义化做的更好的页面。