HTML/CSS-3、非プロフェッショナル向け
コンテンツモデル、概略寸法、Brock&Inline
コンテンツモデル
HTML 5には、要素の性質に応じて要素タイプを定義するルールがあります.要素はこれらのルールを遵守し、HTMLの推奨事項に従う必要があります.これらの規則では、コンテンツモデルは類似の性質を持つ要素をグループ化し、各要素は1つ以上のコンテンツモデルに属します.
コンテンツモデルの7分類
1. Metadata
"base, link, meta, noscript, script, style, title "
metadataには、コンテンツのスタイル、動作、または他のドキュメントとの関係など、情報を含む要素が含まれています.メタラベル、タイトルラベル、スタイルラベル、リンクラベルは
<head>内にあります.2. Flow
"a, abbr, address,map>area, article, aside, audio, b, bdo, blockquote,br, button,canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
Flowには、ドキュメントの自然な流れによって配置される要素が含まれています.
メタデータに対応するタグの一部だけがFlowから除外され、ほとんどの要素がFlowに含まれています.
3. Sectioning
"article, aside, nav, section "
Sectioningには、ドキュメント構造に関連する要素が含まれます.
HTML 5で新しく生成された
<article>, <aside>, <nav>, <section>などが含まれており、これらのタグはドキュメントの構造やアウトラインに影響します.4. Heading
"h1, h2, h3, h4, h5, h6 "
見出しには、各セクションの見出しを定義する見出しラベルが含まれます.
5. Phrasing
"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"
Phrasingには、ドキュメントのテキストまたはテキストを装飾する内部段落レベルの要素が含まれています.
6. Embedded
"audio, canvas, embed, iframe, img, math, object, svg, video "
Embeddedには、外部コンテンツを表す要素と、オーディオ、ビデオ、画像などのマルチメディアに関連する要素が含まれています.
7. Interactive
"a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "
Interactiveには、ユーザーと対話する要素が含まれています.その中で最も代表的なのはフォーム要素です.
シンボルマークアップ
心理表示とは?
シンボルマークアップは、一般的に「エンティティを配置するHTML」(POSH)と呼ばれ、その名の通り、一般的で時代遅れの意味HTMLである.
これは,マシン(コンピュータ,ブラウザ)がよく理解できることを意味する.最初、プログラミング言語は人と機械との約束であり、HTMLもそうであった.シンボルマークアップは、適切なHTML要素を正しく使用することから始まります.
タグ記号
では、ブラウザがコードをよりよく理解できるようにするにはどうすればいいのでしょうか.
とても簡単です.約束さえ守ればいい具体的には、注釈には意味のあるタグと要素が使用され、ドキュメントに構造化が使用されていることを示します.コードを約束通りに作成すれば、機械だけでなく、分かりやすいコードです.
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del><b>は単純で意味のないテキスト太字タグであるが、<strong>は重要な意味を持つ.<strong>はブラウザによって太字で表示されることが重要です.したがって、
<b>(<strong>ではなく)を使用することは、非常に魅力的な寸法である.それ以外に、
<i>は傾斜した文字のみを表し、<em>は文字の特定の部分を強調する意味を持つ.<u>および<s>は、文字に線を引くだけであり、<ins>および<del>は、コンテンツが追加または削除されたことを意味する.HTML 5シンボル要素
HTML 5で新しく作成されたSematic要素.
<article> <aside> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <time> https://developer.mozilla.org/en-US/docs/Glossary/Semantics
ブロック&インライン
前回の授業では、要素を7つのコンテンツモデルに分けました.
実際、コンテンツモデルは後でより複雑に分割され、以前は要素をブロックレベルと行内レベルに大別していた.ブロックレベルの要素と行内の要素は視覚的に非常に明らかな違いがあるため、現在も多くの違いがあります.このレッスンでは、ブロックレベルの要素と行内の要素の違い、およびタグ間のオーバーラップ可能な関係について説明します.
ブロックレベル要素
親要素の水平領域と完全に一致する要素として表示されます.
他の要素を配置しないボックスを作成します.これにより、ボックスの上下に改行が発生します.
ブロックレベル要素には、すべての一般要素(ブロック、行内レベルなど)を含めることができます.
"div, h1~h6, p, ul, li, table ..."
行レベル要素
行に自分の内容と同じボックスの要素を作成します.
他の行の要素は、行をブレークする流れや前後の改行がないため、他の行の要素の位置にある可能性があります.行レベル要素はブロックレベル要素のサブ要素に分類されるため、ブロックレベル要素のサブ要素として使用できません.
つまり、行レベルの要素にブロックレベルの要素を含めることはできません.
"span, i, img, em, strong, a ..."
ただし、HTML 5のバージョンでは、
<a>はインラインレベルの要素ですが、その子はブロックレベルの要素であってもよいという例外があります.Reference
この問題について(HTML/CSS-3、非プロフェッショナル向け), 我々は、より多くの情報をここで見つけました https://velog.io/@injoon2019/부스트코스-비전공자를-위한-HTMLCSS-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol