第二大课——软件测试基础分享(html基础3 css)

第四课：html基础-3

一、html的标签 html线上资料：https://www.w3school.com.cn/html/html_elements.asp

1.1 实体符

1）空格：

一个汉字是2个字节，1个字节相当于1个半角空格

2）乘 ：×

3）除法：&divide

4）人民币符 ：￥

1.2 列表符

1）有序列表【列表符 是数字】

2）无序列表【列表符 是点】

无序列表

1）用ul来引导，其中的每个列表元素都是一个li

有序列表

1）用ol来引导，其中的每个列表元素都是一个li

zuoye

1）标签：marquee

2）属性：

direction= 设置滚动方向，up down left right

width= 滚动的宽度

loop= 指定循环几次

1.4 修饰文本

1）字体标记：font标签

size：设置文本的大小，取值范围：1-7，1最小，7最大

color：颜色

face：字体样式，微软雅黑、黑体、宋体

2）字体加粗：b

3)字体倾斜：i

4)下滑 线：u

5)删除线：s

6)上标：sup  

（7）下标：sub  

1.5 页的背景

1)背景色属性：bgcolor

2)背景图片：background

1.6 排版标记

1)hr：分割线

作业

文字

二、表单

2.1 简介

1)用处是用于接受用户的输入

2)并且将用户输入的内容传递到后端的服务器

标签就是：input

2.2 form标签

属性：

1)name：指定表单的名字

2)method：指定用什么方法向后端传递数据【get|post】

get：不安全，在表单中输入的内容会显示在浏览器中

post：浏览器不会显示表单中的内容

3)action：将用户输入的数据传递给后端的哪个文件

2.3 input标签

属性

1)type：指定的用户输入内容类型

text 文本类型

password 密码类型 

submit：提交按钮

radio：单选框

checkbox：复选框

file：上传文件

2)name：指定一个名字

补充：

1)下拉菜单：用select标签

2)大段文本：用textarea标签

按钮：

1)提交按钮：submit

2)重置按钮：reset

3)默认没有实际功能的按钮：button

 案例：

 第五次课：CSS层叠样式表

https://www.w3cschool.cn/css/

一、css简介

1)CSS：层叠样式表

2)通过使用CSS可以实现对html标签的属性进行控制

3)CSS作用例如：修改字体大小、修改字体颜色、修改未知

css的用法

案例：要求如下

1）将h1标签中的文字修改为红色

2）给p标签加上一个边框，字体编为蓝色，设置背景色为绿色  

二、标签选择器

通过使用标签选择器可以定位到目标标签

1 基本选择器 

有的浏览器是不支持星 的，所以尽量少用

案例：页面中的所有的文字大小都是25px，颜色都是黑色，字体样式用微软雅黑 

2 标签选择器

直接用标签名字来修饰一类标签 

3 类选择器

1)也称之为class选择器

2)这是我们用的最多的

3)可以为一类标签进行同意的修饰，设置类的名字的方法是

定义：class=xxx

使用：.类名 

4 id选择器

1)设置类的名字的方法是

定义：id=xxx

使用：#类名 

 5 组合选择器

1)可以同时修改多种类型的标签

2)多种标签用 , 进行分割

 6 子选择器

1)指的是从标签中的子标签中进行选择

2)使用方法是用空格进行分割

案例

 三、选择器属性

1 尺寸属性

1)width

2)height

2 字体属性

1)font-size：设置字体大小

2)片

 
第六次课

一、概念

1）行元素：元素中的内容仅仅会占据行中的一部分

span

无法调整内容的大小

2）块元素：无论元素中有多少内容，都会占据整行

可以通过width、height来调整内容空间的大小

h1、p、div

二、浮动

浮动：让元素漂浮到指定的方向

属性：float

值：

1）left：左浮动

2）right：右浮动

案例：用div画三个方框，然后让三个方框向右浮动

三、清除浮动

1）清除的含义就是让浮动起来的元素再落下来

2)清除浮动的方法：

首先定义一个空的div，在这个div中定义一个class

然后使用属性 clear，值 both来清除浮动

注意：在元素浮动后，必须要进行清除

案例：清除浮 

 案例：图文混排