Java Web_05从入门到精通

HTML5

1.HTML5历史
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 xhtml+
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果,
WHATWG 指 Web Hypertext Application Technology Working Group。
W3C 指 World Wide Web Consortium，万维网联盟。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash） flex
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5 的改进
新元素(标签)
新属性
完全支持 CSS3
Video（视频） 和 Audio（音频）
2D/3D 制图

HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
HTML5
HTML5
HTML5 应用

HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 元素。
使用内联 SVG。
使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体
HTML5 表单（重点）
新表单元素, 新属性，新输入类型，自动验证。

 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
一、HTML5的常用元素与属性
HTML5规范并不是一种革命式的发展，因为HTML5并未完全放弃前面HTML版本的规范，实际上，HTML5规范保持了对现有HTML规范的最大兼容，这样可保证互联网上现有网页的正常运行。
HTML5保留了原有HTML规范的绝大部分元素和属性，删除了少量元素和属性——主要删除了各种文档样式相关的元素和属性，比如,width属性等，HTML5规范推荐使用CSS样式来控制HTML文档样式。HTML5新增了contentEditable,designMode、hidden、spellcheck通用属性。
HTML5新增的拖放API则可以让HTML页面的任意元素都变成可拖动的，通过拖放，通过使用拖放机制可以开发更友好的人机交互界面。

1.1HTML5保留常用元素 (HTML 4的标签)
1.2HTML5 增强的iframe 元素
HTML不在推荐使用frameset ,HTML5保留了iframe元素，该元素可以在普通的HTML页面中使用，该元素在普通HTML页面中生成一个行内框架。
属性如下：
src：该属性指定该iframe装载那个页面
name:iframe的名字
longdesc:该属性也是指定一个页面的URL，该页面包含了关于该iframe的长描述
scrolling：设置是否在iframe中显式滚动条
height/width:高度和宽度

srcdoc属性：html5的新属性 规定在 中显示的页面的 HTML 内容。
seamless属性：规定 看上去像是包含文档的一部分。
sandbox：是一个安全性方面的属性，用于对框架中的网页增加一系列额外限制，该属性有如下属性值：
“”：限制全部
all-forms:允许框架内的表单进行提交
allow-same-origin:允许 iframe 内容被视为与包含文档有相同的来源。
对于不同源的网页（两个页面对应URL的域名或端口不同，即认为这个两个页面是不同的）该页面将被禁止使用AJAX与服务器交互
禁止加载来自服务器的内容，同时禁止该页面从cookie和webstorage中读取内容。（同源策略）尤其在做前后端项目分离 跨域
allow-top-navigation 允许 iframe 内容从包含文档导航（加载）内容。
allow-scripts 允许脚本执行。

<iframe src="left.html" name="myiframe" scrolling="no" frameborder="0"></iframe>
<a href="index.html" target="myiframe">我的连接</a>
<iframe src="top.html" name="myiframe" scrolling="yes" frameborder="0" width="500" height="500"  sandbox="allow-top-navigation">
</iframe>

1.3 HTML 5保留的通用属性
id，style,class 属性
id属性用于为HTML元素指定唯一标识，当程序使用JavaScript编程时即可通过该属性来获取该HTML元素
style用于为HTML元素指定CSS样式
class属性则用于匹配CSS样式的class选择器

<div style="width:200px;height:300px;background: red;"></div>
<div class="red"></div>
dir属性
dir 属性规定元素内容的文本方向。
ltr	默认。从左向右的文本方向。
rtl	从右向左的文本方向。
<p dir="rtl">Write this text right-to-left</p>
<p dir="ltr">Write this text right-to-left</p>

title属性
title属性用于为HTML元素指定额外信息。

<a href="" title="我的连接">链接</a>
	<table>
		<tr>
			<td title="我的单元格">单元格内容</td>
		</tr>
	</table>

lang属性
通过设置lang属性来告诉浏览器和搜索引擎：网页或网页中的元素的内容所使用的语言。该属性的属性值应该是符合标准的语言代码，比如zh代表中文、en代表英语、fr代表法语、ja代表日文等。

accesskey属性
当HTML页面中有多个元素时，可以通过accesskey属性指定激活该元素的快捷键。
用户名:
密码:
我的链接
注意：火狐不支持
tabindex属性
当用户浏览网页时，可通过按键盘上的Tab键不断切换窗口或页面中HTML元素来获得焦点，tabIndex属性用来控制窗口、HTML元素获取焦点的顺序。

<a href="" tabindex="2">第一</a>
  <a href="" tabindex="1">第二</a>
  <a href="" tabindex="3">第三</a>

HTML5新增属性
contentEditable属性
HTML5为大部分HTML元素增加了contentEditable属性，如果将该属性设置为true,浏览器就会允许修改HTML元素里的内容。

 <div contenteditable="true" style="width:500px;height:300px;border:1px solid black"></div>
<table  ondblclick="this.contentEditable=true" border="1" cellpadding="0" cellspacing="0">
   	<tr>
   		<td>疯狂java讲义</td>
   		<td>疯狂android讲义</td>
   	</tr>
   </table>
 <p contenteditable="true">这是一个P标签</p>

designMode属性
designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设为on,该页面上所有可支持contentEditable属性的元素都变成可编辑状态。默认是Off

