欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML的同源策略,跨域,语义化知识点讲解

程序员文章站 2022-09-15 23:53:54
HTML的同源策略,跨域,语义化知识点讲解 标签(空格分隔): HTML javascript 1.同源策略 同源策略是一种约定,有Netscape提出的一个注明的安全策略,...

HTML的同源策略,跨域,语义化知识点讲解

标签(空格分隔): HTML javascript

1.同源策略

同源策略是一种约定,有Netscape提出的一个注明的安全策略,现在所有支持JS的浏览器都会使用这个策略目的是保证用户信息安全,防止恶意的网站窃取数据域名,地址,端口相同若非同源三种行为将受到限制Cookie、LocalStorage 和 IndexDB 无法读取。

DOM 无法获得。

AJAX 请求不能发送。

规避上面三种限制的方法

设置document.domain,前提只有一级域名相同,二级域名不同

如果完全不同源有三种方法 

片段标识符(fragment identifier)

window.name

跨文档通信API(window.postMessage)

规避ajax的不同源请求解决方法有三种 

JSONP

WebSocket

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渲染时间

减少无语义的标签p,p一般用来做布局

在语义不明显时,既可以使用p或者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 

,没有语义的:用p 

<address>代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。