软件测试学习day5

瓦达西瓦噜噜酱

已于 2024-07-12 16:59:03 修改

阅读量661

点赞数 12

文章标签：学习 html css 软件工程

于 2024-07-12 16:57:34 首次发布

本文链接：https://blog.csdn.net/m0_62640007/article/details/140383083

版权

HTML 介绍

Web前端三大核心技术：HTML、CS、JS

HTML：描述网页的一种语言

HTML标签：单标签<html> 双标签<b>内容</b>

标签属性：属性格式：属性名=“属性值”

2.HTML骨架标签

<!DOCTYPE html>

<html>

  <head>

           <meta charset=”UTF-8”>

           <title>传智播客黑马程序员</title>

</head>

<body>

            传智播客黑马程序员

</body>

<html>

重点：

页面的内容必须在body编写
html为根标签，所有标签必须在根标签中。
head标签为头部标签，一般放title和搜索相关知识

3.编写HTML工具

HBuilder X工具初始化

新建项目

4.常用标签

注释：国际通用快捷键：ctrl+/

作用：描述信息给程序员给，不需要被浏览器执行

扩展测试点：前端页面注释，上线（项目发布）之前，必须检查或删除

1）标题标签

作用：文章标题

提示：默认的标题标签时以下几个，也可以通过css来调整任何标签的字体大小

说明：HTML标题是通过<h1>-<h6>等标签进行定义

示例：

<body>
     <h1>h1</h1>
     <h2>h2</h2>
     <h6>h6</h6>
</body>

2）段落标签

作用：标识一个段落

说明：html段落是通过<p>标签进行定义的

示例：

<body>
      <p>第一个段落</p>
      <p>另外一个段落</p>
</body>

特点：1.独占一行 2.做换行使用 3.语义化（浏览器）

3）超链接标签

作用：点击文本跳转到指定页面。

<body>
           <a href=”http://www.baidu.com”target=”_blank”>百度</a>
</body>

href:点击文本跳转链接地址

target:值为_blank时，在新窗口打开

4）图片标签

说明：网页中插入图片就要使用图片标签，HTML图片是通过<img>标签进行定义

示例：

<body>
            <img src=”logo.jpg” title=”传智播客” alt=”logo” width=”104” height=”142”/>
</body>

属性:

src：加载图片的路径

width：宽

height：高

alt:图片未加载时，显示信息

title：图片加载，鼠标悬停显示信息，图片未加载，显示信息（优先级低于alt）

测试点：图片必须有title属性（原因：体验感好。）

路径：1.相对路径：（重点）

相对当前执行文件所在位置来说

同级：./ 上一级:../

2.绝对路径不使用

5）换行与空格

换行：<br />

空格：

实例：

<body>
    <!--1.换行-->
    你好<br />黑马!
    <!--2.空格>
    黑马&nbsp;软件测试！
</body>

6）布局标签

div:大盒子，独占一行

span：小盒子，一行多个

<div>我是div1</div>
<br />
<hr />//页面插一个横线
<p>原价：$99 现价：<span>$0.99<span></p>

7）表单标签

说明：页面提交输入信息需要使用表单标签<form>

input标签

说明：input：变形金刚 type属性值不同

text：文本框

password：密码框

radio:单选

Q:如何做到单选效果：相同一组才能单选，相同的name属性值为一组

checkbox：多选框

button：普通按钮

cols：列（默认的宽度）

rows：行（默认的高）

<body>
     <form action=””>
                   <!--用户名-->
                   用户名：<input type=”text”/><br />
                   <!--密码-->
密码：<input type=”password”/>
<br />
                   <!--性别-->
性别：<input type=”radio”  name=”one”/>男
<input type=”radio”  name=”one”/>女
<br />
您的爱好：
<input type=”checkbox”/>测试
<input type=”checkbox”/>吃饭
<input type=”checkbox”/>睡觉
<input type=”checkbox”/>打豆豆
<br/>
来自：
<select >
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>
<br />
<!--
  Cols：列（默认的宽度）
  Rows：行（默认的高）
-->
意见：<textarea name=”” id=”” cols=”30” rows=”10”></textarea>
<br />
<input type=”button” value=”点我试试”/>
          </form>
</body>

form标签

作用：提交页面输入数据

<form action =”提交页面.html” method=”get”>

</form>

属性：

action：将数据提交到那个页面

method： get：1.参数在url显示 2.速度相对于post快 3.提交内容长度有限制（浏览器不同值不同）

post：1.参数不在url显示 2.速度相对于post慢 3.提交内容长度无限制

场景：

get：查询使用 post：提交数据使用（登陆、注册）

 <form action=”01-注释.html” method=”get”>
                   <!--用户名-->
                   用户名：<input type=”text”/> name=”username”<br />
                   <!--密码-->
密码：<input type=”password” name=”password”/>
<br />
                   <!--性别-->
性别：
<input type=”radio”  name=”one”/>男
<input type=”radio”  name=”one”/>女
<br />
您的爱好：
<input type=”checkbox”/>测试
<input type=”checkbox”/>吃饭
<input type=”checkbox”/>睡觉
<input type=”checkbox”/>打豆豆
<br/>
来自：
<select >
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>
<br />
<!--
  Cols：列（默认的宽度）
  Rows：行（默认的高）
-->
意见：<textarea name=”” id=”” cols=”30” rows=”10”></textarea>
<br />
<input type=”button” value=”点我试试”/>
<input type=”submit” >

          </form>

8）扩展：抓包

9）列表标签

说明：列表标签常用li元素（分为：有序和无序）

有序：ol>li

无序：ul>

实例：

 <body>
           <ol>
              <li>香蕉</li>
              <li>上海</li>
           </ol>
           <ul>
               <li>北京</li>
               <li>上海</li>
           </ul>
      </body>

结果：

10）常用标签

瓦达西瓦噜噜酱

关注

12
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
软件测试学习day5

method： get：1.参数在url显示 2.速度相对于post快 3.提交内容长度有限制（浏览器不同值不同）title：图片加载，鼠标悬停显示信息，图片未加载，显示信息（优先级低于alt）get：查询使用 post：提交数据使用（登陆、注册）说明：网页中插入图片就要使用图片标签，HTML图片是通过标签进行定义。说明：input：变形金刚 type属性值不同。cols：列（默认的宽度）提示：默认的标题标签时以下几个，也可以通过css来调整任何标签的字体大小。
复制链接

扫一扫