搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Java联盟 > 和娜娜一起学习HTML5之语义化标签

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

Java联盟 2018-02-28

温馨提示:文章底部,有福利链接哦!


各位小伙伴

上一篇文章告诉大家

如何安装 WebStrom

今天和娜娜一起来

学习 HTML5 吧


HTML5 简介


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


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


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


 HTML5 语义化标签

       

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


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


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


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


header:头部标签

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


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


css样式:


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


页面效果:

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


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


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


section:区块标签

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


nav:通常用于导航栏

页面代码:


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


css样式:


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


页面效果:


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


article: 通常用于文章的引入

页面代码:


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


css样式:


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


页面效果:


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

是不是有点样子了


figure:通常用于描述图片的

页面代码:

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


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


css样式:


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


页面效果:


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


aside:用来作两侧的导航栏

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

页面代码:


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


css样式:


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


页面效果:


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


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


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


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


css样式:


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


最终的页面效果:


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


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


<!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>


今天先到这里了

小伙伴们再见


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


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



【福利合集】   spring    框架文章汇总

【福利合集】  mybatis   框架文章汇总

【福利合集】springMVC 框架文章汇总


有任何问题都可以在文章留言,娜姐都看着的呢!

合作,投稿,转载,版权问题请联系 李娜:Lina_Java

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《和娜娜一起学习HTML5之语义化标签》的版权归原作者「Java联盟」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Java联盟微信公众号

Java联盟微信公众号:Java152919

Java联盟

手机扫描上方二维码即可关注Java联盟微信公众号

Java联盟最新文章

精品公众号随机推荐