HTML Tutorial
2019-08-19 本文已影响0人
Leahlijuan
HTML5
Credit to: youtube
See all the code:my github
What's HTML
- Hyper Text Markup Language
- not a programming language
- Markup language for creating webpage and document
- Build blocks of the web
index.html is the root/home page of a website
<h1>This is a h1 sentence</h1>
<p>This is a paragraph</p>
<br> line break tag
image.png
block elements
<div> <h1> - <h6> <p> <form> <strong> <em>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>This is a h1</h1>
<h2>This is a h2</h2>
<h3>This is a h3</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis alias cumque doloribus officia doloremque! Illum aspernatur provident possimus architecto aut tempora cumque quasi. Doloribus in officiis animi autem qui quia?</p>
<ul>
<li>THis is an item</li>
<li>THis is an item</li>
<li>THis is an item</li>
<li>THis is an item</li>
</ul>
<ol>
<li>THis is an item</li>
<li>THis is an item</li>
<li>THis is an item</li>
<li>THis is an item</li>
</ol>
<!-- table -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Leah</td>
<td>jjjjj@jjjjj</td>
<td>23</td>
</tr>
</tbody>
</table>
<!-- Form -->
<br>
<!-- horizontal line -->
<hr>
<form action="process.php" method="POST">
<div>
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter your first name">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName">
</div>
<br>
<div>
<label>Email</label>
<input type="email" name="email">
</div>
<br>
<div>
<label>Message</label>
<textarea name="message"></textarea>
</div>
<br>
<div>
<label>Gender</label>
<select>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<br>
<div>
<label>Birthday</label>
<input type="date" name="birthday">
</div>
<input type="submit" name="submit" value="Submit">
</form>
<!-- Button -->
<button>Click Me!</button>
<!-- Image -->
<a href="image address">
<img width="200px" src="image address" alt="Cannot find my image">
</a>
<!-- Quotations -->
<blockquote cite="https://www.jianshu.com/">
This is a paragragh quoted from somewhere.
</blockquote>
<!-- Abbreviation -->
<p>The <abbr title="World Wide Web">WWW</abbr> means somethind</p>
<!-- Cite -->
<p><cite> This passage </cite> was wrote by </p>
</body>
</html>
inline elements
<span> <img> <a>
Structures
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>My blog</title>
</head>
<body>
<header>
<h1>My website </h1>
</header>
<section>
<article>article one</article>
<article>article two</article>
</section>
<aside>
<h3>Categaries</h3>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</aside>
<footer>
<p>Copyright ©2019, My website</p>
</footer>
</body>
</html>
