html div

14901 단어 html 
<html>
 <title></title>
 <body>
  <div id="wrapper">
   <div id="header">aaa</div> 
    <div id="left" style="float:left;width:70%">bbb</div>
     <div id="right" style="float:right;width:29%">
     <div id="right_top">ccc</div>
     <div id="right_center">ddd</div>
     <div id="right_bottom">eee</div>
    </div>
   <div id="footer" style="clear:both">fff</div>
  </div>
  <div id="div_id" style=" height:50;width:98%; overflow-x:auto; overflow-y:auto;">
   <table>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
    <tr><td>aaaa</td></tr>
   </table>
  </div>
 </body>
</html>

 

HTML <div> 태그


정의 및 사용


에서는 문서의 섹션이나 섹션을 정의할 수 있습니다(division/section).
탭은 문서를 독립적이고 다른 부분으로 분할할 수 있습니다.이것은 엄격한 조직 도구로 사용할 수 있으며, 어떤 형식도 사용하지 않고 그것과 연결할 수 있다.
id나class로
를 표시하면 이 탭의 역할이 더욱 효과적입니다.

사용법


는 블록급 요소입니다.이것은 그것의 내용이 자동으로 새로운 줄을 시작한다는 것을 의미한다.실제로 줄을 바꾸는 것은
고유의 유일한 격식 표현이다.
의class나 id를 통해 추가 스타일을 적용할 수 있습니다.
모든
에 클래스나 id를 추가할 필요가 없습니다. 비록 이렇게 해도 어느 정도 좋은 점이 있습니다.
같은
요소에class나 id 속성을 적용할 수 있지만, 그 중 하나만 적용할 수 있습니다.이 두 가지의 주요 차이점은class는 원소 그룹(유사한 원소, 또는 특정한 원소로 이해할 수 있음)에 사용되고 id는 단독의 유일한 원소를 표시하는 데 사용된다는 것이다.

인스턴스


문서의 한 섹션이 녹색으로 표시됩니다.
<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

TIY

브라우저 지원


모든 메인스트림 브라우저는
태그를 지원합니다.

HTML과 XHTML 사이의 차이


HTML 4.01에서는 div 요소의 "align"속성이 사용되지 않습니다.
XHTML 1.0 Strict DTD에서는 div 요소의 "align"속성이 지원되지 않습니다.

프롬프트 및 주석:


주석:
은 블록급 요소입니다. 즉, 브라우저는 보통div 요소 앞뒤에 줄 바꾸기를 설치합니다.
알림:
요소를 사용하여 블록급 요소를 조합하십시오. 이렇게 하면 스타일로 그것들을 포맷할 수 있습니다.

사례 분석

<body>

 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>
  ...

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 ...
</body>

 

예 해석


보시다시피 위의 HTML은 뉴스 사이트의 구조를 모의했습니다.그 중의 모든div는 모든 뉴스의 제목과 요약을 한데 조합한다. 즉,div는 문서에 추가 구조를 추가했다.또한div는 같은 요소에 속하기 때문에class='news'를 사용하여 이div를 표시할 수 있다. 이렇게 하면div에 적당한 의미를 추가할 뿐만 아니라 양식을 사용하여div를 포맷하는 데 편리하고 일거양득이라고 할 수 있다.
알림:class와 id의 용법을 더욱 깊이 있게 배우려면 이라는 장div, id 및 기타 조수을 보십시오.

옵션 속성


등록 정보
값
묘사
DTD
align
  • left
  • right
  • center
  • justify

    • 사용에 찬성하지 않다.스타일로 대체하세요.div 요소의 내용을 정렬하는 방법을 지정합니다.
    TF

    표준 속성

    id, class, title, style, dir, lang, xml:lang

    자세한 내용은 표준 속성를 참조하십시오.

    이벤트 속성

    onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

    자세한 내용은 이벤트 속성를 참조하십시오.
     
     
    새로운 언어 배우기 - 자바!
    어떻게div를 클릭하면 다른div가 대응하는 반응을 하고 노드 아래의 하위 노드를 획득할 수 있는지 설계합니까

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage