TIL

12371 ワード
html テキストリンク
再起動したHTML😊

Doctype & Document Structure


目には何も見えないが、非常に重要なタグを作成しました.😲
htmlドキュメントフォーマット(基本スケルトン);
<!DOCTYPE html>
<html>
  <head>
    <!-- 웹 문서에 관한 메타 데이터 -->
  </head>
  <body>
    <!-- 웹 문서에 들어갈 내용(콘텐츠) -->
  </body>
</html>
< !DOCTYPE html>は、すべてのドキュメントの開始を表します.
document=「HTMLそのもの」
DocumentタイプDeclaration=DTD宣言=ドキュメントタイプ宣言
HTML 5バージョン(Web規格の最新)を使用して作成されたドキュメントであることをブラウザに通知するタグ.
これは、複数のバージョンがあるにもかかわらず、HTML 5バージョンを使用して最新のWeb基準を満たすことを意味します.
(つまり、ブラウザは標準モードでレンダリングする必要があります)

Title, Link, Style & Script

<title>문서의 대제목</title>
タイトルはウェブページのタイトルで、検索エンジンの最適化(Search Engine Optimization)にとって非常に重要です
titleの一般的な方法
非推奨
  • キーワード単純リスト
  • 各ページの内容を
    • に変更する.
  • は短い内容ではなく、含蓄的で親切に
    • を書いている.link:CSSスタイルシートを添付するためのタグ
    Webフォントを外部からダウンロードして使用する場合は、linkラベルを使用します.
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML & CSS</title>
    // 일반적인 css 파일 연결 (link:css + tab을 이용)
    <link rel="sylesheet" href="./styles.css" />
    
    // 외부에서 공유한 폰트 링크 연결(css 파일에도 별도로 작성할 내용 있음)
    <link href="https://~~~.css " rel="stylesheet" type="text/css" />
  </head>
</html>
    style:HTMLドキュメントにCSSコードを記述する際に使用されるタグ
    個別のcssファイルが作成されていますが、スタイルラベルに記述されたコードで上書きすることは推奨されません.
    絶対リンクラベルを使用してスタイルシートを追加することを強くお勧めします.実際の仕事でもよく使う方法
    <style>
  h1 {
    color: red;
  }
</style>
    script:HTMLドキュメントにJavaScriptファイルを添付するときに使用するタグ
    <script src="경로"></script>
<script src="./app.js"></script> // source 파일 첨부

<script>자바스크립트 코드</script>
    Q.なぜscriptタグをheadタグに書かないのですか?!🧐
    a.headタグにある場合は、別のサーバ上のJavaScriptファイルをインポートするのに時間がかかります.
    linkタグとは異なり、scriptタグはjavascriptファイルが完全にロードされるのを待ってから次へ移動します.スクリプトタグが完全にロードされると、bodyタグの内容をレンダリングするのに時間がかかり、効率的ではありません.
    =>scriptタグ(bodyにすべてをロードした後)bodyタグの最後に作成
    scriptラベルに関するもう一つの疑問🤔
    Webpackのようなモジュールバインド(module bundler)を使用して、現在のプロジェクトで使用されているすべてのJavaScriptファイルをバインド(bundling)と呼ばれるファイルにマージします.
    <script src="./js/bundle.min.js"></script>
    scriptラベルとして次から次へとロードするのではなく、webpackというツールを使用してファイルとして作成し、scriptラベルロードの行を作成します.

    メタデータ


    title、link、style、scriptタグは、表示できないデータを表すために使用されます.name属性を記入する場合は、content属性を同時に記入してください.(両方のプロパティが同時に使用される傾向)
    <meta name="메타데이터 종류" content="메타데이터 값">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="author" content="ylyl"> // 작성자

// 웹페이지 설명(웹 접근성 측면 높임)
<meta name="description" content="이 페이지는 ~~하다">

// 웹페이지의 키워드(해당 키워드를 검색하면 내 웹페이지가 보여지도록 브라우저에게 알림)
<meta name="keywords" content="html, css, FE">
    必須ラベル!✨
    name=「viewport」:(デスクトップ、モバイル、タブレット)画面サイズ
    デスクトップサイズ=1920 x 1080
    移動寸法=375 x 667
    プレートサイズ=768 x 1024
    ブラウザのサイズをdevice sizeに基づいて調整する反応型Webサイトを作成できます.
    cssファイルに反作用コードを記述する場合、name=「viewport」がない場合は絶対に適用されません!
    name="viewport"content="width=device-width, initial-scale=1"
    画面幅(サイズ)はデバイスのwidthに揃えます.
    最初に表示された画面のスケールは、元のサイズと一致するように設定されています.
    言語を作る！(シンプルな電卓を作る編①)
    トースト仕様表の作成