microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

finished HTML demo page

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-15 10:15:52 -08:00
parent f0af657ea0
commit 91e7993408
2 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
step1-00/index.html
View File

@@ -21,10 +21,10 @@
<header>
<h1>My Website</h1>
<nav>
<ol>
<ul>
<li><a href="page1">About Me</a></li>
<li><a href="page2">Contact Me</a></li>
</ol>
</ul>
</nav>
</header>
@@ -61,7 +61,7 @@
<footer>Copyright 2019</footer>
</section>
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Text content</a></h2>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
<h3>Blockquote</h3>
@@ -126,17 +126,104 @@
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a></h2>
<h3>Anchor tag</h3>
<h3>Anchor tag, br and span</h3>
<ul>
<li><a target="_blank" href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
a br span
<a target="_blank" href="https://example.com"> Website <span style="color: red">address</span> </a><br />
<a href="mailto:m.bluth@example.com">Email</a><br />
<a href="tel:+123456789">Phone</a><br />
<h3>Inline style tags</h3>
<p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>
</section>
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
<table border="1">
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
<tr>
<td>Another table row</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
<form action="" method="get" class="form-example">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div>
<div>
<input type="checkbox" id="option1" name="option1" checked />
<label for="option1">Option1</label>
</div>
<div>
<input type="checkbox" id="option2" name="option2" />
<label for="option2">Option2</label>
</div>
</div>
<div>
<input type="color" id="color1" name="color1" value="#e66465" />
<label for="color1">Color1</label>
</div>
<div>
<input type="color" id="color2" name="color2" value="#f6b73c" />
<label for="color2">Color2</label>
</div>
<div>
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
</div>
<div>
<div>
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
<label for="Radio1">Radio1</label>
</div>
<div>
<input type="radio" id="radio2" name="radios" value="radio2" />
<label for="radio2">Radio2</label>
</div>
<div>
<input type="radio" id="radio3" name="radios" value="radio3" />
<label for="radio3">Radio3</label>
</div>
</div>
<div>
<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
</div>
<div>
<input type="submit" value="Subscribe!" />
</div>
</form>
</section>
</body>
</html>

4
step1-00/style.css
View File

@@ -4,3 +4,7 @@ aside {
padding: 10px;
background: #eee;
}
form > div {
margin-bottom: 20px;
}