Day 6 - 28/8

1. <center/>: set everything in it to the center of webpage

2. <audio src="" controls/>: add audio; give user control rights;

• + autoplay: auto play the audio on first loaded

• + muted: the audio is muted on first loaded

• + loop: to have the audio loop

1. <video src="" type="video/webm"/>: display video; only works with .webm files for now

2. <form enctype=""> : encode methods

• application/x-www-form-urlencoded: default method; all data are encoded before submitting

• multipart/form-data: used when type="file" included

• text/plain: submitting data without encoding

1. text-shadow: x y z color, a b c color; create shadow for text x (positive) pixel to the right, y pixel down, z pixel blur; a (negative) pixel to the left, b pixel up, c pixel blur

2. box-shadow

3. display: flow-root: used when an image floating among a border to keep it from floating out of the box

4. overflow: : adjust content when it doesnt fit a border

• visible: still overflow and visible

• hidden: hide the overflow part, but still can get back the full content

• clip: clip the overflow content; use overflow-clip-margin: ; to decide how much of the overflow part is allowed to be presented

• scroll: present a scroll bar

• auto: make the scroll bar visible when overflow and disappear when it's not

1. display: :

• block: present a block around its content with a set height and width; 2 blocks will display in 2 individual line

• inline: present a block just surround the content even when set a new height and width; 2 consecutive inline can display in the same line

• inline-block: like inline but can adjust the size of block

• none: nothing display even the content

1. visibility: :

• hidden: the box and content will be invisible but still take up the space as much as it does show up

1. position: :

• relative: change the position of objects due to their original positions (ex +-100px from the left)

• fixed: keep the position unchange compare to the screen; can use top bottom left right to adjust it (ex left: 100px; bottom 50px;

• absolute: adjust the position relative to the previous block

• sticky: adjust the position base on scroll position

• static: set to default position

1. pseudo class: add to selectors to modify the behavior of an element when in certain state: hover, active, visited

2. pseudo elements:

• ex::first-letter : adjust the first letter in text ex

• ex::first-line : adjust the first line in paragraph ex

• ex::selection : adjust the feedback when selecting some text or the whole paragraph ex

• ex::before : add content:"" to the front of ex

• ex::after

• li::marker : change the default marker of a list

1. pagination: devide web page to multiple pages and numbers given

2. Create drop-down menu: a menu drop when click a button

3. Icon : insert icon

4. Create navigation bar

5. Flex box