HTML5新增

目录

1.HTML5新增类型

2.HTML5新增属性

3.div标签和span标签

4.HTML5新增结构标签

HTML5新增类型

电子邮件类型

功能描述：输入E-mail地址的文本框。
语法：<input type="email"/>

注意：输入的内容中必须包含@，@后面必须具有内容。

<form action="http://www.baidu.com" method="get">
    <p>用户名：<input type="text" name="username" /></p>
    <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" /></p>
    <p>电子邮件：<input type="email"></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

搜索类型

功能描述：输入搜索关键字的文本框。
语法：<input type="search" />

<form action="http://www.baidu.com" method="get">
    <p>用户名：<input type="text" name="username" /></p>
    <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" /></p>
    <p>电子邮件：<input type="email"></p>
    <p>搜索框：<input type="search" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

URL类型

功能描述：输入WEB站点的文本框。
语法：<input type="url" />

注意：输入的内容中必须包含"http://"，后面必须有内容。

<form action="http://www.baidu.com" method="get">
    <p>网站类型：<input type="url" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

颜色类型

功能描述：预定义的颜色拾取控件。
语法：<input type="color" />

<form action="http://www.baidu.com" method="get">
    <p>颜色：<input type="color" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

数字类型

功能描述：只能接受数字。
语法：<input type="number" />
属性：
min：当前域能接受的最小值。
max：当前域能接受的最大值。
step：决定了域所接受值递增或递减的步长，默认为1。

<form action="http://www.baidu.com" method="get">
    <p>成绩：<input type="number" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

范围类型

功能描述：允许用户选择一个范围内的值。
语法：<input type="range" min="0" max="100" value="80" />
属性：
min：范围的下限值。
max：范围的上限值。
step：声明该值递增或递减的步长。
value：设置初始值。

<form action="http://www.baidu.com" method="get">
    <p>范围：<input type="range" min="0" max="100" value="80" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

日期类型
功能描述：创建一个日期输入域。
语法：<input type="date" />

<form action="http://www.baidu.com" method="get">
    <p>日期：<input type="date" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

周类型

功能描述：与date类型相似，但只能选择周。
语法：<input type="week" />

<form action="http://www.baidu.com" method="get">
    <p>第几周：<input type="week" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

月份类型

功能描述：与date类型相似，但只能选择月份。
语法：<input type="month" />

<form action="http://www.baidu.com" method="get">
    <p>月份：<input type="month" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

HTML5新增属性

**placeholder**

作用：默认提示。
语法：<input type="text" placeholder="请输入用户名" />

<form action="http://www.baidu.com" method="get">
    <p>用户名：<input type="text" placeholder="请输入用户名" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

mutiple

作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用。
语法：<input type="email" multiple />

<form action="http://www.baidu.com" method="get">
    <p>邮箱：<input type="email" multiple /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

autofocus

作用：自动获取焦点。
语法：<input type="text" autofocus />

<form action="http://www.baidu.com" method="get">
    <p>光标自动锁定：<input type="text" autofocus /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

required

作用：防止域为空提交表单时。
语法：<input type="text" required />

<form action="http://www.baidu.com" method="get">
    <p>防止提交空表单：<input type="text" required /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

minlength和maxlength

作用：定制元素允许的最小字符数和最大字符数。
语法：<input type="text" minlength="6" maxlength="18" />

<form action="http://www.baidu.com" method="get">
    <p>最小/最大字符：<input type="text" minlength="6" maxlength="18" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

min和max

作用：定制元素允许的最小数字和最大数字。
语法：<input type="number" min="0" max="100" />

<form action="http://www.baidu.com" method="get">
    <p>最小/最大数字：<input type="number" min="0" max="100" /></p>
    <input type="submit" value="提交" />
    <input type="reset" />
</form>

div和span标签

常见的html5新增语义化标签

1. header：页面头部
2. footer：页脚
3. article：定义页面独立的内容区域
4. aside：定义页面的侧边栏内容
5. details：文档某个部分的细节
6. summary：是details中的标题
7. figure：规定独立的流内容
8. figcaption：是figure的标题
9. mark：标记
10. nav：导航链接
11. meter：用来表示范围已知且可度量的内容
12. ruby加注释

无语义标签（节标签）
div（块级容器）
span（行内容器）

HTML5新增结构标签

<figure></figure>

作用：用于对元素进行组合，多用于图片与图片描述组合。

<figure>
    <img src="img/1.jpg" alt="figure标签" title="figure标签">
    <figcaption>figure的标题</figcaption>
</figure>

<details>标签

作用：描述文档或文档某个部分的细节。
IE不支持<details>标签

<details>
    <summary>details中的标题</summary>
    <p>详细的内容</p>
</details>

来源：CSDN

作者：五岁就很帅

链接：https://blog.csdn.net/advjj_058229/article/details/103855232