H5? ??? ????? ??? ??? ?? ? ??????? ?????? HTML5, CSS3 ? JavaScript ?????. 1. HTML5? ? ??? ??? ???? ???? ??? ??? API? ?????. 2. CSS3? ???? ????? ???? ?????? ?? ??? ??? ?????. 3. JavaScript? ?? ?? ??? ???? DOM ?? ? ??? ??? ?? ??? ??????.
??
H5 ????? ??? ?????? ??? ?? ???? ?????. H5? ??? ? ????? ??? ??? HTML5, CSS3 ? JavaScript ???? ????? ? ??? ?? ?? ????????. ??? ??? H5? ?? ??, ?? ?? ? ?? ?????? ??? ??? ????? ???? ??? ??? ????.
? ??? ?? ? H5? ?? ?? ??? ???? ?? ??? ????? ?? ?????? ??? ??? ????? ???? ??? ?? ? ????.
?? ?? ??
H5? ??? HTML5, CSS3 ? JavaScript???. HTML5? ??? ??? ?? ? ??? ?? ???? ? ???? ??? ??? ?????. CSS3? ? ???? ???? ????? ?????? ????? ??? ??? ?? ?????. JavaScript? ? ???? ?? ?? ??? ???? ? ???? ??? ???? ?????.
??? ??? ??? ?? ?? ? ???? ?? ???? ?? ??? ??? ??? ?? ?? ? ????? ??? ?? ? ? ????. ??? ?? ?? ? ??????? ??? ?????.
?? ?? ?? ?? ??
H5? ?? ? ??
H5? ??? ????? ??? ??? ?? ?????. ? ??? ????? ??? ?? ? ??????? ???? ????. HTML5? <video></video>
, <audio></audio>
? geolocation apis? ?? ??? ??? ?? ? API? ????? ? ???? ????? ?????? ???? ???? ??? ??? ?? ? ????. CSS3? ?????, ?? ? ??? ?? ?? ??? ??? ???? ? ???? ??? ????? ???????. JavaScript? ???? ? ???? DOM ??, ??? ?? ? ??? ??? ?? ??? ?? ??? ??? ??? ??? ? ????.
??? H5 ? :
<! doctype html>
<html lang = "en">
<??>
<meta charset = "utf-8">
<meta name = "viewport"content = "width = device-width, ?? ??? = 1.0">
<title> h5 ? </title>
<???>
.?? {
?? : 100px;
?? : 100px;
??? : ???;
?? : 0.3S ??;
}
.box : ?? {
?? : ?? (45deg);
}
</???>
</head>
<body>
<div class = "box"> </div>
<cript>
document.querySelector ( '. box'). addEventListener ( 'click', function () {
?? ( '??? ??????!');
});
</????>
</body>
</html>
? ??? HTML5 ??, CSS3 ??? ? JavaScript ??? ??? ?????.
?? ??
H5? ?? ??? ??? ?? ???? ??? ? ????.
- HTML5 : ????? HTML ??? ?? ???? DOM ??? ?????.
<canvas>
, <video>
?? ?? HTML5? ??? ??? ????? ?? API? ?? ?????. - CSS3 : ????? CSS ??? ?? ???? DOM ??? ???? ???? ???? ????? ?????. ????? ? ??? ?? CSS3? ??? ??? ????? ??? ??? ?? ?????.
- JavaScript : ????? JavaScript ??? ???? DOM ??? ???? ?? ?? ??? ?????. JavaScript? ?? ??? ??? ????? XMLHTTPrequest ?? Fetch API? ?? ?????.
?? ?? ???? H5? ?? ??? ? ??? ??? ?? ?????. ????? HTML, CSS ? JavaScript? ?? ???? ????? ????? ?? ? ?? ?? ??????.
??? ?
?? ??
H5? ?? ???? HTML5 ? ??? ?? ??, CSS3 ? ??? ?? ? JavaScript ? ?? ??? ?????. ??? html5? <canvas>
??? ???? ??? ???? ??? ??? ???? ??? ????.
<! doctype html>
<html lang = "en">
<??>
<meta charset = "utf-8">
<meta name = "viewport"content = "width = device-width, ?? ??? = 1.0">
<title> ??? ? </title>
</head>
<body>
<canvas id = "mycanvas"width = "200"height = "100"style = "??? : 1px solid #000000;"> </canvas>
<cript>
var canvas = document.getElementById ( 'mycanvas');
var ctx = canvas.getContext ( '2d');
ctx.fillstyle = 'blue';
ctx.fillRect (10, 10, 50, 50);
</????>
</body>
</html>
? ??? <canvas>
?? ? JavaScript? ???? ??? ???? ??? ??? ?????.
?? ??
H5? ?? ???? CSS3, JavaScript? ??? ?? ? DOM ??? ??? ????? ? ?? ?? ?????. ??? CSS3 ????? ? JavaScript ??? ??? ???? ??? ????? ?? ? ?????? ???? ??? ?????.
<! doctype html>
<html lang = "en">
<??>
<meta charset = "utf-8">
<meta name = "viewport"content = "width = device-width, ?? ??? = 1.0">
<title> ?? H5 ? </title>
<???>
.Animated-Box {
?? : 100px;
?? : 100px;
??? : ??;
????? : 2S ?? ???;
}
@keyframes Move {
0% {transform : translatex (0); }
50% {?? : TranslateX (200px); }
100% {transform : translatex (0); }
}
</???>
</head>
<body>
<div class = "animated-box"> </div>
<div id = "data"> </div>
<cript>
fetch ( 'https://api.example.com/data')
.Then (?? => response.json ())
. ??? (data => {
document.getElementById ( 'data'). innerText = json.stringify (data);
});
</????>
</body>
</html>
? ??? CSS3 ????? ? JavaScript ??? ??? ???? ??? ????? ?? ? ?????? ???? ??? ?????.
???? ?? ? ??? ?
H5? ??? ?? ???? ???? ???? ??? ??, JavaScript ?? ? CSS ??? ??? ?????. ? ?? ???? ?? ? ??? ?? ??? ????.
- ???? ??? ?? : CAN I CAN I? ???? H5 ??? ?? ????? ??? ???? PolyFill ?????? ???? ??? ??? ??????.
- JavaScript ?? : ????? ??? ??? ???? ?? ????? JavaScript ??? ???????. Try-Catch ?? ???? ??? ?? ??????.
- CSS ??? ?? : ???? ??? ??? ???? ?? ?????? CSS ??? ??????. SASS? ?? CSS ? ???? ???? ?? ?? ?? ???? ??????.
?? ??? ? ?? ??
?? ?? ???? H5? ?? ??? ? ?? ??? ?? ?????. ??? ? ?? ??? ?? ? ?? ?? ??? ??? ????.
- ?? ??? : Chrome DevTools? ?? ??? ?? ???? ?? ?? ??? ???? ????? ? ??? ??? ?????. JavaScript ??? ????? DOM ??? ??? ????? ? ??? ?? ??? ??????.
- ?? ?? : ??? HTML ??? ???? ??? ???? ?? ?? ???? ??????. CSS ?? ??? ? ?? ? ?? ???? ??? ???? ?? ??? ? ? ?? ?? ???? ??????. HTTPS ??, ?? ? ??? ?? ?? ? ??? ?? ??? ?????.
?? ??????? ? ? ?? ?? ?? ??? ??????. JavaScript ??? ????? ????? ??? ???? ??? ?? ?? ? ??? ??? ?? ???????. ?? ?? H5 ?? ???? ???? ??? ?? ?????????.
???, H5? ??? ? ????? ??? ??? ??? ?? ??????. HTML5, CSS3 ? JavaScript? ??? ?? ??? ??? ??? ??? ??? ?? ?? ? ?? ????? ?? ? ? ????. ? ??? H5 ??? ? ? ???? ???? ? ?????? ????.
? ??? H5 ????? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!