本篇主要介绍HTML5规范的内容和页面上的架构变动。

目录

1. HTML5介绍

　　1.1 介绍

　　1.2 内容

　　1.3 浏览器支持情况

2. 创建HTML5页面

　　2.1 <!DOCTYPE> 文档类型声明

　　2.2 <html>标签

　　2.3 <meta>标签 设置字符编码

　　2.4 引用样式表

　　2.5 引用JavaScript文件

3. 完整页面示例

4. 资料网站

1. HTML5介绍

1.1 介绍

HTML5，即超文本标记语言(HTML)第五次重大修改。

HTML5包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。

新特性并不是一下就有的，而是在HTML4.01版本制定(1999年)后，这段时间内不断变更，在最后才定稿。

HTML5的标准不破坏之前的网页，符合HTML4.01标准的网页在HTML5仍然有效。

标准网址：https://www.w3.org/TR/html5/

定稿时间：2014年10月28日

1.2 内容

与之前的HTML4.01相比，HTML5增加了非常多的改变：

① 新的语义元素：<article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<hgroup>、<nav>和<section>等等

② 新的元素特性：增加新的元素属性、表单元素、验证功能等内容。

③ 多媒体：增加<audio>音频、<video>视频元素等内容。

④ 2D/3D 绘图：增加<canvas>绘图元素。

⑤ 存储：增加在线、离线存储功能。

⑥ 连通性：增加客户端与服务器交互的两个内容：Web Sockets(客户端与服务器持久连接)和Server-sent events(服务器推送数据)等。

⑦ 集成：提供Web Workers、History API、requestAnimationFrame、地理位置等强大的功能。

⑧ 设备访问：提供对摄像头、移动设备的支持。

⑨ CSS3样式：提供了新的背景样式特性、动画、边框等样式。

1.3 浏览器支持情况

各主流浏览器对HTML5支持的范围都不一样。其中IE是从9版本开始支持HTML5的功能(并不是支持HTML5全部功能)。

若想知道HTML5某个功能被各浏览器支持的情况可登录 http://caniuse.com/ 进行查询。

以 <audio> 元素为例，可查看各浏览器的支持情况：

2. 创建HTML5页面

从页面上介绍HTML5的变动情况。

2.1 <!DOCTYPE> 文档类型声明

传统HTML页面的第一行都必须是一个特定的文档类型声明，关系着浏览器以怎样的格式和布局显示页面。

HTML4.01 因基于 SGML(标准通用标记语言) ，所以<!DOCTYPE> 引用了 DTD。

HTML5 不基于 SGML，故不需要引用 DTD。

HTML4.01 页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 页面：

<!DOCTYPE html>

2.2 <html>标签

2.2.1 设置命名空间

<html>标签中的 xmlns 属性可定义一个或多个可供选择的命名空间。浏览器会将此命名空间用于该属性所在页面内的元素。

若省略了此属性，默认会以"http://www.w3.org/1999/xhtml"代替。

2.2.2 设置页面语言

<html>标签中的 lang 属性可指定页面的自然语言，如：lang="en" 表示英文，lang="zh-CN"表示中文。

示例：

<html leng="zh-CN">

</html>

2.3 <meta>标签 设置字符编码

<meta> 可提供有关页面的元信息（meta-information），比如针对搜索引擎的关键词。

其中 charset 属性定义了页面的字符编码，可在展示时浏览器将页面的文本内容转换为指定的编码格式。

在网页设计中首选"UTF-8"：

<head>

    <meta charset="utf-8" />

    <title>页面标题</title>

</head>

2.4 引用样式表

与之前HTML4.01相比，HTML5在引用样式表时省略了 type="text/css" 属性：

<head>

    <meta charset="utf-8" />

    <title>页面标题</title>

    <link rel="stylesheet" href="/Styles/Site.css" >

</head>

2.5 引用JavaScript文件

在HTML5，引用JavaScript文件时省略了 type="text/javascript" 属性：

<head>

    <meta charset="utf-8" />

    <title>页面标题</title>

    <script src="/Scripts/jquery-1.7.2.js"></script>

</head>

3. 完整页面示例

