admin 管理员组文章数量: 1087818
HTML5新增特性1
文章目录
- 一丶HTML5概述
- 1.1什么是HTML5
- 1.2HTML5是如何起步的
- 1.3HTML5浏览器支持（重要）
- 1.3.1将HTML5元素定义为块元素
- 1.3.2为HTML添加新元素（自定义标签）
- 1.3.3Internet Explorer浏览器问题
- 1.4HTML5语义化
- 1.5HTML5的特性
- 1.5.1HTML5的改进
- 1.5.2HTML5 多媒体
- 1.5.3HTML5应用
- 1.5.4HTML5图形
- 1.5.5HTML5使用CSS3
- 1.5.6新语义元素
- 1.5.7HTML5表单
- 1.5.8HTML5移除的元素
- 二丶HTML5新布局标签
- 2.1HTML5 header元素
- 2.2HTML5 nav元素
- 2.3HTML5 article元素
- 2.4HTML5 section元素
- 2.5HTML5 aside元素
- 2.6HTML5 footer元素
- 2.7HTML5 figure和figcaption元素
- 三丶HTML5新表单元素
- 3.1HTML5新的input类型
- 3.2HTML5新的表单控件
- 3.2.1HTML5 datalist元素（重要）
- 3.3HTML5新的表单属性
- 3.3.1form / input autocomplete 属性
- 3.3.2form novalidate 属性
- 3.3.3input placeholder 属性
- 3.3.4input required 属性
- 3.3.5input step属性
- 3.3.6input autofocus 属性
- 3.3.7input form 属性
- 3.3.8input formaction 属性
- 3.3.9input formenctype 属性
- 3.3.10input formmethod 属性
- 3.3.11input formnovalidate 属性
- 3.3.12input height 和 width 属性
- 3.3.13input list 属性
- 3.3.14input multiple 属性
- 3.3.15input pattern 属性
- 3.3.16input min 和 max 属性
一丶HTML5概述
1.1什么是HTML5
HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。
HTML5 的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
1.2HTML5是如何起步的
HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序（Application），而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性：
- 用于会话的canvas元素（画布，结合js使用）
- 用于媒介回放的video和audio元素
- 对于本地离线存储的更好的支持
- 新的特殊内容元素，比如article、footer、header、nav、section
- 新的表单控件，比如calender、date、time、email、url、search
1.3HTML5浏览器支持（重要）
现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。
正因为如此，你应该 “教会” 浏览器处理 “未知” 的 HTML 元素。
1.3.1将HTML5元素定义为块元素
HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {display: block;
}
1.3.2为HTML添加新元素（自定义标签）
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero>：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")
</script>
<style>myHero {display: block;background-color: #ddd;padding: 50px;font-size: 30px;}
</style>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p><myHero>我的第一个新元素</myHero>
</body>
</html>
注:JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。
1.3.3Internet Explorer浏览器问题
你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, " shiv" 来解决该问题：
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
<!--[if lt IE 9]><script src=".js"></script>
<![endif]-->以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
注意：国内用户请使用国内静态资源库（Google 资源库在国内不稳定）：
<!--[if lt IE 9]>
<script
src=".7.3/html5shiv.min.js">
</script>
<![endif]-->针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识 别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
html5shiv.js 引用代码必须放在 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该 文件。
友情链接：html5shiv
1.4HTML5语义化
在HTML5添加新标签的时候，提出了一个关键词 “语义”。
- 语义＝意义
- 语义元素=有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者
- 无语义元素示例：
<div>和<span>无需考虑内容 - 语义元素示例：
<form>,<table>,and<img>清楚的定义了它的内容
HTML5新标签的优点:
- 更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的 让人明白存放的是什么东西；
- 对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
- 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用 div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
- 代码更加的简洁；
1.5HTML5的特性
1.5.1HTML5的改进
- 新元素
- 新属性
- 完全支持
- CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
1.5.2HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
- HTML5 video
- HTML5 audio
1.5.3HTML5应用
使用 HTML5 你可以简单地开发应用
- 本地数据存储
- 访问本地文件
- 本地 SQL 数据
- 缓存引用
- Javascript 工作者
- XHTMLHttpRequest 2
1.5.4HTML5图形
使用 HTML5 你可以简单的绘制图形:
- 使用
<canvas>元素。 - 使用内联 SVG。
- 使用 CSS3 2D 转换、CSS3 3D 转换。
1.5.5HTML5使用CSS3
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
1.5.6新语义元素
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义<figure>元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
1.5.7HTML5表单
新表单元素, 新属性，新输入类型，自动验证。
1.5.8HTML5移除的元素
<acronym>:定义首字母缩写,HTML5 中不支持 标签。请使用 标签代替
<basefont>:规定页面上的默认字体颜色和字号：
<big>:呈现大号字体效果
<dir>:定义目录列表,类似于ul和ol
<center>:对其所包括的文本进行水平居中。
<font>:规定文本的字体、字体尺寸、字体颜色。
<frame>:定义 frameset 中的一个特定的窗口（框架）
<frameset>:可定义一个框架集。
<noframes>:可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
<strike>:可定义加删除线文本定义。
<tt>:呈现类似打字机或者等宽的文本效果。
二丶HTML5新布局标签
许多现有网站都包含以下HTML代码：
<div id="nav"> ， <div class="header">，或者 <div id="footer">，来指明导航链接，头部，以及尾部。
首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式 用CSS来实现。
HTML5除了提出很炫的新效果以外还加强了语义化结构
HTML5新增的还有article、nav、header、footer…等等等，其实现效果都是和div一样没有效果，但是 合理使用却能让页面结构更加清晰有逻辑。
如果了解H5之前的HTML，会发现之前页面布局完全就是使用的div+css,但是div是不能滥用的,只能用来 做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级 选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构 有条理才能让搜索引 擎更加友好。
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
<header><nav><section><article><aside><figcaption><figure><footer>
2.1HTML5 header元素
<header>元素描述了文档的头部区域。
<header>元素主要用于定义内容的介绍展示区域。
在页面中你可以使用多个<header>元素(文档头、独立内容头)。
原来写一个页面，比如有头部和底部。我们都是定义一个div，只不过头部有一个class=header；尾部的 div是class=footer；
现在html5出现以后，主张语义化标签。现在我们写样式的时候。选择器直接就写header就可以了。不 需要这么写 div.header这样的好处是使得文档结构层次清晰。利于代码编写和开发；还有搜索引擎优化等等的好处。
2.2HTML5 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.3HTML5 article元素
<article>标签定义独立的内容。
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整 体内容的article元素里面。
2.4HTML5 section元素
<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 根据W3C HTML5文档: section 包含了一组内容及其标题。
从字面理解就是区块、部分的意思，相对于article元素更加广泛，每个区块都可以使用，比如页面里的 导航菜单、文章正文、文章的评论等。
section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内 容进行分块，或者说对文章进行分段；
- 一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，
- section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推 荐使用div而非section元素；
- 如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；
- section元素中的内容可以单独存储到数据库中或输出到word文档中。
2.5HTML5 aside元素
<aside>标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关。
2.6HTML5 footer元素
<footer>元素描述了文档的底部区域.
<footer>元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等文档中你可以使用多个<footer>元素.
2.7HTML5 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.1HTML5新的input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 电子邮箱 | 包含 e-mail 地址的输入域(有校验)， | |
| 拾色器 | color | color 类型用在input字段主要用于选取颜色 选择你喜欢的颜 色: |
| 日期字段 | date datetime datetime-local month week time | 定义日期字段：包含年月日 定义日期字段：（UTC 时间） (仅opera支持) 定义日期字段：包含年月日时分（无时区） 定义日期：年月 定义年中的周数 定义时间 |
| 数值框 | number | 输入类型用于包含数字值的输入字段，可以设置可接受数字 的限制。 使用min属性和max属性设置最小和最大值 step 设置数字间隔 如果step=“3” ,那么数值间隔是3 |
| 数值滑块控件 | range | 用于应该包含一定范围内数字值的输入域。 range 类型显 示为滑动条。 使用min属性和max属性设置最小和最大 值,step设置数字间隔 |
| 搜索框 | search | 用于搜索字段，比如站内搜索或谷歌搜索等。 |
| 电话号码框 | tel | 定义输入电话号码字段,但是不会进行校验 |
| url地址 | url | 包含 URL 地址的输入字段。会在提交表单时对 url 字段的值 自动进行验证。 |
3.2HTML5新的表单控件
3.2.1HTML5 datalist元素（重要）
<datalist>元素规定输入域的地址选项列表
<datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用<input>元素的list属性与<datalist>元素绑定。
示例：
代码：
<input type="text" list="mylist">
<datalist id="mylist"><option value="C">C</option><option value="C++">C++</option><option value="C#">C#</option><option value="Java">Java</option>
</datalist>
3.3HTML5新的表单属性
HTML5的<input>和<form>标签添加了几个新的属性。
<form>新属性
- autocomplete
- novalidate
<input>新属性
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- CAD
- HTML5
- JAVASCRIPT
- .NET
- JAVA
- formnovalidate
- formtarget
- height 与 width
- list
- min 与 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
3.3.1form / input autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, tel, email, password, datepickers, range 以及 color。
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：
<form action="#" autocomplete="on">用户名<input type="text"><br>密 码<input type="password">
</form>
3.3.2form novalidate 属性
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据：
<form action="demo-form.php" novalidate>E-mail: <input type="email" name="user_email"><input type="submit">
</form>
3.3.3input placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的<input>标签：text, search, url, tel, email 以及 password。
3.3.4input required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
**注意:**required 属性适用于以下类型的<input>标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。
3.3.5input step属性
step 属性为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示：step 属性可以与 max 和 min 属性创建一个区域值.
**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
3.3.6input autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。
让 “First name” input 输入域在页面载入时自动聚焦：
First name:<input type="text" name="fname" autofocus>
3.3.7input form 属性
form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单，请使用空格分隔的列表。
位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):
<form action="demo-form.php" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="提交">
</form>
<!-- 也属于上述表单的内容 -->
Last name: <input type="text" name="lname" form="form1">3.3.8input formaction 属性
formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖<form>元素中的action属性.
注意: formaction 属性用于 type=“submit” 和 type=“image”.
以下HTMLform表单包含了两个不同地址的提交按钮：
<form action="demo-form.php">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交"><br><input type="submit" formaction="demo-admin.php"
value="新的提交">
</form>
3.3.9input formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 <form> 元素的 enctype 属性。
注意: 该属性与 type=“submit” 和 type=“image” 配合使用。
第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单
注： “multipart/form-data” 用于提交图片的时候较好
<form action="demo-post_enctype.php" method="post">First name: <input type="text" name="fname"><br><input type="submit" value="提交"><input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>3.3.10input formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了<form>元素的 method 属性。
注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。
重新定义表单提交方式实例:
<form action="demo-form.php" method="get">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交"><input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>3.3.11input formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了<input>元素在表单提交时无需被验证。
formnovalidate 属性会覆盖<form>元素的novalidate属性.
注意: formnovalidate 属性与 type=“submit” 一起使用
两个提交按钮的表单(使用与不适用验证 ):
<form action="demo-form.php">E-mail: <input type="email" name="userid"><br><input type="submit" value="提交"><br><input type="submit" formnovalidate value="不验证提交">
</form>3.3.12input height 和 width 属性
height 和 width 属性规定用于 image 类型的<input>标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的<input>标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被 保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使 页面布局效果改变 （尽管图片已加载）。
定义了一个图像提交按钮, 使用了 height 和 width 属性:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
3.3.13input list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
3.3.14input multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input>元素中可选择多个值。
注意: multiple 属性适用于以下类型的<input>标签：file
3.3.15input pattern 属性
pattern 属性描述了一个正则表达式用于验证<input>元素的值。
注意:pattern 属性适用于以下类型的<input>标签: text, search, url, tel, email, 和 password.
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">
3.3.16input min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的<input>标签：date pickers、number 以及 range。<input>元素最小值与最大值设置
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">
未完待续…
本文标签： HTML5新增特性1
版权声明：本文标题：HTML5新增特性1 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700371477a418001.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论