HTML——排版标签

最新推荐文章于 2024-04-03 20:52:37 发布

Alyson_jm

最新推荐文章于 2024-04-03 20:52:37 发布

阅读量486

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Alyson_jm/article/details/113874171

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的标题标签、段落标签、水平线、换行、div与span的使用，以及内容居中和预定义格式化标签。通过示例展示了各标签的语法和效果，帮助理解HTML元素的嵌套关系及其在网页布局中的作用。

摘要由CSDN通过智能技术生成

文章目录

标题标签

<h1>至<h6>是标题标签，由1-6标题逐渐降级。

属性

align 对齐方式
- left：居左对齐
- center：居中对齐
- right：居右对齐

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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的标签被分为文本级标签和容器级标签,

文本级标签只能存放文字、图片、表单等元素（a 标签里不能放a和input）。

p,span,a,b,i,u,em

容器级标签可以放任何东西。

div,h系列,li,dt,dd

1、水平线标签

<hr />

在视觉上用水平线将文档分隔开来

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    段落1
    <hr />   
    段落2
</body>
</html>

效果

段落1

段落2

属性

属性名	说明	值
align	设置线条放置位置	left,right,center
size	设置线条粗细，单位为像素	默认值为2
width	设置线条长度	绝对值（500）或者相对值（70%）
color	线条颜色
noshade	不要阴影，设定线条为平面显示	没有这个属性则表明线条具阴影或立体

换行标签

<br />

给某段文本强制换行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    落霞与孤鹜齐飞<br />秋水共长天一色
</body>
</html>

效果
落霞与孤鹜齐飞
秋水共长天一色

因为HTML 的空白折叠现象(HTML 的文字之间，如果有空格、换行或Tab都将被折叠成一个空格显示),我们只能使用<br />来强制换行。

div 与 span

div:把标签的内容分隔为独立的区块,单独占据一行
span:把标签的内容分隔为独立的区块,不换行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>div 块1</div>
    <div>div 块2</div>
    <span>span 块1</span>
    <span>span 块2</span>
</body>
</html>

效果

div 块1

div 块2

span 块1 span 块2

区别

标签	是否换行	语义区别
div
span

div 换行，span 不换行
div 是一个容器级标签，里面什么都可以放。span 是一个文本级标签，里面只能放文字、图片、表单元素。

内容居中标签

<center></center>

center 标签里面的内容，都会居于浏览器的中间。
到了HTML5里面，center标签不建议使用，建议使用css布局来实现。

预定义（格式化）标签

<pre></pre>

保留标签内部的所有空白字符（空格，换行符），原封不动的输出结果（告诉浏览器不要忽略空格和空行）

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        落霞与孤鹜齐飞
        秋水共长天一色
    </pre>
</body>
</html>

效果

    落霞与孤鹜齐飞
    秋水共长天一色

HTML 中元素的嵌套关系

块元素可以包含内联元素或者块元素，但内联元素不能包含块元素，只能包含其它内联元素
块级元素不能放在P里面
有几个特殊的块元素只能包含内联元素，不能包含块元素。

h1,h2,h3,h4,h5,h6,p,dt

块元素与块元素并列，内联元素与内联元素并列

Alyson_jm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录