您的位置：首页 > Web前端 > HTML5

html5新增的语义标签和表单验证功能

2017-03-16 20:02 671 查看
1:html5 css3

    a:html5的定义

       <!DOCTYPE html>

        <html>

            <head>

                <meta charset="utf-8"/>

                <link rel="stylesheet" href="xxx.css"/>

                <script src ="xxxx.js"/>

            </head>

            <body>

            </body>

        </html>

      b:新增的语义标签

        块级：

        <header></header>               定义页面的头部

        <footer></footer>               定义页面的尾部

        <article></article>             定义一篇文章

        <section></section>             定义一个段落 或者块

        <aside></aside>                 定义一个侧边栏

        <nav></nav>                     定义一个导航栏

        <main></main>                   定义一个页面的主体部分

        <figure></figure>               定义一个图片或者视频

        <figcaption></figcaption>       定义一个图片或者视频的标题或者简介

        行级:

            <mark></mark>               给文字添加标注

            <s></s>                     加重提示

            <b></b>

      c:新增的表单验证

            搜索框 <p>search:<input type="search"></p>

            邮件框 <p>email:<input type="email"></p>

            电话框 <p>tel:<input type="tel"></p>

            数字框 <p>number:<input type="number"></p>

            地址框 <p>url:<input type="url"></p>

            颜色框 <p>color:<input type="color"></p>

            日期框 <p>date:<input type="date"></p>

            必填框：<input type="text" required><br/>

            字符长度控制框：<input type="text" minlength="4" maxlength="10" required><br/>

            数值控制框：<input type="number" min="4" max="10" required><br/>

4000
            住址提示框：<input type="text" placeholder="江西南昌"><br/>

            自动获取光标:<input type="text" autofocus><br/>

            自动补全框:<input type="text" autocomplete="on">

            text可选文本框

            <p>datalist<input type="text" list="browsers">

                <datalist id="browsers">

                    <option value="aaaaa"/>

                    <option value="bbbbbb"/>

                    <option value="cccccc"/>

                    <option value="dddddd"/>

                </datalist>

            </p>

            加密框：

            <p><input type="text">

                    <keygen name="aaaaaaaaaaa"></keygen>

            </p>

            拖动显示数值框

            <form oninput="showNum.value=num.value">

                拖动显示数值框：<input type="range" value="10" name="num">

                <output name="showNum"></output>

            </form>

         如果不想对表单进行校验有一下两种方式：

            1.  <form action="#" method="post"novalidate>

                    <!--form中加入novalidate后表单不会进行校验-->

            2.  <input type="submit" value="提交"formnovalidate>

                    <!--input提交按钮中加入formnovalidate后表单也不会进行校验-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航