프론트엔드 개발을 하다 보면 페이지에 공백을 추가해야 하는 경우가 있는데 어떻게 추가하나요? 이번 글에서는 HTML 페이지에 공백을 삽입하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다. [추천 관련 동영상 튜토리얼: HTML 튜토리얼]
1. 공백 입력
html 페이지에서 "space" 키를 입력하면 공백을 삽입할 수 있습니다.
예: p.p1에 공백 1개를 입력하고 p.p2에 공백 5개를 입력합니다. 참고: 이는 "공백"을 입력할 때 반자 상태입니다.
<p class="p1">测试文字| php中文网!</p> <p class="p2">测试文字| php中文网!</p>
렌더링:
HTML에 공백 1개, 공백 5개 또는 기타 여러 공백을 입력하면 웹 브라우저가 자동으로 이 공간을 하나의 공간으로 축소하세요.
그렇다면 여러 개의 입력된 공백을 어떻게 표시합니까? 전각 상태에서 "space" 키를 입력할 수 있습니다. 예:
<p class="p1">测试文字| php中文网!</p> <p class="p2">测试文字| php中文网!</p>
Rendering:
설명: 전각 공백은 한자로 해석되어 빈 한자 형태로 표시됩니다. 실수로 표시됩니다(표시되는 개수).
또는
태그를 사용하여 이 문제를 해결합니다(반각 상태에서 "space" 입력). 예: </p><pre class="brush:html;toolbar:false"><p class="p1"> <pre class="brush:php;toolbar:false">测试文字| php中文网!
测试文字| php中文网!
Rendering:
2. html의 공백 문자를 사용합니다.
We HTML에서 표현을 사용할 수 있습니다. 공백의 문자 엔터티는 HTML 페이지에 공백을 삽입하는 데 사용됩니다. HTML에서 공백을 나타내는 문자 엔터티를 살펴보겠습니다.
문자: 이 공백이 차지하는 너비입니다. 글꼴의 영향을 받습니다.
문자: 전체 너비 모드에서 "공백" 키의 절반(한자 너비의 절반)을 입력합니다.
문자: 전체 너비 모드(한자 1자 너비)에서 "space" 키를 입력하세요.
효과를 살펴보겠습니다.
<p class="p1">测试文字| 字符nbsp显示空格!</p><br / <p class="p2">测试文字| 字符ensp显示空格!</p><br /> <p class="p3">测试文字| 字符emnsp显示空格!</p>
렌더링:
설명: 문자가 차지하는 너비는 기본적으로 글꼴의 영향을 받지 않으며 매우 견고합니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
위 내용은 HTML에 공백을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!