LoginSignup
1
0

More than 3 years have passed since last update.

Web画面初心者の教育用メモ2[HTML基礎]

Last updated at Posted at 2020-09-05

HTMLの基本構造

<!DOCTYPE html>
 <head>
    <meta charset="utf-8">
   <link rel="stylesheet" href="css/hogehoge.css">
   <style>
     </style>
   <title>HOGEHOGE</title>
   <script type="text/javascript" src="js/hoge.js"></script>
   <script type="text/javascript">
    </script>
 </head>
 <body>
  <script src="js/hogehoge.js"></script>
  <script>
    </script>
 </body>
</html>

HTMLは上のように<html>の中に<head>などが入りその中に…といったような入れ子になっている形です

それぞれを解説すると
●<!DOCTYPE html>
 HTML5の文書であることを示しています。とりあえずおまじないと思っててください。
●<html>
 <head>と<body>を入れます
●<head>の中にはそのページの情報を入れます
●<meta charset="">
 文字コードの指定をしています
●<link>
 CSSの外部ファイルを読みこみます
●<style>
 CSSの記述をします
●<script ~ src="">
 JavaScriptの外部ファイルを読みこみます。
 (画面制御にかかわる部分やどうしても一番上に定義されていないといけないもののみ)
●<script>
 JavaScriptを記述します。
 (画面制御にかかわる部分やどうしても一番上に定義されていないといけないもののみ)
●<body>以下には実際に表示するものを入れます。
●<script ~ src="">
 JavaScriptの外部ファイルを読みこみます。
 (<header>で読み込んだもの以外の外部ファイル)
●<script>
 JavaScriptを記述します。
 (<header>で記述した以外のもの)

HTMLの基礎知識

●タグ
 <>で囲まれたものをタグといいます。ほとんどのタグは
 開始タグと呼ばれる<***>で始まり、閉じタグと呼ばれる</***>開始タグの<の後ろに「/」を付けたもので終わります
●属性
 タグにはそのタグを補完するものとして属性というものが存在します
 例えば、上記の基本構造でいうと<script>の後の「src」です
 scriptに「src=」を付け加えることで読み込むファイル名を記述できます
 属性について詳しくは後日

覚えておいた方がいいタグ

●<h1>,<h2>,<h3>
 見出しを付ける
●<span>
 文字の表示
●<img>
 画像の表示
●<br>
 改行の表示
●<a>
 リンクを作成し、他の画面に変移することが可能
●<input>
 データの入力
●<textarea>
 文字列の入力
●<select>,<option>
 データを選択
●<button>
 ボタンを作成
●<form>
 inputやselect、buttonタグと組み合わせて、他の画面にデータを渡す
●<table>,<th>,<tr>,<td>
 表の作成
●<video>
 動画を流す
●<div>
 とりあえずグループ化する。まとめる
●<!-- -->
 画面には表示したくないけど、何かのために書いておきたいものを囲む
 (通称コメントタグ)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0