HTML5 基础知识

前言

  • HTML5 是 HTML 最新的修订版本,2014 年 10 月由万维网联盟(W3C)完成标准制定。

  • HTML5 的设计目的是为了在移动设备上支持多媒体。

1、HTML5



  • HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

  • HTML5 中的一些有趣的新特性:

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

2、改进

  • 新元素
  • 新属性
  • 完全支持 CSS3

    • 新选择器
    • 新属性
    • 动画
    • 2D/3D 转换
    • 圆角
    • 阴影效果
    • 可下载的字体
  • Video 和 Audio

  • 可以简单地开发 Web 应用
    • 本地数据存储
    • 访问本地文件
    • 本地 SQL 数据
    • 缓存引用
    • Javascript 工作者
    • XHTMLHttpRequest 2

3、新元素

  • 自 1999 年以后 HTML 4.01 已经改变了很多,今天,在 HTML 4.01 中的几个已经被废弃,这些元素在 HTML5 中已经被删除或重新定义。

  • 为了更好地处理今天的互联网应用,HTML5 添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个 api 拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等。

3.1 新图形元素

  • 使用 HTML5 你可以简单的绘制图形:

标签 描述 备注 🔗
<canvas> </canvas> 定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API H5 新加 🔗
<svg> </svg> 定义可伸缩矢量图形,使用 XML 格式定义图形 H5 新加 🔗

3.2 新多媒体元素

标签 描述 备注 🔗
<audio> </audio> 定义了声音内容 H5 新加 🔗
<video> </video> 定义一个视频或者影片 H5 新加 🔗
<source /> 定义了 media 元素的多媒体资源(<video><audio>) H5 新加 🔗
<track /> 规定 media 元素的字幕文件或其他包含文本的文件 (<video><audio>) H5 新加 🔗
<embed /> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许 H5 新加 🔗

3.3 新表单元素

标签 描述 备注 🔗
<datalist> </datalist> 规定了 input 元素可能的选项列表,来定义 input 可能的值 H5 新加 🔗
<keygen /> 规定用于表单的密钥对生成器字段 H5 新加 🔗
<output> </output> 定义不同类型的输出,比如脚本的输出 H5 新加 🔗

3.4 新语义和结构元素

标签 描述 备注 🔗
<article> </article> 定义页面独立的内容区域,定义外部的内容 H5 新加 🔗
<aside> </aside> 定义页面的侧边栏内容 H5 新加 🔗
<bdi> </bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置 H5 新加 🔗
<command> </command> 定义命令按钮,比如单选按钮、复选框或按钮 H5 新加 🔗
<details> </details> 用于描述文档或文档某个部分的细节 H5 新加 🔗
<dialog> </dialog> 定义对话框,比如提示框 H5 新加 🔗
<summary> </summary> 标签包含 details 元素的标题 H5 新加 🔗
<figure> </figure> 规定独立的流内容(图像、图表、照片、代码等等) H5 新加 🔗
<figcaption> </figcaption> 定义 <figure> 元素的标题 H5 新加 🔗
<footer> </footer> 定义 section 或 document 的页脚 H5 新加 🔗
<header> </header> 定义了文档的头部区域 H5 新加 🔗
<mark> </mark> 定义带有记号的文本 H5 新加 🔗
<meter> </meter> 定义度量衡。仅用于已知最大和最小值的度量 H5 新加 🔗
<nav> </nav> 定义导航链接的部分 H5 新加 🔗
<progress> </progress> 定义任何类型的任务的进度 H5 新加 🔗
<ruby> </ruby> 定义 ruby 注释(中文注音或字符) H5 新加 🔗
<rt> </rt> 定义字符(中文注音或字符)的解释或发音 H5 新加 🔗
<rp> </rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<section> </section> 定义文档中的节(section、区段) H5 新加 🔗
<time> </time> 定义日期或时间 H5 新加 🔗
<wbr /> 规定在文本中的何处适合添加换行符 H5 新加 🔗

4、已移除元素

  • 以下的 HTML 4.01 元素在 HTML5 中已经被删除:
标签 描述 备注 🔗
<acronym> </acronym> HTML5 不再支持。定义只取首字母的缩写 🔗
<applet> </applet> HTML5 不再支持HTML 4.01 已废弃。定义嵌入的 applet 🔗
<basefont /> HTML5 不再支持HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸 🔗
<font> </font> HTML5 不再支持HTML 4.01 已废弃。定义文本的字体、尺寸和颜色 🔗
<big> </big> HTML5 不再支持。定义大号文本 🔗
<center> </center> HTML5 不再支持HTML 4.01 已废弃。定义居中文本 🔗
<dir> </dir> HTML5 不再支持HTML 4.01 已废弃。定义目录列表 🔗
<frame /> HTML5 不再支持。定义框架集的窗口或框架 🔗
<frameset> </frameset> HTML5 不再支持。定义框架集 🔗
<noframes> </noframes> HTML5 不再支持。定义针对不支持框架的用户的替代内容 🔗
<strike> </strike> HTML5 不再支持HTML 4.01 已废弃。定义加删除线的文本 🔗
<tt> </tt> HTML5 不再支持。定义打字机文本 🔗

5、浏览器支持

  • 现代的浏览器都支持 HTML5。

  • 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理,正因为如此,你可以 “教会” 浏览器处理 “未知” 的 HTML 元素。

5.1 将 HTML5 元素定义为块元素

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

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

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

5.2 为 HTML 添加新元素

  • 可以为 HTML 添加新的元素。

  • 向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</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 浏览器添加新的元素。

5.3 Internet Explorer 浏览器问题

  • 你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是 Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

  • 我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, “ shiv” 来解决该问题:

    1
    2
    3
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  • 以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

  • 注意:国内用户请使用静态资源库(Google 资源库在国内不稳定):

    1
    2
    3
    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  • 针对 IE 浏览器 html5shiv 是比较好的解决方案。html5shiv 主要解决 HTML5 提出的新的元素不被 IE6-8 识别,这些新元素不能作为父节点包裹子元素,并且不能应用 CSS 样式。

  • html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <h1>我的第一篇文章</h1>
    <article>
    Qian Chia 工作室
    </article>
    </body>
    </html>

6、HTML5 测验

6.1 HTML 测验

6.2 HTML5 测验

文章目录
  1. 1. 前言
  2. 2. 1、HTML5
  3. 3. 2、改进
  4. 4. 3、新元素
    1. 4.1. 3.1 新图形元素
    2. 4.2. 3.2 新多媒体元素
    3. 4.3. 3.3 新表单元素
    4. 4.4. 3.4 新语义和结构元素
  5. 5. 4、已移除元素
  6. 6. 5、浏览器支持
    1. 6.1. 5.1 将 HTML5 元素定义为块元素
    2. 6.2. 5.2 为 HTML 添加新元素
    3. 6.3. 5.3 Internet Explorer 浏览器问题
  7. 7. 6、HTML5 测验
    1. 7.1. 6.1 HTML 测验
    2. 7.2. 6.2 HTML5 测验
隐藏目录