Web 開發學習筆記(6) --- 前端開發之 HTML5

時間 2019-12-07

標籤 web 開發學習筆記前端 html5 html 欄目 HTML 简体版

原文原文鏈接

前言

經過以前的文章, 咱們已經搭好了 webapp 的雛形, 不過到目前爲止, 咱們的前端界面比較簡單, 爲此, 咱們要學習前端的知識, 而後對界面進行改進.css

前端的內容能夠分爲 HTML CSS JavaScript 三部分, 咱們首先學習 HTMLhtml

HTML5簡介

什麼是 HTML5 ———— 第五代 HTML 語言
爲何學 H5前端
- 全部主流瀏覽器都支持 h5, chrome, firefox, safari, IE10+
- H5 改變了用戶與文檔的交互方式, 尤爲是多媒體, 替代了傳統的 flash, 多媒體標籤 video, audio, canvas
- 增長了其餘新特性
  語義特性、本地存儲、網頁多媒體(音視頻), 二位三維變換, 特效(過渡, 動畫)程序員
- 相比於 h4, 拋棄了不合理不經常使用的標籤和屬性, 增長了一些標籤和屬性, h5代碼更加簡潔(<!doctype html>, <meta charset="UTF-8")

HTML5 語義化標籤

header, nav, main, article, aside, footer. 更多標籤能夠查看這裏 HTML Tags

語義化標籤的例子web

htmlchrome

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 語義化標籤 -->
    <header>This is header</header>
    <nav>This is nav</nav>
    <main>
        <article>article</article>
        <aside>aside</aside>
    </main>
    <footer>footer</footer>
</body>

</html>

csscanvas

*{
    /*padding: 0px;
    margin: 0px;*/
}
header{
    width: 100%;
    height: 100px;
    background-color: red;
}
nav{
    width: 100%;
    height: 36px;
    background-color: green;
}
main{
    width: 100%;
    height: 240px;
    background-color: #ccc;
}
main > article{
    width: 80%;
    height: 100%;
    background-color: purple;
    float: left;
}
main > aside{
    width: 20%;
    height: 100%;
    background-color: pink;
    float: right;
}
footer{
    width: 100%;
    height: 80px;
    background-color: skyblue;
}