html 스팬 태그는 무엇을 의미하나요? SPAN 태그의 기능에 대한 자세한 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html 스팬 태그는 무엇을 의미하나요? SPAN 태그의 기능에 대한 자세한 설명

寻∝梦

Aug 22, 2018 pm 01:58 PM

html span

html 스팬 태그는 무엇을 의미하나요? 이번 글에서는 스팬 태그의 기능, html 스팬 태그의 사용법, html 스팬 태그의 속성에 대해 소개하겠습니다.

html 스팬 태그의 정의와 기능:

span 태그는 HTML(Hypertext Markup Language)의 인라인 태그로, 문서의 인라인 요소를 결합하는 데 사용됩니다. 스팬에는 고정된 형식이 없습니다. 스타일을 적용하면 시각적인 변화가 생깁니다.

태그 자체는 시각적 효과를 내지 않습니다.

문서의 일부를 참조할 수 있는 방법을 제공할 뿐입니다.

이 방법을 사용하면 텍스트의 일부를 인용하고 스타일을 지정하거나 JavaScript로 조작할 수 있습니다.

태그는 문서의 인라인 요소를 그룹화하는 데 사용됩니다.

예는 다음과 같습니다.

<p><span>some text.</span>some other text.</p>

로그인 후 복사

설명 예:

span에 스타일을 적용하지 않으면,span 요소의 텍스트는 다른 텍스트와 시각적 차이가 없습니다. 그러나 위 예의 범위 요소는 p 요소에 추가 구조를 추가합니다.

span에 id 또는 class 속성을 적용하면 적절한 의미를 추가할 수 있을 뿐만 아니라 스타일 적용도 용이해집니다.

동일한 요소에 class 또는 id 속성을 적용할 수 있지만 둘 중 하나만 적용하는 것이 더 일반적입니다. 둘 사이의 주요 차이점은 클래스는 요소 그룹(유사한 요소 또는 특정 유형의 요소로 이해될 수 있음)에 사용되는 반면 id는 개별 요소와 고유 요소를 식별하는 데 사용된다는 것입니다.

팁: 실제로 W3School 사이트의 일부 텍스트가 다른 텍스트와 스타일이 다르다는 것을 눈치채셨을 것입니다. 예를 들어 "팁"은 굵은 주황색으로 표시됩니다. 이 효과를 얻는 방법에는 여러 가지가 있지만 우리의 접근 방식은 "힌트"를 사용하여 범위 요소를 사용한 다음 범위 요소의 상위 요소, 즉 p 요소에 클래스를 적용하여 적용할 수 있도록 하는 것입니다. 이 클래스의 하위 요소까지 확장됩니다. 해당 스타일.

HTML:
<p><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}

로그인 후 복사

html 스팬 태그 사용 방법:

은 선 내의 영역을 정의합니다. 즉, 선은 특정 효과를 얻기 위해 로 여러 영역으로 나눌 수 있습니다. 자체에는 속성이 없습니다. 및

은 CSS 정의에서 인라인 요소에 속하지만,

는 블록 수준 요소입니다. , 그리고 큰 용기 물론 작은 용기를 넣을 수도 있고, 은 작은 용기입니다.

예도 있습니다:

<html><body><script>
function setspan{if( id==1){a.innerText="设置文字"};
if( id==2){a.innerHTML="<font color=red size=7>设置代码</font>"};}
</script><span id=a></span>
<a href=javascript:setspan(1)>设置span的文字</a></br>
<a href=javascript:setspan(2)>设置span的代码</a></br>
</body></html>

로그인 후 복사

예:

<span id=&#39;span_slide_container&#39; style=&#39;display:block; overflow-y: auto; overflow-x: auto; height: 500px;&#39;>

로그인 후 복사

display:block; 여기에 추가해야 합니다. 그렇지 않으면 스팬이 작동하지 않습니다.

스팬 태그를 중앙에 배치하려면 먼저 범위를 블록 수준 요소로 지정합니다. 즉, 먼저 범위의 display:block; 속성을 정의한 다음 원하는 효과를 얻으려면 범위에 여백 속성인 margin:0px auto;를 추가해야 합니다. 스팬에는 많은 속성이 있으며, 거의 모든 태그 속성은 스팬이 블록 수준 요소로 변환될 때 적용되어야 합니다. 보조 태그이며 일반적으로 텍스트의 스타일을 식별할 수 있으므로 스팬 태그에 대해 더 많은 스타일 속성을 정의하려면 먼저 스팬에 블록 수준 속성을 추가해야 합니다. 즉, display:block 속성을 추가해야 합니다. , 그러면 앞으로 스타일이 작동할 것입니다.

html 스팬 태그의 핵심 속성:

DTD 열은 이 속성을 지원하는 문서 유형을 나타냅니다. S=엄격, T=전환, F=프레임세트.

태그는 다음과 같은 핵심 속성을 지원합니다.

html 스팬 태그는 무엇을 의미하나요? SPAN 태그의 기능에 대한 자세한 설명