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

1 HTML语言

1.1 HTML简介

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

1.2 HTML结构

下图是一个基本的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>标签为文档的主体标签,有很多的属性设置,如下表所示:

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

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属性设置元素样式,开发时不要使用内联样式

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

2.2.2 内部样式表

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

html 复制代码
<!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文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度。

css 复制代码
p{
    color: blue;
    font-size: 90px;
}

上述代码是外部CSS文件index.css的代码,index.css放在和网页html文件的同级目录下(当然也可以自己指定目录)。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 行间事件

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

javascript 复制代码
<!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>标签常用的属性及其说明如下表所示:

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

示例代码如下:

javascript 复制代码
<!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文件放在了同级目录下。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试