0415 Web概要とHTMLドキュメントの作成

5854 ワード
テキストリンク

💻 HTML言語がCPUにどのように伝わるか


  • UTF-8辞書を使用してバイナリ形式で格納します.
  • lexerは、独自のルール(辞書)を使用して記号を表します.
  • parserは、アセンブリ形式で実行可能な形式で意味を提供する.
    すべてツリー構造が使用されます.
  • ASTはアセンブリ形式で翻訳されます.

    • 💻 Webの概要


    既存のコンピュータ間の接続方式を改善するためにはHTML,HTTP,Browserの3種類が必要である.
  • HTML:私たちが見ているページがどのように構造化されているかをブラウザに知らせる寸法言語です.
  • HTTP:HTMLドキュメントなどのリソースのインポートを許可するプロトコル.
  • Browser:HTMLドキュメントを解析してユーザーに表示するためのアプリケーション.
    • 要求されたコンピュータ上でHTMLドキュメントがサーバに要求されると、サーバのコンピュータ要求に応じてHTTP応答メッセージが生成され、ブラウザに送信される.

    💻 デフォルトのHTMLドキュメントフォーム


    Visualstudioコード(VSC)では、ショートカットキー!+tabを押すと自動的に完了します.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.app"></script>
  </head>
  <body></body>
</html>
  • <!DOCTYPE html>:WebブラウザにどのようなHTMLバージョンの解釈でページを理解するかを教えます.現在の標準はHTML 5バージョンです.
  • <html lang="en"></html>:現在のHTMLドキュメントの全範囲を指します.langプロパティは、HTMLドキュメントで使用される言語環境を示します.
  • <head></head>:Webページに表示されない情報の範囲を示す
  • <meta>:Webページの各種情報をブラウザまたは検索エンジンのラベルに提供します.nameプロパティは、情報のタイプを作成するために使用され、contentプロパティは、情報に対応する値を作成するために使用されます.
  • <meta charset="UTF-8" />:これは、画面上の文字がUTF-8の符号化方式を使用することを意味する.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />:モバイル出力ページの領域をデフォルト値の1倍の横寸法に調整します.
  • <title></title>:Webページのタイトルを定義します.Webブラウザのタブに表示されます.
  • <body></body>:Webページを作成するためのビジュアル構造

    • 💻 CSS、JSファイルへの接続


    👉 CSSファイルの接続

  • <link rel="style" href="style.css" />外部CSSファイルの読み込み:外部ドキュメントの読み込みと接続に使用します.relプロパティは、インポートするドキュメントとの関係を作成し、hrefプロパティはファイルパスを作成します.このタグを使用して、Webブラウザタブの部分の画像を添付することもできます.
  • <style></style>:CSS言語をHTMLドキュメント内で記述することもできます.

    • 👉 JSファイルへの接続

  • <script src="main.app"></script>外部JSファイルの読み込み:JavaScriptファイルの読み込みに使用します.srcプロパティはファイルパスを作成します.
  • <script></script>:HTMLドキュメント内でJS言語を記述することもできます.
    • Spring Framework第10講-RESTful API
    ftp(テスト)