排版标签(Typesetting label)

最新推荐文章于 2024-03-06 11:06:39 发布

Hudie.

最新推荐文章于 2024-03-06 11:06:39 发布

阅读量636

点赞数

分类专栏： 3.前端技术专题文章标签：排版标签

本文链接：https://blog.csdn.net/weixin_43691058/article/details/91957526

版权

3.前端技术专题专栏收录该内容

49 篇文章 2 订阅

订阅专栏

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。排版标签分为：

标题标签
段落标签
水平线标签(单)
换行标签(单)
div span标签

(1)标题标签(head):

基本语法格式：<hn>标题文本</hn>

标签语义：作为标题使用，并且依据重要性递减。
html提供了6个等级的标题<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
注意：h1标签因为最重要，尽量少用，一般是给logo用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1> 这是1级标题</h1>
   <h2> 这是2级标题</h2>
   <h3> 这是3级标题</h3>
   <h4> 这是4级标题</h4>
   <h5> 这是5级标题</h5>
   <h6> 这是6级标题</h6>
   <h7> 7级标题无变化</h7>
</body>
</html>

标题标签效果展示：
在这里插入图片描述
(2)段落标签(paragraph)：
基本语法格式:<p>文本内容</p>
标签语义:像写文章一样,把网页内容分为若干个段落,将文字有条理的显示出来。
默认情况写，文本在一个段落中会根据浏览器窗口的大小自动换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

   <h2> 网易云热评</h2>
   <p>每当有人问起，为什么我不恋爱的时候，我都以麻烦为由搪塞过去。又有人开始问我到底喜欢过谁没有，我也轻描淡写地表示否定。无数的朋友告诉我，或许是你还没碰到过真正喜欢的人吧，我却没法开口告诉他们，其实我曾经碰到过，碰得太早，以至于我没来得及分清，也没来得及弄明白。</p>
   <p>这首歌是剑三的玩家故事，道姑是游戏里的一个门派职业体型。道姑喜欢上了一个道长，可是后来在别人的喜宴上，道姑发现道长早有情缘，他的情缘是个秀秀。秀秀问道长“那是谁”，道长答“我的一个道姑朋友。</p>
</body>

段落标签效果展示：
在这里插入图片描述
(3)水平线标签(horizontal)：
标签格式：<hr />
标签语义：创建横跨网页水平线的标记。
水平线标签效果展示：

(4)换行标签(break)：
标签格式：

标签语义：相当于在word中敲回车键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

   <h3> 问剑江湖歌词</h3>
   江湖浪荡醉梦一场　　<br />
   叫天也疏狂地也荒唐　　<br />
   哪管今朝豪侠剑骨凉　　<br />
   平生难说侠骨忠肠　　<br />
   叫爱也飞扬恨也匆忙　　<br />
   来日放肆逍遥也无妨　　<br />
</body>
</html>

换行标签效果展示：
在这里插入图片描述
(5)div和span标签：
语法格式：<div>这是头部</div> <span>今日价格</span>
单词解释：division/分割，分区；span/跨度，范围。
注意：这两个布局标签没有语义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

   <h3> 问剑江湖歌词</h3>
   <hr>
   江湖浪荡醉梦一场　　<br />
   叫天也疏狂地也荒唐　　<br />
   哪管今朝豪侠剑骨凉　　<br />
   平生难说侠骨忠肠　　<br />
   叫爱也飞扬恨也匆忙　　<br />
   来日放肆逍遥也无妨　　<br />
   <hr>
   <div>这是一个布局标签div</div>
   <span>这是一个span标签</span>
</body>
</html>