HTML 教程（3）

1.将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

2.为 HTML 添加新元素(自定义元素，这个牛)
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为：




 
为 HTML 添加新元素
 


我的第一个标题
我的第一个段落。
我的第一个新元素

3.什么是 Canvas?
HTML5

一个画布在网页中是一个矩形框，通过

4.SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

实际例子

SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG不适合游戏应用

5.HTML5 MathML显示数学公式，估计实际用处不大，除非学校和科研机构
HTML5 可以在文档中使用 MathML 元素，对应的标签是 $...$ 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
可惜，chrome和ie不支持，要使用别的库来支持了，下面是兼容的：

 $a^{2} + b^{2} = c^{2}$

6.拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。




拖动 RUNOOB.COM 图片到矩形框中:

被拖动的元素:
需要三个条件draggable="true" ---允许被拖动
id="test"--设置一个ID号 ondragstart="drag(event)"--开始拖动的时候，把数据暂存

7.HTML5 - 使用地理定位也要借用javascript的
请使用 getCurrentPosition() 方法来获得用户的位置。
实际的例子：


点击按钮获取您当前坐标（可能需要比较长的时间获取）：

扩展是在百度地图google地图显示具体位置，这个需要去看它们的接口文档了。

8.视频播放，太简单了吧

HTML5
HTML5

9.HTML5 新的表单属性
HTML5 的

和标签添加了几个新属性.
新属性：
autocomplete//自动完成
novalidate//不验证正确性
新属性：
autocomplete//自动完成
autofocus//自动获取焦点
form//form 属性规定输入域所属的一个或多个表单，但是多个好像并不支持
formaction//属性用于描述表单提交的URL地址,属性会覆盖元素中的action属性.
formenctype//属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod//属性覆盖了元素的的method 属性
formnovalidate//属性是一个 boolean 属性,属性描述了元素在表单提交时无需被验证
formtarget
height 与 width
list
min 与 max
multiple//属性是一个 boolean 属性,属性适用于以下类型的标签：email 和 file,属性规定元素中可选择多个值
pattern (regexp)//属性描述了一个正则表达式用于验证元素的值
placeholder//属性提供一种提示（hint），描述输入域所期待的值
required//属性规定必须在提交之前填写输入域（不能为空）
step
//step 属性为输入域规定合法的数字间隔。
//如果 step="3"，则合法的数是 -3,0,3,6 等
//提示： step 属性可以与 max 和 min 属性创建一个区域值.

10.HTML5中新的语义元素
许多现有网站都包含以下HTML代码：

, 或者

, 来指明导航链接, 头部, 以及尾部.
HTML5提供了新的语义元素来明确一个Web页面的不同部分:

//图片的标题而已
//代替image而已
img_sem_elements.gif


黄浦江上的的卢浦大桥

11.什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以键/值对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用
sessionStorage - 针对一个 session 的数据存储

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);






点击
关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。

12.什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
例子

HTML 教程（3）

我的第一个标题

你可能感兴趣的:(HTML 教程（3）)