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 :异步执行;

  • 相关阅读:
    acdream 1738 世风日下的哗啦啦族I 分块
    hihocoder #1179 : 永恒游戏 暴力
    hihocoder #1178 : 计数 暴力
    hihocoder #1177 : 顺子 模拟
    刷了500道水题是什么体验?
    scu 4436: Easy Math 水题
    JVM系列三:JVM参数设置、分析
    Eclipse插件Target Management (RSE)
    修改jsp文件tomcat发布失败(Could not delete May be locked by another process)
    oracle中修改表名
  • 原文地址:https://www.cnblogs.com/caolidan/p/6973149.html
Copyright © 2011-2022 走看看