内容提要
- HTML5页面结构。
- 使用HTML5新增元素和新增属性。
- HTML5新增表单元素和新增属性的设置方法。
- 使用HTML5的Audio和Video媒体元素。
- HTML5本地存储开发Web应用。
- 使用CSS3的转换、过渡和动画等特性设计页面的动态效果。
- 设置与应用CSS3文本效果及多列等属性。
- 设置与应用CSS3文本效果及多列等属性。
HTML5产生
- WHATWG(WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组)，WHATWG组织专门致力于Web表单和应用程序；
- 当时W3C专注于XHTML2.0标准的制定。
- 2006年10月，W3C决定与WHATWG合作共同研制HTML5相关技术标准。
HTML5继承发展HTML4
- 标记是用来说明HTML元素的。一个非空HTML元素是由开始标记、元素的属性和值、内容和结束标记组成的，是构成HTML文件的基本对象。
- 位于起始标记和结束标记之间的文本就是HTML元素的内容。
- 为HTML元素提供各种附加信息的就是HTML属性，它总是以属性名=“属性值”这种键值对的形式出现，而且属性总是在HTML元素的开始标记中进行定义。
HTML5的八个特性
- 语义特性(Semantic)，HTML5赋予网页更好的意义和结构。
- 离线与存储特性(offline&storage)。HTML5开发的网页APP启动时间更短、联网速度更快。由于有HTML5APPCache、本地存储功能、IndexedDB和FileAPI说明文档。
- 设备访问特性(DeviceAccess)。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与麦克风及摄像头相连。
- 多媒体特性(Multimedia)。支持网页端的Autio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。
- 三维、图形与特效特性(3D、Graphice&Effects)。基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中所呈现的惊人视觉效果。
- 性能与集成特性(Performance&Integration)。HTML5会通过WebWorkers和XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
- 连接特性(Connectivity)。HTML5拥有更有效的服务器推送技术(Server-SentEvent和WebSockets)，能够帮助我们实现服务器将数据“推送”到客户端的功能。
- CSS3特性(CSS3)。CSS3中提供了更多的风格和更强的效果。
HTML5的优势
- 摆脱对平台的依赖。打开浏览器，直接就可以访问应用。
- 实时更新。
- 离线使用。用户可以离线使用，更新下载量极少。
- 代码更安全。HTML5可以将Web代码全部加密，本地应用解密后再运行，大大提高了代码的安全性。
- 跨平台。Javascript的代码可以在许多地方使用，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。
- 可以充分利用Native。HTML5可以通过浏览器作为中介充分利用Native的好处(使用GPS、照相机、本地相册、读取本地联系人等)。某些Web无法实现的功能，可以利用Native实现。
HTML5比HTML4.01新增的特性
- 新的语义元素/结构元素
- 比如<header>、<footer>、<article>、<section>等。
- 新的表单控件
- 比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由<video>和<audio>)
- 强大的新API，比如本地存储取代cookie。
浏览器支持与选择
- 所有现代浏览器都支持持HTML5。
- 但是，一些低版本的浏览器并不支持HTML5，如IE6～IE8浏览器。所有新、旧浏览器，对无法识别的元素均会视作内联inline)元素来自动处理。
- 使用http://html5test.com来测试浏览器的支持。
HTML5新元素
-
新的语义/结构元素
标签 描述 <article> 定义文档内的文章。 <aside> 定义页面内容之外的内容。 <bdi> 定义与其他文本不同的文本方向。 <details> 定义用户可查看或隐藏的额外细节 <dialog> 定义对话框或窗口 <figcaption> 定义<figure>元素的标题。 <figure> 定义自包含内容，比如图示、图表、照片、代码清单等等。 <footer> 定义文档或节的页脚。 <header> 定义文档或节的页眉 <main> 定义文档的主内容。 <mark> 定义重要的或强调的文本。 <menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。 <meter> 定义已知范围(尺度)内的标量测量。 <nav> 定义文档内的导航链接。 <progress> 定义任务进度。 <rp> 定义在不支持ruby注释的浏览器中显示什么。 <rt> 定义关于字符的解释/发音(用于东亚字体)。 <ruby> 定义ruby注释(用于东亚字体)。 <section> 定义文档中的节。 <summary> 定义<details>元素的可见标题。 <tiime> 定义日期/时间 <wrb> 定义可能的折行(line-break)。 -
新的表单元素
标签 描述 <datalist> 定义输入控件的预定义选项。 <keygen> 定义键值对生成器字段(用于表单)。 <output> 定义计算结果。 -
新的输入类型
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formatarget
- height和width
- list
- min和max
- multiple
- pattern (regexp)
- placeholder
- required
- step
-
HTML5--新的属性语法
标签 描述 Empty <input type="text" value=“John Doe” disabled> Unquoted <input type="text" value=John> Double-quoted <input type="text" value=“John Doe”> Single-quoted <input type="text" value=“John Doe”> -
HTML5图像
- <canvas> 定义使用JavaScript的图像绘制。
- <svg> 定义使用svg的图像绘制。
-
新的媒介元素
- <audio> 定义声音或音乐内容。
- <embed> 定义外部应用程序的容器(比如插件)。
- <source> 定义<video>和<audio>的来源。
- <track> 定义<video>和<audio>的轨道。
- <video> 定义视频或影片内容。
-
HTML5API
HTML5语义元素
- 语义元素用来清楚地向浏览器和开发者描述其意义。
- 例如：
- 非语义元素的例子：<div>和<span> —— 无法提供关于其内容的信息。
- 语义元素的例子：<form>、<table>以及<img> —— 清楚地定义其内容。
- 例如：
HTML5文档结构
-
HTML5文档结构同样是由头部和主体两部分组成，只是新增了一些结构元素。
- 如header、nav、article、section、aside、footer六个结构元素，这些元素都是块级元素。
-
HTML5和HTML4页面布局对比：
HTML5新增结构元素 —— header标记
-
header标记定义文档和区域的页眉，通常是一些引导和导航信息。
-
header标记不局限于写在网页头部，也可以写在网页内容里面。
-
通常header标记至少包含(但不局限于)一个标题标记(h1-h6)，也可以包括hgroup(标题组合)标记、表格标识、搜索表单、导航等。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5结构元素header和hgroup标记的应用</title> </head> <body> <header> <hgroup> <h1>HTML5 是下一代的 HTML。</h1> <h3>什么是 HTML5？</h3> <h5>HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</h5> </hgroup> </header> </body> </html>
HTML5新增结构元素 —— nav标记
-
<nav>元素定义导航链接集合。
-
<nav>元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于<nav>元素中。
-
建议不要在footer元素中使用nav元素，否则易造成页面显示不正确。
-
配置相应的CSS代码可以实现水平导航。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nav的使用</title> </head> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </body> </html>
section和article的区别
- 对于section和article的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点在完整身上。
- 虽然section包含的内容也能算作独立的一块，但它只能算是组成整体的一部分，article才是一个完整的整体(论坛、博客、新闻)。
article标记
-
article标记是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如论坛帖子、博客文章、新闻故事、评论等。
-
一般来说，article会有标题部分，通常包含在header内，有时也会包含footer。article标记可以嵌套，内层的article对外层的article标记有隶属关系。例如1篇博客的文章可以用article显示，然后后续的一些评论可以用article的形式嵌入其中。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5结构元素artical和header标记的应用</title> </head> <body> <article> <header> <hgroup> <h1>HTML 5结构元素的简介</h1> <h2>HTML 5的诞生</h2> </hgroup> <time datetime="2017-04-28">2017-04-28</time> </header> <p>HTML5 引入了许多新元素，包括几个用于更好地描述文本结构的元素。在本文中，我们将了解这些 HTML5 引入的新的结构化元素以及如何使用它们将一个文档划分成几个内容块。</p> </article> </body> </html>
section标记
-
section 标记定义文档中的节。
-
section 表示一段专题性的内容，可以带有标题。
-
如果描述一件具体的事物，建议使用article 来代替section；
- 如果使用section，仍可以使用h1 作为标题，而不用担心它所处的位置。
- 如果一个容器需要定义样式或定义行为，建议用div 元素。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5结构元素artical和section标记的应用</title> </head> <body> <section> <h1>section标记</h1> <p>用来定义文档中的节(section、区段)。 比如章节、页眉、页脚或文档中的其他部分。</p> </section> <section> <h1>article标记</h1> <p>article标记标识了Web页面中的主要内容。 以博客为例，每篇帖子都构成一个重要内容。</p> </section> </body> </html>
ascide标记
-
aside侧栏，也称为旁注。aside标记用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，类似于使用括号对正文进行注释（就像这样）。
-
括号中的内容提供关于该元素的一些附加信息，例如广告、成组的链接、侧栏等。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5结构元素aside和artical标记的应用</title> </head> <body> <header>我的博客</header> <section> <article> <p> 这是页面上重要的内容部分。也许是博客文章。带aside元素。 </p> <aside style="float:right;width:100px;height:100px;background:#EEffcc;"> <p>这是第一篇博客文章。 </p> </aside> </article> <article> <p>这是页面上重要的内容部分。也许是博客文章。不带aside元素</p> </article> </section> </body> </html>
foot标记
-
定义section 或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期。
-
作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header 标记用法相同，在一个页面中可以多次使用，在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5结构元素footer和section标记的应用</title> </head> <body> <footer> <div style="text-align:center;"> <section> <a href="http://www.caict.ac.cn/" target="_blank">CAICT中国信通院</a> <a href="//www.w3.org/" target="_blank">W3C</a> <a href="//www.dcloud.io/" target="_blank">DCloud</a> </section> <span style="padding:2px 5px;">京ICP备12046007号-5</span> <span style="padding:2px 5px;">HTML5中国产业联盟版权所有</span> </div> </footer> </body> </html>
html5中div、section、article区别
- div section article ，语义是从无到有，逐渐增强的。
- div 无任何语义，仅仅用作样式化；
- 对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。
- 原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用section 。
- nav和aside的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。
HTML5文档结构
- header
- nav
- article
- section
- aside
- footer
HTML5新增页面元素
除了文档结构元素header、nav、article、section、aside、footer外，HTML5还新增了下列页面元素：
- 内联元素：time、meter、progress等；
- 内嵌元素：video、audio；
- 交互元素：details、datagrid、command等；
- 其他页面元素。
figure标记与figcaption标记
-
figure标记用于对元素进行组合，常用于图像与图像描述组合；
-
figcaption(图题)标记用于定义figure元素的标题(caption)，可以给一组图片标记定义标题，但figcaption标记不是必需的；
-
若包含了figcaption元素，那它必须放置在figure元素的第一个或最后一个子元素的位置上。
-
基础语法：
<figure> <p> 图片文件说明内容。 </p> <img src=" " width=" " alt=“ ” title=“ ”/> <figcaption>为图片添加标题</figcaption> </figure> -
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5页面元素figure与figcaption标记的应用</title> </head> <body> <figure> <p>HTML5具有语义、离线与存储、设备访问等八个新特性，其对应的logo如下图所示：</p> <img src="class-header-semantics.jpg" width="150px" alt="语义" title="语义" /> <img src="class-header-offline.jpg" width="150px" alt="离线&存储" title="离线&存储" /> <img src="class-header-device.jpg" width="150px" alt="设备访问" title="设备访问" /> <figcaption >HTML5新logo(图题)</figcaption> </figure> </body> </html>
mark 标记与time 标记
-
记号mark 标记用来定义带有记号的文本。在需要突出显示文本时可以使用mark 标记。此标记对关键字做高亮处理（黄底色标注），突出显示，标注重点，在搜索方面可以应用。
-
时间time 标记用来定义公历的时间(24小时制)或日期，时间和时区偏移是可选的。
-
该标记能够以机器可读的方式对日期和时间进行编码。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5页面元素mark和time标记的应用</title> <!-- <script type="text/javascript" src="html5shiv.js"></script> --> </head> <body> <article> <header> <h1>五一国际劳动节</h1> </header> <p style="text-indent:2em;">国际劳动节又称“<mark>五一国际劳动节</mark>”、“<mark>国际*日</mark>”（International Workers' Day或者May Day），是世界上80多个国家的全国性节日。定在每年的五月一日。它是全世界劳动人民共同拥有的节日。1889年7月，由恩格斯领导的第二国际在巴黎举行代表大会。会议通过决议，规定<time datetime="1890-05-01">1890-05-01</time>国际劳动者举行游行，并决定把5月1日这一天定为国际劳动节。*人民*政务院于1949年12月作出决定，将5月1日确定为劳动节。1989年后，国务院基本上每5年表彰一次全国劳动模范和先进工作者，每次表彰3000人左右。</p> </article> </body> </html>
-
time标记使用场合
-
情景一：指定元素的日期时间。
-
情景二：用于指定文档的发布日期。
<mark>重点标注的内容</mark> <time>9:00</time> <time datetime="2017-05-01" pubdate="pubdate">国际劳动节</time>
-
details标记与summary标记
-
• 细节details标记是一个开关式、交互式控件，用来定义用户可见的或者隐藏的需求补充细节，任何形式的内容都能被放在该标记中。该元素的内容对用户是不可见的，除非设置了open属性。
-
摘要summary 标记 配合使用可以为details定义标题，summary元素应该是details元素的第一个子元素。标题是可见的，用户单击标题时，会显示出details。只有Chrome、Safari 6 以上支持。
-
基本语法：
<details open > <summary> details的标题</summary> details的详细内容 </details> -
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5页面元素details和summary标记的应用</title> <script type="text/javascript" src="html5shiv.js"></script> </head> <body> <details> <summary>HTML5是下一代的HTML。</summary> <h3>什么是HTML5？</h3> <p>HTML5将成为HTML、XHTML以及HTML DOM的新标准。</p> <p>HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。</p> <p>大部分现代浏览器已经具备了某些HTML5支持。</p> </details> <p><strong><mark>注意：</mark></strong>目前，只有Chrome和Safari 6支持details标签。</p> </body> </html>
此时页面显示的是summary“HTML5是下一代的HTML”，点击其左侧三角会显示详细信息如下：
progress 标记与meter 标记
-
进度Progress标记用来定义运行中的任务进度：
- 该标记有两个属性：max表示需要完成的值；value表示当前的值。
-
度量meter 标记定义已知范围或分数值内的标量测量，也被称为gauge(尺度)。如磁盘用量、CPU使用率等等。
-
meter属性表
属性名 值 描述 form form_id 规定meter元素所属的表单。 heigh number 规定被界定为高值的范围。 low number 规定被界定为低值的范围。 max number 规定范围的最大值。 min number 规定范围的最小值。 optimum number 规定度量的最优值。 value number 必需。规定度量的当前值。
-
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5页面元素progress和meter标记的应用</title> <!-- <script type="text/javascript" src="html5shiv.js"></script> --> </head> <body> <p><strong>文件下载进度：</strong> <progress value="22" max="100">设置属性</progress></p> <p><strong>空进度条：</strong><progress>未设置属性</progress></p> <p><strong>服务器CPU使用情况：</strong> <meter value="0.3" high="0.9" low="0.1" optimum="0.5">3/10</meter></p> <p><strong>内存使用情况：</strong><meter value="0.6" max="1" min="0" optimum=".75">60%</meter></p> <p><mark>注释：</mark>IE9以及更早的版本不支持progress、meter 标记。</p> </body> </html>
input 标记与datalist 标记
-
input 标记用于搜集用户信息。此处仅介绍通过input标记的list 属性与datalist 标记的id 属性进行关联，即将此两个性的值设置为相同的值，通过datalist 标记列出所有合法的输入值列表。
-
选项列表datalist 标记用来定义input 标记可能的选项列表。一般与input 标记配合使用，主要用来定义input 可能的值，提供“自动完成”的功能，方便用户输入。
- datalist 标记及其选项不会被显示出来，只有当用户鼠标盘旋在input 标记域时，才能看到“▼”，然后单击“▼”弹出一个下拉列表，提供用户选择作为用户的输入数据。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5页面元素input和datalist标记的应用</title> <script type="text/javascript" src="html5shiv.min.js"></script> </head> <body> <input list="courese" placeholder="请选择课程" /> <datalist id="courese"> <option value="HTML5移动应用开发"></option> <option value=".NET应用开发"></option> <option value="JavaEE应用开发"></option> <option value="PHP+MySQL应用开发"> </option> </datalist> <p><mark>注释：</mark>除了IE9和更早版本的IE浏览器以及Safari不支持datalist标记，其余均支持。</p> </body> </html>
表单复习
- HTML表单用于搜集不同类型的用户输入。
- <form> 元素定义 HTML 表单。
- Action 属性： action 属性定义在提交表单时执行的动作。
- method 属性：规定在提交表单时所用的 HTTP方法(GET或POST)。
- Name 属性。
- HTML 表单包含表单元素：
- 表单元素指的是不同类型的 input 元素、复选框、单 按钮、提交按钮等等。
- 用 <fieldset> 组合表单数：
- <fieldset>元素组合表单中的相关数据。
- <legend>元素为<fieldset>元素定义标题。
HTML5表单
-
表单是HTML中获取用户输入的手段，HTML5对表单系统做了彻底的改造，以适应当前的应用。
-
在HTML5中增加了从用户收集特定类型数据的新方法和在浏览器中检查数据的能力。
-
<form>属性列表：
属性 描述 accept-charset 设置在被提交表单中使用的字符集(默认：页面字符集)。 action 设置向何处提交表单(URL地址)。 autocomplete 设置浏览器是否自动完成表单(默认开启)。 enctype 设置被提交数据的编码(默认：url-encoded)。 method 设置在提交表单时所用的http方法(默认：get)。 name 设置识别表单的名字(对DOM使用：document.forms.name)。 novalidate 设置浏览器不验证表单。 target 设置action属性中地址的目标(默认_self)。 案例：
<form action="action_page.php" method="GET" target="_blank" accept-charset="utf-8" ctype="application/X-WWW-form-urlencoded" autocomplete="off" novalidate> . form elements . </form>
HTML5 新增的表单属性
-
form标记的新属性：autocomplete属性和novalidate属性：
-
autocomplete：on|off。属性规定form标记或类型为text、search、url、telephone、email、password、datepickers、range、color的input标记是否具有自动完成的功能。当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。
-
novalidate：true|false。属性规定在提交表单时不进行验证form或类型为text、search、url、telephone、email、password、date pickers、range、color的input标记。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5表单form的autocomplete和novalidate属性的应用</title> <script type="text/javascript" src="html5shiv.min.js"></script> </head> <body> <form action="" method="get" novalidate="novalidate" autocomplete="on"> <fieldset> <legend align="center">个人基本信息</legend> 姓名:<input type="text" name="name" /><br /> 邮箱: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p> <p>请注意，表单的自动完成功能是打开的，而e-mail 域是关闭的。</p> </body> </html>
-
HTML 表单元素(复习)
- <input> 元素(最重要的元素)根据不同的 type 属性，可以变化为多种形态。
- <select> 元素(下拉列表)。
- <option> 元素定义待选择的选项。
- <textarea> 元素。
- <button> 元素。
HTML5新增表单元素
- <datalist>：定义选项列表，与input元素配合使用。用来定义input可能的值。
- <keygen>：定义用于表单的密钥对生成器字段。
- <output>：定义不同类型的输出，如脚本的输出。
小结
- hgroup标记。
- figure标记与figcaption标记。
- mark标记与time标记。
- details标记与summary标记。