码迷,mamicode.com
首页 > Web开发 > 详细

HTML5的新特性

时间:2018-01-08 01:07:04      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:auto   float   article   frameset   gpo   文章   mbed   标题   删除   

1.html5的声明

HTML5的声明是<!doctype html>这个时候走的是怪异模式,HTML4的声明是很长的。在HTML5中是不用担心的。大小写是不区分的,只存在一致性检查

2.新增标签

2.1.结构标签:用于布局的标签

<article><header><nav><section><aside><hgroup><figure><figcaption><footer><dialog>

2.2新增多媒体标签

<video><audio><source><canvas><embed>现在我们不需要自己安装插件

2.3新增的应用标签标签

3.删除的标签

3.1纯表现的的元素

Basefont,big,center,fint,s,strike,tt,u

3.2对可用性产生负面影响的元素,不利于爬虫爬去,不过可以做后台的时候使用。

Frame,Frameset,noframes

4.对于上面的标签做一个练习。一个页面,包括头,底,中间(分为左边和右边)

步骤:

(1)首先知道自己的布局分布,需要使用的标签有header、aside、section、footer,nav,我们先将自己的布局所需要的部分罗列出来。并将数据写入到HTML中。

<body>
    <header>
        <nav>
            <ul>首页</ul>
            <ul>播客</ul>
            <ul>论坛</ul>
        </nav>
    </header>
    <div>
      <section>这是一个布局标签练习</section>
      <aside>这是一个布局标签练习</aside>
    </div>
    <footer>这是一个布局标签练习</footer>
</body>

结构当然是没有出来了,因为我们并未添加样式,下来我们开始为每一部分,添加样式。

(2)给头设置样式设置颜色,并设置其宽度和高度。

选择器的方法有三种,这里使用的是标签选择器 
 header{
      height:199px;
      background:#339
  }

(3)我们在给中部的设置样式,中部分为两块,左边和右边。

左边:

section{
      height:600px;
      background:#900;
      width:70%;
      float:left
}

右边

      aside{
          width:28%;
          height:600px;
          background:#936;
          float:right
    }

(4)最后我们在给底部设置样式

footer{
            height:100px;
            margin-top:50px;
            background:#FCC;
            clear:both;
            margin:10px
            }

这样页面就算设置完成了,就可以看到页面的基本框架了,然后对其进行美化,顶部和中部,有一定距离,中部和底部有一点距离,左边和右边有一点距离。基本设置如下

div{
      margin:10px;
      height:600px;
      }

现在所有的设置就已经完成了,我们下来对每一个部分,添加内容。

我们还是从头部开始,头部一般就是导航栏。

(1)导航栏的代码如下

<nav>
    <ul>首页</ul>
    <ul>播客</ul>    
<ul>论坛</ul> </nav>

我们设置一下导航栏的位置,和颜色样式

  nav{
      height:30px;
      background:#F66;
      margin-top:151px
      }

此时这几项是竖排放着的,我们使用css样式,将它们变为横排,并设置其颜色和高度。

 nav ul li{
          width:100px;
          height:30px;
          float:left;
}

(2)顶部的菜单也就算是完成了,下来紧接着的是中部,还是按照从左到右的顺序。

我们首先添加一个文章

 <article>
            <h2>春晓</h2>
            <p>
               春眠不觉晓<br/>
            </p>
 </article>

样式

  article{
          background:#F00;
          margin:0 auto;
          width: 300px;
          text-align:center;}

在网站中右边一般 就是一下推荐,或者新闻,使用<hgroup>标签列举一系列的标题

<hgroup>
        <h3>xxx</h3>
        <h3>xxx</h3>
        <h3>xxx</h3>
        <h3>xxx</h3>
        <h3>xxx</h3>
</hgroup>

(3)现在来处理底部

 <footer>
      <p>这是底部</p>
      <hr/>
       <small>xxx</small>
       <small>xxx</small>
       <small>xxx</small>
       <small>xxx</small>
       <meter min="0" max="10" value="6" low="3" high="7"></meter>
       <hr/>
       <progress max="100" value="80" id="pro"></progress>
    </footer>

使用样式

    footer{
            height:100px;
            background:#FCC;
            clear:both;
            margin:10px
            }

现在就所有的都完成了。

5,对话框的使用dialog,最后的几个就是,出现疑问一答的形式

<dialog>
   <dt>xxx:xxxx</dt>
   <dd>xxxx:xxxx</dd>
   <dt>ttt:eee</dt>
   <dd>ttt:xxxx</dd>
</dialog>

6.度的使用meter

<meter min="0" max="10" value="6" low="3" high="7"></meter>

可以设置最小值,最大值,还有低值和高值,如果value的值超过低值或者高值,条条的颜色就会变深。

7.进度条的使用

<progress max="100" value="80" id="pro"></progress>

我使用的是谷歌浏览器,可能有的浏览器不支持一些样式。

 

 

 

 

 

 

 

HTML5的新特性

标签:auto   float   article   frameset   gpo   文章   mbed   标题   删除   

原文地址:https://www.cnblogs.com/kw28188151/p/8232773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!