03、web前端简介



前言

今天又是继续扒拉爬虫的一天。今日份知识点依然是围绕与Python爬虫相关的知识点——Web前端的HTML、CSS和Javascript进行简单介绍。


一、web前端简介

好多人对前后端的划分都存在着模糊的概念,实际上web开发可分为:

  • 前端(FRONT END):用户看到的内容都是前端,前端关注页面展现。
  • 后端(BACK END):实现功能、数据的存取、平台的稳定性与性能等。后端更注重业务逻辑

而爬虫读取的数据,通常都是前端的内容,因此我们需要对web前端常见的三门技术HTML、CSS和Javascript有一定的了解。

Web前端开发的三门技术:
如果将完整的Web的前端页面理解成是一个人的话:

  • HTML(超文本标记语言)——理解成人体骨架骨络
  • CSS(层叠样式表)——理解成人的皮肤
  • JS(Javascript)——理解成人的肌肉

这样你对Web前端页面可能便有了一个大致的了解。

二、HTML(超文本标记语言)

2.1 元素、内容和标签

<p>欢迎学习Python</p>

我们以一个简单的例子作为引入,一般html页面由一系列标签和内容构成,如上<p></p>为一对标签,<p>为“开始标签”,</p>为“结束标签”,它们一般成对出现;欢迎学习Python则作为“内容”。至于元素的概念,元素=标签+内容。

常见的HTML标签还有<html></html>、<body></body>、<h1></h1>、<p></p>、<div></div>、<input>、<img>等等,在这不一一介绍。这里提供指路,具体可参考:https://blog.csdn.net/sang_12345/article/details/81298607

2.2 HTML DOM树

什么是DOM
DOM(Document Object Model)即文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API.

先了解几个关键字

元素(element):文档中的都有标签都是元素,元素可以看成是对象
节点(node):文档中都有的内容都是节点:标签,属性,文本
文档(document):一个页面就是一个文档
这三者的关系是:文档包含节点,节点包含元素

具体可参考:https://blog.csdn.net/wei1273356078/article/details/106543967
以下是HTML_DOM树
HTML DOM树

以下是HTML节点
HTML节点

  • 上下级:父亲点,子节点 (红色框)
  • 平 级: 兄弟节点(紫色框)

三、CSS和Javascript

3.1 CSS

css起到选择器的效果,一般

  • 根据ID选择
  • 根据class选择
  • 根据标签选择

3.2 Javascript

Javascript是一种属于网络的高级脚本语言,已经被广泛用于web应用开发,常用来添加各式各样的动态功能,为用户提供更流程美观的浏览效果。通常Javascript脚本是通过嵌入在HTML中来实现自身的功能的。

  1. 是一种解释性脚本语言(代码不进行预编译)
  2. 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
  3. 可以直接嵌入HTML页面,但写出单独的js文件有利于结构和行为的分离。
  4. 跨平台特性,在绝大数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
  5. Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本框架。Javascript提供了四种基本类型的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可完成较为负责的信息处理。
  6. 可以实现web页面的人机交互。

总结

赶着在睡前把所学简略的码了一下。今天主要内容是对web前端进行简单的认识,后一节进入正则表达式的学习,睡了睡了🐕住性命要紧。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值