HTML Cheat Sheet [Updated] - Download PDF for Quick Reference

HTMLはHyper Text Mark-up Languageの略

用途：World Wide Web（ウェブサイト）に表示されるウェブページ（文書）を作成すること。ページには、テキスト、画像、ビデオ、その他の要素が混在します。作成方法：メモ帳やTextPadなどのテキストエディターで作成することができます。

保存形式は以下のとおりです。 .htmlファイル

HTML Cheat Sheet

ここでは、完全なHTML Cheat Sheetをご紹介します：

基本的な構造

<!DOCTYPE html><html> <head> <title></title> </head> <body> body tags and main content </body></html>

HTMLの主な要素はタグです。

見出し

<h1>Heading 1</h1><h2>Heading 2 </h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6 </h6>

段落

スパン

スパンタグはインライン要素のスタイルを決めるのに使われます。

<span style = "color:green”> Address </span>

– 「住所」という文字を指定された色（ここでは緑）で表示します。

文字

書式

ボディ

<body><body>の中には、たくさんのセクションがあります。属性 –

メタデータ

name = “” – キーワード、著者、説明などの名前になります。
content = “” – 上記の名前に対応する値

例 – <meta name=”keywords” content=”What is HTML, HTMLの学び方”>

区分と分割

<><> 新しいセクションです。
<hr> – 入れ子になったdivタグは、複数のサブセクションが必要な場合によく使われます。水平線

<hr>には以下の属性があります –

<hr size = “” width = “”/width = “%” color = “” align = “left/center/right”
<には以下の属性があります。 “left/center/right”>
size – 線の太さ（ピクセル単位）
width – ピクセルまたはパーセンテージ（いずれか）
color – 色（16進数）
align – 配置。左、右、または中央

テーブル

<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>

<table> – テーブルを作成します。
<tr> – 行を作成、
<td> – 列を作成します。
<th> – カラムを作成します。ヘッダーカラムの作成

<table> 属性 –

<td> 属性

例 –

<colgroup> <col span="1" style="background-color:green"> <col style="background-color:blue"></colgroup>

最初の列は緑でハイライトされ、他の列は青でハイライトされます。他の列は青でハイライトされます。

Forms (HTML Cheat Sheet)

ユーザーの入力、ページの送信、フォームの入力などの動的コンテンツのほとんどは、このタグの中で行われます。これは、関連する入力のグループです。

<form> <input> <select><option></option></select> <textarea></form>

< form> タグの属性 –

< input> タグの属性 –

< select></select><select> タグの属性。

<option></option></option> タグの属性です。

value=”” – 選択されたオプション値またはデフォルト値の設定
<textarea></textarea> -。

< textarea> タグの属性です。

iframe

<iframe src=””></iframe> – 現在のドキュメント(ページ)内に別のドキュメントをフレーム内に埋め込みます。
属性「src」 – 埋め込むドキュメントの位置

リンク

HTMLのリンク。 <a></a> ハイパーリンクとも呼ばれるHTMLリンクは、’a’タグで定義されます。属性 –

href = “” – リンクがクリックされたときに表示されるURL
target = “” – リンクを開く場所を指定します。 _blank（新しいタブ/ウィンドウ）。 _self (同じウィンドウ/タブ)、_parent (親フレーム内)、framename – 特定のフレームで開く。
title = “” – 要素に関する情報を提供する
id = “” – href属性の値として使用できるページ内のブックマークを作成する

例 –

スタイル

スタイルを決めるために、様々なタグで使用される多くの属性があります。

<style> text-align= "” – align text; left, right, center background-color = "” – background color of the element color=”” – for color of texts font-family = "” – for various fonts font-size = "” size of the font border = "” – border thickness and color for a table</style>

これらのスタイリング要素をまとめたものがCSSです。

画像

<img> – ページロード時に画像を表示します。ページロード時に画像を表示属性 –

src =”sourceofimage” – 画像のソースです。必須
alt = “alternate text” – 代替テキストです。必須
align = “left/right/center” – 周囲のアイテム（テキスト）に対する配置
width = “” – ピクセルまたはパーセンテージ
height = “” – ピクセルまたはパーセンテージ

src = “sourceofimage” – 画像のソース。ピクセルまたはパーセンテージ
border = “” – 境界線の厚さ（ピクセル）
hspace = “” – 画像の両側にあるピクセル単位のスペース
vspace = “” – 画像の上下にあるピクセル単位のスペース

HTML5 タグ

<aside> – 。どの要素にも属していないコンテンツ。
<figure> – 写真、図、コードリストなどのイラストです。
<figcaption><figure>要素のキャプション
<header> – セクションの見出し（MS wordのそれに似ています）です。ヘッダーには、ナビゲーションリンクやフォームなどの他のコンテンツを含めることができます。…
<footer> – ページ/セクションの下部にあるコンテンツ。著作権情報、利用規約など
<main> – このタグは、ページのメインコンテンツがどこから始まるかを示すものです
<details> – このタグは、ページのメインコンテンツがどこから始まるかを示すものです。
<summary> – 特定の要素のコンテンツの概要。説明文、キャプションなどが考えられます…。
<mark> – テキストの一部をハイライトして目立たせる
<nav> – 。ページ上のセクションや他のページへのナビゲーションリンクを持つセクション
<section> – ページ上の特定の部分（グループ）です。
<time> – 機械的に読み取り可能なフォーマットで記載された時間。日付、時刻、タイムゾーンのオフセット、継続時間などを持つことができます…。
<datalist> – オートコンプリートに似ており、入力コントロールのプリセットオプションを定義します
<keygen> – フォーム用のキーペア（公開鍵と秘密鍵）ジェネレータです。公開鍵は、フォームが送信されたときにサーバーに送信されます。公開鍵はフォームが送信されたときにサーバーに送信され、秘密鍵はローカルの鍵ストアに保存されます
<output> – 計算結果。計算結果
<progress> – タスクの進捗状況をプログレスバーで表示
<embed> – 外部ソースのメディアを埋め込む。外部からのメディアを埋め込む
<source> – オーディオまたはビデオのソース
<audio> – 音楽コンテンツまたはサウンドのソース。音楽コンテンツやサウンドのために
<video> – 映画やビデオを提示するために

HTMLチートシートPDFのダウンロードはこちらから。

People are also reading:

Best HTML Courses
Best HTML Certifications
Top HTML Interview Questions
Top HTML5 Interview Questions
How to become a web developer?
ベストWeb開発IDE
ベストWeb開発フレームワーク
Web開発アーキテクチャとは何か
CSS vs CSS2
トップAngular代替案