Anfang HTML5 & CSS3 für Dummies

Die folgende Tabelle enthält eine Liste mit den Namen Farben, die Sie in HTML und CSS-Code verwenden können, um eine bunte Website zu erstellen. Die Farben werden mit den entsprechenden RGB hexcode Werte gezeigt zusammen mit einer repräsentativen Farbfeld.

Menu

NameHexcode
Wasser# 00FFFF
Schwarz# 000000
Blau# 0000FF
Fuchsie# FF00FF
Grau# 808080
Grün# 008000
Limette# 00FF00
Kastanienbraun# 800000
Marine# 000080
Olive# 808000
Lila# 800080
Rot# FF0000
Silber# C0C0C0
Teal# 008080
Weiß#FFFFFF
Gelb# FFFF00

Kennen Sie Ihre Elemente!

in alphabetischer Reihenfolge erscheinend ist eine Liste aller HTML5-Elemente in der aktuellen HTML5-Spezifikation enthalten. Eine kurze Beschreibung wird als Kurzreferenz enthalten, wenn für die perfekte Element suchen.

Element Beschreibung
EINVerwenden Sie zum Erstellen von Hyperlinks
AbkVerwenden Sie für Abkürzungen
AdresseKontakt Informationen
BereichHyperlink in einem Bild-Karte
Artikel*Bietet Abschnitt Formatierung für kurze argumentativen Elemente wie Artikel, Blogs usw.
beiseite*Ein wenig verwandten Stück Inhalt für Host-Seite
Audio- *Gebrauchte Ton hinzufügen für die Wiedergabe mit Web-Seite zugeordnet ist
bBold Text
BaseBasis-URL
bdi *Isolieren Text, der von Text um es in eine andere Richtung formatiert werden könnten
bdoVerwenden Sie die Richtung von Text angeben
blockquoteBlock-Zitat
KörperDokumentkörper
brZeilenumbruch
TasteErstellt eine Schaltfläche.
Segeltuch*Verwenden Sie einen Seitenbereich, in der Zeichnung zu definieren, auftreten kann
BildunterschriftTabelle Titel
zitierenAngeführt Titel eines Werkes
CodeCodefragment
colSpalte in einer Tabelle
colgroupGruppe von Tabellenspalten
Befehl*Verwenden Sie Benutzer GUI-Elemente zu definieren,
DataList- *Verwenden Sie eine Liste zu erstellen Eingang Elemente für die Pull-Down-Menüs
ddBeschreibung
delGelöschte Text
Details *Bietet zusätzliche Informationen oder Kontrollen für die Nutzer auf Anfrage
dfndefinieren Instanz
divGenerisches Behälter
dlBeschreibung Liste
dtBegriff oder Namen
emBetonung
einbetten *Links zu externen Anwendungen oder interaktive Inhalte
fieldsetVerwandte Formular-Steuerelemente
figcaption *Geben Sie eine Beschriftung für eine Zahl Element
Zahl*Standalone-Flow Inhalt Element- kann statisch oder dynamisch sein
Fußzeile*Abschließende Informationen für ein Dokument Abschnitt
bildenDefiniert ein benutzer submittable Form
h1 - h6Rubriken
KopfContainer für Metadaten über die Dokument, Skripts und Stile
Kopf *Header für das Dokument
hgroup *Heading Gruppe
hrHorizontale Regel / Themenpause
htmlWurzelelement
ichKursiv Text
iframeVerschachtelte Browsing Inhalt
imgImage
EingangEingangskontrolle
InsZwischentext
kbdBenutzereingabe
keygen *Benutzer zugänglicher Steuerung zu generieren Schlüsselpaare für die Sicherheit oder Verschlüsselung
EtiketteBildunterschrift für ein Formular-Steuerelement
LegendeErläuternde caption
liListenpunkt
LinkMetadaten für die Anbindung externer Dokumente
KarteDefinieren Sie ein Bild-Karte
Kennzeichen*Mark oder markieren Sie einen Textabschnitt in einem Dokument, als Referenz in einem anderen Dokument
MenüListe der Befehle
MetaMetadaten
Meter*Definieren Sie einen visuellen Indikator für irgendeine Art von Messung
nav *Verwenden Sie eine Navigationsleiste oder einen Bereich in einer Web-Seite zu definieren
noscriptDefinieren Sie Inhalte für den Fall, zeigt das Skript nicht ausgeführt werden kann,
ObjektExterner Inhalt
olBestellliste
optgroupDefinieren Sie eine Gruppe von Optionen
Ausgabe*Eine Art der Ausgabe von Skript-Berechnung oder API-Aufruf
pAbsatz
paramVerwenden Sie Parameter-Plugins zur Verfügung zu stellen
Vorvorformatierte Text
Fortschritt*Eine visuelle Meter für Aufgabenerledigung (Fortschrittsbalken)
qZitiert Text
rp *Verwenden Sie für die Klammern um Rubin Anmerkungen setzen
rt *Verwenden Sie den Text einer Ruby-Annotationen zu markieren
Rubin*Verwenden Sie zu Bildsprachen wie Chinesisch oder Japanisch mit Anmerkungen versehen
sMark Text entfernt, mit Streik durch Formatierung.
sampBeispielausgabe
SkriptEmbedded-Skript
Abschnitt*Generisches Dokument oder Anwendungsabschnitt
wählenOption Auswahlformular Steuer
kleinKleiner Text
Quelle*Verwenden Sie mehrere Quellen für Audio- und Video spezifizieren
SpanneEin allgemeiner Text Wrapper
starkWichtiger Text. Ist in der Regel als fett formatiert
StilPräsentation Informationen, in der Regel CSS
UnterSubscript Text
Zusammenfassung*Zusammenfassung, Legende oder Beschriftung für die Eingabe Details Informationen
supHochgestellte Text
TabelleTabelle
tbodyGruppe von Tabellenzeilen
tdTabellenzelle
TextArea-Texteingabebereich
tfootTabelle Fußzeilenzeile Gruppe
thTabelle Kopfzelle
theadTabelle Überschrift Zeilengruppe
Zeit*Wert für die Darstellung von Datum und / oder Uhrzeit
TitelDokumenttitel
trTischreihe
verfolgen*Geben Sie einen ergänzenden Medientrack
uUnterstreichen
ulUngeordnete Liste
varVerwenden Sie eine mathematische oder Programmierung Variable zu spezifizieren oder einen Platzhalter
Video *Verwenden Sie Video-Inhalte in Web-Seite, um die Wiedergabe
wbr *Verwenden Sie auf mögliche Knickpunkt für Textfluss bezeichnen

