HTML5随笔

1.HTML文档的后缀名: .hmtl和.htm都可以使用。

2.< img src=”/images/logo.png” width=”258” height=”39” />中如果width和height不设置，浏览器就不会给图像预留位置，然后再检查每一个图像文件，然后他们的屏幕空间，会给文档带来非常大的延迟，如果设置了width和height就会给图片预留位置。加速文档显示。

3.< meta http-equiv=”refresh” content=”30”> 每30秒钟刷新当前页面

4. 表格格式

5.HTMl5新增表单标签：datalist，keygen，output

6.iframe这个框架并不主流了。它的优缺点如下：
优点：
1.能原封不动的吧嵌入的网页展现出来。
2.如果一个网站中很多页面有公共的头部和尾部。那么可以使用iframe，只需要修改iframe中的内容，便可以维护所有的头部和尾部，增加了代码的重用。
3.如果遇到加载缓慢的的第三方内容和图标，可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.不容易打印。
3.浏览器的后退按钮无效。
4.搜索引擎的爬虫无法很好的处理iframe中的内容，iframe不利于搜索引擎的优化。
5.多数小型移动设备，无法完全显示框架，设备的兼容性差。
6.多框架的页面会增加服务器的http请求，对应大型网站是不可取的。
目前框架的所有优点可以使用Ajax实现，因此已经没必要使用框架了。

7.关于html的加载顺序问题
首先顺序加载，到head中的时候如果引用了外部文件，开始运行的时候就会下载这些被引用的文件，当遇到script标签的时候，浏览器停止解析，并不停止下载，然后把控制权交给javascript引擎，如果script中也引用了外部脚本，那么也一起下载，否则就立即执行。执行完毕后吧控制权交给浏览器渲染引擎。
head中的代码解析完毕，会开始解析body中的代码，如果head中引用的外部文件没有下载完毕，就会继续下载。和head的顺序一样如果遇到body中有script标签，同样要把控制权交给javascript引擎。script完事之后，如果有img标签，浏览器会想服务器清求图片，然后浏览器会接着向下执行，图片清求完毕之后，如果img中设置有width和height的值，浏览器会直接放入预留好的位置之中，如果没有width和height，则浏览器没有给img标签预留位置，那么浏览器就会重新渲染这部分代码。

注意：
1.如果js是外部文件，那么可以在script中添加defer=“true”，这样会使js和DOM并行加载，待页面加载完毕之后在执行js文件，这样就不存在阻塞的问题了。
2.如果js是外部文件，那么可以在script中添加async = “true”,这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖其他js和css，但是无法保证js文件的加载顺序，但是同样与DOM有并行加载的效果。
3.同时使用defer和async属性，defer属性会失效。

8.http超文本传输协议，https安全超文本传输协议，ftp文件传输协议，file自己计算机上的文件。

9.HTML5中新定义的8个语义元素
header
section
footer
aside
nav
main
article
figure

10.HTML5各大主流浏览器都支持，ie浏览器在ie9也会支持HTML5，要想让ie9之前的版本兼容HTML5，就要使用shiv包来解决这个问题。
我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, ” shiv” 来解决该问题。
在< head>中加入如下代码：
< !–[if lt IE 9]>
< script
src=”http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js”>< /script>
< ![endif]–>

扫描二维码关注公众号，回复： 1749422 查看本文章

11.HTML5大头：Canvas
Canvas标签只是一个简单的容器，一个可以让你在上面画画的容器，其实叫做画布来的更为妥当一些，，好比一个div，但是canvas可不是块级元素，可以设置大小，如果不设置的时候，笔者在谷歌和搜狗浏览器上的测试的都是300*150的默认宽高，默认情况下canvas没有边框和元素，你可以使用style = “border:1px soild #000000” 来给你的canvas画布指定一个边框。
canvas本身是没有绘图能力的，所有的绘制工作必须在javascript内部完成。
HTML:
< canvas id=’myCanvas’ width = ‘200’ height=’100’>< /canvas>
Javascript:
var c = document.getElementById(‘myCanvas’);
var ctx = c.getContext(‘2d’);

