Webから起動

8386 ワード
22.04.15 html テキストリンク

Codepen.紹介する


新しいフォルダを作成(ex.hello)-VSCDEでフォルダを開く-ファイルを作成(ex.index.html)-https://codepen.ioサイトに接続-左クリック(Start Coding)-HTML/CSS/JSそれぞれのコンテンツを入力(登録コスト時にテストコードを保存可能)

ブラウザスタイルの初期化


新しいフォルダを作成(ex.hello)-VSCDEでフォルダを開く-ファイルを作成(ex.index.html)-コードを作成した後-クロムに移動-リセットします.css cdn-https://www.jsdelivr.com接続の検索-/npm/[email protected]/reset.min.css部右クリック-Copy HTMLを選択-VCODEの頭に貼り付け
index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
 <div></div>
</body>
main.css
div {
  width: 200px;
  height: 100px;
  backround-color: orange;
}

Emmet


Emmet(コミット)-自動完了フラグ
index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
 <div></div>
 <img src="" alt=""> - img
 <h1></h1> - h1
 <div class="heropy"></div> - div.heropy
 <div>
   <ul>
      <li>1</li> 
      <li>2</li>
      <li>3</li>
      <li>4</li>
   </ul>
 </div> - div>ul>li*4{$}
</body>
ページ分けjavaツールクラス、参照可能
単語を習う