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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/1589.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ElasticSearch-第五天

ElasticSearch-第五天

目录 es中脑裂问题 脑裂定义 脑裂过程分析 解决方案 数据建模 前言 nested object 父子关系数据建模 父子关系 设置 Mapping 索引父文档 索引子文档 Parent / Child 所支持的查询 使用 has_child 查询 使用 has_parent 查询 使用 parent_id 查询 访问子文档 …
阅读更多...
学习 Python 之 Pygame 开发魂斗罗（一）

学习 Python 之 Pygame 开发魂斗罗（一）

学习 Python 之 Pygame 开发魂斗罗&#xff08;一&#xff09;Pygame回忆Pygame1. 使用pygame创建窗口2. 设置窗口背景颜色3. 获取窗口中的事件4. 在窗口中展示图片(1). pygame中的直角坐标系(2). 展示图片(3). 给部分区域设置颜色5. 在窗口中显示文字6. 播放音乐7. 图片翻转与…
阅读更多...
人脸活体检测系统（Python+YOLOv5深度学习模型+清新界面）

人脸活体检测系统（Python+YOLOv5深度学习模型+清新界面）

摘要&#xff1a;人脸活体检测系统利用视觉方法检测人脸活体对象&#xff0c;区分常见虚假人脸&#xff0c;以便后续人脸识别&#xff0c;提供系统界面记录活体与虚假人脸检测结果。本文详细介绍基于YOLOv5深度学习技术的人脸活体检测系统&#xff0c;在介绍算法原理的同时&…
阅读更多...
【C++】用手搓的红黑树手搓set和map

【C++】用手搓的红黑树手搓set和map

目录 一、set/map的底层结构 1、set/map的源码 2、利用模板区分set/map 3、利用仿函数控制比较大小 二、set/map的迭代器&#xff08;红黑树的迭代器&#xff09; 1、红黑树的begin、end迭代器 2、红黑树迭代器的operator 3、红黑树迭代器的operator-- 三、set的const…
阅读更多...
人工智能大模型之ChatGPT原理解析

人工智能大模型之ChatGPT原理解析

前言 近几个月ChatGPT爆火出圈&#xff0c;一路狂飙&#xff1b;它功能十分强大&#xff0c;不仅能回答各种各样的问题&#xff0c;还可以信写作&#xff0c;给程序找bug…我经过一段时间的深度使用后&#xff0c;十分汗颜&#xff0c;"智障对话"体验相比&#xff0c…
阅读更多...
Spring-Data-Redis 和 Redisson TLS/SSL 连接

Spring-Data-Redis 和 Redisson TLS/SSL 连接

先决条件已经部署好redis tls环境。如未部署好&#xff0c;可参考&#xff1a;Redis 6.0 Docker容器使用SSL/TLS已知redis tls环境使用的证书&#xff1a;其中&#xff1a;ca.crt :服务器证书ca.key:服务器私钥redis.crt:客户端证书redis.key:客户端私钥证书处理生成证书p12文件…
阅读更多...
Linux环境C语言开发基础

Linux环境C语言开发基础

C语言是一门面向过程的计算机编程语言&#xff0c;与C、C#、Java等面向对象编程语言有所不同。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、仅产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。C语言诞生于美国的贝尔实验室&#xff0c;由丹…
阅读更多...
信创办公–基于WPS的PPT最佳实践系列（表格和图标常用动画）

信创办公–基于WPS的PPT最佳实践系列（表格和图标常用动画）

