Welcome to my reference cheat-sheet!I hope
this will help you build more websites
in
the future!✌
by
Yira Linares
A SheCodes's Student
| tag | attributes | example | description |
|---|---|---|---|
| <link> | href, rel | <link href=“./folder/file” rel= stylesheet / > | to link stylesheets, fonts... |
| <img> | src, alt | <img src=“./folder/img” alt="My personal logo" / > | to add pictures |
| <a> | href, target | <a href="https://www.example.com" target=_blank>Click!< /a> | to link to ext./int. pages... |
| <br> | href, rel | HTML<br>Common Tags | to insert a line break |
| <span> | generics | <span>Hello!< /span> | it’s an inline element |
| <div> | generics | <div> < /div> | it’s a block element |
| <button> | type | <button name=“favorite” type=“button”>Like< /button> | needs an tag |
| <ul>, <ol>, <li> | type | <ul type=“square”><li>< /li><li>< /li>< /ul> | list of items... |
| <video> | src, autoplay, poster | <video src="videofile.ogg" autoplay poster="image. jpg">Tu navegador no admite el elemento.< /video> |
to add a video form local or ext. |
| tag | attributes | description |
|---|---|---|
| <table> | - | table |
| <tr> | - | table row |
| <th> | rowspan, colspan | table header cell |
| <td> | rowspan, colspan | table data / cell |
| <thead> | - | group of header contents |
| <tbody> | - | group of body contents |
| <tfootv> | - | group of footer contents |
| <colgroup> | - | group of columns |
| <col> | - | column in a colgroup |
| <caption> | - | table caption |
| basic selectors | grouping selectors | combinators | pseudo |
|---|---|---|---|
| universal selector syntax: * ns|* *|* example: * will match all the elements of the document. |
selector list syntax: A, B Example: div, span will match both <span> and <div> elements. |
descendant combinator syntax: A B Example: div span will match all elements that are inside a <div> element.< /span> |
pseudo classes the : pseudo allow the selection of elements based on state information that is not contained in the document tree. Example: a:visited will match all <a> elements that have been visited by the user. |
| type selector syntax: * ns|* *|* example: * will match all the elements of the document. |
child combinator syntax: A > B Example: ul > li will match all li elements that are nested directly inside a ul element. |
paseudo elements the :: pseudo represent entities that are not included in HTML. Example: p::first-line will match the first line of all p elements. |
|
| class selector syntax: .classname Example: .index will match any element that has a class of "index". |
general sibling combinator syntax: A ~ B Example: p ~ span will match all span elements that follow a p, immediately or not. |
||
| id selector syntax: #idname Example: #toc will match the element that has the ID "toc". |
adjacent sibling combinator syntax: A || B Example: col || td will match all td elements that belong to the scope of the col. |
||
| attribute selector syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value). |
column combinator Syntax: A || B Example: col || td will match all td elements that belong to the scope of the col. |
coming soon!🎈