当前位置： 首页 > news >正文

Web自动化——前端基础知识（二）

news 2025/12/3 15:50:32

1. Web前端开发三要素

  1. web前端开发三要素

1676026717439.png

什么是HTMl？

  • Html是超文本标记语言，是用来描述网页的一种标记语言
  • HTML是一种标签规则的形式将内容呈现在浏览器中
  • 可以以任意编辑器创建，其文件扩展名为.html或.htm保存即可

什么是CSS？

  • CSS的中文名称为层叠样式表
  • 是一种用来表现HTML或XML等文件样式的计算机语言
  • 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化

什么是JavaScript？

  • 简称JS，但其与java开发语言没有任何的关系
  • 被广泛的应用于web应用程序的开发
  • 因为有了JS的加入，使得web应用程序可以实现各种页面动态效果
  1. 三者的关系

1676027272893.png

2. 常用浏览器及其内核

  1. 一般我们看到的浏览器
    1676027415267.png
  2. 主流浏览器的内核
    1676027460538.png

3. HTML标签及语法规范

  1. HTML标签及语法规范
    html标签是有尖括号保卫的关键词，例如 <html>

  2. HTML标签绝大多数的情况下是成对儿出现的

  3. 如<html>和</html>,第一个标签是开始标签，第二个标签是结束标签

  4. HTML标签极少情况下是单个儿出现的，我们称之为单标签

  5. 常见单标签</br>0,代表着换行的意思

  6. 标签与标签的关系：包含关系、并列函数

  • 标签的包含关系（父子标签）

1676028140485.png

  • 标签的并列关系（兄弟标签）
    1676028266525.png
  1. 打开开发者工具（F12）
    1676029399782.png
  • 可以切换模式
    1676029530350.png
  • 里面就是这样的
    1676029751062.png

4. HTML基本结构与环境搭建

  • HTML基本结构
标签：

为文档类型声明，表示该文件为 HTML5 文件。 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前。

标签对： 标签位于 HTML 文档的最前面，用来标识 HTML 文档的开始； 标签位于 HTML 文档的最后面，用来标识 HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。 标签对：

标签包含有关 HTML 文档的信息，可以包含一些辅助性标签。如 ， ， ， 等，但是浏览器除了会在标题栏显示 元素的内容外，不会向用户显示 head 元素内的其他任何内容。

标签对：

它是 HTML 文档的主体部分，在这个标签中可以包含等众多标签， 标签出现在 标签之后，且必须在闭标签 之前闭合。

  • 京东网站结构如下：
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXFhlrFu-1679040056954)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca2f23e32109429f89fda2ac49924087~tplv-k3u1fbpfcp-watermark.image?)]

5. HTML常用标签以及HBuilder IDE的下载地址

  1. HBuilder下载官网地址：

    https://www.dcloud.io

  • 进入官网，免费下载最新版的HBuilder。
  • HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
  1. HTML标签参考手册：https://www.w3school.com.cn/tags/index.asp
  • 这是我的第一个html页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>这是我的第一个html页面</title></head><body><div>我只是一个盒子，空盒子</div><div>我只是一个盒子，空盒子</div><h1>我只是标题1</h1><h2>我只是标题2</h2><h3>我只是标题3</h3><p>我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段<br>标签我是段落标签我是段落标签我是段落标签</p><a href="http://www.baidu.com">我是连接跳转，跳转百度</a><br><u1>我是无序列表<li>第一项</li><li>第二项</li></u1><ol><table border="1"><li>第一项</li><li>第二项</li></ol><tr><th>标题1</th><th>标题2</th></tr><tr><td>第一行第一列</td><td>第一行的第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table><select> name=""id=""><option value="">选项1</option><option value="">选项2</option><option value="">选项3</option></select></body>
</html>

1676037014254.png

  • 以上添加<br>代表段落
  • 打开浏览器如下：

1676036743480.png

6. HTML静态页面实战一

