[第1週-202022.04.15]HTML

24930 ワード
html テキストリンク

HTML構造

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

DOCTYPE


DTD(Document Type Definition)と呼ばれるDOCTYPEは、注釈言語でドキュメントフォーマットを定義し、WebブラウザにどのHTMLバージョンの解釈でページを理解するかを伝えるために使用されます.

htmlタグ


ドキュメントの範囲全体を表し、HTMLドキュメントがどこから始まるか、どこから終わるかを知らせます.

ヘッダーラベル


ドキュメント内の情報の範囲、Webブラウザが解釈するページタイトル、説明、使用するファイルの場所、スタイル(CSS)など、Webページ内の非表示情報を作成する範囲を示します.

bodyタグ


ドキュメント構造の範囲を表し、ユーザー画面に表示されるフラグ、タイトル、ツイッター、ナビゲーション、メニュー、ボタン、画像などのWebページの表示構造の範囲を表します.

CSS、JSへの接続


CSS接続


接続するCSSファイルは、headタグの内部でlinkタグを使用して接続できます.
hrefプロパティにCSSファイルを配置する場所.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  
</body>
</html>

JS接続


scriptタグで接続したいJSファイルをheadタグ内部に接続できます.
srcプロパティにJSファイルを配置する場所.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./main.js"></script>
</head>
<body>
  
</body>
</html>

情報を表すタグ


titleタグ


ブラウザのタブで、表示されるHTMLドキュメントのタイトル(title)を定義します.
<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <title>Document</title>
</head>
<body>
  
</body>
</html>

リンクタグ


外部ドキュメントのインポートと接続に使用します.(多数CSSファイル)
  • rel:インポートする文書との関係
  • href:インポートするドキュメントのパス

    • スタイルタグ


    HTMLドキュメントにスタイル(CSS)を作成するために使用します.
    <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>
<body>
  
</body>
</html>

    スクリプトタグ


    1)JavaScriptファイルのインポートと2)HTMLドキュメントにJavaScriptを記述する場合は2つあります.
    <!DOCTYPE html>
<html lang="en">
<head>
  <!-- 1번 -->
  <script src="./main.js"></script>
  <!-- 2번 -->
  <script>
    console.log('Hello world!')
  </script>
</head>
<body>
  
</body>
</html>

    metaラベル


    HTMLドキュメントの作成者、コンテンツ、キーワードなど、検索エンジンまたはブラウザに複数の情報を提供します.
  • charset:文字コード方式
  • name:情報の種類
  • content:情報の値
    • 💡 name="viewport"属性
    一部の情報(たとえば、Webページの横幅をモバイル環境の横幅と一致させるか、Webサイトの最初の出力時にどのようにスケールまたはスケールの程度を決定するか)をMETAタグの概念として列挙します.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

    パス


    相対パス

  • ./(省略可能):カレントディレクトリ
  • ../:親ディレクトリへ

    • 絶対パス

  • http ( https )
  • /(//):ルートパス

    • Codepen.io


    Codepen.io新しいプロジェクトを作成・組織することなくWebページ内で簡単にコードを作成・実行できるサイトです.

    ブラウザスタイルの初期化


    各ブラウザで提供されるスタイルは異なる場合がありますので、ブラウザスタイルを初期化して開始することをお勧めします.
    reset.css配信サイトに接続されている場合は、画面上のreset.min.cssというファイルを選択し、HTMLコードをコピーして貼り付けます.
    ブラウザスタイルを初期化するためのCSSをインポートするため、他のCSSファイルよりも早く、より早く作成する必要があります.파일명.min.확장자と同様に、minキーワードはファイルが乱読または軽量化されたことを意味します!
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  
</body>
</html>

    Emmet


    htmlファイルにimgを入力し、タブでimgタグを自動的に生成し、div.containerクラスのdivタグをタブで生成するのを見ることができます.
    このような自動完了コードの機能をEmmetと呼ぶ.
    Emmit構文
    C#プログラミング08:継承性
    Lowest Common Ancestor (LCA)