和娜娜一起学习HTML5之语义化标签

各位小伙伴

上一篇文章告诉大家

如何安装 WebStrom

今天和娜娜一起来

学习 HTML5 吧

HTML5 简介

HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。目的是为了在移动设备上支持多媒体。

概念性的内容咱们就说到这了，有时间的伙伴可以去百度一下，肯定比我写的要全，咱们直接上干货，来写封面的那个页面。

 HTML5 语义化标签

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样式：

最终的页面效果：

呼！总算是把整个页面写完了，小伙伴们自己也动手试一下吧！对于记忆有好处哦~下面源代码奉上~

Title

*{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: bold30px/60px"";

color:#fff;

text-align: center;

}

header{

height:60px;

background:#{{102670:0}};

}

section.main{

width:1200px;

margin:0auto;

box-shadow:0010px0#000;

}

section.mainheader{

height:60px;

background: orangered;

}

section.mainnavulli{

float: left;

height:60px;

width:200px;

background: lightseagreen;

margin-left:50px;

}

section.mainnavulli:nth-child(1){

margin-left:0;

}

article{

background: slategray;

}

articlep{

font-size:16px;

font-weight: normal;

}

figure{

float: left;

width:300px;

font: normal16px/30px"";

background: aquamarine;

margin-left:150px;

}

figure.fig{

margin-left:0;

}

figureimg{

width:300px;

}

section.mainfooter{

height:60px;

background:#{{102670:0}};

}

aside{

position: absolute;

top:calc(50% - 175px);

height:350px;

width:60px;

}

asideulli{

width:100%;

height:60px;

margin-top:10px;

background: skyblue;

}

asideulli:nth-child(1){

margin-top:0;

}

aside.right{

right:0;

}

footer.foot{

position: absolute;

bottom:10px;

height:60px;

width:100%;

background:#{{102670:0}};

}

header

header

nav

nav

nav

nav

nav

莫生气

人生就像一场戏，因为有缘才相聚。

相扶到老不容易，是否更该去珍惜。

为了小事发脾气，回头想想又何必。

别人生气我不气，气出病来无人替。

我若气死谁如意，况且伤神又费力。

邻居亲朋不要比，儿孙琐事由他去。

吃苦享乐在一起，神仙羡慕好伴侣。

海贼王

银魂

火影忍者

footer

nav

nav

nav

nav

nav

nav

nav

nav

nav

nav

footer

今天先到这里了

小伙伴们再见

学习Java的同学注意了！！！学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群：253772578，我们一起学Java！