我不知道的那些HTML和CSS知识（一）

记录一些我不清楚的玩意

一、iframe禁止嵌套

腾讯QQ空间防嵌套方法

<script type="text/javascript">
  document.domain = "qq.com";
  var _s_ = new Date(),
    g_T = {},
    siDomain = "ctc.qzonestyle.gtimg.cn",
    g_iUin = 499469859,
    g_iLoginUin = 499469859;
  g_T.fwp = [_s_];
  document.namespaces && document.namespaces.add && (document.namespaces.add('qz', 'http://qzone.qq.com/'), document
    .namespaces.add('x', 'http://qzone.qq.com/'));
  var QZFL = {};
  QZFL.event = {};
  QZFL.event.getEvent = function (evt) {
    var evt = window.event || evt,
      c, cnt;
    if (!evt && window.Event) {
      c = arguments.callee;
      cnt = 0;
      while (c) {
        if ((evt = c.arguments[0]) && typeof (evt.srcElement) != "undefined") {
          break;
        } else if (cnt > 9) {
          break;
        }
        c = c.caller;
        ++cnt;
      }
    }
    return evt;
  };
  QZFL.event.getTarget = function (evt) {
    var e = QZFL.event.getEvent(evt);
    if (e) {
      return e.srcElement || e.target;
    } else {
      return null;
    }
  };
  var QZFF_M_img_ribr = [];
  QZFL.media = {
    reduceImgByRule: function (ew, eh, opts, cb) {
      QZFF_M_img_ribr.push(QZFL.event.getTarget());
    },
    adjustImageSize: function (w, h, trueSrc, cb, errCallback) {
      QZFF_M_img_ribr.push(QZFL.event.getTarget());
    },
    reduceImage: function () {
      QZFF_M_img_ribr.push(QZFL.event.getTarget());
    },
    getImageInfo: function () {
      QZFF_M_img_ribr.push(QZFL.event.getTarget());
    }
  };
  g_T.fwp[1] = new Date();
</script>

淘宝防嵌套方法

if(window.top !== window.self){ window.top.location = window.location;}

四种防iframe方法
第一种要说的就是淘宝使用的办法

解决方案一：JS方法

<script type="text/javascript">
  if (self != top) {
    top.location = self.location;
  }
</script>
if (self == top) {
  var theBody = document.getElementsByTagName('body')[0];
  theBody.style.display = "block";
} else {
  top.location = self.location;
}

把上面的JS代码片段放到你页面的 head 中即可。

要特别说明下这种方法不是很靠谱，可以很轻松使这种方法失效。

只需要添加下面代码使JS代码失效，这种方法就没用了。

<script type="text/javascript" charset="utf-8">
  document.write(
    '<iframe seamless sandbox security="restricted" id="url_mainframe" frameborder="0" scrolling="yes" name="main" src="http://www.baidu.com" style="height:100%; visibility: inherit; width: 100%; z-index: 1;overflow: visible;"></iframe>'
  ); //把里面的http://www.baidu.com换成要嵌套的网址

解决方案二：Meta标签方法

在需要禁用iframe嵌套的网页head中添加下面代码

<meta http-equiv="X-FRAME-OPTIONS" content="DENY">

以上两种为前端处理方法，就我个人来说不推荐使用，不过这个也是因人而异的，没有绝对的好与差。

解决方案三：PHP方法

<?php header('X-Frame-Options:Deny'); ?>

在需要禁用iframe嵌套的PHP网页中添加上面代码

上面这种是后端程序处理方法。

解决方案四：Apache主机方法

配置 Apache 在所有页面上发送 X-Frame-Options 响应头，需要把下面这行添加到 ‘site’ 的配置中:

Header always append X-Frame-Options SAMEORIGIN

解决方案五：Nginx主机方法

配置 nginx 发送 X-Frame-Options 响应头

把下面这行添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置中:

add_header X-Frame-Options "SAMEORIGIN";

配置 IIS 发送 X-Frame-Options 响应头

添加下面的配置到 Web.config 文件中:

<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
...
</system.webServer>

解决方案六：.htaccess方法

在网站根目录下的.htaccess文件中中加一句

Header append X-FRAME-OPTIONS "SAMEORIGIN"

以上几种解决方案为服务器端解决方案。

关于X-Frame-Options

以上大部分关于禁止iframe框架被跨域嵌套的方法中使用到X-Frame-Options，在此特别介绍一下：

X-Frame-Options 有三个值：DENY、SAMEORIGIN、ALLOW-FROM uri

DENY

表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

SAMEORIGIN

表示该页面可以在相同域名页面的 frame 中展示。

ALLOW-FROM uri

表示该页面可以在指定来源的 frame 中展示。

二、URL和URI

