H5 ? HTML5? ??? ??, ? html5? ?????. HTML5? HTML? ?? ?? ???? ??? ??, ????? ??, ??? ? ???, ???? ???? ? ?? ????? ?? ??? ??? ???? ? ???? ??? ? ?? ???? ??????.
??
? ?? ? H5? HTML5? ?? ??? ?? ??? ???? ???? ?????? ?? ??? ? ????. ??? ?? ????? ??? H5? HTML5? ? ???? ??? ??? ? HTML5, ? ???? ???? ?? ??? ?? ??????. ? ????? HTML5? ?? ??, ???? ??, ?? ?????? ??? ??? ??? ????? ???? ??? ???? ?? ? ????. ? ??? ?? ??? HTML5? ?? ??? ????? ??? ? ???? ?? ?? ? ????? ?? ??? ?? ??? ??? ? ????.
HTML5? ?? ??? ??
HTML5? ?? ??? ? ???? (W3C)? ?? ??? ? HTML (HyperText Markup Language)? ?? ?? ???? HTML4? ?? ??? ???? ?? ? ????????? ??? ??? ???? ?? ??????. HTML5? ?? ? ?? ?? ? ??? ???? ? ??? ? ??? ?? ??? ??? API? ??? ???? ????.
HTML5? <video></video>
, <audio></audio>
, <canvas></canvas>
?? ?? ?? ??? ??? ??? ???? ???? ?? ???? (???? ??)? ???? ?? ????? ???? ????? ?? ? ? ??????. ?? HTML5? ?? ??? ????? ??? ?? ?? ? ?? ??? ???? ?? ??? ???? ?? ??????.
HTML5? ?? ?? ??
??? ??
HTML5? ??? ??? <header></header>
, <footer></footer>
, <nav></nav>
, <article></article>
?? ?? ??? ?? ??? ???? ????. ??? ??? HTML ??? ? ???? ???? ?? ???? ??? ?? ?? ??? (SEO)? ??? ??????. ??? ??? ???? ? ??? ??? ? ??? ? ? ??? ??? ? ?????.
<! doctype html>
<html lang = "en">
<??>
<meta charset = "utf-8">
<meta name = "viewport"content = "width = device-width, ?? ??? = 1.0">
<title> ??? html5 ? </title>
</head>
<body>
<Header>
<H1> ? ? ???? ?? ?? ????? </h1>
<avi>
<ul>
<li> <a href = "#home"> home </a> </li>
<li> <a href = "#about"> ?? </a> </li>
<li> <a href = "#contact"> contact </a> </li>
</ul>
</nav>
</??>
<??>
<??>
<H2> ? ?? </h2>
<p> ??? ? ? ??? ?????. </p>
</article>
</main>
<FUTER>
<p> & copy; 2023 ? ? ???. ?? ?? ??. </p>
</???>
</body>
</html>
????? ??
HTML5? ?????? ?? ?? ??? ???? <video>
? <audio>
??? ?? ???? ????? ???? ?? ? ???? ??? ? ??? ???? ?? ???? ? ????. ?? ??? ??? ?????? ??? ??? ???? ????.
<video width = "320"height = "240"???>
<?? src = "movie.mp4"type = "video/mp4">
<?? src = "movie.ogg"type = "video/ogg">
????? ??? ??? ???? ????.
</video>
<??? ???>
<?? src = "horse.ogg"type = "Audio/Ogg">
<?? src = "horse.mp3"type = "Audio/Mpeg">
????? ??? ??? ???? ????.
</???>
??? ? ???
<canvas>
??? HTML5? ? ?? ?????? ???? ? ????? ???? ??? ? ?????? ?? ? ? ????. JavaScript? ?? ???? <canvas>
?? ???? ??? ??? ??? ? ????? ??? ?? ? ? ????.
<canvas id = "mycanvas"?? = "200"?? = "100"style = "??? : 1px solid #000000;">
</???>
<cript>
var canvas = document.getElementById ( "mycanvas");
var ctx = canvas.getContext ( "2d");
ctx.fillstyle = "#ff0000";
ctx.fillRect (0, 0, 150, 75);
</????>
???? ???? ? ?? ????
HTML5? ???? ???? ? ?? ????? ??? ???? ???? ???? ? ??????? ?? ??? ? ????. localStorage
? sessionStorage
? ?? ???? ??? ???? ???? ??? ??? ???? ? ????.
// LocalStorage? ???? ???? ???? LocalStorage.SetItem ( "??? ??", "John Doe");
console.log (localStorage.getItem ( "username")); // ?? : John Doe
// SessionStorage? ???? Data SessionStorage.SetItem ( "SessionData", "?? ???")? ?????.
console.log (sessionStorage.getItem ( "SessionData")); // ?? : ?? ???
HTML5? ?? ?? ???? ? ?? ??
?? ? ???
CSS3? ?? ? HTML5? ??? ?? ? ???? ???? ? ???? ?? ???? ??? ??? ?? ? ??????. <meta>
??? ???? ??? ??? ???? ???? ???? ?? ? ????? ?? ??????.
<meta name = "viewport"content = "width = device-width, ?? ??? = 1.0">
@Media ?? ? (max-width : 600px) {
? {
??? : Lightblue;
}
}
?? ??
HTML5? <input type="email">
, <input type="date">
?? ?? ??? ?? ??? ? ?? ??? ???? ??? ?? ??????. ??? ??? ??? ?? ?? ? ??? ????? ???? ????? ????.
<??>
<?? ?? = "???"?? = "???"?? ?? ?? ? = "??? ??">
<?? ?? = "??"?? = "??">
<?? ?? = "??"? = "??">
</form>
?? ???
HTML5? ??? ? ?? ???? ?? ?????. JavaScript? ??? ??? ??? ?? <canvas>
? <video>
? ?? ??? ????? ???? ? ???? ?? ??? ?? ?? ?? ???? ? ????. ?? HTML5? ?? ???? ??? ???? ??? ?? ??? ??? ??? ?? ??? ? ? ????.
// ????? var img = new Image ();
img.onload = function () {
// ?????? ? ?, hocess.body.appendChild (IMG);
};
img.src = "large-Image.jpg";
FAQ ? ???
???? ???
HTML5? ?? ?????? ??? ?? ??? ??? ???? ?? ??? ????? ????. ? ??? ?? ???? ModernIZR ?????? ?? ?? ?? ??? ???? ????.? ??? ????? ?? ??? ???? ?? ?? ???? ????? ??? ???? ? ??? ? ? ????.
if (modernizr.canvas) {
// ??? ?? ?? // ??? ?? ?? ??} else {{
// ??? ??? ???? ????. // ?? ??? ??}
?? ??
HTML5? ?? ??? API? ??? ????? ??? ?? ??? ?????. ?? ??, localStorage
? sessionStorage
??? ? ??? ?? ???? ??? ??? ??? ? ????. ???? ??? ???? ??? ???? ?? HTTPS ??, ??? ??? ??? ?? ?? ??? ?? ??? ??????.
// https? ???? ??? ?? ??? ?????.
// ??? ???? LocalStorage? ??? ? ????
LocalStorage.setitem ( "Securedata", "?? ?? ???");
} ? ?? {
Console.warn ( "HTTPS? ???? ??? ???? ???? ?? ? ????.");
}
??
? ???? ??? ??? ? HTML5? ????? ??? ??? API? ???? ????? ??? ? ????????? ?? ???? ? ????. ? ??? ?? HTML5? ?? ??? ??? ?? ?????? ?? ?? ?? ???? ? ?? ??? ???????. ?? ?????? HTML5 ??? ???? ??? ??? ??? ?????? ??? ?? ??? ? ?? ??? ???? ? ????. ? ??? ? ????? ?? ?? ??? ??? ??? ?? ? ? ??? ????.
? ??? H5 ? HTML5 : ? ??? ????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!