下方是一个完整的HTML5页面：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <title>页面标题</title>

    <link rel="stylesheet" href="/Styles/Site.css">

    <script src="/Scripts/jquery-1.7.2.js" ></script>

</head>

<body>

    <p>body区域</p>

</body>

</html>

4. 资料网站

HTML5标准：https://www.w3.org/TR/html5/

HTML5开发指南：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

HTML5元素参看：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

浏览器支持情况：http://caniuse.com/

End
菜单加载中...

HTML5 介绍的更多相关文章

  1. HTML5学习笔记简明版（1）：HTML5介绍与语法

    HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>).新型的标签有利于搜索引擎和语义分 ...

  2. HTML5: HTML5 介绍

    ylbtech-HTML5: HTML5 介绍 1. 什么是 HTML5?返回顶部   HTML5 是下一代 HTML 标准. HTML,HTML 4.01的上一个版本诞生于1999年.自从那儿以后, ...

  3. html5介绍 之亮点特性

    html5 兴起- 乔帮助在2010年发布的:关于对flash的思考,提到有了h5放弃 flash   1 富图形,富媒体      2 本地存储     cookie   3 LBS      基于 ...

  4. html5介绍

    html5与html4的区别   (h5 and h4)   什么是OPOA   1,    浏览器对h5的支持情况 2,    历史 --- h5         2004年,whatwg 提出 w ...

  5. 李洪强和你一起学习前端之(4)HTML5介绍

    1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...

  6. 前端HTML5介绍

    1.为什么学习HTML5? 跨平台要求低 硬件要求低 flash之外的选择(尤其手机端) 2什么是HTML5? HTML是用来描述网页的一种语言 HTML指超文本标记语言 HTML不是变成语言,是一种 ...

  7. Html5介绍及新增标签

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  8. HTML5学习参考资料整理

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...

  9. 韩顺平HTML5教程www.gis520.com

    传智播客.韩顺平.HTML5游戏公开课-坦克大战01.HTML5介绍.HTML5发展.HTML5学习网站推荐.wmv http://dl.vmall.com/c0b7xrkftf 传智播客.韩顺平.H ...

随机推荐

  1. Linux虚拟机的安装（使用Centos6.3）

    1.什么是虚拟机? 虚拟机指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统 2.安装Linux虚拟机前要做的准备 2.1:一台windows环境的pc 2.2:下载VM ...

  2. Oracle碎碎念~2

    1. 如何查看表的列名及类型 SQL> select column_name,data_type,data_length from all_tab_columns where owner='SC ...

  3. 【HanLP】HanLP中文自然语言处理工具实例演练

    HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...

  4. Servlet监听器笔记总结

    监听器Listener的概念 监听器的概念很好理解,顾名思义,就是监视目标动作或状态的变化,目标一旦状态发生变化或者有动作,则立马做出反应. Servlet中的也有实现监听器的机制,就是Listene ...

  5. Android—应用程序开机自启

    android开机时候会发送开机广播,我们想要收到广播知道手机开机,才能启动我们的应用程序. 首先要在配置文件中添加相应权限: <uses-permission android:name=&qu ...

  6. 【iOS10 SpeechRecognition】语音识别 现说现译的最佳实践

    首先想强调一下“语音识别”四个字字面意义上的需求:用户说话然后马上把用户说的话转成文字显示!,这才是开发者真正需要的功能. 做需求之前其实是先谷歌百度一下看有没有造好的轮子直接用,结果真的很呵呵,都是 ...

  7. Quartz2D总结

    天了噜,脑子完全懵了,最起码说出来个上下文啊,连这个都给忘了,特此总结一下,并以此缅怀这次面试 Quartz2D的API来自于Core Graphics(这就是为什么CGContextRef是以CG开 ...

  8. 巧用location.hash保存页面状态

    在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果 ...

  9. .NET基础拾遗（1）类型语法基础和内存管理基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开发基 ...

  10. 虚拟机体验之 KVM 篇

    在上一篇中,我展示了虚拟机软件 QEMU 的使用.效果及其性能,同时也分析了不同用户对虚拟机的不同追求.但是不管是桌面用户还是企业级用户,对虚拟机软件的追求有一点是共同的,那就是性能.QEMU 是一个 ...