html5

 <!-- 
        1. H5不是新语言，而是html第五次重大修改的第五个版本。
        2. 首页主流的浏览器都支持H5，（谷歌，火狐，苹果） IE9以上支持H5
        3. 改变了用户与文档的交互方式，多媒体，video，audio canvas
        4. 增加了其他的新特性，语义特性，本地存储特性，网页多媒体，二维三维，特效（过度，动画）
        5. 相对于h4
             1. 进步：抛弃的一些不常用的标记的属性。
             2. 新增了一些标记和属性--表单 视频 音频等···
             3. 从代码结构而言，h5的网页结构更简洁。
     -->
 
 html5 简单布局
 
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    header {
        width: 100%;
        height: 50px;
        background-color: red;
    }

    nav {
        height: 36px;
        width: 100%;
        background-color: black;
        color: #fff;
    }

    main {
        width: 100%;
        height: 500px;
        background-color: rebeccapurple;
    }

    main>article {
        float: left;
        width: 70%;
        height: 100%;
        background-color: salmon;
    }

    main>aside {
        float: left;
        width: 30%;
        height: 100%;
        background-color: green;
    }

    footer {
        background-color: hotpink;
        width: 100%;
        height: 40px;
    }
</style>

<body>
    <header>头部</header>
    <nav>导航</nav>
    <main>
        <article>左边</article>
        <aside>右边</aside>
    </main>
    <footer>底部</footer>
</body>
 
表单type属性
<form>
        用户名: <input type="text" placeholder="用户名"><br>
        密码: <input type="password" placeholder="密码"><br>
        邮箱: <input type="email" placeholder="邮箱"><br>
        时间: <input type="date" placeholder="时间"><br>
        电话: <input type="tel" placeholder="电话"><br>
        网址: <input type="url" placeholder="网址"><br>
        请输入商品: <input type="search" placeholder="商品"><br>
        数字: <input max="10" min="5" value="8" type="number" placeholder="数字"><br>
        范围: <input type="range" max="100" min="1" value="1" placeholder="范围"><br>
        颜色: <input type="color" placeholder="颜色"><br>
        <!-- 提交 -->
        <input type="submit" value="提交">
    </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2020-10-09 15:55  谎称  阅读(46)  评论(0)    收藏  举报