4-1 html常用标签标题段落换行文本分区

最新推荐文章于 2024-08-05 22:35:13 发布

邢邢好吧（前端学习中）

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量526

点赞数 13

分类专栏：前端学习 # html学习文章标签： html html5 前端

本文链接：https://blog.csdn.net/weixin_61897906/article/details/137925867

版权

前端学习同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html学习

11 篇文章 0 订阅

订阅专栏

跟学：B站黑马程序员pink老师

之前发过，但是太多了不好阅读，因此拆分成几篇

4.html常用标签

4.1 标签语义

标签语义，即标签含义，即标签是用来干什么的

可以让页面结构更加清晰。

4.2 标题标签<h1>-----<h6>

1. 概念：

<h1>-----<h6>: 双标签；可以当标题来使用；6个等级的标签

h即head的缩写，意为头部、标题

<h1> 我是一级标签 </h1>

2.作用：

1. 加了标题的文字会变大变粗

2.每个标题独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邢邢好吧</title>
</head>
<body>
    <h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
</body>
</html>

4.3段落和换行标签

1.段落标签：分段

<p>我是一个段落标签</p>

特点：

1. 文本会根据窗口大小自动换行

2.段落之间保有空隙，会加垂直间距

2.换行标签：换行

<br />

特点：

1.单标签

2.只是简单的开新行，另起一行，和段落不一样，段落会加垂直间距

4.4 文本格式化标签

标签语义：突出重要性，比普通文字更加重要

1.加粗：

<strong></strong> 推荐使用，语义更加强烈

<b></b>

2.斜体：

<em></em> 推荐使用，语义更加强烈

<i></i>

3.删除线：

<del></del> 推荐使用，语义更加强烈

<s></s>

4.下划线:

<ins></ins> 推荐使用，语义更加强烈

<u></u>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    
    我是<strong>加粗的文字</strong> <br />
    我是<b>加粗的文字</b> <br />
    我是<em>斜体的文字</em> <br />
    我是<i>斜体的文字</i> <br />
    我是<del>有删除线的文字</del> <br />
    我是<s>有删除线的文字</s> <br />
    我是<ins>有下划线的文字</ins> <br />
    我是<u>有下划线的文字</u>
    
</body>
</html>

4.5 <div> 和<span> 标签

<div> </div>和<span></span> 是没有语义的，只是一个用来装东西的盒子，用来布局

1. <div></div> 分区

用来布局，一行只能有一个<div>标签，大盒子

即使在</div>后面写，也会显示到下一行去

2. <span></span> 跨距

用来布局，一行可以有多个<span>标签，小盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>
<body>
    <div>我是div标签1我一个人单独占一行</div>123
    <div>我是div标签2我一个人单独占一行</div>456
    <div>我是div标签3我一个人单独占一行</div>789<br />

    <span>我是span标签1</span>
    <span>我是span标签2</span>
    <span>我是span标签3</span>
    
</body>
</html>