HTML5的新标签

布局标签

header:页面中一个内容区块的头部布局;

nav:导航区域；

article:页面中独立的内容部分布局；

section:定义文档中的节，比如章节，页眉，页脚；

aside:在独立内容之外，但是又与article有关联的部分布局；

footer:页面中一个内容区块尾部布局；

更便于阅读，增加了可读性，有利于SEO

表单标签

 <input type="text" list='province-list'>
 <datalist id='province-list'>
     <option value='山东'>
     <option value='山西'>
     <option value='广东'>
     <option value='广西'>
     <option value='河南'>
     <option value='河北'>
 </datalist>

效果：

多媒体标签：

audio：音频； video：视频；

其他标签

progress：进度条标签；

    <Progress value="50" max="100"></Progress><br>
    <Progress value="100" max="100"></Progress><br>
    <Progress value="10" max="200"></Progress><br>
    <Progress value="150" max="200"></Progress><br>

效果：

配合js使用，实现一个进度条慢慢前进的效果

    <Progress value="5" max="100"></Progress><br>
    <script>
        let progress = document.querySelector('Progress')
        function fn() {
            setTimeout(function () {
                progress.value++
                fn()
            }, 100)
        }
        fn()
    </script>

meter：度量器标签；

    小红：<meter value="55" min="0" max="100" low="60" hign="80" title="65分" optimum="100"></meter><br/>
    小明：<meter value="90" min="0" max="100" low="60" hign="80" title="80分" optimum="100"></meter><br/>
    小李：<meter value="70" min="0" max="100" low="60" hign="80" title="75分" optimum="100"></meter><br/>
    小许：<meter value="100" min="0" max="100" low="60" hign="80" title="75分" optimum="100"></meter><br/>
    小张：<meter value="0" min="0" max="100" low="60" hign="80" title="75分" optimum="100"></meter><br/>

效果：

HTML5的新属性

draggable: 拖动

contenteditable：html内容也在页面编辑

hidden：隐藏元素，将元素设置为display:none，适合大多数标签;

required:必填，form表单提交时会自动检查该元素是否为空；

minlength:最小长度，form提交时如果如果长度小于最小值，会基于提醒；

maxlength:最大长度，当输入字符长度大于最大值，后面的字符会输入不上；

pattern:正则表达式，当表单提交时会自动检测格式；

placeholder:提示文本；

autocomplete:自动填充，就是提示之前输入过的文本；

autofocus:自动获取焦点；

之前决定form元素已经没啥用了，看着这几个属性可以使用form元素，action，method,target等属性不设置，单纯使用form的表单提供检查给用户提示。但是要设置onsubmit=" return false"否则还是会刷新网页。

表单控件的type属性

<input type="week">选择某年某一周

<input type="date">选择某年某月某天

<input type="time">选择某时某分

<input type="datetime-local">datetime被废弃，现在使用datetime-local,选择某年某月某日某时某分。

<input type="number" value="3">选择某个数字

<input type="url">表单提交时会检测该值是否为url格式。

<input type="color">选择一个颜色。

<input type="email">表单提交时会检查该值是否为一个邮箱地址。

<input type="tel">输入一个电话号，与email和url不同，在提交表单之前，输入值不会被自动验证为特定的格式 - 这是因为电话号码的格式在世界各地变化很大。它使移动浏览器显示一个更方便的键盘输入电话号码。

<input type="search">移动端要求输入时，键盘回车按钮提示显示为“搜索”。blog.csdn.net/en_joker/ar…

<input type="range" value="30"> 值从0到100的一个滑块。