html tab 图标,HTML Tab Code

HTML Tab Code

This page contains HTML code for adding a horizontal tab within the text of your website or blog.

There are several ways to approach this. Seeing as HTML hasn't had a "tab" element since HTML 3, and browser support for this element was virtually non-existant anyway, we can't use the "tab" element.

Therefore, we are reliant upon using either some other HTML element, Cascading Style Sheets (CSS), or a special character to create a horizontal tab.

Using CSS

Using CSS for your horizontal tabs allows you more control over how your tabs appear to your users. In particular, the margin-left and padding-left can acheive a "tabbed" effect.

Using Margins

Here's an example of using margin-left to create a horizontal tab.

Source CodeResult

No margin

Margin of 2em

Margin of 3em

Margin of 4em

No margin

Margin of 2em

Margin of 3em

Margin of 4em

Using Padding

Here's an example of using padding-left to create a horizontal tab.

Source CodeResult

No padding

Padding of 2em

Padding of 3em

Padding of 4em

No padding

Padding of 2em

Padding of 3em

Padding of 4em

Using Special Characters

Here are examples of using special characters to create a tabbed effect.

HTML Entity Number

Here's how you use the HTML entity number to display the various spaces.

Source CodeResult

No space

 Thin space

 En space

 Em space

No space

Thin space

En space

Em space

HTML Entity Name

This example uses the entity names to display the various spaces. As you can see, the end result is the same.

Source CodeResult

No space

 Thin space

 En space

 Em space

No space

Thin space

En space

Em space

Preformatted Content

You can use the

 tag to display content that is preformatted. This means that the content will appear in the browser just the way you entered it.

To demonstrate this, here's an example. In this example, I simply added spaces using my keyboard's spacebar and tabs using my keyboard's tab key. Because these are all enclosed inside

 tags, the browser displays it exactly as it was entered.

Note that browsers usually display

 text using a fixed-width font (such as Courier), but you can use CSS to change this as you see fit.

Source CodeResult

No space

One space

Six spaces

One tab

Two tabs

No space

One space

Six spaces

One tab

Two tabs

Blockquotes

If you are presenting a quote from another source, you should use the

tag. Although not technically a "tab", browsers usually indent content that's enclosed inside the

element, thus resulting in a "tabbed" appearance.

Source CodeResult

Here is some food for thought:

If our experience is limited to a small part of a larger reality, it is only reasonable to assume that beyond the limit of our possible knowing there may well exist a host of phenomena, interactions, relationships, and ordered happenings upon which our reality and existence profoundly depends, but of which we cannot directly perceive.

Tom Campbell, My Big TOE

Here is some food for thought:

If our experience is limited to a small part of a larger reality, it is only reasonable to assume that beyond the limit of our possible knowing there may well exist a host of phenomena, interactions, relationships, and ordered happenings upon which our reality and existence profoundly depends, but of which we cannot directly perceive.

Tom Campbell, My Big TOE

Note that you should only use the

tag for its intended purpose (to cite a quotation). If you are not citing a quotation, you should use one of the other methods of creating a horizontal tab.