软件测试day4------五天前置基础知识（黑马）

今天目标

• 能够说出常见的html标签（10+）个的作用
• 项目（登录）测试

  ---

一、HTML

1.1HTML介绍

前端三大核心：

•  html：超文本标记语言，由一套标记标签组成
• 标签
  • 单标签：<标签名 />
  • 双标签<标签名>
  • 属性：描述某一特性  示例：即

1.2HTML骨架标签

vs code生成骨架  !+tab键

html：html是根标签，所有内容都应该放在html标签中。

head：头部标签

body：身体标签（代码编写区域）

1.3注释

作用：描述呢容的不会被计算机执行

快捷键：ctrl+/

 测试点：前端页面发布上线之前，需要检查（描述不恰当的文字出现）所有注释去除注释

 

 1.4标签

 1.4.1 标题标签

标题标签：“h1~h6”

特点：h1最大，h6最小

示例：

 

 1.4.2段落标签

段落标签：p

特点：独占一段，有语义化含义，让浏览器知道你是段落

 

1.4.3超链接标签 

超链接：a

语法：文本

属性：        href：跳转地址
                  target：打开窗口模式，新窗口：target=“_blank”

易错：

                href没有正确拼写 

 

 1.4.4图片标签

• 说明：在页面中插入一张图片
• 图像标签：img
• 属性：
  • src：图片路径
  • title：悬停显示文字
  • width：宽100px  px：像素
  • height：高
  • alt：图片未加载的文字显示
• 测试点：必须有title属性（悬停和未加载显示）

 

 

1.4.5路径

• 需求：加载img/02.jpg
• 路径：
  • 1.相对路径：“相对当前执行文件所在位置为起点”    

                                        上一级：../

                                        同级：./

• 2.绝对路径：不推荐，计算机本地路径   

示例：

        已知 01.jpg和当前文件在同一级文件夹

        和都是对的，后者省略了./

 

1.4.6换行与空格

换行

• 换行 br

 

空格

• 空格： ；

    
    
    
    


    
     键                                盘敲烂，月薪过万！
     

     键       盘敲烂，月薪过万！

 

1.4.7布局标签 

布局：设置页面布局，便于排版

• 大盒子：div、独占一行
• 小盒子：span、一行可以放多个

    
    
    
    
    


    
    
这是 div 标签
    
 div 独占一整行
    
 div：是一个大盒子
    这是 span 标签
     span 不换行
    
    
今天我学软件测试~

 

1.4.8列表标签

1. script：js标签
2. style：css标签
3. link：外部加载css标签 

有序列表

    
    
    
    


    
    
    
    
    

        
步骤1
        
步骤2
        
步骤3
    

 

无序列表

    
    
    
    


    
    
    
    

        
列表条目1
        
列表条目2
        
列表条目3
    

    
    

1.4.9表单标签

• input标签
  1. 文本框：
  2. 密码框：
  3. 单选框 :
  4. 复选框：
  5. 按钮
     1. 普通：type=button
     2. 提交：type=submit
     3. 重置：type=reset
• 测试点：这几个按钮要赋值value，不同浏览器显示不一样，影响用户体验
• 普通按钮默认没有执行效果，需要配合js来实现。

    
    
    
    


    
   文本框： 
   


   密码框：
   


   

      

复选框:

 

效果

• form标签 
  • 作用：提交页面的数据到指定页面/后台
  • 示例：

 

 

代码示例：

    
    
    
    


    
    

        
        用户名： 
        


        密码框：
        


        
        性别：
        男
        女
        

        您的爱好：
        挣钱
        吃饭
        睡觉
        看帅哥
        拉屎
        

        
        
        
    
    
   

get

post

 

二、总结