你不知道的HTML

[hubvue]

前端跨域的方法

关于同源策略

概念：同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响，可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

我们称域名、协议、端口号相同即为同源。

例如：http://www.example.com/dir/page.html
协议是http:// 域名是www.example.com，端口是80(默认端口可以省略)
注：二级域名和一级域名不同源。

同源策略的目的：是为了保证用户信息的安全，放置恶意的网站窃取数据。

同源策略限制的范围：

1. Cookie、LocalStorage、indexDB无法读取
2. DOM无法获得。
3. Ajax请求不能发送

离线缓存机制：

1. LocalStorage：用于本地存储，以key和value的方式进行存储，大小5MB，(当存储大小超过2.5MB的时候，存储性能会会降低)
2. SessionStorage：是基于会话间的存储，当浏览器关闭的时候，信息被清楚。
3. Cookie：存储大小以kb计算，每个浏览器都不相同。
4. indexDB和WebSQL：属于关系型数据库的存储，大小将近50MB，异步读取数据（基于回调的）

对于WebSQL方法一些了解：

1. openDatabase：使用现有数据库或者创建新数据库常见数据库对象
2. transaction：这个方法允许我们根据情况控制事务提交或回滚
3. executeSql：这个方法用于执行真实的SQL查询

WebSQL是基于回滚的方式来执行SQL语句，例子如下：

var db = openDatabase("testDB",'1.0',"Test DB",2*1024*1024);
/*openDatabase接受五个参数：
    1.数据库的名字
    2.数据库的版本号
    3.显示名字
    4.数据库保存数据的大小（以字节为单位）
    5.回调函数（非必须）
    注：如果提供了回调函数，回调函数用以调用changeVersion()函数，不管给定什么样的版本号，
    回调函数将把数据库的版本号设置为空。如果没有提供回调函数，则以给定的版本号创建数据库。
    
*/  
db.transaction(function(context){
    context.executeSql("CREATE TABLE IF NOT EXISTS testTable(id,unique,name)")
    context.executeSql("inset into testTable (id,name) values (0,"wang")");
})
/*
    transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数：
        1.包含事务内容的一个方法
        2.执行成功回调函数（可选）
        3.执行失败回调函数（可选）
*/
/*
    executeSql方法用于执行SQL语句，返回结果，方法有四个参数
        1.SQL语句字符串
        2.用以替换查询字符串中问号（？）的参数
        3.执行成功的回调函数（可选）
        4.执行失败的回调函数（可选）
*/

几种跨域的解决方案

HTML标签：img、iframe、script(JSONP)、link(background:url()、border-image:url())

在html标签中总结一句：所有带有src属性的元素都可以实现跨域。

Cookie：

Cookie是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器是允许通过设置document.domain共享Cookie。
例如：http://w1.example.com/a.html ，http://w2.example.com/b.html

//a.html ： 当a.html设置Cookie
document.cookie = "name=wang";
document.domain = "example.com"
//b.html  如果想要b.html可以读到这个Cookie，那么就需要设置相同的document.domain
document.domain = "example.com";
console.log(document.cookie)   //这样就可以拿到

另外，还有一种Cookie中最最实用的策略：在服务器端设置Cookie的时候，指定Cookie所属域名为一级域名。例如

Set-Cookie : key=value; domain=.example.com;path=/

下面是百度所在服务端设置的Cookie的跨域策略。

JSONP跨域

json是一种格式，而jsonp的跨域是利用script标签进行跨域的一种方式。它的原理就是：
首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

HTML的语义化

什么是语义化：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

HTML4的语义化

1. 使用div进行布局，不要用div进行无意义的包裹。span行内常见的元素(没有任何语义)。
2. 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下上下有默认间距，对兼容特殊终端有利。
3. 不要使用纯样式标签，如b、font、u等，改写CSS样式
4. 需要强调的文本，可以包含在strong或者em标签中(浏览器预设样式，能用CSS指定就不用他们)，Strong默认样式是加粗(不要用b),em是斜体(不用i)；
5. 使用表格时，标题要用caption，表头用thead，主题部分用tbody包围，尾部用tfoot包围，表头和一般单元格要区分开，表头用th，单元格用td；
6. 表单域要用fieldset标签包起来，并用length标签说明表单的用途；
7. 每个input标签对应的说明都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someld来让文本和相对应的input关联起来。
8. 在使用标题的时候，用h1-h6来展示标题
9. 对文章以及单词的解释，用dl，dd dt

HTML5的语义化

正如上面图所示：HTML5的语义化更多的是用来表示某区域用来包裹什么样的信息。

1. header：网页的头部
2. nav：网页的导航
3. article：所有的文章写在这里
4. section：文章的一块一块
5. footer：网页的地步
6. aside：边栏

现在的html5的布局

<div>
    <section>1楼</section>
    <section>2楼</section>
</div>

最后：我们在写页面的时候，尽量少些html元素，用before和after这两个伪类和伪元素来充当元素。
好处是：

1. 减少DOM渲染的时间。
2. 减少文件的大小