<div class="box"><img src="./img/QQ截图20211207150902.png" class="img1"><div class="dec"><span class="z1">会员登录</span><span class="z2">立即注册</span><span class="z3">享积分换礼、返现等专属优惠</span></div><div class="line"></div><div class="radio"><input type="radio" name="c" id="a"><label for="a" class="lab1">普通登录</label><input type="radio" name="c" id="b"><label for="b" class="lab2">手机动态密码登录</label></div><input type="text" name="" id="" placeholder="请输入注册手机/邮箱" class="user"><div class="pwpwpw"><input type="password" name="" id="" placeholder="请输入密码" class="user1"><div class="yzm-img">获取手机动态验证码</div></div><div class="jizhu"><input type="checkbox" name="" id="e"><label for="e">30天内自动登录</label><span>记住密码</span></div><div class="login">登&nbsp;&nbsp;录</div><div class="line2"></div><div class="txt">您也可以用合作网站的帐号登录去i旅行网</div><div class="tu"><img src="./img/44.png" alt=""></div></div>

1676038100912.png

7. CSS基础

  1. CSS简介
  • CSS的主要作用就是美化网页，进行页面布局
  • 更具体的说，CSS可以做字体大小，颜色，对齐方式等；图片的外形；页面的布局以及外观显示样式等等

1676038302586.png

  1. CSS基础
  • CSS由两个部分组成：选择器和多条式式式明
    1676038366157.png
  • CSS的样式代码写在head标签中的子标签style中

1676038447131.png

  1. CSS基础总结
  • 通过选择器可以具体指定修改HTML中具体谁的样式
  • 选择器后边的大括号内是具体要修改的样式声明
  • 样式的声明是由键值对儿的形式出现的，如key：value
  • 属性和属性值之间使用英文冒号(:)进行分隔
  • 多个键值儿之间使用英文分号（:）进行分隔

8. CSS选择器

  1. CSS选择器的作用：
    根据不同的需求把不同的标签选出来
  2. CSS选择器有哪些：
    标签选择器、类选择器、id选择器
  • 标签选择器
    1676038901597.png

1676038959305.png

  • id选择器
    1676039069808.png
  • 类选择器
    1676039171421.png
  • HTML+CSS的表现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>这是我的第一个html页面</title><style>li {font-size: 50px;color: red;}ul li {background-color: black;}#first {font-size: 30px;color: blue;}.second{font-size: 20px;color: brown;}</style></head><body><div id="first">我只是一个盒子，空盒子</div><div class="second">我只是一个盒子，空盒子</div><h1>我只是标题1</h1><h2>我只是标题2</h2><h3>我只是标题3</h3><p>我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段<br>标签我是段落标签我是段落标签我是段落标签</p><a href="http://www.baidu.com">我是连接跳转，跳转百度</a><br><u1>我是无序列表<li>第一项</li><li>第二项</li></u1><ol><table border="1"><li>第一项</li><li>第二项</li></ol><tr><th>标题1</th><th>标题2</th></tr><tr><td>第一行第一列</td><td>第一行的第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table><select> name=""id=""><option value="">选项1</option><option value="">选项2</option><option value="">选项3</option></select></body>
</html>

保存之后打开百度刷新：
1676040169604.png

相关文章：

Web自动化——前端基础知识（二）

1. Web前端开发三要素 web前端开发三要素 什么是HTMl&#xff1f; Html是超文本标记语言&#xff0c;是用来描述网页的一种标记语言HTML是一种标签规则的形式将内容呈现在浏览器中可以以任意编辑器创建&#xff0c;其文件扩展名为.html或.htm保存即可 什么是CSS&#xff1f;…...

编程日记 2023/3/19 6:43:21

NAS系列 硬件组装

转自我的博客文章https://blognas.hwb0307.com/nas/3260&#xff0c;内容更新仅在个人博客可见。欢迎关注&#xff01; 前言 之前我在《NAS系列 硬件选择》里讲述了自己为了升级NAS如何选配硬件。本节我大概说一些我的新NAS硬件组装的注意事项。到目前为止&#xff0c;我只装过…...

编程日记 2023/3/19 6:38:20

IDAFrida

