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>
posted @ 2020-07-08 15:13  凌倾-学无止境  阅读(395)  评论(0编辑  收藏  举报