zoukankan      html  css  js  c++  java
  • 总结HTML5

    都说项目页面是HTML5写的,但是HTML5的特别之处用了多少?

    1、是不是页面布局都是统一的div,然后class写样式?可是HTML5提供了好多新标签 ,css中直接用标签名即可定义样式,不用费力想class名了!

    其中大多数元素也和div 一样{display:block;},只有figure不同,它自带margin ,表示一段独立的流内容,在文档主体内容中的一个独立的单元。

    <!--标签 header nav article aside footer section figure main mark details-->
    <header style="background-color: aqua; height:20px"></header>
    
    <nav style="background-color: red;height:20px"></nav>
    
    <article style="background-color: yellow;height:20px"></article>
    
    <aside style="background-color: blue;height:20px"></aside>
    
    
    
    <section style="background-color: royalblue;height:20px">
    
    </section>
    
    <figure style="background-color: blueviolet;height:200px">
        <figcaption>PRC</figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda cupiditate, dicta distinctio facilis fuga fugiat inventore magnam maiores maxime minima nam necessitatibus praesentium quisquam rem, repellat saepe sed voluptatum?</p>
    </figure>
    
    <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis dolor dolorum minima nemo non perspiciatis porro sit. At deserunt eius enim modi natus nemo nesciunt numquam reprehenderit totam, voluptatibus!</main>
    
    <mark>hello,world!</mark>
    
    <details>
        <summary>Html5</summary>
        13213
    </details>

    2、form 中的元素可以不在form中,只需要加form="" ,required formtarget formaction 你知道多少?

    <form action="" id="textForm">
        <label for="txt_name">用户名:</label>
        <input type="text"  id="txt_name" autofocus required/>
        <input type="submit" formaction="a.html" formtarget="_blank"/>
    </form>
    <textarea name="" id="" cols="30" rows="10" form="textForm"></textarea>

    3、下拉菜单快速搜索

    <input type="text" list="grouplist"/>
    <datalist id="grouplist">
        <option value="group1">group1</option>
        <option value="name">name</option>
        <option value="haidian">haidian</option>
    </datalist>

     4、details 与summary

    <details>
        <summary>Html5</summary>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut itaque pariatur quae quisquam ut. Asperiores autem consequatur consequuntur 
    exercitationem expedita id, laboriosam nisi officiis omnis, perferendis repellendus sunt tempora vitae!
    </details>

    5、cite 表示作品:如一本书、一篇文章、一首歌曲...

    6、script 新增了defer 和async  属性,他们都可以加快页面的加载速度,使脚本加载不妨碍页面其他元素加载。

    defer :脚本下载完后,继续执行;

    async :异步执行;

  • 相关阅读:
    易耗品管理 第三四表 查询的存储过程
    [zz]使用vc编译libsvm
    程序调试小bug
    Ubuntu下安装配置OpenNI, OpenCV
    关于Linux下使用OpenCv读取视频打不开的问题
    jQuery实现图片点击放大
    关于 QtDBus 的种种
    javascript计时器的实现
    [QT]没有选择Debug构建方式.为文件的某行设置断点可能会失败
    linux firefox 不显示英文的解决
  • 原文地址:https://www.cnblogs.com/caolidan/p/6973149.html
Copyright © 2011-2022 走看看