搜文章
温馨提示：文章底部，有福利链接哦！
各位小伙伴
上一篇文章告诉大家
如何安装 WebStrom
今天和娜娜一起来
学习 HTML5 吧
HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。目的是为了在移动设备上支持多媒体。
概念性的内容咱们就说到这了，有时间的伙伴可以去百度一下，肯定比我写的要全，咱们直接上干货，来写封面的那个页面。
HTML5 语义化标签（其实 HTML5 的标签和 div 没什么区别，也就是说没有特殊的功能，唯一的区别就是语义化，看见标签有知道这段内容的含义）。
打开的你的编程工具，我的是 WebStrom ，然后打开你的工作文件夹，在里面新建一下页面。（请原谅我喜欢酷酷的黑色）
这个是我的软件设置的模板，你们新建创建的页面，和我的不一样。可以自己去设置一下，这边就不给大家演示如何设置工具了，伙伴们自己去查一下。按照自己的喜好设置页面。
header:头部标签
不仅仅是网页的头部，还可以是一个模块的头部。
css样式：
页面效果：
为了效果明显我们在 section 周围添加了一圈阴影效果。
上面的代码示例除了 header 标签 还使用了一个 section 标签。
section:区块标签
说实话和 div 没有区别，也就是语义化也是差不多的，语义化的意思就是，区块，用来包裹某个模块。后面的内容都会写在这个区块中
nav:通常用于导航栏
页面代码：
css样式：
页面效果：
article: 通常用于文章的引入
页面代码：
css样式：
页面效果：
是不是有点样子了
figure:通常用于描述图片的
页面代码：
和定义列表有点像，用来定义 figure 的标题,放在 figure 的子元素第一个或者最后一个,figcaption 和 img 可以换位置
css样式：
页面效果：
aside：用来作两侧的导航栏
相信小伙伴们也有看过这种两侧的导航栏。
页面代码：
css样式：
页面效果：
现在就剩最后一步了给我们的页面添加一个结尾
footer: 描述网页或一个模块的底部
css样式：
最终的页面效果：
呼！总算是把整个页面写完了，小伙伴们自己也动手试一下吧！对于记忆有好处哦~下面源代码奉上~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after {
content: "";
display: block;
clear: both;
}
body{
font: bold 30px/60px "";
color: #fff;
text-align: center;
}
header{
height: 60px;
background: #102670;
}
section.main{
width: 1200px;
margin: 0 auto;
box-shadow: 0 0 10px 0 #000;
}
section.main header{
height: 60px;
background: orangered;
}
section.main nav ul li{
float: left;
height: 60px;
width: 200px;
background: lightseagreen;
margin-left: 50px;
}
section.main nav ul li:nth-child(1){
margin-left: 0;
}
article{
background: slategray;
}
article p{
font-size: 16px;
font-weight: normal;
}
figure{
float: left;
width: 300px;
font: normal 16px/30px "";
background: aquamarine;
margin-left: 150px;
}
figure.fig{
margin-left: 0;
}
figure img{
width: 300px;
}
section.main footer{
height: 60px;
background: #102670;
}
aside{
position: absolute;
top:calc(50% - 175px);
height: 350px;
width: 60px;
}
aside ul li{
width: 100%;
height: 60px;
margin-top: 10px;
background: skyblue;
}
aside ul li:nth-child(1){
margin-top: 0;
}
aside.right{
right: 0;
}
footer.foot{
position: absolute;
bottom: 10px;
height: 60px;
width: 100%;
background: #102670;
}
</style>
</head>
<body>
<header>header</header>
<section class="main">
<header>header</header>
<nav>
<ul class="clearfix">
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
</ul>
</nav>
<article>
<h2>莫生气 </h2>
<p>
人生就像一场戏，因为有缘才相聚。
相扶到老不容易，是否更该去珍惜。
为了小事发脾气，回头想想又何必。
别人生气我不气，气出病来无人替。
我若气死谁如意，况且伤神又费力。
邻居亲朋不要比，儿孙琐事由他去。
吃苦享乐在一起，神仙羡慕好伴侣。
</p>
</article>
<section class="clearfix">
<figure class="fig">
<img src="imgs/1.jpg" >
<figcaption>
海贼王
</figcaption>
</figure>
<figure>
<img src="imgs/3.jpg" >
<figcaption>
银魂
</figcaption>
</figure>
<figure>
<img src="imgs/2.jpg" >
<figcaption>
火影忍者
</figcaption>
</figure>
</section>
<footer>footer</footer>
</section>
<aside class="left">
<nav>
<ul class="clearfix">
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
</ul>
</nav>
</aside>
<aside class="right">
<nav>
<ul class="clearfix">
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
<li>nav</li>
</ul>
</nav>
</aside>
<footer class="foot">footer</footer>
</body>
</html>
今天先到这里了
小伙伴们再见
【福利合集】 spring 框架文章汇总
【福利合集】 mybatis 框架文章汇总
【福利合集】springMVC 框架文章汇总
有任何问题都可以在文章留言，娜姐都看着的呢！
合作,投稿,转载，版权问题请联系 李娜：Lina_Java
版权声明：本站内容全部来自于腾讯微信公众号，属第三方自助推荐收录。《和娜娜一起学习HTML5之语义化标签》的版权归原作者「Java联盟」所有，文章言论观点不代表Lambda在线的观点， Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458
文章来源： 阅读原文
Java联盟微信公众号：Java152919
手机扫描上方二维码即可关注Java联盟微信公众号