LoginSignup
0
0

More than 1 year has passed since last update.

HTML5の資格を取った時のメモ ①HTML

Last updated at Posted at 2022-01-03

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ
1. HTML ←この記事
2. CSS
3. その他範囲、試験対策
4. サンプルコード、問題


レベル1の申し込み、本を買う。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版

目次などを除いて約270ページ。
出題範囲の比率は
・HTML:5
・CSS:3
・その他:2

1日目
目標:土日でHTMLを一通り見る
結果:40ページぐらい読んだ。所用時間2時間程度。
本のボリュームは多いけど読むところは少ない+ほぼ読み流し。
明日の目標:80ページ+演習問題。
土日でHTMLパートを終わらせれば合格射程内に入りそう。

2日目
HTMLパート読了
食事、洗濯、昼寝に5時間ぐらい費やしたので所要時間2hぐらい。
演習問題が簡単すぎるので他の問題集も欲しい。
一回の読了で理解度は実感的に2割ぐらい、勉強するための素地が少し固まったという程度。
imgあたりは別途勉強が必要。

1章

1-2-1 HTML5.1の要素とカテゴリー

従来のインライン要素=フレージングコンテンツ

http://scene-live.com/page.php?page=7
カテゴリーは、その要素がどこのカテゴリーに属しているか示したもので、
コンテンツ・モデルは、その要素がどのカテゴリーの要素を含んでよいか

1-2-2 HTMLの全要素

参考サイト

1-3 グローバル属性

列挙属性/論理属性

1-3-6 dir属性

dir属性 →右寄せ
<bdo>タグ →文章を右から始める(dirと違う)

1-3-7 tabindex属性

指定するとインタラクティブコンテンツに成る

1-3-8 カスタムデータ属性(data-*)

英大文字は使えない

1-4-5 meta要素

http-equiv【equivalent】(同等)

タグ一覧

ルート要素
<html>【HyperText Markup Language】 文書のルート要素

文書のメタデータ
<head> メタデータの集まりを表す
<title> 文書にタイトルを付ける
<base> 相対リンクの基準となるURLを指定する
<link> 別の文書類と関連付ける
<style> スタイルシートを指定する
<meta> 文書に関する様々なメタデータを表す

セクション
<body> 文書の本体を表す
<article> 自己完結したセクションを表す
<section> 一般的なセクションを表す
<nav>【navigation links】 ナビゲーションを表す
<aside> 補足的なセクションを表す
<h1>-<h6>【heading*】 見出しを付ける
<hgroup>【heading group】 見出しをグループ化する (廃止)
<header> ヘッダを表す
<footer> フッタを表す
<address> 連絡先を表す

コンテンツのグループ化
<p>【paragraph】 段落を表す
<hr>【horizontal rule】 テーマの区切りを表す
<pre>【preformatted text】 整形済みのテキスト
<blockquote> 引用セクションを表す
<ol>【ordered list】 順序付きのリストを作る
<ul>【unordered list】 順不同のリストを作る
<li>【list item】 リストの項目を表す
<dl>【description list】 記述リストを作る
<dt>【description term】 記述リストの名前部分を表す
<dd>【description description】 記述リストの値部分を表す
<figure> 参照される図版を表す
<figcaption> 図版にキャプションを付ける
<main> 文書のメインコンテンツを表す
<div>【division】 特定の範囲をグループ化する

テキストの意味
<a>【anchor】 リンクを設定する
<em>【emphasis】 強調を表す
<strong> 重要性を表す
<small> 細目のような注釈を表す
<s>【strike】 すでに正確ではない内容を表す
<cite>【citation】(引用) 作品のタイトル・著者名・URLを表す
<q>【quotation】 引用フレーズを表す
<dfn>【definition】 定義される用語を表す
<abbr>【abbreviation】(略語) 略語や頭字語を表す
<code> ソースコードを表す
<var> 変数を表す
<samp>【sample】 プログラムの出力サンプルを表す
<kbd>【keyboard】 ユーザーが入力する内容を表す
<data> コンピュータ向けのデータを指定する
<sub>【subscript】(添字) 下付き文字を表す
<sup>【superscript】 上付き文字を表す
<time> 日付や時刻を表す
<i>【italic】 他と区別されるテキストを表す(思考・専門用語 等)
<b>【bold】 他と区別されるテキストを表す(キーワード・製品名 等)
<u>【underline】 軽めのラベル付け
<mark> テキストのハイライト表示
<ruby> ルビ(ふりがな)を振る
<rb>【ruby base】 ルビの対象テキストを表す
<rt>【ruby text】 ルビテキストを表す
<rtc>【ruby text container】 ルビテキストのコンテナ(※rbc(ruby body container)はHTML5で廃止)
<rp>【ruby parentheses】 ルビテキストを括弧で囲む
<bdi>【bi-directional isoration】 隔離されたテキストを表す
<bdo>【bi-directional override】 書字方向を指定する
<span>【span】(幅、架橋) 特定の範囲をグループ化する
<br>【break】 改行する
<wbr>【word break】 改行位置の候補を表す

訂正
<ins> 追加された部分を表す
<del> 削除された部分を表す

コンテンツの埋め込み
<img> 画像を表示する
<picture> レスポンシブイメージ(画像内容の最適化) (HTML 5.1)
<iframe> インラインフレームを作る
<embed> プラグインデータを埋め込む
<object> 外部リソースを埋め込む
<param> パラメータを指定する
<video> プラグインを使わずに動画を再生する
<audio> プラグインを使わずに音声を再生する
<track> 動画・音声と同期するテキストトラック
<source> メディアリソースの候補を指定する
<map> イメージマップを作る
<area> イメージマップのリンク領域を設定する

テーブル
<table> 表を作る
<caption> 表にキャプションを付ける
<colgroup> 表の列をグループ化する
<col> 表の列を表す
<tbody> 表の行をグループ化する(本体部分)
<thead> 表の行をグループ化する(ヘッダ部分)
<tfoot> 表の行をグループ化する(フッタ部分)
<tr>【table row】 表の行を表す
<td>【table data cell】 データセルを表す
<th>【table header cell】 見出しセルを表す

フォーム
<form> 入力フォームを作る
<fieldset> フォーム部品をグループ化する
<legend>【legend】(凡例(可算名詞)) 部品グループにキャプションを付ける
<label> フォーム部品とラベルを関連付ける
<input> 入力欄・選択肢・ボタンを作る
<select> プルダウンメニューを作る
<option> プルダウンメニューや入力候補の選択肢を作る
<optgroup> プルダウンメニューの選択肢をグループ化する
<textarea> 複数行のテキスト入力欄を作る
<button> 内容を持つボタンを作る
<datalist> 入力候補のリストを作る
<keygen> 暗号鍵を生成する (廃止予定)
<output> 計算結果の出力欄を作る
<progress> 作業の進捗状況を示す
<meter> 特定範囲内の数量や割合を示す

スクリプティング
<script> JavaScriptを埋め込む
<noscript> スクリプトが利用できない環境用の内容
<template> スクリプトで利用するHTMLコードのテンプレート
<canvas> スクリプト使ってグラフィックスを描く

インタラクティブ
<details> リクエストに応じて詳細情報を提供する (HTML 5.1)
<summary> 詳細情報のキャプションや要約を表す (HTML 5.1)
<menu> ポップアップメニューを表す (HTML 5.1)
<menuitem> ポップアップメニューの項目を表す (HTML 5.1)
<command> コマンドを表す (廃止)

0
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
0
0