Telefone und größer
+Nur Telefone
+Nur Schreibtafeln hochkant
+Schreibtafeln und größer
+Schreibtafeln im Querformat
+Schreibtafeln quer und größer
+Nur Arbeitsplatzrechner
+Arbeitsplatzrechner und größer
+Richtige Monitore und größer
+Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.
+Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.
+article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}Elemente:
+// body+
// article
// section
// nav
// aside
// h1-h6
// header
// footer
Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.
+section.sec_main_centerEnde.
+Zentrierter Bereich.
+section.sec_main_statusFließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.
aside.right+div.bsideMit Absatz innerhalb von <hgroup>.
Mit Absatz innerhalb von <hgroup>.
header.header_pageheader.header_txt>h1Innerhalb eines <header>.
Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.
+ +Elemente:
+// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div+
Ein Absatz. Ein code Element innerhalb wird besonders behandelt.
p.column_2Spalten können angegeben werden.
+p.column_3.column_lineSpalten können angegeben werden.
+hr.hidden+hr.dotted+hr.doublehr.verticalVorformatierter Text. + erhält Umbrüche und Einrückung. ++
pre.pre_code>code*2+let variable = true;+()(){}
Ein Zitat ist eingerückt.+
blockquote.quote_mark>p+p.quote_source++Zitat mit automatischen Anführungszeichen
+und Quellenangabe.
+
ul.list_basic.list_dash>li*2ul.list_link>(li>a)*2figure>figcaption+{element}div.div_info>pAbsatz in Informationsbox.
+div.box_space>div.box_cube>spandiv.box_placeholder+hr+div.box_placeholder_bkgElemente:
+// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th+
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3| + | Kopfzeile | +A | +B | +
|---|---|---|---|
| Vorspalte | +Eine | ++ | + |
| 1 | ++ | erweiterte | ++ |
| 2 | ++ | + | Tabelle | +
table.width_full.table_stripe.table_fix.table_free>tr>td*3| Tabelle | ++ | + |
| ohne | +Rahmen | ++ |
| + | jedoch | +mit | +
| + | + | Streifen | +
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right| Bezeichnung | +Menge | +Wert | +
|---|---|---|
| Alpha | +1 | +8990 | +
| Bravo | +10 | +1 | +
| Charlie | +1 | +1 | +
| Summe | +9001 | +|
Elemente:
+// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend+
input.button_io+button.button_ioTelefone und größer
-Nur Telefone
-Nur Schreibtafeln hochkant
-Schreibtafeln und größer
-Schreibtafeln im Querformat
-Schreibtafeln quer und größer
-Nur Arbeitsplatzrechner
-Arbeitsplatzrechner und größer
-Richtige Monitore und größer
-Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.
-Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.
-article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}Elemente:
-// body-
// article
// section
// nav
// aside
// h1-h6
// header
// footer
Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.
-section.sec_main_centerEnde.
-Zentrierter Bereich.
-section.sec_main_statusFließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.
aside.right+div.bsideMit Absatz innerhalb von <hgroup>.
Mit Absatz innerhalb von <hgroup>.
header.header_pageheader.header_txt>h1Innerhalb eines <header>.
Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.
- -Elemente:
-// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div-
Ein Absatz. Ein code Element innerhalb wird besonders behandelt.
p.column_2Spalten können angegeben werden.
-p.column_3.column_lineSpalten können angegeben werden.
-hr.hidden+hr.dotted+hr.doublehr.verticalVorformatierter Text. - erhält Umbrüche und Einrückung. --
pre.pre_code>code*2-let variable = true;-()(){}
Ein Zitat ist eingerückt.-
blockquote.quote_mark>p+p.quote_source--Zitat mit automatischen Anführungszeichen
-und Quellenangabe.
-
ul.list_basic.list_dash>li*2ul.list_link>(li>a)*2figure>figcaption+{element}div.div_info>pAbsatz in Informationsbox.
-div.box_space>div.box_cube>spandiv.box_placeholder+hr+div.box_placeholder_bkgElemente:
-// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th-
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3| - | Kopfzeile | -A | -B | -
|---|---|---|---|
| Vorspalte | -Eine | -- | - |
| 1 | -- | erweiterte | -- |
| 2 | -- | - | Tabelle | -
table.width_full.table_stripe.table_fix.table_free>tr>td*3| Tabelle | -- | - |
| ohne | -Rahmen | -- |
| - | jedoch | -mit | -
| - | - | Streifen | -
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right| Bezeichnung | -Menge | -Wert | -
|---|---|---|
| Alpha | -1 | -8990 | -
| Bravo | -10 | -1 | -
| Charlie | -1 | -1 | -
| Summe | -9001 | -|
Elemente:
-// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend-
input.button_io+button.button_io