HTML5之一——新标签

语义化标签

页眉

     <header>我是页眉</header>

hgroup标签用于页面上的标题组合

   <hgroup> 
   <h1>前端世界</h1>
   <h2>一个令人着迷的领域</h2>
  </hgroup>

导航栏

   <nav>导航栏</nav>

页面上独立完整的一个主体

   <article>
   <section>内容区域（用来划分区域）</section>
    <aside>侧边栏（和主体相关的附属信息）</aside>
   </article>

图片说明

<figure>
  <figcaption>黄浦江上的的卢浦大桥（图片说明）</figcaption>
 <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
 </figure>

time

  <p> 我们在每天早上<time>9:00</time>开始营业。 </p>
  <p> 我在<time datetime="2008-02-14">情人节</time>有个约会。</p>

页脚

  <footer>我是页脚</footer> 

---

功能性标签

datalist: 选项列表与input配合使用；输入时有下拉列表，匹配输入。 （IE10以下不支持 兼容选用select）

<input type="text" list="ValList">
<datalist id="ValList">
<option>HTML</option>
<option>CSS</option>
<option>javascript</option>
</datalist>

details 描述细节，与summary配合使用

<details>
<summary>点我显示内容</summary>
<p>我是内容</p>
</details> 

progress: 定义进度条

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

adress: 标签定义文档或文章的作者/拥有者的联系信息。
如果address元素位于body元素内，则它表示文档联系信息。
如果address元素位于article元素内，则它表示文章的联系信息。
address元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行

<address>58同城版权所有@copyright</address>

mark: 黄色高亮内容

<mark>高亮内容</mark>

新型表单类型

mail: 与普通输入框无区别，输入非邮箱格式会有提示

<form>
<input type="email" />
<input type="submit" />
</form>

tel: 与普通输入框无区别，移动端会直接切换到数字键盘

<form>
 <input type="tel" />
<input type="submit" />
</form>

url: 与普通输入框无区别，输入非网址会提示

<form>
<input type="url" />
<input type="submit" />
</form>

search: chrome下输入内容后会出现”x”

<form>
  <input type="search" />
  <input type="submit" />
</form>

range: 特定范围内的数值选择器 属性有min; max; step

<form>
  <input type="range"  step="2" min="0" max="100"/>
</form>

number: 只能包含数字，chrome下输入框会出现上三角与下三角按钮 ie不支持

<form>
  <input type="number" />
  <input type="submit" />
</form>

color: chrome下输颜色拾取框 ie不支持

<form>
  <input type="color" />
  <input type="submit" />
</form>

datetime: 仅chrome支持

<form>
  <input type="datetime-local"/>
  <input type="submit" />
</form>

time: 不含时区/仅chrome支持,还包括：date(显示日期);month(显示月份);week(显示第几周);

<form>
  <input type="time"/>
  <input type="submit" />
</form>

表单新属性

提示属性placeholder

<form> <!-- chrome/firefox/IE10以上支持-->
  <input type="text" placeholder="请输入4-16个字符"/>
  <input type="submit" />
</form>

自动填充属性autocomplete

<form> <!-- chrome/firefox/IE10以上支持 ,记录用户输入记录，输入相近时提示-->
  <input type="text" name="user" autocomplete="on"/>
  <input type="submit" />
</form>

提交到其他地址formaction:

<form action="http://www.baidu.com">
  <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" />
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
</form>

其他属性:pattern(正则验证)/required(必填字段)
[放在前端很不安全]

<form >
  <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" />
  <input type="password" autocomplete="off" pattern="\d{1,5}"  required="required"/>
  <input type="submit" value="提交" />
</form>