Python网络爬虫(一):HTML/CSS/JavaScript介绍

发布于:2024-04-03 ⋅ 阅读:(47) ⋅ 点赞:(0)

1 HTML语言

        1.1 HTML简介

        HTML指的是超文本标记语言:HyperText Markup Language,它不是一门编程语言,而是一种标记语言,即一套标记标签。HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的文本文件,可以使用任意的文本编辑器例如记事本打开HTML文件,查看并修改HTML源代码。当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容。

        1.2 HTML结构

        下图是一个基本的HTML文档:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个网页</title>
</head>
<body>
    <img src="词云图.png" width="500" height="700">
</body>
</html>
</html>

        该HTML文档的浏览器端显示如下: 

        其中,<!DOCTYPE html>用于指定文档的类型;<html>标签为文档的根标签,该标签不带任何属性;<head>标签是头标签,用来规定文件的标题、编码方式和url等信息;<body>标签为文档的主体标签,有很多的属性设置,如下表所示:

<body>标签的属性及其描述
属性 描述
text 设定页面文字的颜色
bgcolor 设定页面背景的颜色
background 设定页面的背景图像
bgproperties 设定页面的背景图像为固定,不随页面的滚动而滚动
link 设定页面默认的链接颜色
alink 设定鼠标正在单击时的链接颜色
vlink 设定访问过后的链接颜色
topmargin 设定页面的上边距
leftmargin 设定页面的左边距

2 CSS层叠样式表

        2.1 CSS概述

        CSS是Cascading Style Sheets的缩写,中文名叫层叠样式表,是一种标记语言,用于为HTML文档定义布局,涉及字体、颜色、边距、高度、宽度、高级定位等方面。

        2.2 选择器

        网页可以分为三个部分:结构(html)、表现(CSS)、行为(JavaScript)。CSS可以改变HTML中标签的样式,但是要告诉CSS改变谁、改什么。选择器就是用来告诉CSS改变谁,具体的有属性选择器、类和ID选择器。使用CSS改变元素样式有三种方式。

        2.2.1 内联样式 行内样式

        在标签内部通过style属性设置元素样式,开发时不要使用内联样式

<body>
    <p style="color: red; font-size: 50px;">人之初</p>
</body>

        2.2.2 内部样式表

        将样式表编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式,修改时只需要修改一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        p{color: red; font-size: 30px;}
    </style>

</head>

<body>
    <p style="color: blue; font-size: 50px;">人之初</p>
    <p2>性本善</p2>
    <p>性相近</p>
    <p>习相远</p>
</body>
</html>

        样式如下: 

         由图可以看出:内部样式表对设置过属性的标签都有效,但如果同时存在内联样式和内部样式表时以内联样式为准

         2.2.3 外部样式表

        可以将CSS编写为外部CSS文件,在html中通过link标签引入外部CSS文件。将样式编写到外部CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度。

p{
    color: blue;
    font-size: 90px;
}

        上述代码是外部CSS文件index.css的代码,index.css放在和网页html文件的同级目录下(当然也可以自己指定目录)。html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>
    <p>人之初</p>
    <p>性本善</p>
    <p>性相近</p>
    <p>习相远</p>
</body>
</html>

        网页效果如下:

3 JavaScript   

        JavaScript是一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言。在网页中使用JavaScript代码,不仅可以实现网页特效,还可以响应用户请求实现动态交互的功能。

        通常情况下,在Web页面中使用JavaScript有三种方法,分别是行间事件、页面script标签嵌入、外部引入。

        3.1 行间事件

        行间事件主要用于事件,示例代码如下:

        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS引入方式之行间事件</title>
</head>
<body>
    <!-- 第一种嵌入js的方式:行间事件  -->
    <input type="button" name="点我" value="点击" onclick="alert('hello!');">
</body>
</html>

        页面效果如下:

        3.2 页面script标签嵌入 

        在HTML文件中可以使用<script>...</script>标签将JavaScript脚本嵌入到其中。在HTML文档中可以使用多个<script>标签,每个<script>标签中可以包含多个JavaScript的代码集合。<script>标签常用的属性及其说明如下表所示:

<script>标签常用的属性及其说明
属性 说明
language 设置所使用的脚本语言及版本
src 设置一个外部脚本文件的路径位置
type 设置所使用的脚本语言,此属性已代替language属性
defer 此属性表示当HTML文档加载完毕后再执行脚本语言

        示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式一</title>
    <script type="text/javascript">
        alert("hello world!");
    </script>
</head>
<body>

</body>
</html>

        效果如下:

 3.3 外部引入js

        在Web页面中引入JavaScript代码的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码可以被多个页面所使用,则可以将这些脚本代码放置在一个单独的文件中(保存文件的扩展名为.js),然后在需要使用该代码的Web页面中链接该JavaScript文件即可。示例代码如下:

        这里,hello.js文件与html文件放在了同级目录下。