ctx就是你的绘画的画笔，你要问我为什么这样写，emmmmm，我也不知道，看教程上都这么写的。
解析是这样的：
javascript代码的第一句：找到canvas元素
第二句：创建context对象
emmmmm，就这么多，云里雾里的。
需要注意一点的是：
当然canvas中有很多的方法和使用文档，传送门走起：
菜鸟教程：canvas
ps：别理解错了，这个网站教程就是叫菜鸟教程。。。。。别说，写的还挺好。哈哈

12.HTML5:内联SVG
什么是SVG呢？SVG是指可伸缩矢量图形（Scalable Vector Graphics）最重要的一点是SVG图像在放大或者改变尺寸的情况下图形质量不会有损失。并且SVG还是万维网的标准。
他和Canvas一样有自己的一套教程。

13.HTML5：拖放（Drag和drop）
在HTML5中任何元素都可以拖放，首先要设置这个元素的draggable = “true”；
在拖动的元素上添加ondragstart()和setData();
放到何处：
在放置拖动元素的元素上设置ondragover和ondrap；
传送门走起：菜鸟教程：HTML5拖放

14.HTML5地理定位
    HTML5的地理定位Geolocation API用于获取用户的地理位置，鉴于该特性可能会侵犯用户的隐私，所以除非用户同意，否则用户的地理位置信息是不可用的。
    可以使用navigator.geolocation.getCurrentPosition(showPosition);
全局方法，直接用就可以，参数为一个函数，这个函数有一个参数，如下：
showPosition（position）
position就是全局方法给showPostition的一个对象，position对象中使用
position.coords.latitude 获取纬度信息。
position.coords.longitude 获取经度信息。
    其实经度和纬度对我们来说其实并不太关心，因为我们对经度和纬度，也没有什么概念，我们更关心的是我在哪个省份？，我在那个城市？
    其实百度和谷歌这两家公司早就给我们定好了地图的API直接调用就行，利用ajax传递经纬地信息，百度和谷歌的API会返回给我们省份和城市。

15.HTML5：视频（video）
直到现在，仍不存在一项在网页上显示视频的标准。
视频大多是通过插件（例如：Flash）来显示的，然而，并非所有的浏览器都拥有同样的插件，HTML5规定了一中通过video元素来包含视频的标准方法。

先上代码：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

< video>是HTML5的新标签声明一个视频组件，width和height不用说了，定义宽高，controls是给这个视频一套默认的控制台，比如开始播放，拖放进度条，调大调小音量等。如果不写controls，就没有这个默认的控制台。< video>
中可以写很多< source>浏览器将使用第一个可识别的格式进行播放。
还有< video>中的文字是为了在浏览器不兼容HTML5的时候给用户的提醒文字。
注意：
当前video只支三个格式：MP4 WebM 和Ogg。
一脸蒙逼，难道不应该是，MP4,Rmvb，avi之类的么，这后面的是什么东西？我的想法和你一样。

16.HTML5:音频
唉！求csdn的markdown编辑器上线实时保存功能，刚写的一部分的video和所有的音频audio在我不小心点击了关闭按钮之后，东西全都没了。
头疼
传送门：HTML5：音频

17.HTML5:新的Input类型
拥有多个新的表单输入类型，新的输入类型是为了更好的输入控制和验证。
当然并不是所有的浏览器都支持新的Input类型，但是你仍然可以使用他们，在浏览器不支持的时候，新的input类型将会显示为常规文本。
有很多我就不一一列举了
传送门走起：HTML5:新的Input框

18.HTML5：表单新元素
HTML5的表单新元素有三个，分别是：
datalist：苹果浏览器不支持，其他均可，但是笔者测试，搜狗浏览器不好使
keygen：ie不支持。其他均可
output：ie不支持，其他均可

