Element
<html>
<body>
<h1></h1> #range from 1 to 6, from the biggest to the smallest
<p></p> #paragraph
<a></a> #link(href: hypertext reference)
<img [.. ]> #src:source, alt: alternative
<hr></hr> #horizontal rule: used to separate content in a HTML page
<br></br> #line break(start a new line) without starting a new paragraph
<pre></pre> #define preformatted text
<!--comment-->
</body>
</html>
- HTML formatting element
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
- HTML quotation element
<q> -short quotation
<blockquote> -block quotation(the whole paragraph will be indented)
<abbr> -abbreviation
<address>
<cite>
- HTML links
# Links are defined with the <a> tag
<a href="..."></a>
# Use images as links
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
#HTML titles
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
#HTML bookmarks
<h2 id="C4">Chapter 4</h2>
<a href="#C4">jump to chapter 4</a>
- HTML tables
<table></table>
<caption></caption> #table caption
<tr></tr> #table row
<th></th> #table head
<td></td> #table data
#add a border
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#cell padding
th, td {
padding: 15px;
}
#text align
th {
text-align: left;
}
# combine two cells
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>
# add an id attribute to table for style definition
<table id="t01"></table>
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
- HTML list
# unordered list
<ul style="list-style-type:disc">
<li>
</li>
</ul>
#ordered list
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
#description list
<dl>
<dt></dt> #description tag
<dd></dd> #description data
</dl>
-
HTML block-level elements :always starts on a new line and takes up the full width available
HTML inline elements: does not start a new line but occupies as much width as necessary
<div>and<span> are both used as containers(grouping tags)
Attribute
href = "..." #hyperlink reference
src= "..." #source
width=... height= #pixel
alt="..." #the alternative text to be displayed if the expected element couldn't be loaded.
style= "[color/font/size:...]"
lang= "..."
title= "..." #The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
- HTML style <tagname style= "property:value;">
style =
"background-color: powderblue;
color: blue;
font-family: verdana;
font-size: 300%;
text-align: center;"
HTML colors(color=""/ background-color=""/border="2px solid Tomato")
- use predefined color names
- use values
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS(Cascading Style Sheets)
- inline
- internal: use a <style> element in the <head> section
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
-
HTML class attributes
with CSS
<style>
.city{
background-color: tomato;
color: white;
padding: 10px; }
</style>
<h2 **class="city"**>London</h2>
<p>London is the capital of England.</p>
<h2 **class="city"**>Paris</h2>
<p>Paris is the capital of France.</p>
<h2 **class="city"**>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
with JS
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
-
Difference between ID and class
ID can only be applied to a specific element while class could be applied to multiple ones.
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h1 id="myHeader">My Cities</h1>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
