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

各位小伙伴

上一篇文章告诉大家

如何安装 WebStrom

今天和娜娜一起来

学习 HTML5 吧

HTML5 简介

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

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

和娜娜一起学习HTML5之语义化标签_第1张图片

 HTML5 语义化标签


HTML5 语义化标签(其实 HTML5 的标签和 div 没什么区别,也就是说没有特殊的功能,唯一的区别就是语义化,看见标签有知道这段内容的含义)。

打开的你的编程工具,我的是 WebStrom ,然后打开你的工作文件夹,在里面新建一下页面。(请原谅我喜欢酷酷的黑色)

和娜娜一起学习HTML5之语义化标签_第2张图片

这个是我的软件设置的模板,你们新建创建的页面,和我的不一样。可以自己去设置一下,这边就不给大家演示如何设置工具了,伙伴们自己去查一下。按照自己的喜好设置页面。

header:头部标签

不仅仅是网页的头部,还可以是一个模块的头部。

和娜娜一起学习HTML5之语义化标签_第3张图片

css样式:

和娜娜一起学习HTML5之语义化标签_第4张图片

页面效果:

为了效果明显我们在 section 周围添加了一圈阴影效果。

和娜娜一起学习HTML5之语义化标签_第5张图片

上面的代码示例除了 header 标签 还使用了一个 section 标签。

section:区块标签

说实话和 div 没有区别,也就是语义化也是差不多的,语义化的意思就是,区块,用来包裹某个模块。后面的内容都会写在这个区块中

nav:通常用于导航栏

页面代码:

和娜娜一起学习HTML5之语义化标签_第6张图片

css样式:

和娜娜一起学习HTML5之语义化标签_第7张图片

页面效果:

和娜娜一起学习HTML5之语义化标签_第8张图片

article: 通常用于文章的引入

比如论坛或博客,总之就是用来装文章。给大家推荐一篇我最喜欢的文章。

页面代码:

和娜娜一起学习HTML5之语义化标签_第9张图片

css样式:

和娜娜一起学习HTML5之语义化标签_第10张图片

页面效果:

和娜娜一起学习HTML5之语义化标签_第11张图片

是不是有点样子了

figure:通常用于描述图片的

页面代码:

和定义列表有点像,用来定义 figure 的标题,放在 figure 的子元素第一个或者最后一个,figcaption 和 img 可以换位置

和娜娜一起学习HTML5之语义化标签_第12张图片

css样式:

和娜娜一起学习HTML5之语义化标签_第13张图片

页面效果:

和娜娜一起学习HTML5之语义化标签_第14张图片

aside:用来作两侧的导航栏

相信小伙伴们也有看过这种两侧的导航栏。

页面代码:

和娜娜一起学习HTML5之语义化标签_第15张图片

css样式:

和娜娜一起学习HTML5之语义化标签_第16张图片

页面效果:

和娜娜一起学习HTML5之语义化标签_第17张图片

现在就剩最后一步了给我们的页面添加一个结尾

footer: 描述网页或一个模块的底部

和娜娜一起学习HTML5之语义化标签_第18张图片

css样式:


和娜娜一起学习HTML5之语义化标签_第19张图片

最终的页面效果:

和娜娜一起学习HTML5之语义化标签_第20张图片

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

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!

    你可能感兴趣的:(和娜娜一起学习HTML5之语义化标签)