hidden属性 HTML5为所有元素提供了一个hidden属性，这个属性支持true,false两个属性值，一旦把某个HTML元素的hidden设为true,就意味着通知浏览器不显示该组件，浏览器也不会保留组件所占用的空间。

 <div id="target" hidden="true" style="height:80px">文字内容</div>
   <button onclick="display();">显示/隐藏</button>

<script type="text/javascript">
  	  function display(){
  	  	var target = document.getElementById("target");
  	  	target.hidden = !target.hidden;  }
</script>

spellcheck属性
HTML5为等元素增加了spellcheck属性，该属性是一个支持boolean值的属性，如果设置了spellcheck属性，浏览器就会负责对用户输入的文本内容执行输入检查。

contextmenu 属性
contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。
contextmenu 属性的值是需要打开的

元素的 id。

HTML5新增的结构元素
article 与section元素
article 该元素用于代表页面上独立、完整的一篇 “文章”，该元素表示的内容可以是一个帖子，一篇blog文章，一篇短文、一条完整的回复。总之，只要是一个独立的文档内容，就应该使用

元素来表示。
article内部可以使用 header来定义文章 “标题”内容
使用footer来定义文章“脚注”部分
使用section来把文章分成几个段落
article内部可以有多个 article来作为它的附属文章
section用来对文章内容进行分块 section元素也通常由标题(h1~h6)和内容组成。
section侧重对文章分块。表达一个完整的内容时，应该使用

如果把一个内容分成几个部分用section
div元素是一个通用组件，而section元素则是一个负责分块的html组件。
使用article，section只是为了让爬虫，搜索引擎，浏览器等工具解析该文档结构。
https://gsnedders.html5.org/outliner/分析网页 可以看到网页清晰的文档结构。

 <section>
            <article>
                <h3>还是的学习java</h3>
                <div>作者:高斯林</div>
                <p></p>
            </article>
 </section>

header和footer元素
header 元素通常用于代表标题，从功能上看，该元素的作用有点类似于 hn元素，但header元素的用途更加广泛，该元素的内部既可包含hn元素 也可包含普通的p span等元素 还可包含 nav元素
footer 该元素主要用于父级元素定义“脚注”部分，包括该文章的版权信息、作者授权信息等。
当网页内容,article或section包含了更多复杂内容的标题时，此时建议使用header 元素来组织他们。

<header>
		<img src="images/1.jpg" width="200" height="200"/>
		<a href="">返回首页</a>
        <h1>浏览帖子内容</h1>
</header>

nav和aside元素
HTML5还提供了aside和nav表示文档结构的元素， nav该元素专门用于定义页面上的“导航条”，包括页面上方的“主导航条”侧边的“边栏导航”，页面内部的“页面导航”页面下方的“底部导航”HTML5推荐将这些导航链接分别放在相应的nav元素中进行管理。
aside该元素专门用于定义当前页面或当前文章的附属信息，通常来说，推荐aside元素使用CSS渲染成侧边栏。
HTML5 提供的 nav 和 aside元素只是文档结构元素，并不负责对文本格式进行处理，如果想要进行处理，则建议使用CSS样式。

 <aside>
        <h3>页面导航</h3>
        <nav>
            <ul>
                <li> <a href="#">查看相关内容</a></li>
                <li><a href="#">返回首页</a></li>
               <li> <a href="#">返回本版</a></li>
            </ul>
        </nav>
    </aside>

main元素
一个HTML文档最多只应包含一个main元素，该元素用于包含网页中除导航条、logo,版权信息等之外的主要内容 使用main元素，网页内 article section
div等元素都应该放在main元素之内。
在一个文档中，不能出现一个以上的 元素。 元素不能是以下元素的后代：

、

、

、

或

。

<main>
        <h1>Web Browsers</h1>
        <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
        <article>
            <h1>Google Chrome</h1>
            <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
        </article>
        <article>
            <h1>Internet Explorer</h1>
            <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
        </article>

<article>
            <h1>Mozilla Firefox</h1>
            <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
        </article>
    </main>

figure 与figcaption元素
HTML5为图像语义额外添加了figure和figcaption两个元素。
figure该元素用于表示一块独立的“图片区域”，该元素可包含一个或多个img图片。
figcaption该元素通常放在figure内部 ，用于定义“图片区域”的标题。
6.html5新增的语义元素
mark 用于显示 HTML页面中需要重点“关注”内容。
time 元素 用来显示被标注过内容是日期、时间或日期时间

  <time>2012年-04月</time>
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

目前所有主流浏览器都不支持 标签。
标签不会在任何浏览器中呈现任何特殊效果。

detials 元素用于显示一段详细信息或某个主题的细节。detials元素通常会和summary元素结合使用。
只有chrome浏览器支持detials标签

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
bdi元素、ruby元素效果不明显
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

wbr元素：（word break opporunity）元素用于指定在文本的何处适合添加换行。
对于英语单词而言，有些单词或术语太长，浏览器可能会在错误的位置换行，此时可以使用wbr元素来告诉浏览器合适的换行时机。

wbr来告诉浏览器合适的换行位置。至于是否需要换行则由浏览器决定：

inter<wbr>national<wbr>ization
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。inter<wbr>national<wbr>ization
</p>

menu和menuitem元素
所有的浏览器都不支持