[Web] HTML

44049 ワード
web テキストリンク

🤔 HTML ?


HTML(Hypertext Markup Language、ハイパーテキスト表記言語)はプログラミング言語ではなく、ブラウザに私たちが見ているページがどのように構造化されているかを知らせる表記言語です.
HTMLは、各コンテンツの各部分を囲んでマークし、適切な方法で表示および実行する要素で構成されています.

😃 HTMLドキュメントの構造

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
  • <!DOCTYPE html>:文書形式を表す.
  • <html>:ページ全体を体験することも基本要素とされています.
  • <head>:検索結果にユーザーが見えないが露出するキーワード、説明、CSSなどのHTMLページを含むすべての内容.
  • <meta charset="utf-8">:HTML文書の文字コードをUTF-8に設定
  • ・<title>:ページタイトルを設定し、ページをロードするブラウザタブに表示するタイトル.
  • <body>:テキスト、画像、ビデオなどのページに表示されるすべての内容を含む.

    • 📘 一般的なHTMLタグのクリーンアップ


    <div>

    <div>タグは、HTML文書において特定の領域または部分を定義するために使用される.
    スタイルをCSSに変更したり、JavaScriptを使用して特定の操作を実行したりするために、複数のHTML要素を組み合わせて使用するコンテナによく使用されます.また、CSSとともにレイアウトの設定にも使用されます.
    例
    <style>
    div {
        background-color: orange;
        font-style: italic;
    }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<p>span 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.</p>

    <span>

    <span>タグは、HTMLドキュメントの行内要素を組み合わせたものです.
    classやidなどのグローバル属性を使用して要素をグループ化することは意味がありません.
    例
    <style>
    .word { background-color: orange; font-style: italic; }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<p><span class="word">span 요소</span>는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 
  <span class="word">인라인(inline) 요소</span>입니다.</p>
<p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p>

    <a>

    <a>タグは、あるページに別のページを接続する際に使用されるハイパーリンクを定義するために使用される.
    最も重要な属性はリンク先を指すhref属性である.
    例
    <a href="http://www.naver.com">네이버 사이트로 이동!</a>
    使用可能な属性

    <p>

    <p>段落を定義するラベル.
    ブラウザは、上部と下部に自動的に余白を追加します.
    例
    <p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>

    <br>

    <br>タグはテキスト内の改行を定義するために使用される.
    HTMLソースコードでは、Enterキーを使用した改行は、ブラウザ画面には実際には適用されません.
    例
    <p>
    HTML은 HyperText Markup Language의 약자입니다.<br>
    웹 페이지는 HTML 문서라고도 불리며,<br>
    HTML 태그들로 구성됩니다.
</p>

    <ul>

    <ul>ラベルは、順序のないHTMLリストを定義するために使用される.
    例
    <ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

    <ol>

    <ol>タグは、順序付けされたHTMLリストを定義するために使用される.
    例
    <ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>
    使用可能な属性

    <li>

    <li>HTMLリストに含まれる項目を定義するタグ.
    例
    <ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

    <table>

    <table>タグは、データを含むセルの行と列からなる2次元テーブルを定義するために使用される.
    例
    <table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

    <tr>

    <tr>タグは、表のセルからなる行を定義するために使用されます.
    例
    <table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

    <td>

    <td>タグは、HTMLテーブルにデータ単位を定義するために使用される.
    例
    <table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

    <button>

    <button>クリック可能ボタンを定義するラベル.
    例
    <button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>
    使用可能な属性

    <fieldset>

    <fieldset>タグは、<form>タグに関連付けられた要素を1つのグループにグループ化するために使用される.
    例
    <form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        학번 : <input type="text" name="st_id"><br>
        학과 : <input type="text" name="department"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>
    使用可能な属性

    <figure>

    <figure>イラスト、グラフ、写真など、ドキュメントの主流とは独立した内容を定義するためのマークです.
    例
    <figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
</figure>

    <form>

    <form>タグは、ユーザから入力を受信できるHTML入力フォームを定義するために使用される.
    例
    <form action="/examples/media/action_target.php">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>
    使用可能な属性

    <nav>

    <nav>タグは、他のページまたは現在のページの他の部分に関連付けられたナビゲーションリンクのセットを定義するために使用される.
    一般的な例としては、メニュー、ディレクトリ、インデックスなどがあります.
    例
    <nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

    <select>

    <select>提供オプションメニューを定義するためのドロップダウンリスト.<option>タグ定義ドロップダウンリストで使用される各オプション.
    例
    <select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>
    使用可能な属性
    C#iniファイルの読み込みと書き込み
    バブルインプリメンテーションプログラム