36 浏览器操作

36.1 Chrome调试工具

Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。

36.1.1 打开调试工具

打开 Chrome浏览器,按下F12键或者右击页面空白处→检查,点击elements。再点击调试窗口左上角的“方框鼠标”按键后,点击页面任意位置,即可看到相应的代码。

调试工具中会显示HTML和CSS

图3.1: 调试工具中会显示HTML和CSS

36.1.2 使用调试工具

  1. Ctrl+滚轮可以放大开发者工具代码大小。

  2. 上边是HTML元素结构,下边是CSS样式。

  3. 下边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。

  4. Ctrl +0复原浏览器大小。

  5. 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。

  6. 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。

36.2 Chrome移动端调试

先按F12,点击“Toggle device toolbar(快捷键为Crtl+Shift+M)”。

可通过页面最上面的下拉按钮选择移动设备,如果没有自己的设备可以点击“edit”按钮后点击“Add custom device”按钮自定义尺寸

36.3 扒取视频

按F12,使用调试工具,鼠标选择目标视频,鼠标悬浮在视频网址处,单击右键,然后选择“Open in new tab”。

单击右键,选择”视频另存为“,然后保存至指定路径即可。

详见:如何扒取视频的操作。

36.4 网站的fivecon图标

流程:

  1. 制作favicon图标:
    • 把品优购图标切成 png 图片。
    • 把 png 图片转换为 ico 图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/
  2. favicon图标放到网站根目录下
  3. HTML页面引入favicon图标 -<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

##SEO优化

36.4.1 网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化:title、description、keyword

36.4.2 LOGO SEO 优化

  1. logo 里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
  2. h1 里面再放一个链接,可以返回首页的,把 logo 的背景图片给链接即可。
  3. 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。
  • 方法1:直接给 font-size: 0; 就看不到文字了,京东的做法。
    • 方法2:text-indent 移到盒子外面(text-indent: -9999px) ,然后 overflow:hidden ,淘宝的做法。
  1. 最后给链接一个 title 属性,这样鼠标放到 logo 上就可以看到提示文字了。

36.4.3 title 网站标题

title 具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。 建议:网站名(产品名)- 网站的介绍 (尽量不要超过30个汉字)

例如:

  • 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
  • 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

36.4.4 description 网站说明

简要说明我们网站主要是做什么的。 我们提倡,description 作为网站的总体业务和主题概括,多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话:010…”之类语句。

例如:<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />

36.4.5 keyword

keywords 是页面关键词,是搜索引擎的关注点之一。 keywords 最好限制为 6~8 个关键词,关键词之间用英文逗号隔开,采用 关键词1,关键词2 的形式。

例如:<meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

36.5 快捷键

Ctrl + F:查找