何做好网页切图工作？web前端开发需要注意哪些问题事项？

接下来，IT工作室创始人王晴儿本人根据多年的互联网资深从业经验，跟大家谈谈这方面的经验和分享，希望对大家能有帮助。

降低网络成本

1.最大限度减少HTTP请求数。

2.控制网站流量，合并样式图片。

3.图片优化压缩处理，无损地减少图片体体积。

4.减少CSS文件的体积，合并css样式文件。

5.提高客户端渲染速度，尽量不使用占用过多CUP，占用过多内存的代码 如: text-indnt:-9999px 、IE滤镜等

6.减少HTML的嵌套，减少无语义代码。

Web内容可访问性 / 兼容性

1.电脑浏览器兼容性。

2.电脑分辨率兼容性。

3.其它屏幕阅读器兼容性。

4.语音浏览器兼容性。(暂时没有考虑,关注中,网易新闻有声版 做得不错)

5.需要的话打印机兼容性也考虑，要求能准确的打印到需要的信息。

HTML 相关规划管理

1.HTML内容的代码框架规划，把最重要主要的内容放在代码最前端。

2.合理地织与规划样式，适当的添加注释。

3.团队要有共识，使用共同的规范约定来编写代码。

4.根据产品需求，选择合适的方案，尽量做到代码效率最高，下载量最小， 最大限度重用代码。

5.HTML能通过验证之余要又语义.这是较为重要的一点。

Seo优化

1.依照web标准 使用最合理的标签，包含合理的内容。

2.把最重要内容放在代码前端，代码越前被搜索到的几率越高！

3.图片必须加上( alt )提示信息。

4.尽量做到样式图片所包含的文字，代码中也要出现。

5.给一个标签标明这是你的导航， 在没CSS样式支持下，别人并不知道那是你的导航， 哪些没明显标题的板块也应如此。

其它

在制作页面时应该先不考虑样式，安照页面内容重要程度用适当的HTML标签包含，按重要信息至上次要至下排序好，然后才使用CSS恢复设计图的样式，如当前代码没法按设计图还原时才再次添加HTML标签。

以上就是王晴儿整理和分享的文章内容，由于自己从事互联网设计开发已经八九个年头了，所以自然深知企业互联网营销开展的重要性。既然您来到这里，看完了我分享的文章，那就是一种缘分，也是一种说不出的缘分。如果说得不好之处，欢迎各位拍砖与指正，有任何互联网设计开发方面的问题，都可以与王晴儿一起交流探讨，虽然从业八年，但不忘初心，一直相信越努力越幸运这句话，而且我本人也喜欢结交各行各业的朋友，谢谢！

当然您觉得文章有价值、或关注分享感谢什么的，也顺手点个赞哈——以文章价值为桥梁，「点赞」：使「您的价值」得以延伸并持续留香……

分享来源：王晴儿网页设计博客 欢迎分享交流，如有什么问题欢迎一起探讨进步！

种反爬虫手段被广泛应用在一线互联网企业的产品中，例如汽车资讯类网站、小说类网站等文字密度较大的站点。在开始学习之前，我们先来看看具体的现象。打开网址：

https://implicit-style-css_0.crawler-lab.com
复制代码

呈现在我们眼前的是这样一个界面：

这次的任务，就是拿到页面上所呈现的内容的文本。在编写爬虫代码之前，我们要做几件事：

• 确定目标内容的来源，也就是找到响应目标内容的那次请求
• 确定目标内容在网页中的位置

其实就是最基本的观察和分析。

网络请求方面，打开浏览器调试工具并切换到 Network 面板后，看到页面只加载了 2 个资源：

一个 html 文档和一个 js 文件，想必我们要的内容就在 html 文档中。点击该请求，浏览器开发者工具就会分成两栏，左侧依然是请求记录列表，右侧显示的是指定请求的详情。右侧面板切换到 Response，就可以看到服务器响应的内容：

