• HTML5的新特性


    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;
          70%;
          float:left
    }

    右边

          aside{
              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{
              100px;
              height:30px;
              float:left;
    }

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

    我们首先添加一个文章

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

    样式

      article{
              background:#F00;
              margin:0 auto;
               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>

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

     

     

     

     

     

  • 相关阅读:
    MySQL 通过多个示例学习索引
    git reset的用法
    git rebase的用法
    学习yii2.0——依赖注入
    学习yii2.0——行为
    学习yii2.0——事件
    学习yii2.0——数据验证
    让Apache和Nginx支持php-fpm模块
    安装python3
    使用php操作memcache
  • 原文地址:https://www.cnblogs.com/kw28188151/p/8232773.html
Copyright © 2020-2023  润新知