mirror of
https://github.com/namibia/awesome-cheatsheets.git
synced 2024-11-22 04:45:16 +00:00
HTML: improve formatting
This commit is contained in:
parent
a724efd0b5
commit
54f4bb9e1f
@ -3,20 +3,29 @@
|
|||||||
* Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
|
* Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
|
||||||
* ******************************************************************************************* * -->
|
* ******************************************************************************************* * -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Document Summary -->
|
<!-- Document Summary -->
|
||||||
|
|
||||||
|
|
||||||
<html></html> <!-- Indicates that the page is written in html -->
|
<html></html> <!-- Indicates that the page is written in html -->
|
||||||
<head></head> <!-- Contains Information specific to the page like title, styles and scripts -->
|
<head></head> <!-- Contains Information specific to the page like title, styles and scripts -->
|
||||||
<title></title> <!-- Title for the page that shows up in the browser title bar -->
|
<title></title> <!-- Title for the page that shows up in the browser title bar -->
|
||||||
<body></body> <!-- Content that the user will see -->
|
<body></body> <!-- Content that the user will see -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Document Information -->
|
<!-- Document Information -->
|
||||||
|
|
||||||
|
|
||||||
<base/> <!-- Usefull for specifying relative links in a document -->
|
<base/> <!-- Usefull for specifying relative links in a document -->
|
||||||
<style></style> <!-- Contains styles for the html document -->
|
<style></style> <!-- Contains styles for the html document -->
|
||||||
<meta/> <!-- Contains additional information about the page, author, page description and other hidden page info -->
|
<meta/> <!-- Contains additional information about the page, author, page description and other hidden page info -->
|
||||||
<script></script> <!-- Contains all scripts internal or external -->
|
<script></script> <!-- Contains all scripts internal or external -->
|
||||||
<link/> <!-- Used to create relationships with external pages and stylesheets -->
|
<link/> <!-- Used to create relationships with external pages and stylesheets -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Document Structure -->
|
<!-- Document Structure -->
|
||||||
|
|
||||||
|
|
||||||
<h1></h1> ... <h6></h6> <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent -->
|
<h1></h1> ... <h6></h6> <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent -->
|
||||||
<p></p> <!-- Used to organize paragraph text -->
|
<p></p> <!-- Used to organize paragraph text -->
|
||||||
<div></div> <!-- A generic ontainerused to denote a page section -->
|
<div></div> <!-- A generic ontainerused to denote a page section -->
|
||||||
@ -26,6 +35,8 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Text Formatting -->
|
<!-- Text Formatting -->
|
||||||
|
|
||||||
|
|
||||||
<strong></strong> and <b></b> <!-- Makes text contained in the tag as bold -->
|
<strong></strong> and <b></b> <!-- Makes text contained in the tag as bold -->
|
||||||
<em></em> and <i></i> <!-- Alternative way to make the text contained in the tag as bold -->
|
<em></em> and <i></i> <!-- Alternative way to make the text contained in the tag as bold -->
|
||||||
<strike></strike> <!-- creates a strike through the text element -->
|
<strike></strike> <!-- creates a strike through the text element -->
|
||||||
@ -35,7 +46,10 @@
|
|||||||
<address></address> <!-- Used to display contact information -->
|
<address></address> <!-- Used to display contact information -->
|
||||||
<code></code> <!-- Used to display inline code snippets -->
|
<code></code> <!-- Used to display inline code snippets -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Links Formatting -->
|
<!-- Links Formatting -->
|
||||||
|
|
||||||
|
|
||||||
<a href="url"></a> <!-- Used to link to external or internal pages of a wbesite -->
|
<a href="url"></a> <!-- Used to link to external or internal pages of a wbesite -->
|
||||||
<a href="mailto:email@example.com"></a> <!-- Used to link to an email address -->
|
<a href="mailto:email@example.com"></a> <!-- Used to link to an email address -->
|
||||||
<a href="name"></a> <!-- Used to link to a document element -->
|
<a href="name"></a> <!-- Used to link to a document element -->
|
||||||
@ -44,9 +58,14 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Image Formatting -->
|
<!-- Image Formatting -->
|
||||||
|
|
||||||
|
|
||||||
<img src="url" alt="text"> <!-- Used to display images in a webpage wehre src="url" contains the link to the image source and alt="" contains an alternative text to display wehn the image is not displayed -->
|
<img src="url" alt="text"> <!-- Used to display images in a webpage wehre src="url" contains the link to the image source and alt="" contains an alternative text to display wehn the image is not displayed -->
|
||||||
|
|
||||||
|
|
||||||
<!-- List Formatting -->
|
<!-- List Formatting -->
|
||||||
|
|
||||||
|
|
||||||
<ol></ol> <!-- Used to create ordered lists with numbers in the items -->
|
<ol></ol> <!-- Used to create ordered lists with numbers in the items -->
|
||||||
<ul></ul> <!-- Used to display unordered lists with numbers in the items -->
|
<ul></ul> <!-- Used to display unordered lists with numbers in the items -->
|
||||||
<li></li> <!-- Contains list items inside ordered and unordered lists -->
|
<li></li> <!-- Contains list items inside ordered and unordered lists -->
|
||||||
@ -54,8 +73,12 @@
|
|||||||
<dt></dt> <!-- definition of single term inline with body content -->
|
<dt></dt> <!-- definition of single term inline with body content -->
|
||||||
<dd></dd> <!-- The descrpition of the defined term -->
|
<dd></dd> <!-- The descrpition of the defined term -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Forms Formatting and Attributes -->
|
<!-- Forms Formatting and Attributes -->
|
||||||
|
|
||||||
|
|
||||||
<form action="url"></form> <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
|
<form action="url"></form> <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
|
||||||
|
|
||||||
<!-- Supported attributes -->
|
<!-- Supported attributes -->
|
||||||
method="somefunction()" <!-- Contains the type of request (GET, POST... etc) which dictates how to send the data of the form -->
|
method="somefunction()" <!-- Contains the type of request (GET, POST... etc) which dictates how to send the data of the form -->
|
||||||
enctype="" <!-- Dictates how the data is to be encrypted when the data is sent to the web server-->
|
enctype="" <!-- Dictates how the data is to be encrypted when the data is sent to the web server-->
|
||||||
@ -69,6 +92,7 @@ target="" <!-- Tell where to display the
|
|||||||
<legend></legend> <!-- The form legend acts as a caption for the fieldset element -->
|
<legend></legend> <!-- The form legend acts as a caption for the fieldset element -->
|
||||||
|
|
||||||
<input type="text/email/number/color/date"> <!-- Input is the input field where the user can input various types of data -->
|
<input type="text/email/number/color/date"> <!-- Input is the input field where the user can input various types of data -->
|
||||||
|
|
||||||
<!-- Supported attributes -->
|
<!-- Supported attributes -->
|
||||||
name="" <!-- Describes the name of the form -->
|
name="" <!-- Describes the name of the form -->
|
||||||
width="" <!-- Specifies the width of an input field -->
|
width="" <!-- Specifies the width of an input field -->
|
||||||
@ -82,6 +106,7 @@ step="" <!-- Identifies the legal numb
|
|||||||
</textarea>
|
</textarea>
|
||||||
|
|
||||||
<select name=""></select> <!-- Describes a dropdown box for users to select from variety of ochoices-->
|
<select name=""></select> <!-- Describes a dropdown box for users to select from variety of ochoices-->
|
||||||
|
|
||||||
<!-- Supported attributes -->
|
<!-- Supported attributes -->
|
||||||
name="" <!-- The name for a dropdown combination box -->
|
name="" <!-- The name for a dropdown combination box -->
|
||||||
size="" <!-- Specifies the number of available options -->
|
size="" <!-- Specifies the number of available options -->
|
||||||
@ -92,7 +117,10 @@ autofocus <!-- Specifies that the dropd
|
|||||||
<option value=""></option> <!-- Defines one of the avaialble option from the dorpdown list-->
|
<option value=""></option> <!-- Defines one of the avaialble option from the dorpdown list-->
|
||||||
<button></button> <!-- A clickable button to submit the form -->
|
<button></button> <!-- A clickable button to submit the form -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Tables Formatting -->
|
<!-- Tables Formatting -->
|
||||||
|
|
||||||
|
|
||||||
<table></table> <!-- Defines and contains all table related content -->
|
<table></table> <!-- Defines and contains all table related content -->
|
||||||
<caption></caption> <!-- A description of what table is and what it contains -->
|
<caption></caption> <!-- A description of what table is and what it contains -->
|
||||||
<thead></thead> <!-- The table headers contain the type of information defined in each column underneath -->
|
<thead></thead> <!-- The table headers contain the type of information defined in each column underneath -->
|
||||||
@ -104,8 +132,12 @@ autofocus <!-- Specifies that the dropd
|
|||||||
<colgroup></colgroup> <!-- Groups a single or multiple columns for formatting purposes -->
|
<colgroup></colgroup> <!-- Groups a single or multiple columns for formatting purposes -->
|
||||||
<col> <!-- Defines a single column of information inside a table -->
|
<col> <!-- Defines a single column of information inside a table -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Objects and iFrames -->
|
<!-- Objects and iFrames -->
|
||||||
|
|
||||||
|
|
||||||
<object data=""></object> <!-- Describes and embed file type including audio, video, PDf's, images -->
|
<object data=""></object> <!-- Describes and embed file type including audio, video, PDf's, images -->
|
||||||
|
|
||||||
<!-- Supported attributes -->
|
<!-- Supported attributes -->
|
||||||
type="" <!-- Describes the type of media embedded -->
|
type="" <!-- Describes the type of media embedded -->
|
||||||
height="" <!-- Describes the height of the object in pixels -->
|
height="" <!-- Describes the height of the object in pixels -->
|
||||||
@ -117,7 +149,10 @@ usemap="" <!-- This is the name of the c
|
|||||||
scr="" <!-- The source of the external file you're embedding -->
|
scr="" <!-- The source of the external file you're embedding -->
|
||||||
width="" <!-- Describes the width of the iframe in pixels -->
|
width="" <!-- Describes the width of the iframe in pixels -->
|
||||||
|
|
||||||
|
|
||||||
<!-- HTML5 New Tags -->
|
<!-- HTML5 New Tags -->
|
||||||
|
|
||||||
|
|
||||||
<header></header> <!-- Defines the header block for a document or a section -->
|
<header></header> <!-- Defines the header block for a document or a section -->
|
||||||
<footer></footer> <!-- Defines the footer block for a document or a section -->
|
<footer></footer> <!-- Defines the footer block for a document or a section -->
|
||||||
<main></main> <!-- Describes the main content of a document-->
|
<main></main> <!-- Describes the main content of a document-->
|
||||||
@ -141,7 +176,10 @@ width="" <!-- Describes the width of th
|
|||||||
<time></time> <!-- Identifies the time and date -->
|
<time></time> <!-- Identifies the time and date -->
|
||||||
<wbr> <!-- A line break within the content -->
|
<wbr> <!-- A line break within the content -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Collective CHaracter Obejcts -->
|
<!-- Collective CHaracter Obejcts -->
|
||||||
|
|
||||||
|
|
||||||
" " Quotation Marks - "
|
" " Quotation Marks - "
|
||||||
& & Ampersand - &
|
& & Ampersand - &
|
||||||
< < Less than sign - <
|
< < Less than sign - <
|
||||||
@ -151,10 +189,3 @@ width="" <!-- Describes the width of th
|
|||||||
@ Ü @ symbol - @
|
@ Ü @ symbol - @
|
||||||
• ö Small bullet - .
|
• ö Small bullet - .
|
||||||
™ û Trademark Symbol - ™
|
™ û Trademark Symbol - ™
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user