mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-07-13 15:28:32 +08:00
Step 1-01 updates
This commit is contained in:
Elizabeth Craig
@@ -2,73 +2,74 @@
|
||||
|
||||
The [HTML demo page](http://localhost:8080/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
|
||||
To learn more about each element, click on the elements below.
|
||||
To learn more about each element, click on the element names below.
|
||||
|
||||
### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
|
||||
### [Document Metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
|
||||
|
||||
- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
|
||||
- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
|
||||
- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
|
||||
- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
|
||||
- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
|
||||
- [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root-level element
|
||||
- [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (metadata) about the page
|
||||
- [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown in browser tab/title bar
|
||||
- [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resources (usually stylesheets)
|
||||
- [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
|
||||
|
||||
### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
|
||||
|
||||
- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
|
||||
- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
|
||||
- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
|
||||
- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
|
||||
- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
|
||||
- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
|
||||
- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
|
||||
- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
|
||||
- [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
|
||||
- [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
|
||||
- [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
|
||||
- [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominant content
|
||||
- [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
|
||||
- [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
|
||||
- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
|
||||
- [`h1`,`h2`,`h3`,`h4`,`h5`,`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
|
||||
|
||||
### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
|
||||
|
||||
- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
|
||||
- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
|
||||
- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
|
||||
- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
|
||||
- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
|
||||
- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
|
||||
- [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - Generic block level container
|
||||
- [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - Paragraph
|
||||
- [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
|
||||
- [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list (bullets)
|
||||
- [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
|
||||
- [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
|
||||
|
||||
### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
|
||||
|
||||
- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
|
||||
- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
|
||||
- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
|
||||
- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
|
||||
- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
|
||||
- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
|
||||
- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
|
||||
- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
|
||||
- [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, programs
|
||||
- [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
|
||||
- [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content (usually bold)
|
||||
- [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis (usually italic)
|
||||
- [`i`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text (usually italic)
|
||||
- [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
|
||||
- [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
|
||||
- [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
|
||||
|
||||
### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
|
||||
|
||||
- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
|
||||
- [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
|
||||
|
||||
### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
|
||||
|
||||
- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
|
||||
- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
|
||||
- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
|
||||
- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
|
||||
- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
|
||||
- [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
|
||||
- [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
|
||||
- [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
|
||||
- [`tr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
|
||||
- [`th`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
|
||||
- [`tbody`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
|
||||
- [`td`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
|
||||
|
||||
### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
|
||||
|
||||
- [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
|
||||
- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
|
||||
- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
|
||||
- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
|
||||
- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
|
||||
- text
|
||||
- checkbox
|
||||
- color
|
||||
- date
|
||||
- radio
|
||||
- submit
|
||||
- [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
|
||||
- [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
|
||||
- [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
|
||||
- [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
|
||||
- [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various types of input.
|
||||
Possible `type` values include:
|
||||
- `text`
|
||||
- `checkbox`
|
||||
- `color`
|
||||
- `date`
|
||||
- `radio`
|
||||
- `submit`
|
||||
|
||||
|
||||
## Next Step
|
||||
|
||||
Reference in New Issue
Block a user