HTML W3school
Tags
<!doctype html>
<html lang="en"
h1 -> h6
<p></p>
<pre></pre>
preformatted text<hr />, <br/>
<title>
- title of the document<link>
- relationship between the current document and an external resource.<meta>
- character set, page description, keywords, author of the document, viewport, …<base>
- Specifies the base URL and/or target for all relative URLs in a page
Formatting Elements
<b>
Bold text<strong>
Important text<i>
Italic text<em>
Emphasized text<mark>
Marked text<small>
Smaller text<del>
Deleted text<ins>
Inserted text<sub>
Subscript text<sup>
Superscript text
Quotation and Citation
<abbr>
Defines an abbreviation or acronym<address>
Defines contact information for the author/owner of a document<bdo>
Defines the text direction<blockquote>
Defines a section that is quoted from another source<cite>
Defines the title of a work<q>
Defines a short inline quotation
HTML Color
- RGB: Red - Green - Blue
- Hex:
#rrggbb
(eg:#ff0000
= full red, 00 green, 00 blue) - HSL: Hue, Saturation and Lightness -
hsl(hue, saturation, lightness)
- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
- Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
- Lightness is also a percentage value. 0% is black, and 100% is white.
Image
- Use the CSS float property to let the image float to the right or to the left of a text:
- Image Maps - Create map and clickable area
- Use the HTML
<map>
element to define an image map - Use the HTML
<area>
element to define the clickable areas in the image map - Use the HTML usemap attribute of the
<img>
element to point to an image map
- Use the HTML
Table
-
<table>
Defines a table -
<th>
Defines a header cell in a table -
<tr>
Defines a row in a table -
<td>
Defines a cell in a table -
<caption>
Defines a table caption -
<colgroup>
Specifies a group of one or more columns in a table for formatting -
<col>
Specifies column properties for each column within a<colgroup>
element -
<thead>
Groups the header content in a table -
<tbody>
Groups the body content in a table -
<tfoot>
Groups the footer content in a table -
Cell padding is the space between the cell edges and the cell content.
-
Cell spacing is the space between each cell.
List
- Ordered List
- type=“1” The list items will be numbered with numbers (default)
- type=“A” The list items will be numbered with uppercase letters
- type=“a” The list items will be numbered with lowercase letters
- type=“I” The list items will be numbered with uppercase roman numbers
- type=“i” The list items will be numbered with lowercase roman numbers
- Control list counting:
<ol start="50"></ol>
Block & Inline Elements
-
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
- Các element này sẽ full dòng luôn (vd như thẻ
<div>
), và luôn có cả line break trước và sau thẻ. <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
- Các element này sẽ full dòng luôn (vd như thẻ
-
An inline element does not start on a new line. (eg:
a <span> element inside
)<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
-
Nếu ta đổi thuộc tính:
display
từblock
toinline-block
, thẻ sẽ không tự động thêm line break trước và sau nữa ⇒ Hiển thị side by side, chứ không phải hiển thị on top of each other.
HTML Layout Elements
<header>
- Defines a header for a document or a section<nav>
- Defines a set of navigation links<section>
- Defines a section in a document<article>
- Defines an independent, self-contained content<aside>
- Defines content aside from the content (like a sidebar)<footer>
- Defines a footer for a document or a section<details>
- Defines additional details that the user can open and close on demand<summary>
- Defines a heading for the<details>
element
Use Flexbox layout, or fload: left
, … or Grid layout.
Responsive
- width: 100%, max-width: 100%, font-site: 10vw
- Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Semantic Elements
-
Semantic Elements: sử dụng để tạo layout: navigation, header, footer, …
<section>
- thematic grouping of content, typically with a heading.- Chapters, Introduction, News items, contact information.
<article>
- element specifies independent, self-contained content- Forum posts, Blog posts, user comments, product cards, newspaper articles
<header>
- container head information (of artile, …): Logo/icon/authorship information/…<footer>
- authorship information, copyright information, contact, sitemap, …<nav>
- Navigation links<aside>
- aside from content, like sidebar<figure>
- self-contained content, like illustrations, diagram, photos, code listings, …<figcaption>
<details>
- additional details that user can view or hide<main>
- Main content of a document<mark>
- Marked highlighted text<summary>
<time>
Entities
-
If you use the less than (<) or greater than (>) signs in your HTML text, the browser might mix them with tags ⇒ Use entities like:
<
or `>“ -
&entity_name
or&#entity_number
HTML Form
The HTML <form>
element can contain one or more of the following form elements:
-
<input>
-
<label>
-
<select>
-
<textarea>
-
<button>
-
<fieldset>
-
<legend>
-
<datalist>
-
<output>
-
<option>
-
<optgroup>
Notes
- HTML - Hyper Text Markup Language