软件测试—HTML

HTML

HTML介绍

• web前端三大核心技术

  • HTML 负责网页的架构
  • CSS 负责网页的样式、美化
  • JS 负责网页的行为

• 描述网页的语言

• Html标签

  • 单标签
  • 双标签<b>内容</b>
  • 属性格式 属性名="属性值" <a href="http://www.jd.com">京东</a>

<!DOCTYPE html> <!--声明这个文档是html-->
<html> <!--根标签-->
    <!--国际注释快捷键（ctrl+/）-->
    <head>
        <meta charest="UTF-8">
        <title>第一个网页</title>
    </head>
    <body>
        第一个网站
    </body>
</html>

常用标签

• 标题标签

  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

• 段落标签

  <p></p>

• 超链接标签(target用于在新窗口打开)

  <a href="网址" target="_blank">百度</a>

• 图片标签

  图片路径请了解绝对路径和相对路径

  • 相对路径：相对于当前执行文件位置来说
    • 上一级：.../
    • 同级：./
  • 绝对路径：不推荐

  如果只写一个高或者宽则会等比例缩放

  alt(图片未加载)

  title（鼠标悬浮在图片上的提示信息）

  对于我们测试人员来说，必须有title

  <img src="logo.jpg" width="200px" height="200px" title="标签名" alt="此处有一张图片">

• 换行和空格

  <br/>换行
  
  //<br>与<br/>的区别在于html的版本不同<br />是XHTML1.1的写法，也是XML写法，在Html5中，都是被承认的，在Html5的代码规范上为<br>不加斜杠，在w3school中<br />为规范。
  
  &nbsp;空格

• 布局标签

  • 说明：页面布局使用，常用（div和span）
    1. 大盒子：div 独占一行
    2. 小盒子：span一行放多个

• 列表标签

  <!--列表标签-->
  <li></li>
  <!--有序-->
  <ol></ol>
  <!--无序-->
  <ul></ul>

• 表单标签

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
          <!--
  		action:将指定数据提交给那个页面
  		method:提交方法
  		1、get:明文提交，所有参数在url可见，速度快，提交内容有长度限制
  		2、post:非明文提交，速度慢，无长度限制
  		-->
          <from action="1.html" method="post"><!--1.html这个网页来接受数据-->
              <!--用户名,输入类型是文本-->
              用户名：<input type="text" name="name"/>
              <br/>
              <!--密码，-->
              密码：<input type="password" name="password"/>
              <br/>
              <!--单选框-->
              性别：
              <input type="radio"/>男
              <input type="radio"/>女
              <!--复选框，多选-->
              爱好：
              <input type="checkbox"/>苹果
              <input type="checkbox"/>梨子
              <input type="checkbox"/>香蕉
              <!--提交按钮--->
              <input type="submit"/>
              <!--重置按钮-->
              <input type="reset"/>
              <!--在按钮上显示文字-->
              <input type="button",value="点我"?/>
          </from>
      </body>
  </html>