自动化软件测试 ---前端基础知识

一、html

(1)常用的 html 标签

h1标题

这是一个div标签

这是一个段落标签,可以换行


换行标签

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


合行标签

百度网 超文本标签       //红色部分为标签的文本

注意:

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

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

(2)资源路径

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

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

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

(3)列表标签

无序列表(ul标签)

  • 列表的一个内容

有序列表(ol标签)

  1. 列表的一个内容

(4)表格标签

标签:表示一个表格

标签:表示表格中的一行

标签:表示表格中的列

标签:表示表格中的表头

        

                

                

        

        

                

                

        

姓名 年龄
张三 18

(5)表单标签

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

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

        自动化软件测试 ---前端基础知识_第1张图片

              自动化软件测试 ---前端基础知识_第2张图片

               自动化软件测试 ---前端基础知识_第3张图片

         自动化软件测试 ---前端基础知识_第4张图片

(6)表单提交

表单属性设置:

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

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

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

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

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

二、css

(1)css 的作用

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

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

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

(2)css 的基本语法

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

...

(3)css 的三种引入方式

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

hello

内嵌式:在标签内加入

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

(4)css 选择器

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

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

自动化软件测试 ---前端基础知识_第5张图片 

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

自动化软件测试 ---前端基础知识_第6张图片 

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

自动化软件测试 ---前端基础知识_第7张图片

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

自动化软件测试 ---前端基础知识_第8张图片

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

(5)css 属性

自动化软件测试 ---前端基础知识_第9张图片

 自动化软件测试 ---前端基础知识_第10张图片

 (6)css 溢出

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

overflow的设置项:

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

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

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

(7)盒子模型

自动化软件测试 ---前端基础知识_第11张图片

 

        

 

        

你可能感兴趣的:(css,html,前端)