信创办公–基于WPS的PPT最佳实践系列&#xff08;表格和图标常用动画&#xff09; 目录应用背景操作步骤图表常用动画效果&#xff1a;擦除效果表格常用动画效果&#xff1a;轮子效果应用背景 文不如表&#xff0c;表不如图。在平时用ppt做总结时&#xff0c;我们会经常用到图…
阅读更多...
手撕数据结构与算法——树(三指针描述一棵树）

手撕数据结构与算法——树(三指针描述一棵树）

&#x1f3c6;作者主页&#xff1a;king&南星 &#x1f384;专栏链接&#xff1a;数据结构 &#x1f3c5;文章目录&#x1f331;树一、&#x1f332;概念与定义二、&#x1f333;定义与预备三、&#x1f334;创建结点函数四、&#x1f340;查找五、&#x1f341;插入六、&a…
阅读更多...
SpringBoot接口 - 如何生成接口文档之Swagger技术栈

SpringBoot接口 - 如何生成接口文档之Swagger技术栈

SpringBoot开发Restful接口&#xff0c;有什么API规范吗&#xff1f;如何快速生成API文档呢&#xff1f;Swagger 是一个用于生成、描述和调用 RESTful 接口的 Web 服务。通俗的来讲&#xff0c;Swagger 就是将项目中所有&#xff08;想要暴露的&#xff09;接口展现在页面上&am…
阅读更多...
我的创作纪念日——一年的时间可以改变很多

我的创作纪念日——一年的时间可以改变很多

机缘 不知不觉来到CSDN已经创作一年了。打心底讲&#xff0c;对于在CSDN开始坚持创作的原因我用一句话来概括最合适不过了——“无心插柳柳成荫” 为什么这么说呢&#xff1f; 这要从我的一篇博客说起——《输入命令Javac报错详解》&#xff1a; 那也是我第一次接触到Java这…
阅读更多...
PostMan工具的使用

PostMan工具的使用

PostMan工具的使用 1 PostMan简介 代码编写完后&#xff0c;我们要想测试&#xff0c;只需要打开浏览器直接输入地址发送请求即可。发送的是GET请求可以直接使用浏览器&#xff0c;但是如果要发送的是POST请求呢? 如果要求发送的是post请求&#xff0c;我们就得准备页面在页…
阅读更多...
基于OpenCV的传统视觉应用 -- OpenCV图像处理 图像模糊处理 图像锐化处理

基于OpenCV的传统视觉应用 -- OpenCV图像处理 图像模糊处理 图像锐化处理

图像处理 图像处理是用计算机对图像进行分析&#xff0c;以获取所需结果的过程&#xff0c;又称为影像处理。图像处理一般是指数字图像的处理。数字图像是用工业相机、摄像机、扫描仪等设备经过拍摄得到的一个大的二维数组&#xff0c;该数组的元素称为像素&#xff0c;其值称…
阅读更多...
C++造轮子飙车现场之无锁、有锁环形队列实现

C++造轮子飙车现场之无锁、有锁环形队列实现

先看带锁的实现。 带锁版本 circular_queue.h // 头文件防卫 #ifndef CIRCULAR_QUEUE_H #define CIRCULAR_QUEUE_H#include <mutex> // 互斥量 #include <condition_variable> // 条件变量template <typename T> class CircularQueue { public:// 构造函数…
阅读更多...
公司测试员用例写得乱七八糟，测试总监制定了这份《测试用例编写规范》

公司测试员用例写得乱七八糟，测试总监制定了这份《测试用例编写规范》

统一测试用例编写的规范&#xff0c;为测试设计人员提供测试用例编写的指导&#xff0c;提高编写的测试用例的可读性&#xff0c;可执行性、合理性。为测试执行人员更好执行测试&#xff0c;提高测试效率&#xff0c;最终提高公司整个产品的质量。 一、范围 适用于集成测试用…
阅读更多...
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程&#xff08;基于create-vue&#xff0c;vite&#xff0c;Vite Vue&#xff09; 目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite Vue 项目 五、打开Vue 项目管理器 六、Vite Vue 项目目…
阅读更多...
云开发--实现发送邮件+短信+链接跳转小程序功能

云开发--实现发送邮件+短信+链接跳转小程序功能

目录 1、小程序实现发送邮件 准备一个qq邮箱&#xff0c;并启动SMTP服务 确定小程序云开发环境&#xff0c;并新建云函数 2、小程序实现发送短信 确定应用 确定签名 确定模板 编写云函数-发送短信 3、链接跳转小程序 H5 配置 生成 URL Link 学习记录&#xff1a; …
阅读更多...
【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs（4）

【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs（4）

目录 写在前面&#xff1a; 题目&#xff1a;P1149 [NOIP2008 提高组] 火柴棒等式 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 解题思路&#xff1a; …
阅读更多...
Java进阶2 排序查找与Lambda、正则表达式

Java进阶2 排序查找与Lambda、正则表达式

排序查找与Lambda、正则表达式● 导图一、 基础算法1.排序1.1 冒泡排序1.2 选择排序2. 查找2.1 基础查找2.2 二分查找二、Lambda表达式1&#xff09;初识Lambda2&#xff09;函数式编程3&#xff09;.Lambda表达式的标准格式4&#xff09;Lambda的注意事项5&#xff09;Lambda表…
阅读更多...
k8s 1.18.20版本部署

k8s 1.18.20版本部署

身为k8s初学者&#xff0c;在掌握k8s理论知识的同时&#xff0c;也需要掌握一下实际部署k8s的过程&#xff0c;对于理论的学习起到一定的帮助作用。罗列了一下相关步骤&#xff0c;请各位参考&#xff1a; 一、环境准备 三台虚机&#xff1a; 操作系统&#xff1a; CentOS L…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站