IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发测试 -> 自动化软件测试 ---前端基础知识 -> 正文阅读

[开发测试]自动化软件测试 ---前端基础知识

一、html

(1)常用的 html 标签

<h1>h1标题</h1>

<div>这是一个div标签</div>

<p>这是一个段落标签,可以换行</p>

<br>换行标签

<img src="路径" alt=“图片名”>? ? ? ? ? ? ? ? //蓝色部分为标签的属性

<hr>合行标签

<a href="http://www.baidu.com">百度网</a> 超文本标签? ? ? ?//红色部分为标签的文本

注意:

1、标签不区分大小写,但是推荐使用小写。

2、根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签)。

(2)资源路径

相对路径:从当前操作html的文档所在目录算起的路径叫做相对路径。

绝对路径:从根目录算起的路径叫做绝对路径。

一般都会使用相对路径,绝对路径的操作在其他电脑上打开会有可能出现资源文件找不到的问题。

(3)列表标签

无序列表(ul标签)<ul><li>列表的一个内容</li></ul>

有序列表(ol标签)<ol><li>列表的一个内容</li></ol>

(4)表格标签

<table> 标签:表示一个表格

<tr> 标签:表示表格中的一行

<td> 标签:表示表格中的列

<th> 标签:表示表格中的表头

<table>

????????<tr>

????????????????<th>姓名</th>

????????????????<th>年龄</th>

????????</tr>

????????<tr>

????????????????<td>张三</td>

????????????????<td>18</td>

????????</tr>

</table>

(5)表单标签

<form> 标签:表示表单标签,定义整体的表单区域

<label> 标签:表示表单元素的文字标注标签,定义文字标注

<input> 标签:表示表单元素的用户输入标签,定义不同类型的用户输入数据方式????????

????????

??????????????

???????????????

?????????

(6)表单提交

表单属性设置:

<form> 标签:表示表单标签,定义整体的表单区域

? ? ? ? action属性:设置表单数据提交地址

? ? ? ? method属性:设置表单提交的方式,一般有“GET”方式和“POST”方式,不区分大小写

?表单元素属性设置:
name属性:设置表单元素的名称,该名称是提交数据时的参数名(输入时需要)

value属性:设置表单元素的值,该值是提交数据时参数名所对应的值(选择时需要)

二、css

(1)css 的作用

美化界面,比如设置标签文字大小、颜色、字体加粗等样式;

控制页面布局,比如设置浮动、定位等样式。

css 是由两个主要部分构成:选择器和一条或多条样式规则

(2)css 的基本语法

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

...

(3)css 的三种引入方式

行内式:直接在标签的 style 属性中添加 css 样式(缺乏可用性)

<div style="width:100px; height:100px; background:red">hello</div>

内嵌式:在<head>标签内加入<style>标签,在<style>标签中编写css代码

<head>

? ? ? ? <style type="text/css">

? ? ? ? ? ? ? ? h3{

? ? ? ? ? ? ? ? ? ? ? ? color:red;

? ? ? ? ? ? ? ? }

? ? ? ? </style>

</head>

外链式:将css代码写在一个单独的.css文件中,在<head>标签中使用<link> 标签直接引入该文件到页面中。

(4)css 选择器

标签选择器:根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。

<style type="text/css">

? ? ? ? ? ? ? ? p{

? ? ? ? ? ? ? ? ? ? ? ? color:red;

? ? ? ? ? ? ? ? }

? ? ? ? </style>

类选择器:根据类名来选择标签,以.开头,一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用。

?

层级选择器:根据层级关系选择后代标签,以选择器1选择器2开头,主要应用在标签嵌套的结构中,减少命名。

?

id选择器:根据id 选择标签,以#开头,元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用。

组选择器:根据组合的选择器选择不同的标签,以,分隔开。

伪类选择器:用于向选择器添加特殊的效果,以:分隔开,当用户和网站交互的时候改变显示效果可以使用伪类选择器。

(5)css 属性

?

?(6)css 溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素方式,设置的方法是通过overflow属性来完成。

overflow的设置项:

1、visible 默认值,显示子标签溢出部分

2、hidden,隐藏子标签溢出部分

3、auto 如果子标签溢出,则可以滚动查看其余的内容。

(7)盒子模型

?

? ? ? ??

?

????????

  开发测试 最新文章
pytest系列——allure之生成测试报告(Wind
某大厂软件测试岗一面笔试题+二面问答题面试
iperf 学习笔记
关于Python中使用selenium八大定位方法
【软件测试】为什么提升不了?8年测试总结再
软件测试复习
PHP笔记-Smarty模板引擎的使用
C++Test使用入门
【Java】单元测试
Net core 3.x 获取客户端地址
上一篇文章      下一篇文章      查看所有文章
加:2022-03-30 18:55:28  更:2022-03-30 18:57:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/18 0:21:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码