HTML 코드의 공백과 빈 줄에 대한 간략한 설명

HTML 코드의 모든 연속 공백이나 빈 줄(줄 바꿈)은 단일 공백으로 표시됩니다.

예시 1: (텍스트 내용의 연속 공백)

코드

<p>这段文本中，输入连续的空格          大概输入了十个。</p>

표시 효과: "사각형"과 "큰" 사이에 공백이 있어 표시됩니다. 하나의 공간으로.

这段文本中，输入连续的空格 大概输入了十个。

예 2: (코드 사이의 연속 공백)

Code

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

표시 효과: 두 범위 요소 사이의 연속 공백이 "부호"로 표시됩니다. 사이에는 공백이 하나만 있습니다. " 그리고 ".

span是一个行内标签 和前面的span元素之间隔了很多个空格

위의 두 예는 HTML 코드에서 연속된 공백이 표시될 때 하나의 공백으로 표시되고 나머지 추가 공백은 제거되거나 무시된다는 것을 증명합니다.

단락 텍스트는 실제로 HTML 코드의 일부이지만 p 태그 내부에 있고, 예제 2의 공백은 두 개의 span 태그 사이에 있습니다.

공백을 이해하고 이제 빈 줄을 보세요. 같은 내용입니다

예 3: (텍스트 내용의 빈 줄)

코드

<p>这段文本中，输入连续的空行  
  
  
  
  
  
大概输入了五行。</p>

표시 효과: 보시다시피 텍스트 코드의 빈 5줄은 공백으로만 표시됩니다.

这段文本中，输入连续的空行 大概输入了五行。

예 4: (요소/태그 사이의 빈 줄), 예 2의 공백을 빈 줄로 바꾸면 됩니다. 표시 효과는 예 2와 동일하며 여러 개의 빈 줄만 표시됩니다. 공간으로.

<span>span是一个行内标签</span>  
  
  
  
  
  
<span>和前面的span元素之间隔了很多空行</span>

span是一个行内标签 和前面的span元素之间隔了很多空行

증명: HTML 코드의 모든 연속 공백이나 빈 줄(줄 바꿈)이 하나의 공백으로 표시됩니다.

이 경우, 코드에서 연속된 공백이나 빈 줄의 결과도 연속된 공백이나 빈 줄이 되도록 두 문자 사이의 간격을 확장하려면 어떻게 해야 합니까? 실제로는 매우 간단합니다.

방법 1: 공백이든 빈 줄이든 미리 형식이 지정된 태그

를 사용할 수 있습니다. </p><pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">  
这是  
预格式文本。  
它保留了      空格  
和换行。  

표시 효과

这是  
预格式文本。  
它保留了      空格  
和换行。

방법 2: 공백과 줄 대신 공백 엔터티 문자를 사용할 수 있습니다. 나누기
태그는 빈 줄을 대체합니다. 이 방법은 우리가 원하는 표시 효과를 얻을 수 있지만   및
에는 의미가 없기 때문에 검색 엔진에 가장 친숙하지 않습니다. 따라서 가능한 한 적게 사용하는 것이 좋습니다. 또 한 가지 주의할 점은  는 소문자여야 하며 끝에 있는 세미콜론을 생략할 수 없다는 것입니다.

방법 3: (공백에 적합) 전각 공백 사용

전각 공백은 한자로 해석되므로 HTML 구분 기호로 해석되지 않습니다. .실제 공백 수가 표시됩니다.

질문: 전자 입력 방법을 사용하는 방법은 무엇입니까?

소고(Sogou) 입력 방식을 예로 들어보겠습니다. 우리는 일반적으로 반각 입력을 사용합니다. 상태 표시줄에 달 기호가 있으면 태양 기호를 사용하고 있다는 의미입니다. , 이는 반각 입력을 사용하고 있음을 의미합니다. 전각 입력입니다. 아이콘을 클릭하거나 단축키 Shift+Space를 눌러 전체 너비와 절반 너비 사이를 전환할 수 있습니다.

반각 입력(달)                                                                                                >             속성은 문자(단어) 사이의 표준 간격을 변경할 수 있습니다. 우리는 영어에서 두 단어가 공백으로 구분되어 있다는 것을 알고 있으므로, 단어 간격이 단어 사이의 간격 너비를 변경(늘리거나 단축)하는 것을 시각적으로 생각할 수 있습니다.

방법 5: CSS 스타일에서 공백 속성을 사용합니다. 이 속성은 요소 내의 공백 문자를 처리하는 방법을 선언합니다.

white-space:normal; 설정하지 않은 것과 동일하며 연속된 공백과 빈 줄만 표시됩니다.

white-space:nowrap; 감싸지 않는다는 것은 무엇을 의미합니까? 일반적인 상황에서 텍스트가 텍스트 필드를 초과하면 텍스트가 자동으로 줄바꿈됩니다. 이 설정은 자동으로 줄바꿈되지 않지만 줄 바꿈 태그를 만나면 줄 바꿈됩니다.

white-space:pre; 방법 1과 동일하게 텍스트를 그대로 출력하여 표시합니다. 텍스트가 텍스트 영역을 초과하면 줄바꿈되지 않고 스크롤 막대가 생성됩니다.

white-space:pre-wrap; 공백과 빈 줄을 유지하지만 텍스트가 텍스트 필드를 초과하면 자동으로 줄바꿈됩니다.

white-space:pre-line; 연속된 공백은 하나의 공백으로 표시되지만 연속된 빈 줄은 유지됩니다.

위는 편집자가 제공한 HTML 코드의 공백과 빈 줄에 대한 간략한 토론입니다. PHP 중국어 웹사이트에 많은 지원을 부탁드립니다~

공백에 대한 간략한 토론에 대해 자세히 알아보세요. 및 HTML 코드의 빈 줄 공백 및 빈 줄과 관련된 기사는 PHP 중국어 웹사이트를 주목하세요!