前言通过之前的文章, 我们已经搭好了 webapp 的雏形, 不过到目前为止, 我们的前端界面比较简单, 为此, 我们要学习前端的知识, 然后对界面进行改进.前端的内容可以分为 HTML CSS JavaScript 三部分, 我们首先学习 HTMLHTML5简介什么是 HTML5 ———— 第五代 HTML 语言为什么学 H5所有主流浏览器都支持 h5, chrome, firefox, safari, IE9+H5 改变了用户与文档的交互方式, 尤其是多媒体, 替代了传统的 flash, 多媒体标签 video, audio, canvas增加了其他新特性语义特性、本地存储、网页多媒体(音视频), 二位三维变换, 特效(过渡, 动画)相比于 h4, 抛弃了不合理不常用的标签和属性, 增加了一些标签和属性, h5代码更加简洁(<!doctype html>, <meta charset=“UTF-8”)HTML5 语义化标签header, nav, main, article, aside, footer. 更多标签可以查看这里 HTML Tags语义化标签的例子html<!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>css*{ /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;}参考资料w3schools, HTML黑马程序员 2018版Html5+Css3由浅入深教程