CSS3学习一：HTML5新增的标签、新增的表单类型、新增的表单属性

一、HTML5新标签

HTML5在HTML4基础上，新增加的标签：

结构性标签：

• <article>：文章部分标签。
• <aside>： <article> 标签外的内容，可用作文章的侧栏。
• <footer>：页脚标签。
• <header>：头部标签。
• <nav>：定义导航链接标签。
• <section>：块标签。

非结构性标签：

• <audio>：定义声音内容。
• <video>：视频标签。
• <canvas>：画布标签。
• <command>：定义命令按钮。
• <datalist>：定义下拉列表。一般与input标签一起使用。
• <details>：定义元素的细节。与 <summary> 标签 配合使用可以为 details 定义标题。
• <figure>：定义媒介内容的分组，以及它们的标题。
• <mark>：定义有记号的文本。
• <progress>：定义任何类型的任务的进度。
• <source>：定义媒介源。
• <time>：定义日期/时间。

用法示例：

datalist：

        <input type="text"  list="data" placeholder="请选择...."/>
        <!-- detalist的id,关联input的list -->
        <datalist id="data">
            <option>good</option>
            <option>nice</option>
            <option>bad</option>
        </datalist>

details：

        <details>
            <summary>水果</summary>
            <p>苹果</p>
            <p>香蕉</p>
        </details>

 

figure，用作文档中插图的图像示例：

        <figure>
            <p>黄浦江上的的卢浦大桥</p>
            <img src="img/timg.jpg" width="350" height="234" />
        </figure>

 

mark，添加背景，用于加强语气：

<p>黄浦江上的的<mark>卢浦大桥</mark></p>

当mark，可以设置其它的颜色样式或其它样式

progress：进度条

如，总长度为100，显示的长度为10

<progress max="100" value="10"></progress>

示例：每0.1秒，进度条+1，共100

        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <progress id="pro" max="100" value="0"></progress>
        <script type="text/javascript">
            var num = 0
            setInterval(function() {
                $("#pro").val(num+"")
                num++
            }, 100)
        </script>

 

二、HTML5新增的表单类型及属性

HTML5新增的input类型，如：range，date，time，week，color......

        <form action="#">
            <input type="range" max="100" min="0" step="10" value="10"/>
            <br /><input type="date" name="" id="" value=""/>
            <br /><input type="week" name="" id="" value="" />
            <br /><input type="month" name="" id="" value="" />
            <br /><input type="datetime-local" name="" id="" value=""/>
            <br /><input type="time" name="" id="" value="" />
            <br /><input type="search" name="" id="" value=""/>
            <br /><input type="color" name="" id="" value=""/>
            <br /><input type="submit" value="提交"/>            
        </form>

 

HTML5新增的重要的三种input类型：email，url，tel

        <form action="#">
            <br /><input type="email" name="" id="" value=""/>
            <br /><input type="url" name="" id="" value="" />
            <br /><input type="tel" name="" id="" value="" />
            <br /><input type="submit" value="提交"/>            
        </form>

 

HTML5新增的表单特性和函数：

placeholder属性：自动提示

autocomplete属性：自动补全。on开启，可以写在input的属性中，也可以写在form表单中。写在表单中，则表单下的input都可以自动补全。

list特性和datalist：列表选择，见上节

autofocus属性：聚集属性

required属性：必填属性

pattern属性：正则

form属性：表单外的input，可以同某表单关联。如 form="id123"，关联id为id123的表单。

.............