How to represent space characters in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to represent space characters in html

醉折花枝作酒筹

Jun 02, 2021 pm 04:06 PM

htmlspace character

How to represent space characters: 1. " ", represents a non-breaking space; 2. " ", represents a half-width space; 3. " ", represents a full-width space; 4. "&thinsp ;", represents narrow spaces; 5. " ", " ", etc., represents ordinary spaces.

How to represent space characters in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Normally, we use the space bar to type multiple spaces. When writing code, the spaces typed by the space bar, Tab key and Enter key will be automatically recognized by HTML (Hypertext Markup Language). neglect. HTML treats such keys as whitespace characters and displays them as a single whitespace interval. Although CSS provides various styles of spacing and indentation, there are also tools in HTML that allow you to define spacing yourself.

1. Use " " for non-breaking spaces

How to represent space characters in html

Generally speaking, no matter how many times you press the space bar, HTML will also only show a white space between words. When you need to insert multiple spaces, please enter the or code. [1] They are called "space placeholders". If you enter a few, they will display a few spaces on the page. It is called a non-breaking space because it does not produce a newline character. If you abuse this spacing, the browser may not be able to insert line breaks in a neat and readable way.

2. Use " " for half-width spaces to represent

half-width spaces. The full name is En Space. en is the measurement unit of typography, which is the width of half. By definition, it is equivalent to half the font size, for example, 5px in a 10px font. Characteristics: the width it occupies is exactly 1/2 the Chinese width, and is basically not affected by the font.

— “en space” is named according to the measurement unit of typography. The width is the width of two ordinary spaces.

3. Full-width space Use " " to represent

"full-width space", the full name is Em Space, em is the measurement unit of typography, which is equivalent to the currently specified number of points. For example, 1 em in a 16px font is 16px. This space also inherits the consistent characteristics of the space family: it is transparent. This space also has a very stable characteristic, that is, the width it occupies is exactly 1 Chinese width, and it is basically not affected by the font.

— “em space” is about the width of four ordinary spaces

4. Use “ for narrow spaces” ” means

narrow space, the full name is Thin Space. The width occupied is relatively small. It is one-sixth the width.

5. Ordinary spaces

The browser will also parse the following characters as spaces: spaces ( ), Epitope ( ), line break () and (　) and so on.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>测试文本  测试文本</p>
		<p>测试文本&ensp;&ensp;测试文本</p>
		<p>测试文本&emsp;&emsp;测试文本</p>
		<p>测试文本&thinsp;&thinsp;测试文本</p>
		<p>测试文本&#x0020;&#x0020;测试文本</p>
		<p>测试文本&#x0009;&#x0009;测试文本</p>
		<p>测试文本&#x000A;&#x000A;测试文本</p>
		<p>测试文本&#12288;&#12288;测试文本</p>
	</body>
</html>

How to represent space characters in html

Recommended learning:html video tutorial

The above is the detailed content of How to represent space characters in html. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

See all articles