mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Step 1-01 updates
This commit is contained in:
Elizabeth Craig
@@ -1,24 +1,23 @@
|
||||
## How the Web Works
|
||||
|
||||
A simple web page is rendered on the screen via the following steps
|
||||
A simple web page is rendered on the screen via the following steps.
|
||||
|
||||
> There are many sub steps in this process
|
||||
> but these are the highlights
|
||||
*There are many sub-steps in this process, but these are the highlights.*
|
||||
|
||||
1. You instruct the browser which webpage you'd like to see
|
||||
2. The browser looks up the site in a 'DNS Server'
|
||||
1. You instruct the browser which web page you'd like to see
|
||||
2. The browser looks up the site in a "DNS Server"
|
||||
- This is like a big phone book for website server addresses
|
||||
3. The browser asks the server to send over a specific page of the website `developer.mozilla.org/filename.html` or `developer.mozilla.org`
|
||||
- If asked for a 'root' level address, most servers will return `'root'/index.html`
|
||||
3. The browser asks the server to send over a specific page of the website, such as `developer.mozilla.org/filename.html` or `developer.mozilla.org`
|
||||
- If asked for a "root"-level address, most servers will return `<root>/index.html`
|
||||
4. The server sends the HTML file back to the browser
|
||||
5. The browser starts to read the HTML file from the top to the bottom, \*stopping any time that additional resources are required
|
||||
5. The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required:
|
||||
- CSS stylesheets
|
||||
- JavaScript files
|
||||
- Fonts
|
||||
- Images
|
||||
6. Browser makes requests for additional resources
|
||||
- Those resources might request even more files
|
||||
7. Once the browser gets to the bottom of the page it can start rendering, and then load the page
|
||||
7. Once the browser gets to the bottom of the page it can start working on rendering, and then display the page
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### CSS Properties
|
||||
|
||||
Now that we've gone over adding HTML tags to the page, lets cover adding styles to those tags. We can do quite a lot with styles! We can change:
|
||||
Now that we've gone over adding HTML tags to the page, let's cover adding styles to those tags. We can do quite a lot with styles! We can change:
|
||||
|
||||
- Typography
|
||||
- Colors
|
||||
@@ -13,21 +13,21 @@ Now that we've gone over adding HTML tags to the page, lets cover adding styles
|
||||
- Animations
|
||||
- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
|
||||
|
||||
CSS is always applied in `property: value` pairs, like `background: blue;` and are terminated with a semi colon.
|
||||
CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon.
|
||||
|
||||
### Applying CSS to an HTML file
|
||||
|
||||
CSS can be applied to HTML tags in three different ways.
|
||||
|
||||
1. Inline - Styles are applied directly to the HTML tag
|
||||
1. Inline using an HTML tag's `style` attribute
|
||||
- `<div style="background: blue; color: white;">Hello </div>`
|
||||
2. Via a `<style>` tag in the HTML page
|
||||
3. Through an externally loaded CSS file
|
||||
3. Through an external CSS file
|
||||
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
|
||||
|
||||
### Targeting specific HTML tags
|
||||
### Targeting specific elements
|
||||
|
||||
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. When selectors are combined with CSS styles, we call this a ruleset.
|
||||
Inline styles are always applied directly to the element you place them on, but `<style>` tags and external CSS files need a way to match elements with their respective style sets. This is done with **[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)**. When selectors are combined with CSS styles, we call this a **ruleset**.
|
||||
|
||||
CSS rulesets take on the following form:
|
||||
|
||||
@@ -39,13 +39,13 @@ selector2 {
|
||||
}
|
||||
```
|
||||
|
||||
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
|
||||
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
|
||||
|
||||
<img src="../../assets/css-syntax.png"/>
|
||||
|
||||
Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
|
||||
|
||||
Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
|
||||
Below is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
|
||||
|
||||
```css
|
||||
/* Targeting the entire page */
|
||||
@@ -58,17 +58,17 @@ h1 {
|
||||
/* Color name */
|
||||
color: black;
|
||||
|
||||
/* 6 digit hex */
|
||||
/* 6-digit hex */
|
||||
background: #ababab;
|
||||
|
||||
/* Margin: property for each side */
|
||||
/* Margin: specified separately for each side */
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
/* Shorthand: Padding applies to all sides */
|
||||
padding: 10px;
|
||||
|
||||
/* 3 digit hex and border shorthand */
|
||||
/* Border shorthand and 3-digit hex */
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@@ -82,18 +82,18 @@ span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Decendant selector */
|
||||
/* Descendant selector */
|
||||
.tiles img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Direct decendant selector */
|
||||
/* Direct descendant selector */
|
||||
.tiles > div {
|
||||
/* rgb colors */
|
||||
/* rgb color */
|
||||
background: rgb(10, 10, 10);
|
||||
color: white;
|
||||
flex-basis: 100%;
|
||||
/* Longhand goes clockwise from top
|
||||
/* Padding/margin shorthand. Goes clockwise from top.
|
||||
10px - all
|
||||
10px 20px - top/bottom left/right
|
||||
10px 20px 15px - top left/right bottom
|
||||
@@ -113,18 +113,18 @@ a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Pseudo hover selector */
|
||||
/* Hover pseudo-selector */
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Sibling selectors */
|
||||
/* Sibling selector */
|
||||
a ~ a {
|
||||
/* Changing elements from inline to block */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Positional Pseudo Selectors */
|
||||
/* Positional pseudo-selector */
|
||||
.tiles > div:last-child {
|
||||
/* overrides margin-right but leaves other margins alone */
|
||||
margin-right: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* Targeting an HTML tag */
|
||||
/* Targeting the entire page */
|
||||
body {
|
||||
font: 1.2em sans-serif;
|
||||
}
|
||||
@@ -8,17 +8,17 @@ h1 {
|
||||
/* Color name */
|
||||
color: black;
|
||||
|
||||
/* 6 digit hex */
|
||||
/* 6-digit hex */
|
||||
background: #ababab;
|
||||
|
||||
/* Margin: property for each side */
|
||||
/* Margin: specified separately for each side */
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
/* Shorthand: Padding applies to all sides */
|
||||
padding: 10px;
|
||||
|
||||
/* 3 digit hex and border shorthand */
|
||||
/* Border shorthand and 3-digit hex */
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@@ -32,18 +32,18 @@ span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Decendant selector */
|
||||
/* Descendant selector */
|
||||
.tiles img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Direct decendant selector */
|
||||
/* Direct descendant selector */
|
||||
.tiles > div {
|
||||
/* rgb colors */
|
||||
/* rgb color */
|
||||
background: rgb(10, 10, 10);
|
||||
color: white;
|
||||
flex-basis: 100%;
|
||||
/* Longhand goes clockwise from top
|
||||
/* Padding/margin shorthand. Goes clockwise from top.
|
||||
10px - all
|
||||
10px 20px - top/bottom left/right
|
||||
10px 20px 15px - top left/right bottom
|
||||
@@ -63,18 +63,18 @@ a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Pseudo hover selector */
|
||||
/* Hover pseudo-selector */
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Sibling selectors */
|
||||
/* Sibling selector */
|
||||
a ~ a {
|
||||
/* Changing elements from inline to block */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Positional Pseudo Selectors */
|
||||
/* Positional pseudo-selector */
|
||||
.tiles > div:last-child {
|
||||
/* overrides margin-right but leaves other margins alone */
|
||||
margin-right: 0;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
|
||||
<p>head, title, link, style</p>
|
||||
</section>
|
||||
<hr />
|
||||
@@ -34,8 +34,8 @@
|
||||
<main>
|
||||
<h2>My Blog H2 inside Main</h2>
|
||||
<article>
|
||||
<header><h3>Blog Title 1 H3 in Article Header</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
<header><h3>Blog Title 1 (H3 in Article Header)</h3></header>
|
||||
<aside><p>Aside: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ultricies elit eget luctus.</p></aside>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
|
||||
consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
|
||||
@@ -133,7 +133,8 @@
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">The table header</th>
|
||||
<th>Column 1 header</th>
|
||||
<th>Column 2 header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -145,6 +146,9 @@
|
||||
<td>Another table row</td>
|
||||
<td>with two columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Row spanning both columns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
@@ -160,23 +164,23 @@
|
||||
<div>
|
||||
<div>
|
||||
<input type="checkbox" id="option1" name="option1" checked />
|
||||
<label for="option1">Option1</label>
|
||||
<label for="option1">Option 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="option2" name="option2" />
|
||||
<label for="option2">Option2</label>
|
||||
<label for="option2">Option 2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color1" name="color1" value="#e66465" />
|
||||
<label for="color1">Color1</label>
|
||||
<label for="color1">Color 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color2" name="color2" value="#f6b73c" />
|
||||
<label for="color2">Color2</label>
|
||||
<label for="color2">Color 2</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="start">Start date:</label>
|
||||
@@ -186,17 +190,17 @@
|
||||
<div>
|
||||
<div>
|
||||
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
|
||||
<label for="Radio1">Radio1</label>
|
||||
<label for="Radio1">Radio 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio2" name="radios" value="radio2" />
|
||||
<label for="radio2">Radio2</label>
|
||||
<label for="radio2">Radio 2</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio3" name="radios" value="radio3" />
|
||||
<label for="radio3">Radio3</label>
|
||||
<label for="radio3">Radio 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user