<!

—
thẻ thông dụng
h1 - h6 (heading) chữ nhỏ dần
p (paragraph) đoạn văn
img (image) src: link ảnh alt: thay thế khi ảnh lỗi
a (anchor) gắn link vào van ban
ul, li : unordered list, list ul bao bên ngoài và mỗi list sẽ là 1 li
table : thead: những mục trong table ,th cho mỗi mục
tbody: thân table
ứng với mỗi hàng thì tr, mỗi td ứng với mỗi mục
input để nhập
button
div khối
-->

<!--
Attribute
-->
<!--
dùng css có 3 cách: internal, external, inline
internal: viết thẳng vào html
dùng style
-->
<!--
id: khi css thì dùng #
class nhiều thằng dùng chung, dùng .
các selector cơ bản
.class.class những class có 2 chữ class và class trong thì lấy (.n1.n2 =>
class="n1 n2" or class="n2 n1" là lấy)
.class1 .class2 thì lấy class2 là con class1
* là lấy hết

-->

Một thẻ có thể có nhiều class, mỗi class cách nhau bằng 1 khoảng trắng (dấu space).
Priority

1. Internal external
2. Inline -1000
3. #id – 100
4. .class – 10
5. Tag -1

! important to nhất

Variable

Type Description

<input Displays a single-line text input field

type="text">

<input Displays a radio button (for selecting one of many choices)

type="radio">

<input Displays a checkbox (for selecting zero or more of many choices)

 type="checkbox">

<input Displays a submit button (for submitting the form)

type="submit">

<input Displays a clickable button

type="button">

Text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Radio button

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScri
pt">
<label for="javascript">JavaScript</label>
</form>

Check box:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Submit box

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Select:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

 onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

Button curser

:root {

--tên biến

Dùng var(--tên biến)

Unit

Absolute

px

Relative

% phụ thuộc thằng chứa nó

Rem phụ thuộc thẻ html

Em phụ thuộc thẻ cha gần nhất có style đó

Vw viewport width : phụ thuộc chiều rộng trình duyệt

Vh viewport height: phụ thuộc chiều cao trình duyệt

Hàm css

- Rgb ( số, số ,số)

- Calc (tính)
Lớp giả: pseudo class

Dùng để style element trong 1 tình huống đặc biệt(k style từ đầu)

:hover – style khi mình di chuột vào

:active- style khi bấm và giữ chuột vào

:first-child – chọn thằng con đầu

Ví dụ ul có nhiều li con thì li:first-child

:last-child

Pseudo element

Dùng để style 1 phần cụ thể của 1 element

::before – insert 1 element con vào đầu tiên của element to

::after – insert 1 element con vào cuối của element to

::first-letter – style chữ cái đầu

::first-line – style dòng đầu

::selection – style khi bôi đen

Padding

Padding-top,right,left,bottom

Padding: 10px – set cho 4 hướng

Padding: a b c d – set theo chiều kim đồng hồ

Border

Border: width kiểu màu

Border-width:

Margin (kcach lề)

Box-sizing

Box-sizing: border-box;

Cho size của box về border chứ k phải content

Background-image

Background-image: url() / linear-gradient(độ, màu ,màu);

Background-size

Background-size: contain – hiển thị đủ ảnh, k bị cắt, che

Background-size: cover – phủ full trang, ảnh có thể bị che, cắt

Background-clip

Dùng với background-color: cho color đổ từ đâu

Border-box: đổ từ viền

Padding-box: đổ từ padding

Content-box: đổ từ content

Background-origin

Tương tự clip, dùng với background-image

Background-position

Shorthand cho background

Position

Relative: cho nổi lên, có thể đè lên thằng khác

Absolute: lấy thằng cha có position làm chuẩn để căn

Fixed: cho fix vào, scroll vẫn k bị chạy theo

Sticky:

ảnh thay thế khi ảnh lỗi

img onerror=””

list :

bỏ chấm list: list-style-type : none

bo góc : radius
The problem with the <div> above occurs when the browser window is smaller
than the width of the element (500px). The browser then adds a horizontal
scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of
small windows.

When the text-align property is set to "justify", each line is stretched so that
every line has equal width, and the left and right margins are straight (like in
magazines and newspapers):

The text-transform property is used to specify uppercase and lowercase letters

in a text.

The text-indent property is used to specify the indentation of the first line of a
text:

#F79646 : orange #0EC0C3 : ocean #3A7135 : green

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

Justify-content

 flex-start: Items align to the left side of the container.

 flex-end: Items align to the right side of the container.
 center: Items align at the center of the container.
 space-between: Items display with equal spacing between them.
 space-around: Items display with equal spacing around them.

Align-items

 flex-start: Items align to the top of the container.

 flex-end: Items align to the bottom of the container.
 center: Items align at the vertical center of the container.
 baseline: Items display at the baseline of the container.
 stretch: Items are stretched to fit the container.

Align-content
  flex-start: Lines are packed at the top of the container.
 flex-end: Lines are packed at the bottom of the container.
 center: Lines are packed at the vertical center of the container.
 space-between: Lines display with equal spacing between them.
 space-around: Lines display with equal spacing around them.
 stretch: Lines are stretched to fit the container.

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

JS

Biến:

var tenbien =

hàm built-in: hàm có sẵn

1. Alert: in pop-up
2. Console : in ra trong console (debug)
-console.log(‘…’)
-console.warn()
-console.error()
3. Confirm : giống alert
-confirm(‘…’)
4. Prompt
-giống confirm có thêm ô input
5. Set timeout : chạy function sau 1000ms
-setTimeout(function () {
Alert(‘..’)
}, 1000)
6. Set interval: sau 1000ms nó lại chạy function
-setInterval(function () {
Alert(‘..’)
}, 1000)

Toán tử:

Function

var tên = function(){ code }

object
var tên = {

name : ‘Linh’,

age: 20,

address: ‘Hanoi’

Array

var tên [a,b,c]

Truthy - to bool is true

Bất cứ giá trị nào trong Javascript khi chuyển đổi sang kiểu dữ liệu boolean mà có giá
trị true thì ta gọi giá trị đó là Truthy.
Các giá trị 1, ['BMW'], { name: 'Miu' } và 'hi' được đề cập trong ví dụ dưới đây là Truthy vì khi
chuyển sang Boolean ta nhận được giá trị true.

Falsy - to bool is false

Bất cứ giá trị nào trong Javascript khi chuyển đổi sang kiểu dữ liệu boolean mà có giá
trị false thì ta gọi giá trị đó là Falsy.
Trong Javascript có 6 giá trị sau được coi là Falsy:

1. false
2. 0 (số không)
3. '' or "" (chuỗi rỗng)
4. null
5. undefined
6. NaN

Hàm

function tenham() {

}
For

for var para of arguments{

myString += ‘${para} - ’

String

.length