看样子，我们要的东西就在这次响应正文中。咋一看，我们直接取 class 为 rdtext 的 div 标签下的 p 标签中的文本内容即可。然而事情并没有那么简单，细心的读者可能发现了，响应正文中显示的内容和页面中呈现的文字并不完全相同——响应正文中少了一些标点符号和文字，多了一些 span 标签。例如页面中显示的是：

夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立，团队由爬虫领域中实力强劲的多名开发者组成：崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东。
复制代码

而响应正文中看到的是：

<p>夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>团队由爬虫领域中实力强劲<span class="context_kw1"></span>多<span class="context_kw21"></span>开发者组成：崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东<span class="context_kw2"></span>
</p>
复制代码

这句话中，被 span 标签替代的有逗号、的字、名字。整体看一遍，发现这些 span 标签都带有 class 属性。

明眼人一看就知道，又是利用了浏览器渲染原理做的反爬虫措施。不明所以的读者请去翻阅《Python3 反爬虫原理与绕过实战》。

既然跟 span 和 class 有关，那我们来看一下 class 属性到底设置了什么。class 名为 context_kw0 的 span 标签样式如下：

.context_kw0::before {
    content: "，";
}
复制代码

再看看其他的，class 属性为 context_kw21 的 span 标签样式如下：

.context_kw21::before {
    content: "名";
}
复制代码

原来被替换掉的文字出现在这里！看到这里，想必聪明的你也知道是怎么回事了！

解决这个问题的办法很简单，只需要提取出 span 标签 class 属性名称对应的 content 值，然后将其恢复到文本中即可。

属性名有个规律：context_kw + 数字。也就是说 context_kw 有可能是固定的，数字是循环出来的，或者是数组中的下标？大胆猜想一下，假设有这么一个字典：

{0: "，", 1: "的",  21: "名"}
复制代码

那么将 context_kw 与字典的键组合，就得到了 class 的名称，对应的值就作为 content，这好像很接近了。中高级爬虫工程师心中都明白：在网页中，能干出如此之事唯有借助 JavaScript。不明白的读者请去翻阅《Python3 反爬虫原理与绕过实战》。

那就搜一下吧！

唤起浏览器调试工具的全局搜索功能，输入 context_kw 并会车。然后在搜索结果中寻找看上去有用的信息，例如：

发现 JavaScript 代码中出现了 context_kw，关键的信息是 .context_kw + i + _0xea12('0x2c')。代码还混淆了一下！看不出的读者可以找作者韦世东报名《JavaScript 逆向系列课》，学完就能够很快找到看上去有用的代码，并且看懂代码的逻辑。

这里手把手带读一下这些 JavaScript 代码。第一段，也就是 977 行代码原文如下：

