前言
通过之前的文章, 我们已经搭好了 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由浅入深教程
发表回复