URL 代表着是统一资源定位符（Uniform Resource Locator） ◼ 通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。

• 理论上说，每个有效的 URL 都指向一个唯一的资源；
• 这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；

URL的标准格式如下：

和URI的区别：

• URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。；
• URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；

URI，统一资源标志符(Uniform Resource Identifier， URI)，表示的是web上每一种可用的资源，如 HTML文档、图像、视频片段、程序等都由一个URI进行标识的。

URL在某一个规则下能把一个资源独一无二的识别出来。

• URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；
• 所以URL是URI的一个子集；
• 但是URI并不一定是URL

URI和URL都定义了资源是什么，但URL还定义了该如何访问资源。URL是一种具体的URI，它是URI的一个子集，它不仅唯一标识资源，而且还提供了定位该资源的信息。URI 是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的信息来定位，是绝对的。

三、SEO

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

一、title、alt、h1
title: 网站头部标签下的title,网站名称
备注：这里为什么不说标签中的title属性，，虽然鼠标上移可以显示图片名字，但是它跟SEO没一丝联系所以我们不关注它。
title是整个html在搜索引擎搜索结果中返回的第一要素，是最为核心的关键字词，建议不超过100个字节。
例如：

<img title="图片名称"/> 

alt: 当网络速度很慢，或者图片地址失效的时候，它可以在图片展示的位置上显示该图片的名称，同时也能让用户知道该位置是什么商品。同时为图片设置高度和宽度，可提高页面的加载速度。

<img src="一张图片.jpg" alt="一张图片">

h1：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用 标签, 而其它地方不应该随便乱用 h 标题标签。
同一个页面不要出现两次及两次以上的h1、h2、h3，否则会受到搜索引擎的惩罚。

 <h1 class="logo" alt="网易云音乐" title="网易云音乐"></h1>

二、meta标签
①、property属性
1、og描述：og是一种新的HTTP头部标记，即Open Graph Protocol，这种协议可以让网页成为一个“富媒体对象”。
2、OG主要标签属性
og:title 网站名称
og:type (website)
og:image (logo图)
og:url 网站地址(例如：https://music.163.com/)
og:site_name 页面所在网站名(例如：网易云音乐)
3、作用：使用Meta Property=og标签，就代表同意了网页内容可以被其他社会化网站引用，对于谷歌seo有一定的帮助。

 <meta property="og:title" content="网易云音乐">

②、name属性
作用： 因为它给搜索引擎传递重要的信息，搜索引擎通过阅读它来了解网页的大意，并且时常引用它来作为搜索结果中的“网页摘抄”提供给搜索者。

1、keywords：向搜索引擎说明你的网页的关键词
关键词在Meta Keywords中的使用应注意以下几点：
（1） 确信使用的关键词出现在网页文本中;
（2） 不要重复使用关键词;
（3） 每个网页的关键词应该不一样;
（4） 一个网页的关键词标签里应该包含3-5个最重要的关键词，不要超过5个;
（5）主流搜索引擎对其的建议是不超过160字节。

<meta name='keywords' content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.163.com">

2、description：告诉搜索引擎你的站点的主要内容。主流搜索引擎对其的建议是不超过400字节。

<meta name='description' content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">

3、网站作者：

<meta name="author" content="网易云音乐" />

4、优先打开edge和chrome浏览器

<meta http-equiv="X-UA-Compatible" content="IE = edge, chrome = 1" />

5、禁用移动端缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>

三、text-indent css优化
1、作用：用css将h1标签行内缩进到页面看不见(隐藏起来)，隐式新增网站关键字，一般这种标签加在logo里。sohu和阿里巴巴就是这种方法.

<div class="logo" alt="网易云音乐">
    <h1 style="text-indent: -9999px;">网易云音乐</h1>
</div>

四、页面文章添加链接到自家的子网站(也有人称之为友链)
同时给关键字加上字体颜色和下划线，诱导用户点击跳转，子链接被点击多了该子网站排名也靠前了，后面只要一搜关键字很容易就查到当前子链接的网站。每页的最高链接应该少于100个。避免被搜索引擎视为链接农场。

<p><a href="https://juejin.cn/news/">掘金文章</a>是一个帮助开发者成长的社区,是给开发者用的 Hacker News</p>

五、HTML5新增的语义化标签
1.header：标签定义“网页”或“section”的页眉。
2.nav：定义导航链接的部分。
3.footer标签：代表“网页”或“section”的页脚。
4.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
5.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)
6. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。(用于article标签之内，此时表示的是该独立内容的附属信息部分)；

示例：<header><nav>导航一</nav></header>
作用：让爬虫知道这一块内容是属于什么的。

六、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
七、重要内容不要用js输出：爬虫不会执行js获取内容
八、 少用iframe：搜索引擎不会抓取iframe中的内容