HTML5新增特性

最新推荐文章于 2024-07-24 22:17:59 发布

Z03_gg

最新推荐文章于 2024-07-24 22:17:59 发布

阅读量53

点赞数 1

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/Z03_gg/article/details/131793146

版权

一、HTML5概述

1.1什么是HTML5

HTML5是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。

1.2HTML5是如何起步的

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

1.3HTML5 浏览器支持（重要）

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特

性。Internet Explorer 9 将支持某些 HTML5 特性。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。

正因为如此，你应该 “教会” 浏览器处理 “未知” 的 HTML 元素。

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
		display: block;
}

1.4、HTML5语义化

HTML5新标签的优点:

更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的
让人明白存放的是什么东西；
对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用
div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；代码更加的简洁；

二、HTML5新布局标签

div是不能滥用的,只能用来做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级选择器来写样式，减少了class和d的命名，可以精简网页的结构；而且语义化结构有条理才能让搜索引擎更加友好。

2.1、HTML5 header 元素

<header>元素描述了文档的头部区域。利于代码编写和开发；还有搜索引擎优化等等的好处.

2.2、HTML5 nav元素

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

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav>元素中！

<nav>
    <a href="/html/">HTML</a> 
    <a href="/css/">CSS</a> 
    <a href="/js/">JavaScript</a> 
    <a href="/jquery/">jQuery</a>
</nav>

2.3、HTML5 article元素

<article>标签定义独立的内容。

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

<article>
    <header>
        <h2>标题</h2>
    </header>
    <p>内容</p>
    <article>
        <header>
            <h3>标题</h3>
        </header>
        <p>内容1</p>
    </article>
</article>

2.4、HTML5 section元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档: section 包含了一组内容及其标题。

从字面理解就是区块、部分的意思，相对于article元素更加广泛，每个区块都可以使用，比如页面里的导航菜单、文章正文、文章的评论等。

2.5、HTML5 aside元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

<aside> 标签的内容应与主区域的内容相关。

2.6、HTML5 footer 元素

<footer>元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素:一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

2.7、HTML5 figure 和figcaption 元素

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption> 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

三、HTML5新表单元素

3.1、HTML5新的 input类型

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)
日期字段	date datetime datetime-local month week time	定义日期字段：包含年月日定义日期字段：（UTC 时间） (仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月定义年中的周数定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值 step设置数字间隔如果step=“3” ,那么数值间隔是3
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验，在移动端会唤出数字键盘
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

<form action="#" method="post">
    <!-- 如果使用了email，则在提交表单时会对提交的内容进行校验，如果校验不通过则不允许提交 -->
    电子邮箱：<input type="email"><br>
    颜色：<input type="color"><br>
    <!-- type=日期相关的属性，在不同浏览器中会存在差异，通常做项目时会利用ui框架进行替代 -->
    日期：<input type="date"><br>
    <!-- step="1"可以显示秒数 -->
    日期时间：<input type="datetime-local" step="1"><br>
    <!-- number表示接受数值类型，不允许输入其他字符，可以通过min和max来设置范围，如果输入的内容不合法
则提交时会进行提示，并组织提交，step可以设置递增和递减的间隔 -->
    年龄：<input type="number" min="0" max="140" step="3"><br>
    音量：<input type="range"><br>
    普通文本框：<input type="text"><br>
    <!-- 鼠标放入文本框上会显示X号，可以清空输入的内容，在移动端会显示一个搜索按钮 -->
    搜索：<input type="search"><br>
    <!-- tel表示输入的手机号码，在移动端会调起数字键盘，但是提交的时候不会进行格式校验 -->
    手机：<input type="tel"><br>
    <!-- url表示输入的是一个url地址，提交时会对格式进行校验 -->
    URL地址：<input type="url"><br>
    <input type="submit"><br>

在这里插入图片描述

3.2、HTML5新的表单控件

HTML5 datalist 元素 (重要)

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，

浏览器应该在该域中显示填写的选项：

使用 <input> 元素的list属性与 <datalist> 元素绑定。

<input type = “text” name=”data” list=”dlist”>
<datalist id=”dlist”>
    <option value="CAD" >CAD</option>
    <option value="HTML5">HTML5</option>
    <option value="JAVASCRIPT" >JAVASCRIPT</option>
    <option value=".NET">.NET</option>
    <option value="JAVA">JAVA</option>
</datalist>

在这里插入图片描述

3.3、HTML5新的表单属性

form / input autocomplete属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

<!-- autocomplete表示允许文本进行自动填充（需要检查浏览器设置），默认为开启状态
autocomplete可以作用域表单上面，表示所有的文本框都可以自动填充
也可以单独为某个文本指定是否需要进行填充 -->
<form action="" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>

form novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。无需验证提交的表单数据：

<!-- novalidate属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据 -->
<form action="demo-form.php" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>

在这里插入图片描述

input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, tel, email 以及password。

<!-- placeholder属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上 -->
<form action="" >
    E-mail: <input type="email" name="user_email" placeholder="请输入你的E-mail">
</form>

在这里插入图片描述

input required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, tel, email, password, datepickers, number, checkbox, radio 以及 file。

input autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

<form action="" >
    First name:<input type="text" name="fname" ><br>
    Last name: <input type="text" name="lname" autofocus><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">
</form>

在这里插入图片描述

input multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定 <input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签： file

input pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">