HTML3

1. HTML5新增的标签

主体结构标签, 用来做布局。比div更具语义

<header> 定义文档的页眉

<nav> 定义导航链接的部分

<article> 规定独立的自保护内容，潜在来源：论坛帖子、报纸文章、博客条目和用户评论

<section>定义文档中的节、章

<aside> 定义其所处内容之外的内容

<footer>定义文档或节的页脚

<figure> 规定独立的流内容（一个广告，图片） 可以用<figcaption>添加标题

非主体结构标签

<datalist>  文本框和下列列表的组合

<details>   解释

<menu>    菜单

<adress>   地址

<progress> 进度条

<mark>     高亮显示

<time>      时间

新增的表单元素

<form>
<input type="email" /> <!--邮箱-->
<input type="url" /> <!--网址-->
<input type="tel" /> <!--手机号-->
<input type="number" min="1" max="20 " step="4" /> <!--数字，最小1，最大20，递增为4-->
<input type="range" min="1" max="20 " step="4" /> <!--拖拉条-->
<input type="search" />
<input type="color" /> <!--选择颜色-->
<input type="date" /> <!--年月日-->
<input type="month" /> <!--月份-->
<input type="week" /> <!--周-->
<input type="time" /><!--时间-->
<input type="submit" />
</form>

新增的属性

autocomplete 自动匹配

autofocus 自动获取焦点

form外数据提交

formaction 数据提交到别的后台页面

file mulitiple 选择多个文件上传

pattern 正则表达式

placeholder 内容提示

required 判断内容不为空

contenteditable 内容可以编辑

hidden 隐藏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

    <!--文本框和下拉列表的组合-->
    <input type="text" list="taglist" />
    <datalist id="taglist">
        <option>苹果</option>
        <option>香蕉</option>
        <option>橘子</option>
    </datalist>

    <!--细节解释-->
    <details>
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School</p>
    </details>
    <br />
    <br />

    <!--进度条-->
    <progress max="10" value="5"></progress>
    <br />
    <br />

    <!--新增的表单元素-->
    <form>
        <input type="email" />   <!--邮箱-->
        <input type="url" />      <!--网址-->
        <input type="tel" />      <!--手机号-->
        <input type="number" min="1" max="20 " step="4" />  <!--数字，最小1，最大20，递增为4-->
        <input type="range" min="1" max="20 " step="4" /> <!--拖拉条-->
        <input type="search" />
        <input type="color" />  <!--选择颜色-->
        <input type="date" />  <!--年月日-->
        <input type="month" />   <!--月份-->
        <input type="week" /> <!--周-->
        <input type="time" /><!--时间-->
        <input type="submit" />
    </form>
    <br />
    <br />

    <!--新增一些属性-->
    <form autocomplete="on">        <!--自动匹配-->
        <input type="text" list="citylist">
        <datalist id="citylist">
            <option>BeiJing</option>
            <option>QingDao</option>
            <option>QingZhou</option>
            <option>QingHai</option>
        </datalist>
    </form>
    <br />

    <input type="text" autofocus />   <!--自动获取焦点-->
    <br/>
    <br />

    <form action="1.aspx " method="get" id="form1">
        <input type="text" formaction="2.aspx" />    <!--提交到别的后台页面-->
        <input type="submit" />
    </form>
    <input type="text" form1="form1"/>   <!--在form外的数据也可以提交-->
    <br />
    <br />

    <input type="file" multiple/>  <!--可以选择多个文件上传-->
    <br />
    <br />

     <!--可以直接写正则表达式，制定规则-->
    <form action="1.aspx">
        请输入邮政编码：<input type="text" pattern="[0-9]{6}" title="请输入6位数的编码"/>
        <input type="submit" />
    </form>
    <br/>
    <br/>

    <input type="text" placeholder="请输入用户名"/>   <!--内容提示-->
    <br />
    <br />

    <form action="1.aspx">
        <input type="text" required /> <!--判断不能为空-->
        <input type="submit" />
    </form>

    <p contenteditable="true">这是一段可编辑的段落，请试着编辑该文本</p>
    <p hidden >这是一段隐藏的段落</p>
</body>
</html>