var _0xa12e=['appendChild', 'fromCharCode', 'ifLSL', 'undefined', 'mPDrG', 'DWwdv', 'styleSheets', 'addRule', '::before', '.context_kw', '::before{content:\x20\x22', 'cssRules', 'pad', 'clamp', 'sigBytes', 'YEawH', 'yUSXm', 'PwMPi', 'pLCFG', 'ErKUI', 'OtZki', 'prototype', 'endWith', 'test', '8RHz0u9wbbrXYJjUcstWoRU1SmEIvQZQJtdHeU9/KpK/nBtFWIzLveG63e81APFLLiBBbevCCbRPdingQfzOAFPNPBw4UJCsqrDmVXFe6+LK2CSp26aUL4S+AgWjtrByjZqnYm9H3XEWW+gLx763OGfifuNUB8AgXB7/pnNTwoLjeKDrLKzomC+pXHMGYgQJegLVezvshTGgyVrDXfw4eGSVDa3c/FpDtban34QpS3I=', 'enc', 'Latin1', 'parse', 'window', 'location', 'href', '146385F634C9CB00', 'decrypt', 'ZeroPadding', 'toString', 'split', 'length', 'style', 'type', 'setAttribute', 'async', 'getElementsByTagName', 'NOyra', 'fgQCW', 'nCjZv', 'parentNode', 'insertBefore', 'head'];
        (function (_0x4db306, _0x3b5c31) {
            var _0x24d797=function (_0x1ebd20) {
                while (--_0x1ebd20) {
                    _0x4db306['push'](_0x4db306['shift']());
                }
            };
复制代码

往下延伸阅读，还能看到 CryptoJS 这个词，看到它就应该晓得代码中使用了一些加密解密的操作。

第二段，1133 行代码原文如下：

for (var i=0x0; i < words[_0xea12('0x18')]; i++) {
            try {
                document[_0xea12('0x2a')][0x0][_0xea12('0x2b')]('.context_kw' + i + _0xea12('0x2c'), 'content:\x20\x22' + words[i] + '\x22');
            } catch (_0x527f83) {
                document['styleSheets'][0x0]['insertRule'](_0xea12('0x2d') + i + _0xea12('0x2e') + words[i] + '\x22}', document[_0xea12('0x2a')][0x0][_0xea12('0x2f')][_0xea12('0x18')]);
            }
        }
复制代码

这里循环的是 words，然后将 words 元素的下标和对应元素组合，这和我们猜想的是非常接近的，现在要找到 words。

怎么找？

又不会吗？

搜索就可以了，顺着搜索结果看，找到了定义 words 的代码：

var secWords=decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words=new Array(secWords[_0xea12('0x18')]);
复制代码

按照这个方法，我们最后发现 CSS 的 content 的内容都是数组 _0xa12e 中一个经过加密的元素先经过 AES 解密再经过一定处理后得到的值。

捋清楚逻辑之后，就可以开始抠出我们需要的 JS 代码了。

这个代码虽然经过混淆，但还是比较简单的，所以具体的抠代码步骤就不演示了，这里提示一下在抠出代码之后两个需要改写的点。

第一个是下图中的异常捕获，这里判断了当前的 URL 是否为原网站的，但调试时，在 Node 环境下执行是没有 window 对象、document 对象的，如果不做修改会出现异常，所以需要把带有这些对象的代码注释掉，例如下面 if 判断语句：

try {
	if (top[_0xea12('0x10')][_0xea12('0x11')][_0xea12('0x12')] !=window[_0xea12('0x11')]['href']) {
	top['window'][_0xea12('0x11')]['href']=window[_0xea12('0x11')][_0xea12('0x12')];
}
复制代码

其他的地方还需要自己踩坑。

修改完后就可以获取到所有被替换过的字符了，接下来只需要把它们替换进 HTML 里就可以还原出正常的页面，replace 就不演示了噢。

反爬虫原理

例子中用到的是 ::before，下方文字描述了它的作用：

在 CSS 中，::before 用于创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。

引用自：developer.mozilla.org/zh-CN/docs/…

举个例子，新建一个 HTML 文档，并在里面写上如下内容：

<q>大家好，我是咸鱼</q>，<q>我是 程序员中的一员</q>
复制代码

然后为 q 标签设置样式：

q::before { 
  content: "?";
  color: blue;
}
q::after { 
  content: "?";
  color: red;
}
复制代码

完整代码如下（写给没有 HTML 基础的朋友）：

<style>

q::before { 
  content: "?";
  color: blue;
}
q::after { 
  content: "?";
  color: red;
}

</style>
<q>大家好，我是咸鱼</q>，<q>我是 程序员中的一员</q>
复制代码

我们在样式中，为 q 标签加上了 ::before 和 ::after 属性，并设置了 content 和对应的颜色。于是乎，在被q 标签包裹着的内容前会出现蓝色的 《 符号，而后面会出现红色的 》 符号。

简单易懂吧！

小结

本文简单介绍了隐式 Style–CSS 在反爬虫中的应用，并通过一个简单的实例学习了如何应对这种情况，相信尝试过的你已经清楚地知道下次碰到这种反爬的时候该如何破解了。

当然呢，这个例子还不够完善，没有完全覆盖到隐式 Style–CSS 在反爬虫中的所有应用方式，如果读者朋友对这类反爬虫有兴趣的话，不妨多找几个例子自己动手试试，也欢迎通过留言区与我交流讨论。

最后，小编想说：我是一名python开发工程师，

整理了一套最新的python系统学习教程，

想要这些资料的可以关注私信小编“01”即可（免费分享哦）希望能对你有所帮助

通过使用文档对象模型DOM，可以将HTML文件当做文档对象，并按照文档对象处理方法进行处理。主要处理形式包括设置HTML标记文本内容、设置元素属性值及对Style样式进行操作等。本文主要介绍使用文档对象模型DOM所提供的Element、HTMLElement等实现对元素Style样式进行快速设置。

DOM标准

DOM（Document Object Model）文档对象模型是W3C提出的技术规范，该规范与浏览器、平台、语言无关。HTML DOM是指适用于HTML的文档对象模型。因此在JavaScript中我们所认识的DOM应当可以理解为HTML DOM。DOM标准相关对象关系描述如下图所示：

在DOM标准对象描述中可以看出所有的对象都继承于Node对象，Node对象是DOM文档对象模型的核心。在JavaScript文档对象模型中，Document对象、Element对象等都继承于Node对象，而HTMLDocument对象与HTMLElement对象等又分别继承于Document对象与Element对象。

Element对象提供了HTML页面中所有的元素方法与属性。我们可以借助HTMLElement对象实现对HTML页面元素进行操作与属性值读写等。

HTMLElement设置CSS样式

HTMLElement对象继承自Element对象，因此具有其父类的基本属性与方法。在Element对象主要提供style属性与setAttribute()方法实现对元素样式属性及属性值进行设置。两种方法描述如下：

1、style属性

style属性是HTMLElement继承自父类Element的基本属性之一，主要用于对HTML样式属性进行设置或者样式属性值的读取。在进行样式属性值设置过程中可以分为两种方式进行设置。第一种为设置单个特定style样式，如设置background-color属性值，我们可直接使用如下方法进行设置：

HTMLElement.style.property=value;

第二种设置方法是同时对某个元素全部style样式进行重新设置，这种情况下我们使用style.cssText属性进行整体属性设置，设置语法描述如下：

HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

2、setAttribute()方法设置CSS

setAttribute()方法也是Element对象的基本方法之一，主要用于设置指定元素的指定属性值。如该属性值存在则更新属性值。在HTMLElement对象中我们可以直接使用setAttribute方法进行style属性的值的设置。其基本语法描述如下：

HTMLElement.setAttribute(name,value);

动态CSS样式设置实例

本例主要设置实现在鼠标经过某一个DIV时，动态改变该DIV层的style样式属性，主要改变属性包括背景颜色、字体大小及光标形状等。设计原始DIV样式效果如下图：

该案例原始CSS样式实现代码描述如下图所示：

按照实例要求我们为div层添加鼠标over事件，并编写事件处理函数用于响应鼠标处理，具体处理需要实现style样式变化要求。对该div添加onmouseover事件，响应函数名称为changeStyle()。代码描述如下：

在该事件处理函数中我们传递了用于标识当前元素的this参数，函数在接收到该参数后能够直接定位与当前div，并进行下一步处理。changeStyle方法描述如下：

事件处理方法1使用style.cssText方法进行了CSS样式的动态设置，使用setAttribure方法进行样式设置代码如下：

通过编写以上代码可以实现鼠标经过DIV时，style样式中的背景颜色、文字大小及光标样式的动态变化，变化之后效果描述如下图：

以上给出了Element、HTMLElement及DOM基本概念说明，并对HTMLElement对象style属性与setAttribute方法在CSS样式改变中的应用进行了语法说明与实例分析。如需完整代码关注并私信。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：

前端设计-JavaScript实现复选框的分组单选

本文由kid编程原创，欢迎关注，带你一起长知识！