快速キャンパス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の略語としてインポートするドキュメントのパスを指定します.
位置決めは、script
〜src
を使用して行われる.
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
にあるアドレスに移動します.
Reference
この問題について(快速キャンパスMGS 3期4月15日), 我々は、より多くの情報をここで見つけました
https://velog.io/@gosla4869/패스트캠퍼스-MGS-3기-4월-15일
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!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>
<!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>
<img src="./images/logo.png" alt="HEROPY">
<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
<a href="https://naver.com">NAVER</a>
Reference
この問題について(快速キャンパスMGS 3期4月15日), 我々は、より多くの情報をここで見つけました https://velog.io/@gosla4869/패스트캠퍼스-MGS-3기-4월-15일テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol