网页css js 抓取助手(一下前端的基础知识视频和学习路线，对比认识一下各个框架)

　　网页css js 抓取助手(一下前端的基础知识视频和学习路线，对比认识一下各个框架)

　　很多朋友听到前端技术都会觉得有些陌生。但实际上，前端，你每天都在联系。

　　你使用的APP，你浏览的网页，你能看到的界面，都属于前端。

　　最重要的三种前端技术 HTML、CSS 和 JavaScript 是每个前端开发人员必须具备的技能。

　　有了这些技巧，你可以快速打造出炫酷的APP界面或者简洁大方的网站页面。那么，让我们一起快速浏览一下这三种技术。

　　实验介绍

　　本实验主要介绍前端的基础知识，对比了解各个框架的代码编写方法，介绍我们本次技术选型的主要思路。对于HTML、CSS、JavaScript这三种前端技术，简单介绍一下基本情况和常用语法。中间介绍了现代框架的一些情况，通过实际案例，我们可以用代码直观的了解各种框架的实现方式。最后，分析项目的技术选型。

　　知识点

　　HTML、CSS、JavaScript 快速概览

　　前端框架概述和选择

　　后端选择

　　数据库选择

　　网络服务器选择

　　前端技术介绍

　　本节我们简单介绍一下最基本的前端HTML、CSS、JavaScript三驾马车。虽然本课程的预设读者都是零基础的开发者，但是前端开发对这三种技术的使用肯定是有要求的。建议花时间研究一下《Web前端工程师之路》的stage 1甚至stage 2。这只是语法介绍和基本用法的概述。

　　在前端领域工作了几年，总结了一套前端学习的强化视频和学习路线。如果你有对前端开发感兴趣的伙伴，无论你是想转行，还是想当大学生，还是想在工作中提升自己 有能力的web前端党，欢迎大家加入我的前端开发交流群：603985993 希望大家真诚交流！，与企业的需求同步。小伙伴们都在里面学习交流，每天都会有大牛定时讲解前端技术！也可以关注我的微信公众号：【前端*敏*感*词*】每天更新最新科技文章干货。

　　在此之前，先了解一下实验环境。实验环境与VS Code体验基本一致。您可以启动终端并在其中输入 Linux 命令。

　　

　　以下无特殊说明的命令均在此终端命令行中输入。大多数命令可以通过打开多个终端窗口来单独执行。

　　因此，让我们快速浏览一下。

　　HTML

　　HTML 代表超文本标记语言，自万维网和浏览器出现以来就一直存在。主要用于结构化信息，方便浏览器显示。

　　以标签对为主要特征，如

　　这是一个段落，这些标签会被浏览器解析成不同的模块。例如，p 标签是段落，img 标签是图像，a 标签是超链接。标签名称不区分大小写。

　　现在就试试。首先通过命令行创建一个demo目录：

　　mkdir demo

　　然后从命令行进入demo目录：

　　cd ./demo

　　新建一个hello.html文件，可以在实验环境左侧的浏览器框中右键demo，选择New File，命名为hello.html；也可以在命令行终端输入touch hello.html，同样是新建文件。

　　在其中输入以下内容：

　　

标题

正文

　　然后右键单击该文件并选择打开方式 → 预览。

　　

　　看见？其实我们只是新建了一个.html后缀的文本文件，然后浏览器就可以显示里面的内容了。也可以在桌面新建一个，用浏览器打开看看效果。

　　这里嵌套代码的缩进是为了美观和可读性，并不是严格要求的。

　　head标签收录一些暂时不需要的header信息，渲染的主体是body标签。下面我们修改body标签中的内容，填写一些常用的标签，直观感受一下。

　　

页面标题

一个块容器

又一个块容器

这里是段落了，间距变大

一个块容器

多层嵌套：

内部第一个

内部第二个

　　保存后，切换到浏览选项卡查看。你觉得被愚弄了吗？嵌套完全没有体现出来，就像Word中的布局一样，按回车几次。

　　

　　由于我们没有修改显示样式，这是 CSS 的事情。HTML主要管理内容的组织结构。

　　这里有一点学习建议。请手动输入本课程给出的所有代码，忘记复制和粘贴快捷键。

　　而且最好不要一个字一个地生搬硬套，尽量读一行或者一小段代码，靠短期印象输出，不怕出错，只有思考和输出实践是掌握技能捷径的最快方法。

　　以上两句话是本课程最有价值的内容之一。

　　接下来我们对刚才的代码进行修改，在body中添加几个常用的标签。每次修改保存后记得去预览页面查看样式变化。

　　4 级标题

　　

HTML

CSS

JavaScript

　　

点击超链接跳转

　　

　　最后一个链接标签a和图片标签img都有标签属性，格式为attr="value"，可以给标签添加更丰富的信息。

　　同时img标签还是单标签，以后不需要添加使用。

　　我们对 HTML 的简要介绍到此结束。

