HTML那点事儿

HTML那点事儿

标签（空格分隔）： HTML javascript

---

1.同源策略

同源策略是一种约定，有Netscape提出的一个注明的安全策略，现在所有支持JS的浏览器都会使用这个策略

• 目的是保证用户信息安全，防止恶意的网站窃取数据
• 域名，地址，端口相同

若非同源三种行为将受到限制

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

规避上面三种限制的方法

• 设置document.domain，前提只有一级域名相同，二级域名不同
• 如果完全不同源有三种方法
  
  • 片段标识符（fragment identifier）
  • window.name
  • 跨文档通信API(window.postMessage)
• 规避ajax的不同源请求解决方法有三种
  
  • JSONP
  • WebSocket
  • CORS阮一峰博客—-CORS

JSONP和CORS的区别

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

参考：阮一峰博客—-同源策略

---

2.HTML中的跨域

• img的src
• JSONP- script标签的src()
• ifream
• style标签里面用background的URL，border-img

3.HTML语义化

• 含义：内容语义化，选择合适的标签便于机器阅读，开发者阅读，既写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析

• why :

  • 好的代码结构更利于内容的呈现，代码可读性增强
  • 用户体验增强，如title,alt用于名词解释和图片信息展示，label的使用
  • 利于SEO，有利于搜索引擎，爬虫获取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
  • 利于其它设备解析（如：屏幕阅读器，移动设备）以意义的方式来渲染网页
  • 便于团队开发和维护（主要还是可读性增强）

• how

  • 尽量少些HTML，减少DOM渲染时间
  • 减少无语义的标签div,div一般用来做布局
  • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不使用纯样式标签，如：b、font、u等，用CSS设置
  • 强调文本要用strong（加粗）或者em（斜体）,能用CSS设置就不用他们,更不用b和i
  • 使用表格写完整（其实写不完整浏览器会自动补全），为了代码可读性，
    表头用thead ,标题用caption
  • 表单元素尽量使用label标签
  • 使用HTML5新增的语义化标签

• HTML5新增了哪些语义标签

  <header> 可以是“网页”或任意“section”的头部部分
<nav> 用于定义页面的主要导航部分
<article>
<section> 表示文档中的节或者段
<aside> aside在article内表示主要内容的附属信息，侧边栏，广告
<footer> 自身独立的情况下：用article,是相关内容：用section
,没有语义的：用div
<address>代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
  参考博客
  其它标签可点击查看