This is the second time I read this book.
Record something that I am not that familiar with.
I do some practices on codepen.

HTML

empty element: <img> <br>(</br> will appear in xhtml)

why empty? because there is nothing need to be write between the tag.

1 2	<img></img> => <img> <br></br> => <br>

a element

Jump to specific paragraph on page

<a href="www.abc.com/index.html#chai">link</a>

// will link focus on this paragraph:
//index.html
<h2 id="chai">Chai</h2>

1	<a href="#top">Back to Top</a>

img element

1
2
3

<img src="./img/logo.jpg" alt="infromation when hover">  

<imgsrc="./img/logo.jpg" width="" height="">

the default width and height is the same as the image file.

meta tag

1	<meta charset="utf8">

CSS

font

serif > has more line to make font more beautiful

1
2
3

@font-face{

}

font-size

unit: px, %, em, keyword(small medium big)

color

Q: Guess which color will be applied ?

// html
<span class="green blue red">Answer</span>
-----------
// css
.red{color: red;}
.blue{color: blue;}
.green{color: green;} //Answer

background

1
2
3

background-image: url("./bg.jpg")
background-position:
background-repeat:

border

Media Query

width(default: auto)

base on the setting of box-sizing.

content-box: width = content
border-box: width = content + padding + border

text-align

The way all inline elements align within containing box.

Pseudo class

According to the order of LVHFA.

Specificity

Basic:

inline style > ID > Class > Element > *
the more specific rule win
rules with same specificity, the later rule win

Source also important:
Author > User > User Agent (Browser default value)

Position

static: in flow
relative: in flow, can set offset
absolute: out of flow, related to containing block, z-index works
fixed: out of flow, related to viewport, z-index works.

absolute VS float

float: still in flow, will affect brother(need to clear), can’t adjust vertical direction in purpose.

Video

<video controls
        autoplay
        width="" height=""
        src=""
        poster=""
        preload="" //none metadata auto
/>

Format

video file is kind of container, which wrap video + audio + meta data

mp4: h264 + aac (Safari + IE9+ some Chrome)
webm: VP8 + Vorbis
ogg: Theora + Vorbis

Use multiple source to make sure that video file can be displayed

<video controls autoplay width="640" height="360">
    <source src=".mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src=".webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src=".ogv" type='video/ogg; codecs="theora, vorbis"'>
    <object ></object> // If this browser dont support html5
    <p>Opps, there is no video this browser can play ...</p>
</video>

Browser will load the meta data of video file and check whether it can play.
Or we can provide this infromation in soure tag.

Table Tag

nth-pseudo class

1
2
3

p:nth-child(even){
    color: red;
}


<td rowspan="n">1</td>

<td clospan="n">2</td>

list

list-style-type
- unorder: disc(default), circle, square, none
- order: decimal, upper-alpha, lower-alpha, upper-roman, lower-roman

list-style-image: url()
list-style-position: inside, outside