* Neu in HTML5

CSS Referenznummer

Die folgende Tabelle zeigt CSS-Eigenschaften, die heute von den meisten Browsern unterstützt werden, zusammen mit ihren zulässigen Werten. Einige dieser Eigenschaften sind Teil der CSS3-Spezifikationen und sind noch experimentell, so sicher sein, mit dem zu überprüfen Kann ich benutzen Website für die neuesten Informationen über Browser-Unterstützung. (Für Hilfe der Spalte Werte dieses Diagramms zu lesen, finden Sie im Artikel "A Quick Guide zur CSS-Wert Definition Syntax" auf dummkopf.ru/extras/beginninghtml5css3.)

Name Werte
Animation ||
Animation-Verzögerung
Animation-Richtungnormal | alternate | Rückseite | alternative Rückwärts
Animation-Dauer
Animation-fill-modekeine | vorwärts | zurück | beide
Animation-Iteration-countunendlich |
Animation-namekeine |
Animation-Play-Zustandlaufen | pausiert
Animation-Timing-Funktion
Backface-Sichtbarkeitsichtbar | versteckt
background-attachmentblättern | Fest | erben
background-clipborder-box | padding-box | Inhalt-box | erben
Hintergrundfarbe | erben
Hintergrundbild | keine | erben
Hintergrund-Ursprungborder-box | padding-box | Inhalt-box | erben
background-position[[ | | links | Zentrum | Recht ] [ | | oben | Zentrum | unten]? ] | [[Left | Zentrum | rechts] || [Top | Zentrum | unten]] | erben
Hintergrund Wiederholungwiederholen | repeat-x | repeat-y | no-repeat | erben
Hintergrund-Größe | | auto | decken | enthalten
Hintergrund[ 'Background-color' || "Background-image '||' background-Repeats '||' background-attachment '|| background-position] | erben
border-collapseCollapse | getrennt | erben
Randfarbe[ ] {1,4} | erben
border-imagekeine |
border-image-Beginn[ 'Seiten' || "Horizontale" || 'Vertikale' || 'Top' || 'Bottom' || 'Rechts' || 'Links'] | erben
border-image-Wiederholung[ 'Type' || "Horizontale" || 'Vertikale' || 'Stretch' || 'Wiederholung' || 'Round'] | erben
border-image-Quellekeine |
border-image-Scheibe[ | ] {1,4} füllen?
border-image-Breite[ | | | auto] {1,4}
border-radius[ | ] {1,4} [/ [ | ] {1,4}]?
Grenzabstand ? | erben
border-style{1,4} | erben
border-top border-right border-bottom border-left[|| || Border-top-color] | erben
border-top-color border-right; Farbe border-bottom-color border-left; Farbe | erben
border-top-left; Radius border-top-rechts; Radius border-bottom-left; Radius border-bottom-right; Radius[ | ] {1,2}
border-top-style border-right; Stil border-bottom-style border-left; Stil | erben
border-top-width border-right; width border-bottom-width border-left; width | erben
Rahmenbreite{1,4} | erben
Rand[|| || Border-top-color] | erben
Boden | | auto | erben
box-shadowkeine | [Einsatz? [? ? ? ]] #
break-afterauto | immer | vermeiden | links | Recht | Seite | Säule | vermeiden-Seite | vermeiden-Säule
Einbruch vorauto | immer | vermeiden | links | Recht | Seite | Säule | vermeiden-Seite | vermeiden-Säule
caption-sideoben | Boden | erben
klarkeine | links | Recht | beide | erben
Klammer | auto | erben
Farbe | erben
Spaltenlt; "Spaltenbreite"> || lt; 'column-count>
column-count | Auto
column-fillauto | Balance
Spalte-Lücke | normal
Spalte-Regellt; 'säulen Regel-width'> || lt; "column-rule-Stil '> || lt; 'column-rule-color'>
column-rule-Farbe
column-rule-Stil[Keine | versteckt | gepunkteten | gestrichelte | fest | double | Nut | Kamm | Einsatz | Anfang] | erben
column-rule-Breite | [Dünn | mittel | dick]
Spalte Spannekeine | alle | erben
Spaltenbreite | Auto
Inhaltnormal | keine | [ | | | attr () | open-quote | close-quote | no-open-quote | no-close-quote] + | erben
Gegenschritt[ ? ] + | keine | erben
counter-reset[ ? ] + | keine | erben
Mauszeiger[[ ,] * [Auto | Fadenkreuz | default | Zeiger | bewegen | e-resize | ne-resize | nw-resize | n-Resize | se-resize | sw-resize | s-resize | w-resize | Text | warten | Hilfe | Fortschritt]] | erben
Richtungltr | rtl | erben
anzeigenInline | Block | list-item | inline-block | Tabelle | inline-table | table-row-Gruppe | table-header-Gruppe | table-footer-Gruppe | table-row | table-column-Gruppe | Tisch-Säule | table-cell | table-caption | keine | erben
empty-cellszeigen | verstecken | erben
schwebenlinks | Recht | keine | erben
Schriftfamilie[[| ] [, | ] *] | erben
Schriftgröße | | | | erben
Schriftstilnormal | kursiv | schräg | erben
font-variantnormal | Small Caps | erben
font-weightnormal | fett | kühner | leichter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | erben
Schriftart[[ 'Font-style' || 'Font-variant' || 'Font-weight']? 'Font-size' [/ 'line-height']? font-family] | Bildunterschrift | Symbol | Menü | message-box | Klein caption | Status-bar | erben
Höhe | | auto | erben
@keyframes[[Von | bis | ] [Von | bis | ]* Block ]*
links | | auto | erben
Buchstaben-Abstandnormal | | erben
Zeilenhöhenormal | | | | erben
list-style-image | keine | erben
list-style-positioninnen | außerhalb | erben
list-style-typeScheibe | Kreis | Platz | dezimal | Dezimal-leading-zero | Unter-roman | Ober-roman | Unter griechisch | Unter-latin | Ober-latin | armenisch | georgisch | Unter-alpha | Ober-alpha | keine | erben
list-style[ 'List-style-type' || 'List-style-position' || list-style-image] | erben
margin-right margin-left | erben
margin-top margin-bottom | erben
Marge{1,4} | erben
maximale Höhe | | keine | erben
maximale Breite | | keine | erben
min-height | | erben
min-width | | erben
Opazität | erben
Waisen | erben
outline-color | invertieren | erben
outline-style | erben
outline-width | erben
skizzieren[ 'Outline-color' || 'Outline-style' || outline-width] | erben
Überlaufsichtbar | versteckt | blättern | auto | erben
Überlauf-wrapnormal | break-word | erben
Überlauf-xsichtbar | versteckt | blättern | auto | erben
Überlauf-ysichtbar | versteckt | blättern | auto | erben
padding-top padding-right padding-bottom padding-left | erben
Polsterung{1,4} | erben
page-break-afterauto | immer | vermeiden | links | Recht | erben
page-break-beforeauto | immer | vermeiden | links | Recht | erben
page-break-insidevermeiden | auto | erben
Perspektivekeine |
Perspektive-Ursprung[ | | links | Zentrum | Recht | oben | unten] | [[ | | links | Zentrum | Recht ] [ | | oben | Zentrum | unten]]
Positionstatisch | relativ | absolute | Fest | erben
Zitate[ ] + | keine | erben
Recht | | auto | erben
Tisch-Layoutauto | Fest | erben
text-alignlinks | Recht | Zentrum | rechtfertigen | erben
text-decorationkeine | [Unterstreichen || || overline line-through || blinken] | erben
Texteinzug | | erben
text-transKapital | Groß | Klein | none | inherit
oben | | auto | erben
verwandelnkeine | +
transformations Herkunft[ | | links | Zentrum | Recht | oben | unten] | [[ | | links | Zentrum | Recht ] [ | | oben | Zentrum | unten]] ?
Transform-StilWohnung | preserve-3d
Übergang[Keine | ] ||
Übergang-Verzögerung
Übergangszeit
Übergang-Timing-Funktion
Übergang-Eigenschaftkeine | # [ ',' #] *
unicode-bidinormal | einbetten | bidi-override | erben
vertical-alignBaseline | Unter | Super | oben | Text-top | Mitte | Boden | text-bottom | | | erben
Sichtweitesichtbar | versteckt | Collapse | erben
white-spacenormal | pre | nowrap | pre-wrap | pre-line | inherit
Witwen | erben
Breite | | auto | erben
Wort-Abstandnormal | | erben
z-indexauto | | erben

Menü