HTML5—— 你肯定会用到的新知识

HTML5 简介

语义化标签

新增结构标签

表单

多媒体

HTML5 简介

XML是更加严格的语言 是HTML和XHTML的结合 

语义化标签

  新增的语义化标签 header nav section aside footer

新增结构标签

<details>关于文档的细节

<details>

<summary>我的标题我做主</summary>

<p>搞笑</p>

</details>

Figure

独立的文档流内容，与主题无关 可以盛放标签和图片等 与托尼盖的div不一样的是他与其他部分上下左右均有距离

<figure>

  <figcaption>黄浦江上的的卢浦大桥</figcaption>

  <img src="shanghai_lupu_bridge.jpg" width="350" eight="234" />

</figure>

Time标签 使时间变得有意义但是不熬变其形式

Section 定义文档中的流

<section>

  <h1>PRC</h1>

  <p>The People‘s Republic of China was born in 1949...</p>

</section>

Progress

用来显示进度

<progress value="22" max="100">

进度条

</progress>

如果认则显示进度条 不认就显示字体

Meter 度量衡

<p>

       Christmas is in

       <meter value ="30" min="1" max="366" title="days">

       30 days!

</p>

Title 是鼠标上去显示title的值

表单

表单属性新增

Autofocus自动获取焦点 适用于所有的input 就是一打开就能看到框框里有闪动的光标

User name: <input type="text" name="user_name"  autofocus="autofocus" />

Placeholder 提示期待值

Required 必须输入东西在提交前不能不输入

Name: <input type="text" name="usr_name" required="required" />

新增input类型

E-mail: 

E-mail: <input type="email" name="user_email" />

URL网址

Homepage: <input type="url" name="user_url" />

输入的时候必须是http开头的网址

Number数字域

必须是可以接受的范围

<input type="number" name="points" min="1" max="10" />

具有最大值 max 最小值min 和步长 step

Range滑动条

<input type="range" name="points" min="1" max="10" />

同样具有最大值最小值和步长

Date - pickers{日期选择）

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

Search 搜索域

<input type=”search”>

当value值为16进制的时候默认颜色

<input type =”color” value=”ff0000”/>

默认为黑色 改变颜色的时候需要改变value的值

  Tel 电话框

<input type=”tel” value=””/> 没有变化只是提供一个框

正则表达式

<input type=”tel” value=”” name=” tellphone” pattern=”\d{11}”/> 

多媒体

音频

<audio src=”song.mp3” controls=controls>

音频兼容

<audio controls="controls">

  <source src="song.ogg" type="audio/ogg">

  <source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>