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

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

news 文章来源：https://blog.csdn.net/muxiaoyu0318/article/details/129622779 2025/1/4 20:42:35

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

求最大公约数和最小公倍数---辗转相除法(欧几里得算法)

目录 一.GCD和LCM 1.最大公约数 2.最小公倍数 二.暴力求解 1.最大公约数 2.最小公倍数 三.辗转相除法 1.最大公约数 2.最小公倍数 一.GCD和LCM 1.最大公约数 最大公约数&#xff08;Greatest Common Divisor&#xff0c;简称GCD&#xff09;指的是两个或多个整数共有…...

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

音视频开发_获取媒体文件的详细信息

一、前言 做音视频开发过程中，经常需要获取媒体文件的详细信息。 比如：获取视频文件的总时间、帧率、尺寸、码率等等信息。 获取音频文件的的总时间、帧率、码率，声道等信息。 这篇文章贴出2个我封装好的函数，直接调用就能获取媒体信息返回，copy过去就能使用，非常方便。…...

编程日记 2023/3/19 4:57:38

Springboot集成Swagger

一、Swagger简介注意点&#xff01; 在正式发布的时候要关闭swagger&#xff08;出于安全考虑&#xff0c;而且节省内存空间&#xff09;之前开发的时候&#xff0c;前端只用管理静态页面&#xff0c; http请求到后端&#xff0c; 模板引擎JSP&#xff0c;故后端是主力如今是前…...

编程日记 2023/3/19 4:52:37

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么&#xff1f;1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项&#xff08;Option Store &#xff09;3.1 读取 State3.2 …...

编程日记 2023/3/19 4:47:35

STM32 -4 关于STM32的RAM、ROM

一 stm32 的flash是什么、有什么用、注意事项、如何查看 一 、说明 它主要用于存储代码&#xff0c;FLASH 存储器的内容在掉电后不会丢失&#xff0c;STM32 芯片在运行的时候&#xff0c;也能对自身的内部 FLASH 进行读写&#xff0c;因此&#xff0c;若内部 FLASH 存储了应用…...

编程日记 2023/3/19 4:42:33

第一个 Qt 程序

第一个 Qt 程序 “hello world ”的起源要追溯到 1972 年&#xff0c;贝尔实验室著名研究员 Brian Kernighan 在撰写 “B 语言教程与指导(Tutorial Introduction to the Language B)”时初次使用&#xff08;程序&#xff09;&#xff0c;这是目前已 知最早的在计算机著作中将…...

编程日记 2023/3/19 4:37:30

Spring注解驱动开发--AOP底层原理

Spring注解驱动开发–AOP底层原理 21. AOP-AOP功能测试 AOP&#xff1a;【动态代理】 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式&#xff1b; 1、导入aop模块&#xff1a;Spring AOP&#xff0c;(Spring-aspects) 2、定义一个业务逻辑类(Ma…...

编程日记 2023/3/19 4:27:28

对象的动态创建和销毁以及对象的复制，赋值

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章,「初学」C​​​​​​​ &#x1f525;座右铭&#xff1a;“不要等到什么都没有了&#xff0c;才…...

编程日记 2023/3/19 4:22:26

JVM调优,调的是什么?目的是什么?

文章目录前言一、jvm是如何运行代码的&#xff1f;二、jvm的内存模型1 整体内存模型结构图2 堆中的年代区域划分3 对象在内存模型中是如何流转的?4 什么是FULL GC,STW? 为什么会发生FULL GC?5 要调优,首先要知道有哪些垃圾收集器及哪些算法6 调优不是盲目的,要有依据,几款内…...

编程日记 2023/3/19 4:17:25

docker部署zabbix监控

docker部署zabbix监控 1、环境说明 公有云ubuntu22.04 系统->部署docker环境zabbix-server 6.4 2、准备docker环境 更新apt以及安装一些必要的系统工具 sudo apt-get update sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-co…...

编程日记 2023/3/19 4:12:24

做单本小说网站怎么样/百度推广费用预算表

当前服务器发展趋势是大规模(高密度、定制化)、更低功耗、更高性能。降低服务器运行成本也是很多企业都会去考虑的一个问题&#xff0c;毕竟控制成本意味着更大的利润空间。下面上海天盾数据恢复中心的专家就给大家几个建议&#xff0c;可以控制服务器的成本。网络、储存和服务…...

编程日记 2025/1/4 17:09:35

服务器出租网站/查询网站

style"display:none" 表示完全隐藏&#xff0c;与没有该元素一样 style"visibility:hidden" 表示内容隐藏&#xff0c;但是内容所占的位置还在。 转载于:https://www.cnblogs.com/guoyuqiangf8/archive/2013/03/13/2958344.html...

编程日记 2025/1/4 15:44:56

网站泛解析/精准广告投放

Mybatis-Plus本身是一个插件但是它里面还内置了其它插件&#xff0c;这样理解比较好。 要使用mybatis-config.xml配置文件我们必须在全局配置一下配置文件。 乐观锁可以避免并发的时候带来的数据不安全的问题。 写在UserMapper类里面只要这个对象调用才有这个方法&#xff0c;其…...

编程日记 2025/1/4 15:27:13

wordpress积分商城插件/网络营销广告策划

Day1: overview: 1.MVC概述 2.Struts框架 (技术概览) 3.Struts开发步骤 4.Struts新手上路 5.Struts详解 6.使用工具构建struts应用 ************************************************************** 一 MVC概述 (教材Page 219) 1 起源 2 设计理念 图(Page 219) Contr…...

编程日记 2025/1/4 14:48:34

国外网站建设/企业网站推广的方法

前两天写了一篇文章&#xff0c;介绍LENGTH等一系列的常规函数一样可以处理LOB类型&#xff0c;有人在BLOG回复中提到&#xff0c;使用LENGTH的效率要比DBMS_LOB.GETLENGTH低&#xff0c;这里进行简单的测试。建立一个测试表&#xff1a;SQL> CREATE TABLE T_LOB (ID NUMBER…...

编程日记 2025/1/4 11:40:38

asp做动态网站/市场调研报告1500字

1. 简述一下一个引用对象的生命周期&#xff1f; 2. 创建下面对象实例&#xff0c;需要申请多少内存空间&#xff1f; public class User {public int Age { get; set; } public string Name { get; set; } public string _Name "123" "abc"; public Lis…...

编程日记 2025/1/4 11:28:31