HTML 코드 작성 시 주의해야 할 세 가지 사항-HTML 튜토리얼-php.cn

HTML 코드 작성 시 주의해야 할 세 가지 사항

php中世界最好的语言

풀어 주다： 2018-01-22 10:48:37

원래의

1869명이 탐색했습니다.

이번에는 HTML 코드 작성 시 주의해야 할 세 가지 사항을 알려드리겠습니다. HTML 코드 작성 시 주의 사항은 무엇인가요?

이 기사에서 이야기하고 싶은 주의 사항은 브라우저 호환성과 관련이 없습니다. 주로 프로젝트에서 직면한 몇 가지 작은 문제를 요약한 것입니다. 여기에 기록해 두세요. 나중에 이런 질문을 만나면 여기에 계속해서 질문이 추가될 것입니다.

1. 인라인 태그 사이의 공백

일반적으로 HTML 코드를 작성할 때

<head>  
    <meta charset="utf-8">  
    <style>  
    html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   
    margin: 0;   
    padding:0;   
    }   
    #myDIV {   
      width: 200px;   
      height: 200px;   
      background-color: #ff0;   
    }   
    #myDIV > p{   
      width: 50px;   
      height: 50px;   
      display: inline-block;   
      background-color: #f00;   
    }   
    </style>  
  
  </head>  
  <body>  
    <p id="myDIV">  
      <p>p1</p>  
      <p>p2</p>  
    </p>  
  </body>

로그인 후 복사

과 같은 줄 바꿈 및 들여쓰기와 같은 습관이 있습니다. 중간에 공백이 있습니다. 그 이유는 두 인라인 태그(또는 표시 설정: 인라인 또는 인라인 블록) 사이에 연속 공백, 캐리지 리턴 및 줄 바꿈이 있는 경우 이러한 기호는 기본적으로 공백 기호로 처리되기 때문입니다.

예를 들어 두 개의 p 태그 안에 " ddd " dd " d "를 추가하면 효과는 다음과 같습니다. 연결된 공백 기호가 아무리 많아도 최종 효과는 공백 문자 하나만이 됩니다

이 합계는 에서 인라인입니다. 문자 클래스 를 요소 에 직접 작성하는 것은

과 유사하지만 인라인 요소는 앞뒤 공백 문자를 제거합니다.

그러므로 제가 상기시켜 드리고 싶은 점은:

인라인 요소를 배열할 때 라벨 사이의 공백을 피해야 한다면 라벨을 밀접하게 연결해야 한다는 것입니다.

인라인 요소의 콘텐츠를 채울 때 .innerText 또는 .textContent를 사용해 보세요(Firefox는 innerText를 지원하지 않지만 이 속성은 지원합니다).

HTML 코드에서 공백을 써야 한다면 HTML 공간 표현 방식을 사용하세요

이렇게 말하면 인라인 요소에 대해 편향적으로 이해하는 사람들이 있는 것 같습니다. 소위 인라인은 소위 "블록"의 반대입니다. 인라인 요소는 블록 형태가 아니며 장애물을 만났을 때 물이 흐르는 듯한 느낌을 줍니다. 예를 들어 소스 코드

<p id="myDIV">  
      <p>p1</p> ddd      dd      d       <p>p2</p>  
      <span>    d      dd      d       </span>  
    </p>

로그인 후 복사

span의 콘텐츠는 두 섹션으로 나누어져 더 이상 완전한 블록이 아닙니다.

2. body 태그의 기본 여백 테두리

이에 대해서는 말할 것도 없습니다. 최신 브라우저(CSS3 지원)와 IE8에는 본문에 대한 기본 CSS 스타일 여백이 있습니다. 다른 레이블에도 이런 내용이 있으므로 여기서는 예를 들어 설명하지 않겠습니다. 일반적인 프로젝트 스타일을 시작할 때 비슷한 설정이 필요하지 않은 경우가 많습니다.

html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   
    margin: 0;   
    padding:0;   
    }

로그인 후 복사

3. 특수 공백 문자로 인해 디스플레이 이상이 발생합니다

예를 들어 아래 소스 코드에서는 문제가 없는 것 같습니다

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <style>  
    html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   
    margin: 0;   
    padding:0;   
    }   
    *{   
      -webkit-box-sizing: border-box;   
      -moz-box-sizing: border-box;   
      box-sizing: border-box;   
    }   
    #myDIV {   
    width: 200px;   
    height: 40px;   
    background-color: #ff0;   
    }   
    #myDIV a{   
      float: left;   
      width: 200px;   
      background-color: #f00;   
    }   
    </style>  
  
  </head>  
  <body>  
    <p class="tabbable" id="tabs" style="border:none;">  
      <!-- 页面标签列表 -->  
      <p id="myDIV" style="">  
      　<a data-toggle="tab" href="#tab-content-0" >test0</a>  
      </p>  
    </p>  
  </body>  
</html>

로그인 후 복사

실제로 a 태그 앞에 비정상적인 공백 문자가 있습니다

a의 너비 #myDIV의 너비는 동일해야 하며 a는 부동 상태이지만 표시 효과는 줄 바꿈입니다. 너무 이상합니다. 가능성이 있습니까?

정상적인 표시 효과는

이 비정상적인 공백이 무엇인지 살펴 보겠습니다.

첫 번째는 비정상적인 공백이고 해당 URI 구성 요소는 "%E3%80%80"으로 인코딩됩니다.

두 번째는 일반 공백이고 해당 URI 구성 요소가 "%20"으로 인코딩됩니다

세 번째 첫 번째는 일반적인 탭 구성이며, URI 구성 요소 코드는 "%20%20%20%20"이며 실제로는 4개의 공백입니다.

보실 수 있습니다. 따라서 때때로 웹사이트에 복사된 코드의 비정상적인 성능이 이러한 이유로 인해 발생할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!