HTMLの基本構造と構文

7229 ワード
html テキストリンク
ドキュメントの構造と内容を説明します.//ドキュメントのフレームを作成
  • tagの集合
  • tag:不等号(<>)のHTML基本コンポーネント
    • 宣言を除いては、「対」で構成されていることがわかります.
    親ノードと子ノードからなるツリー構造.

    ツリー構造

    <!DOCTYPE html>                   // 이 문서가 HTML 문서임을 명시
<html>                            // html 시작 태그로, 문서 전체의 틀을 구성
  <head>                          // head 태그는 문서의 메타데이터를 선언
  	<title>Page title</title>     // 문서의 제목, 브라우저의 탭에 보여짐
  </head>                         // </태그이름>은 해당 태그가 끝났음을 의미
  <body>                         // body 태그는 문서의 내용을 담는 곳
      <h1>Hello world</h1>        // heading을 의미, 크기에 따라 h1~h6까지 있다
	  <div>Contents here 	    // content division을 의미 = 줄바꿈 됨
      	<span>Here too!</span>  // 줄 바꿈이 없는 content 컨테이너
	  </div>                   // div 태그 끝
 </body>                       // body 태그 끝
</html>                        // html 태그 끝
    終了フラグがない場合(画像フラグは開いているフラグのみ、終了フラグがない場合は省略可能)

    Self closing tag


    マークの内部に内容がない場合(に示すように).
    表示可能
    <img src=""></img> 는
<img src=""> 와 같다
  • scr:属性(キー)
  • abcdegf:属性の値

    • 一般的なHTMLタグ


    ラベルをたくさん背負う必要はありません
    よく使うことしか知らないでしょう.
    Most used tags in HTML
    ラベル:説明[らべる:せつめい]
    <div> : division   // 한 줄 차지
<span> : span      // 컨텐츠 크기만큼 공간을 차지
<img> : image      //<img src=""> 이미지 삽입
<a> : Link         //<a href="">누르면 이동해요</a> 링크 삽입
<ul>&<li> : Unordered list & list item
  ul과 li는 한 쌍이고 트리구조로 열 수 있다
  ol은 넘버링 되어 나타남 1. 2. 3.
<section> //웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용
<p> : paragraph(문단) //하나의 문단을 표현
    <input> : input(text, radio, checkbox) //닫는 태그x
//<input type="text">  => 입력값이 보인다
//<input type="password">  => 입력값이 안 보인다 
//checkbox 는 복수 선택 가능 radio 박스는 단일 선택
<textarea> : multi-line text input
<button> : button

    HTML要素



    HTML属性(attribute)は、attribute name(属性の名前)とattribute value(属性の値)の2つの部分から構成されています.上記の例では、プロパティの名前はclassです.attribute value(属性の値)と明確に区別する必要があります.

    参照できるリンク


    HTMLのコンポーネントラベル、要素、属性、変数の違い
    http://www.homejjang.com/03/Tag_element_attribute.php
    divとsectionの違い
    https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div/6941170#6941170
    特定GPUにメモリを割り当てる
    EC 2ベースのコミュニティサイトの実践