快速キャンパスMGS 3期4月15日

10297 ワード

vscodeの表示


vscodeを起動!押すだけで出てくるハーモニー
一つ一つ分解することにしました!
<!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>

html , head , body

!DOCTYPE htmlドキュメントのHTMLバージョンを指定します.今はHTML 5バージョンです.htmlはHTMLの開始を示し、/htmlは終了を示す.ドキュメントの全範囲をお知らせします.head Webページに表示されない情報を作成します.ドキュメント情報の範囲を表します.bodyにおいて、ウェブページ内のビジュアル構造が記述される.ドキュメントの構造を表します.metaは、複数の情報をブラウザに提供する.nameは情報の種類を表し、concentは情報の価値を表す.charsetは文字符号化方式を表す.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
    <style>
        div {
            color: red;
        }
    </style>
    <script src="./main.css"></script>
    <script>
        console.log('Hello world!')
    </script>
</head>
<body></body>
</html>

情報を表すラベル。

titleはページのタイトルを表します.headでファイルとhtmlドキュメントを接続する場合、
cssファイルはlinkで始まり、jsファイルはscript srcで始まる.linkからrelは、インポートする文書との関係を示す関係の略である.href Hyper Text Referenceの略語としてインポートするドキュメントのパスを指定します.
位置決めは、scriptsrcを使用して行われる.
HTMLドキュメントで作成される場合があります.
cssファイルもstyleタグで、HTMLドキュメントに記述できます.

出力画像

<img src="./images/logo.png" alt="HEROPY">
それならimagesフォルダを作成して保存したほうがいいです.srcを使用して位置を指定します.altは、画像が表示されない場合に出力される代替テキストです.
 <img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
URLを入力しても、同様に出力します.

相対パス


相対パス:./(親フォルダ)または../絶対パス:httpsまたは/(コンピュータ内部)

ページングとリンク

 <a href="https://naver.com">NAVER</a>
aラベルのNAVERを押して、hrefにあるアドレスに移動します.