html新增结构元素解析

本文主要帮助理解HTML5新增结构元素article、section、aside、nav、time微格式。

新增非结构元素header、footer、address、figure。

新增表单元素的属性form、formaction、formmethod、formenctype、formtarget、required、autofocus、placeholder、list、autocomplete、pattern、indeterminate。

• section表示页面上的区域，主要的目的是给文章分段等，section里必须包含标题。

<section>
    <h1>标题</h1>
    <article>内容</article>
</section>
复制代码

• article表示页面上独立的区域，和section相比，article更注重自身的独立性。

<article>
    <section>
        <h1>标题</h1>
        <p>内容</p>
    </section>
</article>
复制代码

• aside表示页面的附加内容，能够是文章的含义，连接等

<article>
    <section>
        <h1>标题</h1>
         <p>内容</p>
    </section>
</article> 

<aside>
    <h1>评论</h1>
    <section>
        <h2>张</h2>
        <p>好听</p>
    </section>
</aside>    
复制代码

• nav表示页面的导航，主要包括页面的主导航，侧边栏导航，页内导航和分页导航。

<nav>
    <ul>
        <li><a href="#">111</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">333</a></li>
    </ul>
</nav>
复制代码

• time用datatime属性表示一个时间戳。T表明分隔符，Z表明格林威治标准时间，**+**表明时区，pubdata表示发布时间。

<time datatime="2017-01-09T13:02" pubdate>2017-01-09</time>
<time datatime="2017-01-10Z">2017-01-10</time>
<time datatime="2017-01-11+9:00">2017-01-11</time>
复制代码

• header标签用于页面的头部、文章的页眉等。页面中能够出现多个header标签。

<header>
  <h1>这是标题</h1>
</header>
<article>
  <header>
    <h2>这是文章标题</h2>
  </header>
</article>
复制代码

• footer标签用于页面的注脚、文章的页脚等。页面中能够出现多个footer标签。

<article>
  <footer>
    <h2>这是文章页脚</h2>
  </footer>
</article>
<footer>
  <h1>这是注脚</h1>
</footer>
复制代码

• address标签用于表示文档的做者，联系地址，用在body里表示文档的做者，用在article里表示文章的做者，一般和footer搭配使用。

<address>
  <ul>
    <li>姓名</li>
    <li>地址</li>
  </ul>
</address>
复制代码

• figure标签表示独立的内容，figcaption表示figure的标题。figcaption标签赢始终置于figure的第一位或最后一位

<figure>
  <figcaption>这是内容</figcaption>
  <p>这里是文字</p>
</figure>
复制代码

• 新增属性form表示输入域所属的一个或多个表单。

<form id="userInfo">
地址：<input  type="text" />
<input type="submit" />
</form>
姓名： <input from="userInfo" type="text" />
复制代码

• formaction能够重写表单action属性

<form id="userInfo" action="index.jsp">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formaction="userInfo.jsp" />
</form>
复制代码

• formenctype能够重写表单enctype属性

<form id="userInfo" enctype="text/plain">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formenctype="multipart/form-data" />
</form>
复制代码

• formmethod能够重写表单method属性。name属性为key，value属性为value

<form id="userInfo" method="post">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formmethod="get" />
</form>
复制代码

• formtarget能够重写表单target属性。

<form id="userInfo" target="_self">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formtarget="_block" />
</form>
复制代码

以上属性只适用于type="submit"

• required属性规定是必填字段。不符合规则的会弹出提示。

<form id="userInfo">
姓名： <input name="name" type="text" required />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
复制代码

• autofocus规定当页面加载完成时自动得到焦点。

<form id="userInfo">
姓名： <input name="name" type="text" required autofocus/>
地址：<input name="address" type="text" />
<input type="submit" />
</form>
复制代码

• placeholder规定文本框未获取焦点时的文本内容。

<form id="userInfo">
姓名： <input name="name" type="text" placeholder="请输入用户名"/>
地址：<input name="address" type="text" />
<input type="submit" />
</form>
复制代码

• list属性能够使单行文本框得到焦点时显示一个菜单可供选择，容许自行输入内容。

<form id="userInfo">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" list="citys" />
            <datalist id="citys">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </datalist>
<input type="submit" />
</form>
复制代码

• autocomplete属性可以使浏览器根据用户已输入的内容显示用户过去输入过的内容。

<form id="userInfo">
姓名： <input name="name" type="text" autocomplete="on" />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
复制代码

• pattern属性规定本字段的验证模式。不符合规则的会弹出提示。

<form id="userInfo">
姓名： <input name="name" pattern="[a-z]{1,5}" type="text" />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
复制代码

• indeterminate属性是checked复选框的第三种状态：模糊状态。单独用在html里不会起做用。

<body>
  <form id="userInfo">
    <input type="checkbox" id="check" name="vehicle" value="Bike" /> I have a bike
  </form>
</body>
<script>
  var check = document.getElementById("check");
  check.indeterminate = true;
</script>
复制代码