>  기사  >  웹 프론트엔드  >  html 태그의 역할

html 태그의 역할

黄舟
黄舟원래의
2017-06-21 15:26:469646검색

em은 Emphasis의 약자입니다. ~ 내에 포함된 텍스트가 강조 표시됩니다. Internet Explorer와 같은 브라우저는 텍스트를 기울임꼴로 표시하며 일부 브라우저는 강조 효과를 얻기 위해 텍스트 색상을 변경하는 등의 다른 방법을 사용합니다.

em> 태그(html em 강조 태그)는 브라우저에 그 안의 텍스트를 강조된 내용으로 나타내도록 지시합니다. 모든 브라우저에서 이는 모든 사람이 표시할 수 있도록 이 텍스트를 기울임꼴로 표시해야 함을 의미합니다. 이는 HTML I 기울임꼴 태그와 동일한 효과를 갖습니다.

1) 태그로 수정된 내용은 이탤릭체로 표시되지만 이러한 내용은 더 넓은 의미를 갖습니다. 텍스트를 표시하기 위해 이탤릭체만 사용하려면 태그를 사용하세요. 또한 문서에는 텍스트 표시를 변경하는 계단식 스타일 정의가 포함될 수도 있습니다.

2) em은 콘텐츠 강조 기능을 정의합니다.

3) EM 태그의 기본 이탤릭체 특수 스타일은 CSS 스타일을 사용하여 초기화할 수 있습니다. em 강조 태그의 고유한 스타일을 결정하는 방법은 이후 기사에서 소개하겠습니다. .

  em의 특징은 다음과 같습니다.

1. em의 값은 고정되어 있지 않습니다.
2. em은 상위 요소의 글꼴 크기를 상속 합니다.

 따라서 CSS를 작성할 때 다음 두 가지 사항에 주의해야 합니다:

 1. 본문 선택기에서 Font-size=62.5%를 선언합니다.
 2. 원래 px 값을 10으로 나눈 다음 교체합니다. em을 단위로 사용;
 3. 확대된 글꼴의 em 값을 다시 계산합니다. 글꼴 크기를 반복적으로 선언하지 마세요.

 1.2 * 1.2= 1.44 현상을 피하기 위함입니다. 예를 들어 #content에서 글꼴 크기를 1.2em으로 선언한 다음 p의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. 왜냐하면 이 em은 해당 em이 아니고 글꼴을 상속하기 때문입니다. #content의 높이가 1em=12px이 되었습니다.

하지만 예외는 12px 한자, 즉 위의 방법으로 얻은 12px(1.2em) 한자는 IE에서 12px로 직접 정의한 글꼴 크기와 같지 않고 약간 더 큽니다. 이 문제는 Jorux에 의해 해결되었습니다. Body Selector에서 62.5%를 63%로 변경하면 정상적으로 표시됩니다. 그 이유는 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다.

em은 상대 길이 단위입니다. 현재 object 내의 텍스트를 기준으로 한 글꼴 크기입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.

 모든 브라우저의 기본 글꼴 높이는 16px입니다. 수정되지 않은 모든 브라우저는 1em=16px를 준수합니다. 그런 다음 12px=0.75em,10px=0.625em입니다. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 Font-size=62.5%를 선언해야 합니다. 그러면 em 값이 16px*62.5%=10px가 되므로 12px=1.2em, 10px=1em이 됩니다. , 또한 즉, 원래 px 값을 10으로 나눈 다음 단위를 em으로 변경하기만 하면 됩니다.

몇 가지 질문을 해보세요.

1. 태그가 무엇인가요?

2. 태그와 태그의 차이점은 무엇인가요?

첫 번째 질문은 가장 변태적입니다:

가장 솔직한 대답: 모르겠어요, 전혀 본 적이 없어요!

가장 혼란스러운 답변: 빅 브라더 em은 길이 단위이고 html 태그가 아니라 CSS이며 px(픽셀)와 동일한 단위입니다.

가장 멋진 답변: em? 단지 강조하기 위한 것입니다. 이탤릭체이지만 대부분의 주요 웹사이트에서는 이 태그를 사용하지 않는 것을 볼 수 있습니다.

두 번째 질문은 주로 HTML 의미 체계 소개에 관한 것입니다. 둘 다 브라우저에서 기울임꼴로 표시되지만 은 기울임꼴일 뿐만 아니라 더 중요한 것은 의미 체계 태그입니다. , 는 표현이 풍부한 태그로 이탤릭체만 표현합니다.

위 내용은 html 태그의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.