19.HTML5:表单新属性
A：atuocomplete属性（form和input中都有这个属性）
简单来说就是填写记录，你填写过的东西都会记录下来，等下一次填写的时候会出现你以前填写过的东西，但是笔者刚才试了很久，没成功。。。
B：novalidate属性（form）
如果在表单中添加了novalidate属性，那么表单提交时，不会验证你输入的是否正确的，均可提交。
C：autofocus属性（input）
这个属性规定，在页面加载时，那个input会自动获得焦点。
D：form属性（input）
当你的input框在form表单之外时，设置form属性=“form表单的id”，在这个表单提交时，仍然可以把form表单之外的这个input框一同提交。
E：formaction属性（input type=‘submit’）
这个属性用于描述表单提交的URL地址。
个人感觉很鸡肋的属性，这个属性用在type = ‘submit’或者type=‘image’（？？？）
当用在submit上的时候，这个属性会覆盖from表单中的action属性。
话说我直接在action属性中更改不行么？
F：formenctype属性（input type=‘submit’）
这个属性描述了表单提交到服务器的数据编码（只对form表单中method=‘post’表单）覆盖了form元素中的enctype属性。
G：formmethod属性（input type=‘submit’）
又是个覆盖的，这次覆盖的是form元素的method属性。
H：formnovalidate属性（input）
这个属性控制的是input框在提交的时候是否验证，有的话就不验证。这个验证不是自己的js代码验证，而是input中的type所自带的验证，比如type = ‘email’
I：formtarget属性（input type=‘submit’）
又是一个覆盖的，这次覆盖的是form中的target。
J:required属性（input）
这个属性规定必须在提交之前填写输入域。
K：pattern属性
可以在input中嵌入正则表达式
传送门：form表单新属性

20.HTML5语义元素
语义元素也就是有意义的元素。一个语义元素能够清楚的描述其意义给浏览器和开发者。
像div，或者span这种事无语义的元素，无需考虑内容。
HTML5中新增加了很多语义元素，如下：
header
nav
section
aritcle
aside
figcaption
figure
footer
常用的语义元素的作用如下：

其中有两个不常见的figure和figcaptioin
< figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
< figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
< figcaption> 标签定义 < figure> 元素的标题.
< figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
注意：除了figcaption，其他均为块级元素。
兼容ie8或者更早版本的ie版本，仍然要引用HTML5 Shiv javascript脚本来解决ie的兼容问题。

21.HTML5 Web存储
简单的介绍：HTML5 web存储，一个比cookie更好的本地存储方式。
兼容性问题：e7以及更早的版本不支持web存储。
大小：5M
cookie：4k

客户端存储数据的两个对象为：
localStorage 和sessionStorage。

localStorage–用于长久的保存整个网站的数据，保存的数据没有过期时间，知
道手动去除。
sessionStorage–用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后，将会删除这些数据。

在使用时迁应该检查一下浏览器是否支持webStorage

if(Storage == 'undefined'){
    //支持localStorage sessionStorage对象
}else{
    //不支持web存储
}

localStorage对象的存储没有时间限制，不管多久，只要没有手动删除，数据依然可用。常用的一些函数如下：
不管是localStorage或者是sessionStorage可使用的API都是一样的：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

22.HTML5:应用程序缓存
笔者并没有实践这个功能，也只是了解了一下，传送门让你们能更好的理解：
HTML5：应用程序缓存

23.HTML5:Web Workers
简单介绍：web worker是运行在后台的javascript，不会影响页面性能。
也就是异步，关于同步，异步，还有javascript的运行机制。
我推荐阮一峰老师的“JavaScript运行机制：再谈Event Loop”
avaScript 运行机制详解：再谈Event Loop
不得不说，阮一峰老师写的教程是真的好，清晰易懂，很是敬佩。
如果是我们写的话。
首先我们要检测浏览器是否支持webwork，和地理定位一样直接if

if(typeof(Worker)=='undefined'){//注意一定要大写
    //你的浏览器支持web worker
}else{
    //你的浏览器不支持web worker
}

然后创建一个web worker的文件，后缀名为.js，也就是我们最熟悉的javascript文件。在这个文件中写代码，就像在HTML页面中的< script>标签中写代码一样。
在HTML页面中，我们创建一个web worker对象。

if(typeof(Worker)=='undefined'){
    w = new Worker('demo.js');
}else{

}

然后关于两个页面的信息交流，包括HTML到.js文件，或者.js文件到HTML。
传送门：web worker 详解

23.HTML5:WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

这里有详细的websocket教程：阮一峰老师：websocket教程

最近看了很多阮一峰老师写的文章，任何东西不会了，先去网站上把不会的东西打上，然后在后面加一个阮一峰，如果阮老师写了教程，我会感觉到一丝丝的安心，也许是真的喜欢这个人的文章吧。
在这也推荐一下阮一峰老师的个人博客：阮一峰的个人网站

猜你喜欢