统计数字,空白符,制表符_为什么您应该在HTML中使用制表符空间而不是多个非空白空间（nbsp）...

最新推荐文章于 2023-09-11 22:28:45 发布

cumichun6193

最新推荐文章于 2023-09-11 22:28:45 发布

阅读量183

点赞数

文章标签： java python html css js ViewUI

原文链接：https://www.freecodecamp.org/news/tab-space-instead-of-multiple-non-breaking-spaces/

版权

统计数字,空白符,制表符

There are a number of ways to insert spaces in HTML. The easiest way is by simply adding spaces or multiple   character entities before and after the target text. Of course, that isn't the DRYest method.

有多种方法可以在HTML中插入空格。最简单的方法是简单地添加空格或多个  目标文本前后的字符实体。当然，这不是DRYest方法。

Instead, to keep your code easy to maintain and reduce repetition, you can use the  and <pre> elements, along with a bit of CSS:

相反，为了使代码易于维护并减少重复，可以使用和<pre>元素以及一些CSS：

使用``元素 (Using the `` element)

An example of how to use  to control the spacing between text can be seen below:

下面是一个如何使用来控制文本之间的间距的示例：

<p>Hello my name is <span class="tab"> James</p>

Note that  tags are self closing, meaning they do not need a />.

请注意， 标记是自动关闭的，这意味着它们不需要/> 。

Then you can use an external or internal styling to give the class tab some properties. For example, the following code will work in an external stylesheet:

然后，您可以使用外部或内部样式为class tab一些属性。例如，以下代码将在外部样式表中运行：

.tab {
  padding-left: 2px;
}

You can also give the  some inline-style properties, as shown below.

您还可以为一些内联样式的属性，如下所示。

Alternatively, you can give  the same properties as inline styles as shown below:

另外，您可以赋予与内联样式相同的属性，如下所示：

<p>Hello my name is <span style="padding-left: 2px;"> James</p>

使用`<pre>`元素 (Using the `<pre>` element)

For an easy way to add a tab space, simply wrap your text in <pre> tags. For example:

为了方便地添加制表符空间，只需将文本包装在<pre>标记中。例如：

The <pre> element simply represents preformated text. In other words, any spaces or tabs in the inner text will be rendered. For example:

<pre>元素仅表示预格式化的文本。换句话说，将显示内部文本中的任何空格或制表符。例如：

<pre>
function greeting() {
  console.log('Hello world!');
}
</pre>

Just keep in mind that any actual tab characters (not a bunch of spaces that look like tabs), that you use with this method might appear ridiculously wide. This is because the tab-size property for the <pre> element is set to 8 spaces by default.

请记住，此方法使用的任何实际的制表符(不是一堆看起来像制表符的空格)可能看起来都非常可笑。这是因为<pre>元素的tab-size属性默认设置为8个空格。

You can change this with a bit of CSS:

您可以使用一些CSS进行更改：

pre {
  tab-width: 2;
}

有关HTML的更多信息： (More info about HTML:)

HyperText Markup Language (HTML) is a markup language used to construct online documents and is the foundation of most websites today.

超文本标记语言(HTML)是用于构造在线文档的标记语言，并且是当今大多数网站的基础。

A markup language like HTML allows us to

HTML之类的标记语言使我们能够

create links to other documents,
创建指向其他文档的链接，
structure the content in our document, and
整理文档中的内容，并
ascribe context and meaning to the content of our document.
将上下文和含义赋予我们的文档内容。

An HTML document has two aspects to it. It contains structured information (Markup), and text-links (HyperText) to other documents.

HTML文档有两个方面。它包含结构化信息(标记)和指向其他文档的文本链接(超文本)。

We structure our pages using HTML elements. They are constructs of the language providing structure and meaning in our document for the browser and the element links to other documents across the internet.

我们使用HTML元素构造页面。它们是语言的结构，在浏览器的文档中提供了结构和含义，并且该元素链接了整个互联网上的其他文档。

The internet was originally created to store and present static (unchanging) documents. The aspects of HTML discussed above were seen perfectly in these documents which lacked all design and styling. They presented structured information that contained links to other documents.

互联网最初是用来存储和呈现静态(不变)文档的。在缺少所有设计和样式的这些文档中，可以完美地看到上面讨论HTML方面。他们介绍了结构化信息，其中包含指向其他文档的链接。

HTML5 is the latest version, or specification, of HTML. The World Wide Web Consortium (W3C) is the organization that develops the standards for the World Wide Web, including those for HTML. As web pages and web apps grow more complex, W3C updates HTML’s standards.

HTML5是HTML的最新版本或规范。万维网联盟(W3C)是开发万维网标准(包括HTML标准)的组织。随着网页和Web应用程序变得越来越复杂，W3C更新了HTML的标准。

HTML5 introduces a whole bunch of semantic elements. While HTML helps provide meaning to our document, it wasn’t until the introduction of semantic elements with HTML5 that its potential was fully known.

HTML5引入了很多语义元素。尽管HTML有助于为我们的文档提供含义，但直到HTML5引入语义元素后，它的潜力才被人们充分认识。

HTML文档的简单示例 (A simple example of an HTML Document)

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

!DOCTYPE html: Defines this document to be HTML5

！DOCTYPE html：将此文档定义为HTML5

html: The root element of an HTML page

html：HTML页面的根元素

head: The element contains meta information about the document

head：元素包含有关文档的元信息

title: The element specifies a title for the document

title：元素指定文档的标题

body: The element contains the visible page content

正文：该元素包含可见的页面内容

h1: The element defines a large heading

h1：元素定义大标题

p: The element defines a paragraph

p：元素定义一个段落

HTML版本 (HTML Versions)

Since the early days of the web, there have been many versions of HTML

自网络初期以来，已经有许多版本HTML

HTML1991
HTML1991
HTML 2.01995
HTML 2.01995
HTML 3.21997
HTML 3.21997
HTML 4.011999X
HTML 4.011999X
HTML2000
HTML2000
HTML52014
HTML52014

其他资源 (Other Resources)

翻译自: https://www.freecodecamp.org/news/tab-space-instead-of-multiple-non-breaking-spaces/

统计数字,空白符,制表符

cumichun6193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
统计数字,空白符,制表符_为什么您应该在HTML中使用制表符空间而不是多个非空白空间（nbsp）...

统计数字,空白符,制表符There are a number of ways to insert spaces in HTML. The easiest way is by simply adding spaces or multiple &nbsp; character entities before and after the target text. Of course, that ...
复制链接

扫一扫