　　网上看到的各种五颜六色的网页都是由这个HTML组成的，但为什么我们写得这么难看呢？在下一节中，我们将学习如何使用 CSS 美化页面。

　　CSS

　　CSS 代表 Cascading Style Sheets，它是一种专门用于修改 HTML 样式的语言。让我们修改上一节中的 hello.html 文件，以获得直观的感觉。

　　内部代码块介绍

　　在 head 标签内添加以下样式块：

　　

标题

div {

border: 1px solid blue;

padding: 2px;

margin: 10px;

}

　　这是再次切换到预览页面，发现并没有那么简单。

　　

　　这是引入 CSS 的第一种方式，HTML 内置代码块。

　　花括号*敏*感*词*。

　　阅读代码你可能知道，我们将 div 的边框设置为 1 像素宽、实心（单线）、蓝色、内边距（padding）2 像素、边距（margins）10 像素。现在练习调整单个数字并预览发生了什么？

　　题外话，程序员懂一些英语是非常有必要的。除了能够阅读和理解没有通过感觉学习的代码之外，还可以为 Google、Stack Overflow 和 Github Issues 编程。

　　导入外部文件

　　然后我们再次尝试导入外部文件，在hello.html的同级目录下新建一个hello.css，输入以下内容保存：

　　div {

color: green;

border: 2px dotted red;

}

　　然后修改hello.html，在style标签后面加一行link标签，加上导入类型和地址：

　　

div {

border: 1px solid blue;

padding: 2px;

margin: 10px;

}

　　看一下预览，文字颜色变成了绿色，边框样式更新为2像素宽，点红色。

　　同样是div选择器，为什么会覆盖边框样式？注意CSS会在相同条件下覆盖前面的代码，可以尝试交换链接标签和样式标签块的顺序来查看。

　　联运风格

　　最后一种叫做interline style，结构比较简单。修改 hello.html 中

　　第一个内部是

　　内部第一个

　　

　　样式会覆盖前两种方法，因为行间样式具有更高的优先级。此处涉及选择器权重。我们先来了解一个简单的公式。

　　!important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 > 继承 | 通配符。

　　应用多个选择器时添加权重。这是CSS中比较复杂的部分，暂时不展开。

　　这里还有一个小知识点。内外边距和内边距接受的完整值是四，顺序固定为“右上左下”。如果省略参数，则从末尾计算相反的合并。例如：

　　边距：40px 20px 50px；三个参数时，左右都是20px。

　　边距：40px 20px；这两个参数都是上下40px，左右20px。

　　边距如何：40px；作为参数？请尝试自己理解。

　　CSS 首先讲了这么多。虽然没有让我们的页面更​​漂亮，但至少我们知道自己努力的方向。

　　JavaScript

　　快速入门 JavaScript 可能会非常伤脑筋。与前两种技术 HTML 和 CSS 相比，这是一种真正的编程语言。

　　它也是我们后面会用到的 Vue.js 和 Node.js 的基础。很难一下子讲很多，所以希望同学们能够重视，系统地学习，至少在阅读下面的代码的时候是什么，这是什么，这是什么“困境”。

　　让我们直观的理解代码，还是先介绍一下内部代码块。

　　在 hello.html 的 head 标签内添加一段代码：

　　

let message = "字符串提示";

function showMSG(msg) {

alert(msg);

}

　　修改hello.html的h1标签为：

　　页面标题

　　保存预览，点击“页面标题”，会弹出提示框。

　　

　　JavaScript 代码在加载后执行，没有编译阶段。大多数情况下，行尾的分号可以省略。

　　我们首先定义了一个变量 message 并将其指定为“字符串提示符”。定义变量的关键字原本是 var。ES6 中的新关键字 let 范围更清晰，可以替代使用。

　　学习 JavaScript 经常会遇到像 ES6、ES7 这样的术语，其实就是 ECMAScript 标准的版本号。可以简单理解为新版标准为 JavaScript 增加了特定的新特性。

　　然后我们定义一个函数 showMSG 并添加一个形参 msg。调用函数体内部的浏览器弹窗方法，显示msg的值。function 是定义函数的关键字。暂时将其视为一个功能封闭的盒子。当函数被调用时，函数体中的代码被执行。

　　调用部分是先给h1标签添加onclick点击事件，点击时触发showMSG(message)，也就是将消息传递给msg。

　　然后尝试再次调用外部js文件，新建demo.js文件，写入如下内容并保存。

　　message = "修改一下字符串";

　　然后修改hello.html文件，在脚本块后面添加一行：

　　

　　这次保存预览，点击“页面标题”，可以看到弹窗的文字发生了变化。这说明页面上可以同时存在多个脚本代码块，而且它们也是顺序调用的，可以直接相互访问。对文件命名没有要求，希望不会扼杀强迫症。

　　JavaScript 是网页可以进行如此多交互的来源。要走的路还很长。这三种前端技术先在这里学习