/***************************
*
2017年9月26日 20:00
* 内容：h5新增部分标签
js的部分使用知识
jsp的部分标签
***************************/
一、h5新增部分标签
1、header：页面中的一个内容区域或整个页面的标题，不仅仅只出现在页面顶部，也可以与其他元素组合，如放入section标签中作为该块的头部。根据需要合理使用。
2、footer：整个页面或页面中一个内容区域块的注脚。不仅仅只出现在页面顶部，根据需要灵活搭配。
3、section：页面中的一个区域。可以与其他标记结合使用。
4、article：代表文档、页面或应用程序中的所有正文部分，描述的内容应是独立的，完整的，可以独自被外部引用的。例如一则新闻，一篇文章，都可以使用该标签。
5、aside：当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等。
6、nav：页面中的导航链接区域，但是只需要将主要的、基本的链接组放进nav中即可。
7、caption：用于制作表格的标题栏，在table标签中使用。
8、audio:用于播放音频数据。
9、video：用于播放视频数据。
综合应用：代码（原创）
<!DOCTYPE html>
<html>
<head>
<title>我的测试网页</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
nav ul li{
float: left;
width: 130px;
height: 60px;
line-height: 60px;
font-size: 18px;
}
header{
background-color:#00ff00;
}
nav{
background-color:#0ff;
}
article{
background-color: #fa0;
height: 500px;
}
section{
float: left;
width: 1200px;
}
aside{
background-color: #ff0;
float: right;
height: 500px;
}
footer{
background-color: #bbb;
height: 50px;
}
</style>
</head>
<body>
<header><h3>我的测试网页</h3></header>
<nav>
<ul>
<li>java</li>
<li>asp.net</li>
<li>jsp</li>
<li>javascript</li>
<li>android</li>
<li>oracle</li>
<li>mysql</li>
<li>uml</li>
<li>multi</li>
</ul>
<div class="clear"></div>
</nav>
<section>
<header>柠檬要干吃</header>
<article>
1、header：页面中的一个内容区域或整个页面的标题，不仅仅只出现在页面顶部，也可以与其他元素组合，如放入section标签中作为该块的头部。根据需要合理使用。
2、footer：整个页面或页面中一个内容区域块的注脚。不仅仅只出现在页面顶部，根据需要灵活搭配。
3、section：页面中的一个区域。可以与其他标记结合使用。
4、article：代表文档、页面或应用程序中的所有正文部分，描述的内容应是独立的，完整的，可以独自被外部引用的。例如一则新闻，一篇文章，都可以使用该标签。
5、aside：当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等。
6、nav：页面中的导航链接区域，但是只需要将主要的、基本的链接组放进nav中即可。
7、caption：用于制作表格的标题栏，在table标签中使用。
8、audio:用于播放音频数据。
9、video：用于播放视频数据。
</article>
</section>
<aside>
<ul>
<li>侧栏项目一</li>
<li>侧栏项目二</li>
<li>侧栏项目三</li>
<li>侧栏项目四</li>
<li>侧栏项目五</li>
<li>侧栏项目六</li>
</ul>
</aside>
<div class="clear"></div>
<footer>
页脚是footer
</footer>
</body>
</html>
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
