下载掌阅APP，畅读海量书库
立即打开
续表
超文本标记语言（hypertext markup language，HTML），是用来描述网页的语言。可使用HTML中各种标签搭建网页骨架，网页包括文字、按钮、图片和视频等各种复杂的元素，不同的标签具有相应的功能。HTML元素的组成如图2-9所示。
图2-9 HTML元素的组成
在图2-9中，开始标签、内容、结束标签组合在一起便构成了一个完整的HTML元素，开始标签用于标识元素的起始位置，由尖角括号包裹元素名称，如图2-9中的<p>。结束标签用于标识元素的结束位置，与开始标签相似，只不过在元素名称之前多了一个/，如图2-9中的</p>。内容则表示元素的内容，位于开始标签和结束标签之间，如图2-9中的“同心共筑中国梦”。
HTML提供了很多标签，常用的标签如图2-10所示。
图2-10 常用的标签
网页的基本结构如图2-11所示，分为声明、页头和页身。
图2-11 网页的基本结构
（1）头部：描述浏览器所需要的信息，如页面标题、关键词、说明等内容；头部包含的信息不会作为网页的内容显示，但是会影响网页的显示效果。头部信息的开始和结尾分别由<head>和</head>两个标签标记，<title>、<base>、<link>、<meta>、<script>以及<style>标签可以添加到头部信息中，标签的功能见表2-6。
表2-6 头部信息标签功能
（2）主体：网页需要显示的实际内容包含在主体之中，分别由<body>和</body>表示主体信息的开始和结尾。对于网络爬虫抓取的Web页面而言，其被关注的信息内容也都大部分封装在<body>和</body>之间。
（3）节点树及节点之间的关系：根据万维网联盟（world wide web consortium，W3C）的HTML DOM标准，HTML DOM由节点组成，HTML文档的所有内容都是节点，整个HTML文档是一个文档节点，每个HTML元素是元素节点，每个HTML属性是属性节点，每个注释是注释节点。
把一个HTML文档中的所有节点组织在一起，就构成一棵HTML DOM树，HTML DOM节点树如图2-12所示。这些节点之间存在层级关系，常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点称为兄弟节点。在节点树中，顶端的节点称为根（root）节点，除了根节点之外，每个节点都有父节点；一个节点可拥有任意数量的子节点或兄弟节点；兄弟节点是拥有相同父节点的节点。
图2-12 HTML DOM节点树
层叠样式表（cascading style sheets，CSS）用来控制网页外观，“层叠”是指当在HTML中引入多个样式文件，并且样式之间发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字的大小、颜色、元素间距、排列格式等。
页面引入CSS一共有3种方式，分别为外部样式表、内部样式表和行内样式表。外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般使用外部样式表。例如，<link rel＝"stylesheet"type＝"text/css"href＝"文件路径"/>。内部样式表指的是，把HTML代码和CSS代码放到同一个HTML文件中，代码格式如下。
行内样式表与内部样式表类似，也把HTML代码和CSS代码放到同一个HTML文件中。但是内部样式表的CSS是在<style>标签内定义的，而行内样式表的CSS是在标签的style属性中定义的。
CSS选择器的功能是把所想需的元素选中，操作这些元素的CSS样式。选择器的类型有很多，常用的有元素选择器、id选择器、class选择器、后代选择器、群组选择器。CSS选择器的代码格式如下。
（1）元素选择器：选中相同的元素，然后为相同的元素定义一个CSS样式。
（2）id选择器：为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，同一个页面中，不允许出现两个相同的id。
（3）class选择器：即类选择器，可以为相同的元素或者不同的元素定义相同的class属性，然后针对拥有同一个class属性的元素进行CSS样式操作。（4）后代选择器：用来选择元素或元素组的所有后代元素。（5）群组选择器：用于同时对几个选择器进行相同的操作。
CSS常见的属性有字体属性、文本属性、背景属性、边框属性等。
1）字体属性
（1）font－family：定义字体类型，默认为宋体。
（2）font－size：定义字体大小，一般使用px作为单位，如20px。
（3）font－weight：定义字体粗细。取值方式有两种，一种是使用名称，如normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细）；另一种是使用数字，如100、400、700、900等，其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。
（4）color：定义字体颜色。取值有两种，一种是关键字；另一种是16进制RGB值。例如，color：white或者color：#FFFFFF。
2）文本属性
（1）text－indent：定义首行缩进，一般使用px作为单位。
（2）text－align：定义文本在水平方向上的对齐方式，其取值有三种，分别为left（左对齐，默认值）、center（居中对齐）、right（右对齐）。
（3）text－decoration：定义文本的修饰效果，其取值有四种，分别为none（默认值）、underline（下画线）、line－through（中划线）、overline（顶划线）。
（4）line－height：定义行高，一般使用px作为单位。
（5）text－transform：将文本进行大小写转换，其取值有四种，分别为none（默认值）、uppercase（转换为大写）、lowercase（转换为小写）、capitalize（只将每个英文单词的首字母转换为大写）。
（6）letter－spacing：定义字符间距，一般使用px作为单位。
3）背景属性
（1）background－color：定义元素的背景颜色。取值参照color属性值。
（2）background－image：为元素定义背景图片，语法为background－image：URL（图片路径）。
（3）background－repeat：定义背景图片的重复方式，其取值有四种，分别为repeat（在水平方向和垂直方向上同时平铺，默认值）、repeat－x（只在水平方向上平铺）、repeat－y（只在垂直方向上平铺）、no－repeat（不平铺）。
（4）background－position：定义背景图片的位置。其常用的取值有两种：一种是像素值，当background－position属性取值为像素值时，要同时设置水平方向和垂直方向上的数值。例如，background－position：12px 24px；表示背景图片在水平方向上距离该元素左上角12px，垂直方向上距离24px。另一种是关键字，在水平方向上可以取left、center、right；在垂直方向上可以取top、center、bottom。
（5）background－attachment：定义背景图片是随元素一起滚动还是固定不动，其取值有两种，分别为scroll（随元素一起滚动，默认值）、fixed（固定不动）。
4）边框属性
定义一个元素的边框样式时需要设置边框的宽度、边框的外观和边框的颜色。例如，border：1px solid red。
JavaScript就是我们通常所说的JS，用来控制网页的行为。这是一种嵌入HTML页面中的编程语言，由浏览器一边解释一边执行。例如，图片轮播、二级导航、进度条等。
（1）内部JavaScript。内部JavaScript指的是，将HTML代码和JavaScript代码放在同一个文件中，其中JavaScript代码放在<script></script>标签对内，格式如下。
（2）外部JavaScript。实际开发中，为了提升网站的性能和可维护性，一般使用外部JavaScript。外部JavaScript指的是，把HTML代码和JavaScript代码单独放在不同文件中，然后在HTML文档中使用<script>标签来引入JavaScript代码。外部JavaScript的引入格式如下。
1）变量
在JavaScript中，变量指的是值可以改变的量。要想使用变量，必须先给它命名，命名规则如下。
（1）变量由字母、下画线、$或数字组成，并且第一个字符必须是字母、下画线或$。
（2）变量不能是系统关键字和保留字。
在JavaScript中，定义变量时需要使用var关键字，语法格式为var变量名。定义变量后，可以使用等号＝来为变量赋值，等号左边的为变量的名称，等号右边的为要赋给变量的值。
2）常量
在JavaScript中，常量指的是值不可改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。
在JavaScript中，数据类型可以分为两种：一种是基本数据类型；另一种引用数据类型。基本数据类型有五种：数字、字符串、布尔值、未定义值和空值。而常见的引用数据类型有两种：数组、对象。
1）基本数据类型
（1）数值。在JavaScript中不区分整型（int）和浮点型（float），统一使用Number表示。
（2）字符串。字符串是用英文单引号或英文双引号括起来的任意文本，如"hello"、' happy'。
（3）布尔值。布尔类型的值只有两个，即true（真）和false（假）。
（4）未定义值。在JavaScript中，如果一个变量已经用var声明，但是并没有对这个变量进行赋值，那么此时该变量的值就是未定义值。其中，未定义值用undefined表示。
（5）空值。在JavaScript中，空值用null表示。如果一个变量的值等于null，如var n＝null，则表示系统没有给变量n分配内存空间。
2）引用数据类型
（1）数组。数组是一组按顺序排列的数据的集合，数组中的每个值都称为元素，数组可以包含任意类型的数据。在JavaScript中定义数组需要使用方括号[]，数组中的元素使用逗号进行分隔，例如，var array＝[1，2，3，'hello'，null，true]。除此之外，也可以使用Array（）函数来创建数组，例如，var arr＝new Array（1，2，3，4）。
（2）对象。JavaScript中的对象是由多组键值对组成的无序集合，定义对象时需要使用花括号{}，语法格式为{name1：value1，name2：value2，name3：value3，…，nameN：valueN}，其中name1，name2，name3，…，nameN为对象中的键，value1，value2，value3，…，valueN为对应的值。
在JavaScript中，运算符指的是变量或值进行运算操作时使用的符号，具体内容见表2-7。
表2-7 运算符
续表
JavaScript支持4种不同形式的条件判断语句：if语句、if else语句、if else if else语句、switch case语句。
例如，根据成绩执行不同的语句。
在JavaScript中，循环语句指的是在满足某个条件下循环反复地执行某些操作的语句。循环语句有两种，分别为for循环和while循环。
例如，使用for循环计算1～100的整数的和：
使用while循环输出1～5的整数：
函数是一组执行特定任务（具有特定功能）的可以重复使用的代码块。JavaScript函数必须使用function定义，其语法如下。
例如，定义一个求和函数，求2＋3的和。
