学習シンボルHTML

6656 ワード
html テキストリンク

コンテンツモデル


HTML 5には、要素の性質に応じて要素のタイプを定義するルールがあります.これらの規則では、類似した性質を持つ要素をコンテンツモデルにグループ化し、各要素は1つ以上のコンテンツモデルに属します.

1. Metadata

Metadataコンテンツのスタイル、アクション、その他のドキュメントとの関係などの情報が含まれます.その特徴は大部分が<head>内に入ることである.
ex) base , line , meta , noscript , script , style , title

2. Flow

Flowは、ドキュメントの自然な流れによって配置される要素を含む.
ほとんどの要素はFlowに含まれており、Metadataに対応するタグの一部だけが除外されています.
ex) 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

Sectioing

Sectioningは、文書構造に関連する要素を含む.HTML 5で新しく生成されたarticle、aside、nav、sectionなどが含まれ、これらのタグは文書の構造、アウトラインに影響を与える.
ex) article, aside, nav, section

Heading

Headingは、各セクションのタイトルを定義するタイトルラベルを含む.
ex) h1 , h2 , h3 , h4 , h5 , h6

Phrasing

Phrasingは、文書のテキストまたはテキストを装飾する段落の内部レベルの要素である.
ex) 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

Embedded

Embedded外部コンテンツを表す要素を含み、オーディオ、ビデオ、画像などのマルチメディア関連要素を含む.
ex) audio, canvas, embed, iframe, img, math, mobject, svg, video

Interactive

Interactiveは、form要素を表すユーザと対話する要素を含む.
ex) a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls]

シンボルマークアップ


Webの発展とデータの膨大さに伴い、検索エンジンの最適化の重要性が明らかになった.検索エンジン最適化は,HTMLコードに情報を収集し,検索キーワードに基づいて適切なウェブサイトを組織し,検索結果の先頭に立つことができるようにする.また,このような検索エンジン最適化を実現するためには,適切なHTML要素を用いてシンボルマークアップを行う必要がある.

心理表示とは?


視覚は機械(ブラウザ)がよく理解できることを意味する.
では、ブラウザがコードをよりよく理解できるように寸法を作成するにはどうすればいいのでしょうか.答えは簡単で、規定の規格に従って記入すればいいです.
具体的には、寸法ドキュメントを作成する際に、意味のあるタグ、要素を使用して、構造化された作成を行うことができます.
そうすると、機械だけでなく、人間も分かりやすいコードになります.
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
粗vs重要
傾斜vs強調の
下線vs新規
中間線付きvs削除の
上記のコードがあれば,形状は同じであるが意味が異なる結果を得ることができる.

b vs strong

bは意味がなく、単純にテキストを太くするだけですが、strongも重要な意味を含んでいます.したがって,重要な意味を含む場合にはstrongを用いることが適切である.

i vs em

iは傾斜した文字のみを表し、emは文字の特定の部分を強調する意味を持つ.

u,s vs ins,del

u単に下線を引いただけですが、ins表記は内容が追加されたことを意味しますsも同様に字の中央に線を引くだけであるが、delマークは削除される.

HTML 5のシンボルマーク


人と違って、機械はそのラベルがどんな機能のラベルなのかを確定するのが難しい.この問題を解決するために心理ラベルを作成し,特定のラベルに意味を与えることでページを作成しようと試みたが,このようなページを心理ページと呼ぶ.

複数のビジュアルタグ


デフォルトでは、「心理タグ」はdivなどの機能を実行します.
タグ名
説明:
header
タイトルを意味します.
nav
ナビゲーションを意味します.
aside
側面に位置する空間を意味します.
section
複数の中心コンテンツを囲む空間を意味する.
article
字の多い部分を意味する.
footer
フォードを意味します.
article同じトピックの内容を含むために使用されます.section関連ドキュメントを分離するために使用されます.
簡単に言えば、articleは他の文章とは無関係であり、sectionは他の部分と関係があるが、区別に用いられる.

ブロック&インライン


ブロックレベル要素


これは、親要素が満たされた横方向の領域の要素です.
箱の両側に他の要素が配置されていないように箱を作成します.そのため、箱の上下に改行が発生します.
ブロックレベル要素には、すべての一般要素(ブロックレベル+行内レベル)を含めることができます.h1~h6 과 p 태그는 블록 레벨 요소이지만 내부 요소로 Phrasing Content 만 허용한다.ex) div , h1~h6 , p , ul , li , table

行レベル要素


一つのライン上で自分と同じ内容の箱を作る要素です.
線の流れを遮断せず、要素の前後を改行せず、他の線要素がある可能性があります.行レベル要素はブロックレベル要素のサブ要素に分類されるため、サブ要素としてブロックレベル要素を持つことはできません.예외로 a태그는 블록 레벨 요소를 가질 수 있다ex) span , i , img , em , string , a
洛谷P 083レンタル教室
スクロール