web 基础(二) HTML5
web 基础(二) HTML5
一、HTML5
HTML5 是最新的 HTML 标准。是专门为承载丰富的 web 内容而设计的,并且无需额外插件。它拥有新的语义、图形以及多媒体元素。并提供的新元素和新的 API 简化了 web 应用程序的搭建,是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
总而言之,HTML5 属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!
HTML5 的文档规范:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
相比 HTML4 及以下版本,HTML5 的文档类型(DOCTYPE)声明非常简单,HTML5 中默认的字符编码是 UTF-8。
二、HTML5 新特性
- 新的语义元素。比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件。比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由 <canvas> 和 <svg>)。
- 强大的多媒体支持(借由 <video> 和 <audio>)。
- 强大的新 API。比如用本地存储取代 cookie。
三、浏览器对 HTML5 的支持
目前,所有现代浏览器都支持 HTML5。此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。正因如此,可以用下面三种方式来帮助老式浏览器处理“未知的“ HTML 元素,以实现浏览器对 HTML5 的支持:
1、把 HTML5 元素定义为块级元素
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。可以把 CSS display 属性设置为 block,以确保老式浏览器中正确的行为,如下所示:
header, section, footer, aside, nav, main, article, figure { display: block; }
2、向 HTML 文档中添加新元素
可以通过浏览器 trick 向 HTML 添加任何新元素,如下示例是向 HTML 添加了一个名为 <my> 的新元素,并为其定义 display 样式为block:
<!DOCTYPE html> <html> <head> <title>an HTML Element</title> <script>document.createElement("my")</script> <style> myHero { display: block; } </style> </head> <body> <my>My First Hero</my> </body> </html>
注意:已添加的 JavaScript 语句 document.createElement("my"),仅适用于 IE内核的浏览器。
上述两种方案可用于所有新的 HTML5 元素,但是对于Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。此时需要用到下面的Shiv 解决方案。
3、完整的 Shiv 解决方案
在 Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。幸运的是,Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"的插件:html5shiv.min.js,在HTML5 文档中引用此文件,可以实现对HTML5 的支持,如下示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--[if lte IE 9]> <script type="text/javascript" src="js/html5shiv.min.js"></script> <![endif]--> </head> <body> <header>头部</header> </body> </html>
注意:以上代码是一段注释,但是 IE9 的早期版本会读取它(并理解它)。引用 JS 插件代码的链接必须位于 <head> 元素中,因为 Internet Explorer 需要在读取之前认识所有新元素。
由于第三种方案可以解决大部分兼容性问题,所以 推荐使用第三种 Shiv 解决方案。
四、HTML5 中新元素及属性
这边列出了常用的元素和相关属性,详细的可以访问各个章节:HTML5 教程。
(一)、新元素
标签 |
描述 |
|
<canvas>新元素 |
<canvas> |
标签定义图形,比如图表和其他图像,该标签基于JS的绘画API |
新多媒体元素 |
<audio> |
定义音频内容 |
<video> |
定义视频(video或者movie) |
|
<source> |
定义多媒体资源<video>和<audio> |
|
<embed> |
定义嵌入的内容,比如插件 |
|
<track> |
为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 |
|
新表单元素 |
<datalist> |
定义选项列表。与input元素配合使用,来定义input可能的值。 |
<keygen> |
规定用于表单的密钥对生成字段。 |
|
<output> |
定义不同类型的输出,比如脚本的输出。 |
|
新的语义和结构元素 |
<aside> |
定义页面的侧边栏内容 |
<dialog> |
定义对话框,比如提示框 |
|
<figure> |
规定独立的流内容(图像图表照片代码等) |
|
<figcaption> |
定义<figure>元素的标题 |
|
<footer> |
定义section或decument的页脚 |
|
<header> |
定义文档的头部区域 |
|
<nav> |
定义运行中的进度 |
|
<section> |
定义文档中的节 |
|
<time> |
定义日期或时间 |
(二)、新表单属性
1、智能表单控件
<input type="email">
type可选以下类型:
email: 输入合法的邮箱地址
url: 输入合法的网址
number: 只能输入数字
range: 滑块
color: 拾色器
date: 显示日期
month: 显示月份
week : 显示第几周
time: 显示时间
五、HTML5 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单属性示例</title> </head> <body> <form action="test.action" method="get" autocomplete="off" novalidate> 邮箱地址: <input type="email" name=""> <input type="submit" name=""> </form> </body> </html>