IDA&Frida 前言 偶然间发现了一本秘籍《IDA脚本开发之旅》&#xff0c;这是白龙的系列文章&#xff0c;主要是安卓平台&#xff0c;笔者只是根据他的知识点学习&#xff0c;拓展&#xff0c;可以会稍微提及别的平台。本文并不会贴出他的思路分析&#xff0c;只对于源码进…...

编程日记 2023/3/19 6:33:16

通过百度文心一言大模型作画尝鲜，感受国产ChatGPT的“狂飙”

3月16日下午&#xff0c;百度于北京总部召开新闻发布会&#xff0c;主题围绕新一代大语言模型、生成式AI产品文心一言。百度创始人、董事长兼首席执行官李彦宏&#xff0c;百度首席技术官王海峰出席&#xff0c;并展示了文心一言在文学创作、商业文案创作、数理推算、中文理解、…...

编程日记 2023/3/19 6:28:14

Nacos 注册中心 - 健康检查机制源码

目录 1. 健康检查介绍 2. 客户端健康检查 2.1 临时实例的健康检查 2.2 永久实例的健康检查 3. 服务端健康检查 3.1 临时实例的健康检查 3.2 永久实例服务端健康检查 1. 健康检查介绍 当一个服务实例注册到 Nacos 中后&#xff0c;其他服务就可以从 Nacos 中查询出该服务…...

编程日记 2023/3/19 6:23:12

Transformer在计算机视觉中的应用-VIT、TNT模型

上期介绍了Transformer的结构、特点和作用等方面的知识&#xff0c;回头看下来这一模型并不难&#xff0c;依旧是传统机器翻译模型中常见的seq2seq网络&#xff0c;里面加入了注意力机制&#xff0c;QKV矩阵的运算使得计算并行。 当然&#xff0c;最大的重点不是矩阵运算&…...

编程日记 2023/3/19 6:18:11

快速入门Zookeeper技术.黑马教程

快速入门Zookeeper技术.黑马教程一、初识 Zookeeper二、ZooKeeper 安装与配置三、ZooKeeper 命令操作1.Zookeeper 数据模型2.Zookeeper 服务端常用命令3.Zookeeper 客户端常用命令四、ZooKeeper JavaAPI 操作五、ZooKeeper JavaAPI 操作1.Curator 介绍2.Curator API 常用操作2.…...

编程日记 2023/3/19 6:13:10

网易C++实习一面

说下C11新特性 auto有没有效率上的问题&#xff1f;为什么&#xff1f;发生在什么时候&#xff1f; 说下单例模式 什么时候需要加锁&#xff0c;什么时候不需要加锁&#xff1f; 像printf这样的函数&#xff0c;自己本身不修改数据&#xff0c;但是其他人会修改数据&#x…...

编程日记 2023/3/19 6:08:07

进程和线程的区别和联系

进程和线程的区别和联系1. 认识线程2. 进程和线程的关系3. 进程和线程的区别4. 线程共享了进程哪些资源1. 上下文切换2. 线程共享了进程哪些资源1.代码区2. 数据区3. 堆区1. 认识线程 线程是进程的一个实体,它被包含在进程中,一个进程至少包含一个线程,一个进程也可以包含多个…...

编程日记 2023/3/19 6:03:06

Java学习笔记——集合

目录集合与数组的对比集合体系结构Collection——常见成员方法Collection——迭代器基本使用Collection——迭代器原理分析Collection——迭代器删除方法增强for——基本格式增强for——注意点Collection——练习集合与数组的对比 package top.xxxx.www.CollectionDemo;import …...

编程日记 2023/3/19 5:58:05

差分运放公式推导-运算放大器

不知道大家有没遇到这种情况&#xff0c;在计算电路的时候&#xff0c;有时候会突然的忘记一些公式啊啥的&#xff0c;需要回去翻看笔记或者查资料&#xff0c;知其然而不知其所以然。今天跟大家一起来一起推导一遍差分运放的计算过程。 计算过程其实归根结底还是根据运放的虚…...

编程日记 2023/3/19 5:53:02

金丹二层 —— 字符串长度求解的四种方法

