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>

posted @ 2020-07-08 15:13 凌倾-学无止境阅读(399) 评论(0) 编辑收藏举报

刷新页面返回顶部

凌倾-学无止境

web 基础（二） HTML5