redux示例教程_HTML缩进教程与示例

最新推荐文章于 2024-05-21 20:53:57 发布

cunjiu9486

最新推荐文章于 2024-05-21 20:53:57 发布

阅读量271

点赞数

文章标签： css html css3 html5 web

原文链接：https://www.poftut.com/html-indent-tutorial-with-examples/

版权

redux示例教程

While adding text to the HTML web pages style is important. There are a lot of different styling options about the text in HTML. Indentation is another useful styling where the starting position of the text can be a bit changed which will make it seem elegant. In this tutorial, we will learn styling types and ways in different ways with HTML Tags, CSS attributes and some tricks.

向HTML网页添加文本时，样式很重要。 HTML中的文本有很多不同的样式选项。缩进是另一种有用的样式，其中文本的起始位置可以稍作更改，使其看起来很雅致。在本教程中，我们将通过HTML标签，CSS属性和一些技巧以不同的方式学习样式类型和方式。

压痕类型 (Indentation Types)

Before starting identation we need to learn the indentation types. Even the indentation generally used as a first line of the text or paragraph we can also indent the whole block or paragraph of the text.

在开始识别之前，我们需要学习缩进类型。即使是通常用作文本或段落第一行的缩进，我们也可以缩进文本的整个块或段落。

块级缩进 (Block Level Indent)

The block-level indentation will indent the whole block text or paragraph. This can be useful where

块级缩进将缩进整个块文本或段落。这在以下情况下很有用

单行缩进(Single Line Indenting)

A single line will only indent a single line and other lines will be normal format event they are in the same block or paragraph.

一行将仅缩进一行，而其他行将在同一块或段落中以常规格式显示。

缩进非中断空格HTML标记(Indent with Non-Breaking Spaces HTML Tag)

HTML provides non-breaking spaces which will put a space into the text. We can use multiple of the non-breaking spaces in order to create indents like below.

HTML提供了不间断的空格，这些空格将在文本中放置一个空格。我们可以使用多个不间断空格来创建缩进，如下所示。

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Indent with Non-Breaking Spaces HTML Tag

用CSS缩进text-indent第一行(Indent with CSS text-indent The First Line)

CSS provides the text-indent attribute which can be used only indent the first line. We can use text-indent attribute in different ways CSS like inline or external CSS file. the text-indent attribute accepts the indent size as a pixel. In this example, we will indent the line as 80 pixels.

CSS提供了text-indent属性，该属性只能用于缩进第一行。我们可以通过内联或外部CSS文件之类CSS不同方式使用text-indent属性。 text-indent属性接受缩进大小作为像素。在此示例中，我们会将行缩进80像素。

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div style="text-indent:80px">

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

</div> 

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Indent with CSS text-indent The First Line

使用CSS margin-left属性缩进块文本(Indent with CSS margin-left Attribute The Block Text)

margin-left is a CSS attribute which is used to create a left margin for the given HTML element. We can use the margin-left attribute to create a margin which will look like an indent. In this example, we will create a margin of about 40px.

margin-left是一个CSS属性，用于为给定HTML元素创建左边距。我们可以使用margin-left属性来创建看起来像缩进的边距。在此示例中，我们将创建约40px的边距。

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div style="margin-left:60px">
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Indent with CSS margin-left Attribute The Block Text

使用Blockquote HTML标签缩进(Indent with Blockquote HTML Tag)

blockquote is an HTML tag which is mainly created to provide some quote text in a formatted way. But by using blockquote tag attributes we can indent single line or block.

blockquote是一个HTML标记，主要用于以格式化方式提供一些报价文本。但是通过使用blockquote标签属性，我们可以缩进单行或单行。

单行缩进 (Single Line Indent)

1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<blockquote> 
<p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p> 
</blockquote>the industry's standard dummy text ever since the 1500s, when an unknown printer took

块缩进(Block Indent)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<blockquote> 
<p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p> 
</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

使用预格式化HTML标记缩进(Indent with Preformatted HTML Tag)

HTML provides the preformatted tag where the content of the preformatted text will show the same as its provided. This will give us the ability to change and provide spaces for indent which will not changed by the HTML.

HTML提供了预先格式化的标记，其中预先格式化的文本的内容将与提供的内容相同。这将使我们能够更改并提供缩进的空间，而缩进不会被HTML更改。

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<pre> It has survived not only five centuries, but also the leap into electronic 
typesetting, remaining essentially unchanged.
</pre>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.