前言&#xff1a; 1.CSDN由于我的排版不怎么好看&#xff0c;我的有道云笔记比较美观&#xff0c;请移步有道云笔记 2.修炼必备 1&#xff09;入门必备&#xff1a;VS2019社区版&#xff0c;下载地址&#xff1a;Visual Studio 较旧的下载 - 2019、2017、2015 和以前的版本 (m…...

编程日记 2023/3/19 5:47:59

深入剖析Linux——进程信号

致前行的人&#xff1a; 要努力&#xff0c;但不着急&#xff0c;繁花锦簇&#xff0c;硕果累累都需要过程&#xff01; 目录 1.信号概念 1.1生活角度的信号 2. 技术应用角度的信号 3.Linux操作系统中查看信号 4.常用信号发送 4.1通过键盘发送信号 4.2调用系统函数发送信号 4.3…...

编程日记 2023/3/19 5:42:57

API-Server的监听器Controller的List分页失效

前言 最近做项目&#xff0c;还是K8S的插件监听器&#xff08;理论上插件都是通过API-server通信&#xff09;&#xff0c;官方的不同写法居然都能出现争议&#xff0c;争议点就是对API-Server的请求的耗时&#xff0c;说是会影响API-Server。实际上通过源码分析两着有差别&am…...

编程日记 2023/3/19 5:37:55

jupyter notebook 进阶使用：nbextensions，终极避坑

jupyter notebook 进阶使用&#xff1a;nbextensions&#xff0c;终极避坑吐槽安装 jupyter_contrib_nbextensions1. Install the python package&#xff08;安装python包&#xff09;方法一&#xff0c;PIP&#xff1a;方法二&#xff0c;Conda&#xff08;推荐&#xff09;&…...

编程日记 2023/3/19 5:32:52

C 语言编程 — Doxygen + Graphviz 静态项目分析

目录 文章目录目录安装配置解析Project related configuration optionsBuild related configuration optionsConfiguration options related to warning and progress messagesConfiguration options related to the input filesConfiguration options related to source brows…...

编程日记 2023/3/19 5:27:50

Mybatis报BindingException:Invalid bound statement (not found)异常

一、前言 本文的mybatis是与springboot整合时出现的异常&#xff0c;若使用的不是基于springboot&#xff0c;解决思路也大体一样的。 二、从整合mybatis的三个步骤排查问题 但在这之前&#xff0c;我们先要知道整合mybatis的三个重要的工作&#xff0c;如此才能排查&#x…...

编程日记 2023/3/19 5:22:48

HttpRunner3.x（1）-框架介绍

HttpRunner 是一款面向 HTTP(S) 协议的通用测试框架&#xff0c;只需编写维护一份 YAML/JSON 脚本&#xff0c;即可实现自动化测试、性能测试、线上监控、持续集成等多种测试需求。主要特征继承的所有强大功能requests &#xff0c;只需以人工方式获得乐趣即可处理HTTP&#xf…...

编程日记 2023/3/19 5:17:46

pytest学习和使用20-pytes如何进行分布式测试？（pytest-xdist）

20-pytes如何进行分布式测试&#xff1f;&#xff08;pytest-xdist&#xff09;1 什么是分布式测试&#xff1f;2 为什么要进行分布式测试&#xff1f;2.1 场景1&#xff1a;自动化测试场景2.2 场景2&#xff1a;性能测试场景3 分布式测试有什么特点&#xff1f;4 分布式测试关…...

编程日记 2023/3/19 5:12:44

三、Python 操作 MongoDB ----非 ODM

文章目录一、连接器的安装和配置二、新增文档三、查询文档四、更新文档五、删除文档一、连接器的安装和配置 pymongo&#xff1a; MongoDB 官方提供的 Python 工具包。官方文档&#xff1a; https://pymongo.readthedocs.io/en/stable/ pip安装&#xff0c;命令如下&#xff1…...

编程日记 2023/3/19 5:07:42

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/11/30 22:17:53

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/11/30 0:14:38

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/11/26 14:33:00

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/11/23 2:05:11

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/11/27 6:27:12

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/10/7 19:05:44

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/11/28 18:33:00