W3school

一、HTML发展历程：

目前处于向H5的过度阶段，历史遗留问题太多了。

二、HTML5新增常用标签：
  • header:定义文档的页眉头部。
  • nav:定义导航链接的部分。
  • footer:定义文档或节的页脚，底部。
  • article：定义文章。
  • section：定义文档中的节(section\区段)。
  • aside：定义其所处内容之外的内容 侧边。
  • datalist:定义选项列表。一般和input元素搭配使用。
  • fieldset：将表单内的相关元素分组打包。和legend搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <header>定义页面的头部 页眉</header>
    <nav>定义导航栏</nav>
    <footer>定义页面底部 页脚</footer>
    <article>定义文章</article>
    <section>定义区域</section>
    <aside>定义侧边</aside>

    <input type="text" value="输入明星" list="star"/>
    <datalist id="star">
        <option>刘德华</option>
        <option>刘晓庆</option>
        <option>刘若英</option>
        <option>张学友</option>
        <option>周杰伦</option>
        <option>郭德纲</option>      
    </datalist>

    <br /><br /><br /><br />
    <fieldset>
        <legend>用户登录</legend>
        用户名：<input type="text"> <br /><br />
        密　码：<input type="password">
    </fieldset>
</body>
</html>

新增常用标签效果 展示：


三、HTML5新增input type表单标签

  • emal：输入邮箱格式。
  • tel：输入手机号码格式。
  • url：输入url格式。
  • number：输入数字格式。
  • search：搜索框(体现语义化)。
  • range：自由拖动滑块。
  • time：时间。
  • date：年月日。
  • month：月年。
  • week:星期　年。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <fieldset>
        <legend>HTML5新增的input type 类型</legend>
        <form action="">
        
        邮箱:<input type="email" /> <br />

        输入手机号码格式:<input type="tel"> <br />
        
        输入url格式:<input type="url"><br />

        输入数字格式:<input type="number" ><br />

        搜索框(体现语义化):<input type="search"><br />

        自动拖动滑块:<input type="range"><br />

        时间:<input type="time"><br />

        年月日:<input type="date"><br />

        月年:<input type="month"><br />

        星期 年:<input type="week"><br />

        颜色:<input type="color" ><br />

        <input type="submit" /> 
    </form>  
    </fieldset>
</body>
</html>

html5新增表单标签效果显示:


四、新增占位符,焦点,等多选属性

  • placeholder：占位符。
  • autofocus:规定当页面加载时input元素应该自动获得焦点。
  • multiple:多文件上传。
  • autocomplete:规定表单是否应该启用自动完成功能，有on和off开关。
  • required:必填项。
  • accesskey:规定激活(使元素获得焦点)元素的快捷键，采用alt+字母的形式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名:
    <input type="text" placeholder="请输入用户名" autofocus /> <br />
    上传头像:<input type="file" multiple/><br />
    <form action="">
        姓名:
        <input type="text" autocomplete="off" name="userName" /><br/>
        昵称: <input type="text" required/><br />
        <input type="submit" accesskey="s"/>
    </form>
</body>
</html>

新增多选属性效果显示: