前言
通过之前的文章, 我们已经搭好了 webapp
的雏形, 不过到目前为止, 我们的前端界面比较简单, 为此, 我们要学习前端的知识, 然后对界面进行改进.
前端的内容可以分为 HTML CSS JavaScript
三部分, 我们首先学习 HTML
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 -
语义化标签的例子
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; }
兼容性(IE)
-
IE9 将新的语义标签理解为行级元素, 在设置高度的时候是无效的, 需要在样式中转换为块级元素(block), 如
main{ display: block; }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。