コンテンツ系
<a>
テキストや写真などのオブジェクトにリンクを付与します
<a href="https://www.yomiurikyousai.com/i/" target="_blank"><p>共済会のリンク</p></a>
■href:リンク先のurlの指定
■target:リンクへの飛び方
_blank:新規ウィンドウで開く
_top:現在のウィンドウで開く
_self:現在のフレームで開く
_parent:親フレームで開く
<h>
見出しを6段階で設定します
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
<div>
文章をグループ化する
<div align="center"> <p>divで</p> <p>この4行を</p> <p>グループ化して</p> <p>中央揃え</p> </div>
divで
この4行を
グループ化して
中央揃え
■align:水平方向の表示位置を指定
center:中央寄せ
left:左寄せ
right:右寄せ
justify:均等割付で表示
<span>
一部のテキストをグループ化する
<p>この部分を<span style="color:red">赤色</span>で表示</p>
span部分を赤色で表示
<table>
表を作成する
<table border="1">
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>フッタセル1</td>
<td>フッタセル2</td>
</tr>
</tfoot>
</table>
| 見出し1 | 見出し2 |
|---|---|
| 内容1 | 内容2 |
| フッタセル1 | フッタセル2 |
<tr>:行の要素
<th>:見出し
<td>:データ
<ui,li>
ulは箇条書きのリストを表示し、リストの各項目をliで記述する
<ul type="disc">
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
- 箇条書き
- 箇条書き
■type:リスト項目のマーク
disk:黒丸アイコン
circle:白丸アイコン
square:四角アイコン
<pre>
空白・改行やコードなど、入力されたソースをそのまま表示する
<pre>
これは<pre></pre>の
コードの例 です
</pre>
これは<pre></pre>の
コードの例 です
<br>
改行を行う
<p>ここで<br>改行</p>
ここで
改行
<img>
画像を添付する
<p><img src="/img/html_img_tag_test.png" height="200" width="400" alt="imgタグの表示用画像" >この画像はimgタグにより張り付けられています</p>
この画像はimgタグにより張り付けられています
■src:表示する画像ファイルを指定(必須)
■height:画像の高さを指定
■width:画像の幅を指定
■alt:画像を表示できないブラウザの場合に代替テキストを表示
<video>
動画を挿入する
<video controls width="600" loop autoplay muted>
<source src="/img/html_video_tag_test.mp4" type="video/mp4">
お使いのブラウザは video タグに対応していません。
lt;/video>
■src:表示する画像ファイルを指定(必須)
■controls:操作パネルの表示（再生・停止など）
■loop:繰り返し再生
■aoutplay:自動再生
■muted:無音再生
<audio>
音声ファイルを添する
<audio controls src="/img/html_audio_tag_test.mp3">
お使いのブラウザは audio タグに対応していません。
</audio>
■src:表示する画像ファイルを指定(必須)
controls・loop・autplay・muted(1つ上のvideoタグの説明と同様)
<iframe>
ウィンドウを分割して独立したフレームを作成します
<iframe src=https://codic.jp/engine width="800" height="500">
■src:参照先のURLを指定(必須)
構造系
<DOCTYPE>
ブラウザがデータファイルの種別を判断するためのタグ。この宣言をしないと、思ったとおりの表示にならない可能性があります。htmlタグより前に記述し、タグを閉じる必要はない。
<!DOCTYPE html>
<html lang="ja">
<head>
︙
<head>
文書のヘッダ部分を指定するタグ。文字コードなどのメタデータを宣言します。<title>タグを除いて普通はブラウザの画面上に表示されません。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>タイトルタグ</title>
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
■<meta http-equiv="content-type" content="text/html; charset=utf-8">
http-equiv="content-type" ：文書のMIMEタイプと文字エンコーディングをブラウザに伝える
content="text/html：文書がHTML形式であることを指定
charset=utf-8: 文書の文字エンコーディングとしてUTF-8が使用されることを指定
■<link href="style.css" rel="stylesheet" type="text/css" >
href="style.css"：読み込み先のリンク
rel="stylesheet"：リンク先がスタイルシートであることを示す
type="text/css"：リンク先がCSSファイルであることを指定
<title>
ブラウザ検索結果のタイトル・ブラウザのタブに表示されるテキスト・ブラウザのブックマークで表示されるテキスト
<head>
<title>汎用タグリスト</title>
</head>
︙
<meta>
ブラウザや検索ロボットにホームページの情報を知らせるためのタグです。サイトの制作者や文書の説明・キーワードなどの情報や文字コードの指定、キャッシュの制御と有効期限の指定などを記載します。
<meta name="description" content="">
<meta property="og:image" content="https://sakai-oci.yomiuri-systec.co.jp/img/OG_img.png">
<meta property="og:url" content="https://sakai-oci.yomiuri-systec.co.jp/test.html">
<meta property="og:title" content="テストページ OGのテスト">
<meta http-equiv="refresh" content="10; URL=https://sakai-oci.yomiuri-systec.co.jp/">
<meta name="robots" content="noindex, nofollow">
■<meta name="description" content="">
検索エンジンで、検索結果のページタイトル下に表示されるテキスト。content="この部分に表示したいテキストを記入する"
■<meta property="og:image" content="/var/www_dev/sakai/html/img/OG_img.png"/>
property="og:image"：ソーシャルメディアの投稿などでリンクURLを貼り付けて紹介されたときに表示する画像
property="og:url"：ソーシャルメディアの投稿などでリンクURLを貼り付けて紹介されたときに表示するurl
property="og:title"：ソーシャルメディアの投稿などでリンクURLを貼り付けて紹介されたときに表示するタイトルのテキスト
■http-equiv="refresh" content="10; URL=https://sakai-oci.yomiuri-systec.co.jp/"：サイトにアクセスしてから10秒後に、URL=のサイトへアクセスします
■<meta name="robots" content="noindex, nofollow">
content="noindex：サイトがインデックスに登録することを拒否する。
content="noforrow：サイト内にある外部リンクへのクローラーを拒否する。
<link>
外部のリソースとの関係を表し、スタイルシートのリンクによく使用される
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
■<link href="style.css" rel="stylesheet" type="text/css" >
href="style.css"：読み込み先のリンク
rel="stylesheet"：リンク先がスタイルシートであることを示す
type="text/css"：リンク先がCSSファイルであることを指定
<body>
HTML文書のコンテンツを示す要素。文書中に一つだけ配置できる。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>全体の構図</title>
</head>
<body>
<p>全体の構図</p>
</body>
</html>
<header>
HTMLの見出しやロゴ、検索フォーム、著者名などの要素を入れ込むことができるタグ。
<header>
<h1 class="center">汎用htmlタグリスト</h1>
</header>
<nav>
ナビゲーションを配置する。
<nav>
<ol>
<li><a href="#">Top</a></li>
<li><a href="#">概要</a></li>
<li >詳細</li>
</ol>
</nav>
<main>
<body>内のコンテンツの主要な部分。<header>・<footer>と分けて記述する。
<body>
<main>
<section>
<h2>ニュースセクション</h2>
<article>
<h3>スポーツニュース</h3>
<p>地元チームが決勝戦で勝利しました。</p>
</article>
</section>
<section>
<h2>ブログセクション</h2>
<article>
<h3>最近の技術トレンド</h3>
<p>AI技術の進展が目覚ましいものとなっています。</p>
</article>
</section>
</main>
</body>
<article>
コンテンツの区切りであり、内部でコンテンツが独立していることを示す。
<section>
コンテンツの内容の区切りを示し、章や段落の区切りに使用される。
<footer>
ページのフッターを配置する。
<footer>
<p>© Yomiuri System Technology Inc.</p>
</footer>
フォーム系
<form>
入力・送信フォームを作成する。入力された値はmethod属性で指定した転送方法とenctype属性で指定したデータ形式でサーバへ送信され、action属性で指定したアクションを呼び出す
<form action="form.php" method="post">
<p><input type="text" name="first_name"></p>
<p><input type="text" name="last_name"></p>
<p><input type="submit" value="送信"></p>
</form>
■action:フォーム経由で送信された情報を処理するプログラムのURL
■method:サーバに送るデータの形式で、GETかPOSTが主に使用される
■enctype:method属性がpostの際に、コンテンツのMIMEタイプを示す
■onSubmit:フォーム送信時に指定されたJavaScript関数を実行する
<button>
form内で使用されるボタンを作成する
<button>送信する</button>
■type:ボタンの規定動作。以下の値が指定可能
_submit:フォームのデータをサーバへ送信する。
_reset:フォームの値を初期値にする。
_button:イベントを割り当てることで、独自の動作を実装できる。規定動作はなく、単体では何も起きない。
<label>
フォームの中で、項目名と構成部品（チェックボックスやラジオボタンなど）を関連付けるためのタグ
<label for="food">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
<label for="food">Do you like chocolate?</label>
<input type="checkbox" name="chocolate" id="chocolate">
■for:label属性の値を明示的にinputタグの値と関連付ける。関連付けたいinputタグのidと同じ値を入力する
<input>
formタグで使用される、ユーザからデータを受け取るためのタグで、データ形式や入力方法を指定するために使用する。
<input type="text" name="text"/><br>
<input type="radio" name="radio"/><br>
<input type="checkbox" name="checkbox"/><br>
<input type="file" accept="image/*, text/*" name="file"/>
■type:データ形式、入力形式の型を選択する。
text:単一行のテキスト入力欄。改行は自動的に取り除かれる
radio:複数の選択肢から一つの値を選択できるラジオボタン
checkbox:選択または未選択のうちひとつの値をとることができるチェックボックス
file:ユーザがファイルを選択できる。acceptで、選択できるファイル形式を選択できる。
↓上記のほかにtypeで選択できる型の参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input■name:入力フォームの名前を指定
<select>
プルダウンの選択式フォーム。optionタグで項目を追加する。
<label for="textbox">入力欄</label><br>
<textarea id="textbox" name="story" rows="5" cols="33">ここにテキストを入力</textarea>
<option>
selectタグに設定する選択肢
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
■value:サーバに送信するデータ
<optgroup>
optionタグをグループ化する
<optgroup label="small animal">
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
</optgroup>
■label:表示されるグループの名前を選択
スクリプト
<script>
実行できるコードやデータを埋め込むためのタグ。JavaScriptの埋め込みに使用されることが多い。
<form action="form.php" method="post" onsubmit="return validateForm()">
<p><input type="text" id="name_f" name="first_name"></p>
<p><input type="text" id="name_l" name="last_name"></p>
<p><input type="submit" value="送信"></p>
</form>
<script>
function validateForm() { // validateForm()関数を定義
var name_f = document.getElementById('name_f').value; // id=name_fのinputされた値を取得
var name_l = document.getElementById('name_l').value;
if (name_f == "" || name_l == "") { // 取得したname_fとname_lの値が空かどうか確認
alert("名前を入力してください");
return false; // フォームの送信をキャンセル
}
return true; // フォームの送信を許可
}
</script>
■src:外部スクリプトのURLをしていし、文書に直接埋め込まずに実行する。
箱根formテスト
※システック管理用