[Worksheet-220415] HTML, CSS, JS

9382 ワード
Worksheet テキストリンク
Part 1. HTML/CSS/JSで作成したスタバサイト

Ch 3. 開始予定なし


Doctype(DTD)


<!DOCTYPE html>
ドキュメントのHTMLバージョンの指定
マークアップ言語でドキュメントのフォーマットを定義し、WebブラウザにどのHTMLバージョンの解釈でページを理解するかを通知するために使用します.

HTML, HEAD, BODY

<html>
  <head>
  </head>
  
  <body>
  </body>
</html>
  • <html>
    • ドキュメント全体の範囲
    HTMLドキュメントの開始と終了をお知らせします.
  • <head>
    • ドキュメント内の情報の表示範囲
    Webブラウザだけが解釈して、見えない情報です.
  • <body>
    • ドキュメント構造の範囲を表す
    Web表示構造の作成範囲

    CSS、JSへの接続

    <link rel="stylesheet" href="./main.css">
    htmlファイルではheadラベル(情報)内でlinkラベルを使用してcssファイルに関連付けます.
    <script src="main.js"></script>
    htmlファイルではheadタグ(情報)内でscriptタグを使用してjsファイルに関連付けられます.

    代表情報を表示するタグ

  • <title>HTMLドキュメントのタイトルの定義
    Webブラウザのタブに表示されます.
    • <title> Bang </title>
  • <link>外部ドキュメントのインポートとリンクに使用します.
  • relインポートするドキュメントとの関係
  • href文書をインポートするパス
    • <link rel="stylesheet" href="./main.css">
  • <style>
    • を使用してHTMLドキュメントにスタイルを作成する(CSS)
        <style>
        div {
            text-decoration: underline;
        }
    </style>
  • <script>
  • JavaScriptファイルをインポートする場合は
    • を使用します.
    HTMLドキュメントに
  • 文字のPassスクリプトを記述する場合は
    • を使用します.
    <script src="main.js"></script>
  • <meta>HTMLドキュメントの作成者、コンテンツ、キーワードなど、検索エンジンまたはブラウザに複数の情報を提供します.
    • を使用して、上記のタグでは表示できない情報を作成します.
    <meta name="" content="">

    画像を画面に出力

    <img src="./images/hi.png" alt="">`
  • src
    画像パス
  • alt
    代替テキスト

    • 相対パスと絶対パス

  • 相対パス
  • ./
    周囲検索(省略可能)
  • ../
    親フォルダ
  • 絶対パス
  • http(https)
    リモート
  • /(//)
    ルート

    • ページングとリンク

    <a href = "url">TEXT</a>
  • <a>対応するパスに移動させます.
    • ifフォルダパスを入力すると、ブラウザが自動的にインデックスされます.htmlファイルが見つかります.

    開発者ツールの使用


    ブラウザが提供する開発者ツール(F 12)を使用します.
    HTML、CSSの内容を見ることができます.
  • Elements
  • styleselement.style {}cssスタイルを一時的に適用してみてください.
    -computes
    これらの機能がどのように適用され,数値化されているかが分かる.

    • Ch 4. Webから起動


    Codepen.io


    ローカルで開発環境を構築することなく、コードをオンラインで編集できるツール

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


    ブラウザが提供するデフォルトのCSS仕様を初期化して開発しましょう.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
    resetcss

    Emmet

  • What is Emmet?
    • Emmitは、HTML、XML、XSLドキュメントなどを編集するためのクイックコーディング用のプラグインです.Zen Codingと呼ばれていたが、後にEmmitと改名した.非常に簡単なコードをいくつか入力すると、自動的に完全なHTMLコードが生成されます.
    -ウィキペディア
    出力6-2 QUIZスラッシュ演算
    ぶんかつすうじれつ