整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
浏览器访问网站时，页面各不相同，你有没有想过它为何会呈现这个样子呢？本节中，我们就来了解一下网页的基本组成、结构和节点等内容。
网页可以分为三大部分——HTML、CSS和JavaScript。如果把网页比作一个人的话，HTML相当于骨架，JavaScript相当于肌肉，CSS相当于皮肤，三者结合起来才能形成一个完善的网页。下面我们分别来介绍一下这三部分的功能。
1. HTML
HTML是用来描述网页的一种语言，其全称叫作Hyper Text Markup Language，即超文本标记语言。网页包括文字、按钮、图片和视频等各种复杂的元素，其基础架构就是HTML。不同类型的文字通过不同类型的标签来表示，如图片用img标签表示，视频用video标签表示，段落用p标签表示，它们之间的布局又常通过布局标签div嵌套组合而成，各种标签通过不同的排列和嵌套才形成了网页的框架。
在Chrome浏览器中打开百度，右击并选择“检查”项（或按F12键），打开开发者模式，这时在Elements选项卡中即可看到网页的源代码，如图2-9所示。
图2-9 源代码
这就是HTML，整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系，就形成了网页的架构。
2.CSS
HTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简单的节点元素的排列，为了让网页看起来更好看一些，这里借助了CSS。
CSS，全称叫作Cascading Style Sheets，即层叠样式表。“层叠”是指当在HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
CSS是目前唯一的网页页面排版样式标准，有了它的帮助，页面才会变得更为美观。
图2-9的右侧即为CSS
就是一个CSS样式。大括号前面是一个CSS选择器，此选择器的意思是首先选中id为head_wrapper且class为s-ps-islite的节点，然后再选中其内部的class为s-p-top的节点。大括号内部写的就是一条条样式规则，例如position指定了这个元素的布局方式为绝对布局，bottom指定元素的下边距为40像素，width指定了宽度为100%占满父元素，height则指定了元素的高度。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS选择器，这就代表这个样式对CSS选择器选中的元素生效，元素就会根据此样式来展示了。
在网页中，一般会统一定义整个网页的样式规则，并写入CSS文件中（其后缀为css）。在HTML中，只需要用link标签即可引入写好的CSS文件，这样整个页面就会变得美观、优雅。
3. JavaScript
JavaScript，简称JS，是一种脚本语言。HTML和CSS配合使用，提供给用户的只是一种静态信息，缺乏交互性。我们在网页里可能会看到一些交互和动画效果，如下载进度条、提示框、轮播图等，这通常就是JavaScript的功劳。它的出现使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。
JavaScript通常也是以单独的文件形式加载的，后缀为js，在HTML中通过script标签即可引入，例如：
<script src="jquery-2.1.0.js"></script>综上所述，HTML定义了网页的内容和结构，CSS描述了网页的布局，JavaScript定义了网页的行为。
我们首先用例子来感受一下HTML的基本结构。新建一个文本文件，名称可以自取，后缀为html，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h2 class="title">Hello World</h2>
<p class="text">Hello, this is a paragraph.</p>
</div>
</div>
</body>
</html>这就是一个最简单的HTML实例。开头用DOCTYPE定义了文档类型，其次最外层是html标签，最后还有对应的结束标签来表示闭合，其内部是head标签和body标签，分别代表网页头和网页体，它们也需要结束标签。head标签内定义了一些页面的配置和引用，如：
<meta charset="UTF-8">它指定了网页的编码为UTF-8。
title标签则定义了网页的标题，会显示在网页的选项卡中，不会显示在正文中。body标签内则是在网页正文中显示的内容。div标签定义了网页中的区块，它的id是container，这是一个非常常用的属性，且id的内容在网页中是唯一的，我们可以通过它来获取这个区块。然后在此区块内又有一个div标签，它的class为wrapper，这也是一个非常常用的属性，经常与CSS配合使用来设定样式。然后此区块内部又有一个h2标签，这代表一个二级标题。另外，还有一个p标签，这代表一个段落。在这两者中直接写入相应的内容即可在网页中呈现出来，它们也有各自的class属性。
将代码保存后，在浏览器中打开该文件，可以看到如图2-10所示的内容。
图2-10 运行结果
可以看到，在选项卡上显示了This is a Demo字样，这是我们在head中的title里定义的文字。而网页正文是body标签内部定义的各个元素生成的，可以看到这里显示了二级标题和段落。
这个实例便是网页的一般结构。一个网页的标准形式是html标签内嵌套head和body标签，head内定义网页的配置和引用，body内定义网页的正文。
在HTML中，所有标签定义的内容都是节点，它们构成了一个HTML DOM树。
我们先看下什么是DOM，DOM是W3C（万维网联盟）的标准，其英文全称Document Object Model，即文档对象模型。它定义了访问HTML和XML文档的标准：
W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM标准被分为3个不同的部分。
l 核心DOM： 针对任何结构化文档的标准模型。
l XML DOM：针对XML文档的标准模型。
l HTML DOM：针对HTML文档的标准模型。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。
l 整个文档是一个文档节点；
l 每个HTML元素是元素节点；
l HTML元素内的文本是文本节点；
l 每个HTML属性是属性节点；
注释是注释节点。
HTML DOM将HTML文档视作树结构，这种结构被称为节点树，如图2-11所示。
图2-11 节点树
通过HTML DOM，树中的所有节点均可通过JavaScript访问，所有HTML节点元素均可被修改，也可以被创建或删除。
节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。
在节点树中，顶端节点称为根（root）。除了根节点之外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。图2-12展示了节点树以及节点之间的关系。
图2-12 节点树及节点间的关系
本段参考W3SCHOOL，链接：http://www.w3school.com.cn/htmldom/dom_nodes.asp。
我们知道网页由一个个节点组成，CSS选择器会根据不同的节点设置不同的样式规则，那么怎样来定位节点呢？
在CSS中，我们使用CSS选择器来定位节点。例如，上例中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是根据id、class、标签名筛选，请牢记它们的写法。
另外，CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。
另外，CSS选择器还有一些其他语法规则，具体如表2-4所示。
表2-4 CSS选择器的其他语法规则
另外，还有一种比较常用的选择器是XPath，这种选择方式后面会详细介绍。
本节介绍了网页的基本结构和节点间的关系，了解了这些内容，我们才有更加清晰的思路去解析和提取网页内容。
一、vs code 的常用快捷键
1、注释：
a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/
b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)
c) 多行注释：[alt+shift+A]
d) 多行注释：/**
2、移动行：alt+up/down
3、显示/隐藏左侧目录栏 ctrl + b
4、复制当前行：shift + alt +up/down
5、删除当前行：shift + ctrl + k
6、控制台终端显示与隐藏：ctrl + ~
7、查找文件/安装vs code 插件地址：ctrl + p
8、代码格式化：shift + alt +f
9、新建一个窗口 : ctrl + shift + n
10、行增加缩进: ctrl + [
11、行减少缩进: ctrl + ]
12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x
13、字体放大/缩小: ctrl + ( + 或 - )
14、拆分编辑器 : ctrl + 1/2/3
15、切换窗口 : ctrl + shift + left/right
16、关闭编辑器窗口 : ctrl + w
17、关闭所有窗口 : ctrl + k + w
18、切换全屏 : F11
19、自动换行 : alt + z
20、显示git : ctrl + shift + g
21、全局查找文件：ctrl + shift + f
22、显示相关插件的命令(如：git log)：ctrl + shift + p
23、选中文字：shift + left / right / up / down
24、折叠代码： ctrl + k + 0-9 (0是完全折叠)
25、展开代码： ctrl + k + j (完全展开代码)
26、删除行 ： ctrl + shift + k
27、快速切换主题：ctrl + k / ctrl + t
28、快速回到顶部 ： ctrl + home
29、快速回到底部 : ctrl + end
30、格式化选定代码 ：ctrl + k / ctrl +f
31、选中代码 ： shift + 鼠标左键
32、多行同时添加内容（光标） ：ctrl + alt + up/down
33、全局替换：ctrl + shift + h
34、当前文件替换：ctrl + h
35、打开最近打开的文件：ctrl + r
36、打开新的命令窗：ctrl + shift + c
二、vs code 的常用插件
1、Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。
2、Auto Close Tag 自动闭合HTML标签
4、Beautiful 格式化代码的工具
5、Dash Dash是MacOS的API文档浏览器和代码段管理器
6、Ejs Snippets ejs 代码提示
7、ESLint 检查javascript语法错误与提示
8、File Navigator 快速查找文件
9、Git History(git log) 查看git log
10、Gulp Snippets 写gulp时用到，gulp语法提示。
11、HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式
12、HTML Snippets 超级好用且初级的H5代码片段以及提示
13、Debug for Chrome 让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点
14、Document this Js的注释模板
15、jQuery Code Snippets jquery提示工具
16、Html2jade html模板转pug模板
17、JS-CSS-HTML Formatter 格式化
18、Npm intellisense require 时的包提示工具
19、Open in browser 打开默认浏览器
20、One Dark Theme 一个vs code的主题
21、Path Intellisense 自动路径补全、默认不带这个功能
22、Project Manager 多个项目之间快速切换的工具
23、Pug(Jade) snippets pug语法提示
24、React Components 根据文件名创建反应组件代码。
25、React Native Tools reactNative工具类为React Native项目提供了开发环境。
26、Stylelint css/sass代码审查
27、Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的
28、View In Browser 默认浏览器查看HTML文件（快捷键Ctrl+F1可以修改）
29、Vscode-icons 让vscode资源目录加上图标、必备
30、VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）
31、Vue 2 Snippets vue必备vue代码提示
32、Vue-color vue语法高亮主题
33、Auto-Open Markdown Preview markdown文件自动开启预览
34、EverMonkey 印象笔记
35、atom one dark atom的一个高亮主题(个人推荐)
三、常用的电脑快捷键
1、ctrl + shift + delete 快速清除浏览器缓存
2、ctrl + alt + delete 快速进入任务管理器页面
3、window + L 快速锁定电脑
4、window + d 所有窗口最小化
5、 window + e 打开我的资源管理器(我的电脑)
6、 window + f 快速打开搜索窗口
7、 alt + tab 快速查看打开的应用与窗口
数字程序代码
TML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用于描述网页的结构和内容。HTML标签通常由尖括号包围，例如<tag>。
HTML标签可以分为两类：块级元素和内联元素。块级元素用于组织网页的结构，例如段落、标题、列表等。内联元素用于标记文本中的特定部分，例如链接、强调文本等。
HTML标签可以包含属性，属性提供了有关标签的额外信息。例如，<a>标签用于创建链接，可以使用href属性指定链接的目标URL。
除了标签和属性，HTML还支持一些特殊字符实体，用于表示特殊字符，例如小于号（<）、大于号（>）等。
HTML可以与CSS（层叠样式表）和JavaScript一起使用，以增强网页的外观和功能。CSS用于控制网页的样式，例如颜色、字体、布局等。JavaScript用于实现交互性和动态效果，例如表单验证、动画等。
通过使用HTML，开发人员可以创建具有结构良好、易于理解和导航的网页。它是构建互联网的基础之一，被广泛应用于网站开发和内容管理系统。
HTML的语法由标签、属性和内容组成。下面是HTML的基本语法规则：
下面是一个简单的HTML示例：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>
在这个示例中，<!DOCTYPE html>声明了文档类型为HTML5。<html>标签是HTML文档的根元素。<head>标签用于定义文档的头部信息，例如标题和样式表。<title>标签定义了网页的标题，将显示在浏览器的标题栏中。<body>标签用于定义文档的主体内容。<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<a>标签定义了一个链接。
*请认真填写需求信息，我们会在24小时内与您取得联系。
