软件测试—HTML

HTML

HTML介绍

  • web前端三大核心技术

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

  • Html标签

    • 单标签
    • 双标签<b>内容</b>
    • 属性格式 属性名="属性值" <a href="http://www.jd.com">京东</a>
html 复制代码
<!DOCTYPE html> <!--声明这个文档是html-->
<html> <!--根标签-->
    <!--国际注释快捷键(ctrl+/)-->
    <head>
        <meta charest="UTF-8">
        <title>第一个网页</title>
    </head>
    <body>
        第一个网站
    </body>
</html>

常用标签

  • 标题标签

    html 复制代码
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
  • 段落标签

    html 复制代码
    <p></p>
  • 超链接标签(target用于在新窗口打开)

    html 复制代码
    <a href="网址" target="_blank">百度</a>
  • 图片标签

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

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

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

    alt(图片未加载)

    title(鼠标悬浮在图片上的提示信息)

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

    html 复制代码
    <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一行放多个
  • 列表标签

    html 复制代码
    <!--列表标签-->
    <li></li>
    <!--有序-->
    <ol></ol>
    <!--无序-->
    <ul></ul>
  • 表单标签

    html 复制代码
    <!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>
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试