HTML - 2
✔HTMLドキュメントは常に<!DOCTYPE html>で始まる必要があります。
<!DOCTYPE html>
📕 따로 닫아줄 필요 없음
✔ <html></html>
•
<!DOCTYPE html>
と入力してhtmlラベルを開きます.<!DOCTYPE html>
<html></html> 👈
✔ <html lang="ko"></html>
lang(language)
Google、NAVER、Bingなどの検索エンジンを支援するために入力します.
サイトで使われている主な言語を教えてください.
<!DOCTYPE html>
<html lang="ko"></html> 👈
サイトはheadとbodyで構成されています。
✔ <body></body>
•ブラウザ画面に表示される内容はすべてbodyラベルに表示されている必要があります.
<!DOCTYPE html>
<html>
<body> 👈
<h1>Hello!</h1>
<a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
<img src="img/banana.jpg" />
</body> 👈
</html>
✔ <head></head>
•ページ環境を設定します.
•Webサイトの情報をブラウザにできるだけ明確に伝える.
•headタグに属するタグが見えません.
•ブラウザ画面に表示される内容はすべてbodyラベルに表示されている必要があります.
<!DOCTYPE html>
<html>
<head></head> 👈
<body>
<h1>Hello!</h1>
<a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
<img src="img/banana.jpg" />
</body>
</html>
✔ <title></title>
•tabに表示されるテキスト
•検索時に表示される大きな見出し
•headラベルに入力します.
<!DOCTYPE html>
<html>
<head>
<title>Home - My first website.</title> 👈
</head>
<body>
<h1>Hello!</h1>
<a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
<img src="img/banana.jpg" />
</body>
</html>
Netflixの例<title>Netflix 대한민국 - 인터넷으로 TV 프로그램과 영화를 시청하세요</title>
✔ <meta>
•追加情報を表示します.
• self-closing tag
•headラベルに入力します.
•contentとnameというプロパティがあります.
<meta content="" name="">
<meta content="" name="keywords">
<meta content="" name="description">
Netflixの例<meta content="스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등
다양한 디바이스에서 영화와 TV 프로그램을 마음껏 즐기세요." name="description">
<meta charset="utf-8">
ページの文字コードを宣言します.ハングルまたはその他の特殊文字を含む言語を入力する場合
ブラウザではこれらの文字が理解できない場合がありますので、必ず記入してください
📕 リファレンス
👉
<meta>
: The Document-level Metadata elementhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
👉 Standard metadata names
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
✔ <link>
•バビコン
<link>
ラベルでrel=「クイックicon」プロパティを持つ<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="/m.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1"/>
Netflixの例<link rel="shortcut icon" href="https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico">
Reference
この問題について(HTML - 2), 我々は、より多くの情報をここで見つけました https://velog.io/@banana/HTML-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol