前言
通过之前的文章, 我们已经搭好了 webapp 的雏形, 不过到目前为止, 我们的前端界面比较简单, 为此, 我们要学习前端的知识, 然后对界面进行改进.
前端的内容可以分为 HTML CSS JavaScript 三部分, 我们首先学习 HTML
HTML5 简介
什么是 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 由浅入深教程