web前端三大核心技术

1.HTML负责网页的架构2.css 负责网页的样式,美化3.JS 负责网页的行为

什么是HTML?

是用来描述网页的一种语言,HTML的主要作用:就是让各大浏览器都能够显示同一样的页面

Hbuilder简介

新建一个HTML网页1.下载 Hbuilderx 应用程序2.新建一个写代码的文件夹3.鼠标拖拽到工具左侧 ---项目管理器界面中

怎么测试html 软件测试基础HTML(1)

骨架标签

<!DOCTYPE html># 单标签,代表html文件类型 <html># <html>开始标签 和</html> 结束标签, 这对称为 双标记标签 【根标签:】 <head> #头部标签 <meta charset="utf-8"> #单标签,utf-8:国际编码 可翻译中文 <title>标题</title> </head> <body> 网页的主体内容 </body> </html>

怎么测试html 软件测试基础HTML(2)

文章标题 标签

h1---h6 分六级,字体依次减小的效果,每个标题都是独占一行 注意:不能自己制造新标签,否则无法运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> </body> </html>

怎么测试html 软件测试基础HTML(3)

空格和回车

空格使用 ;换行使用<br /> ;其他写法也可以实现:<br> 和<br >

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 空格使用 换行使用<br /> --> 欢迎来到 hello python的世界!!! <br />123 换行 <br />456 换行 <br />789 换行 </body> </html>

怎么测试html 软件测试基础HTML(4)

p标签

<p></p> 负责放文章段落,可以使文本分成若干个段落

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>一个p代表一个段落</p> <p>语义化:即代表 标签的含义,在合适的地方使用合理的标签 可以在搜索排名中更靠前</p> <p>当地时间12日20时,</p> <p>法国议会选举首轮投票结束。出口民调显示,</p> <p> 现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p> </body> </html>

怎么测试html 软件测试基础HTML(5)

代码注释

注意:软件上线前,要删除全部注释,否则会影响加载速度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--control /快速注释 以下代码实现的一个段落的效果 --> <p>我是文章段落</p> </body> </html>

文字相关标签

1.字体加粗<b></b><strong></strong>

2.字体倾斜<i> </i><em> </em>

怎么测试html 软件测试基础HTML(6)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 普通文字 --> <b> hello python</b> <br /> <strong>hello python</strong> <br /> <!-- 文字倾斜 --> <i>hello world</i> <br /> <em>hello world</em> </body> </html>

3.字体添加删除线<!-- 添加删除线 --><s></s><del></del> 推荐优先使用

怎么测试html 软件测试基础HTML(7)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 添加删除线 --> <s>2022年6月11号 原价9.98</s> <br> <del>2022年6月12号 原价9.97</del> <br> 6月13号今天:现价8.88 </body> </html>

工具打开浏览器运行代码

方式1

怎么测试html 软件测试基础HTML(8)

方式2

怎么测试html 软件测试基础HTML(9)

键值对,KV对,属性名和属性值

1.添加图片

img src=" " 用法

怎么测试html 软件测试基础HTML(10)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤: <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键,在str=" " 中输入图片名称即可 <br> <!-- 键值对,KV对,属性名和属性值 --> <img src="25.png" alt=""> </body> </html>

2.设置图片长度和宽度width=" " height=" "用法<img src="25.png" width="200" height="200">

怎么测试html 软件测试基础HTML(11)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤: <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键,在str=" " 中输入图片名称即可 <br> 3.在第一个键值对后 按空格键 输入宽度和高度即可 <br> <!-- 键值对,KV对,属性名和属性值 --> <img src="25.png" width="200" > </body> </html>

4.在图片上添加 鼠标悬停 操作

title用法<img src="25.png" width="200" title="鼠标悬停 出现文字">

怎么测试html 软件测试基础HTML(12)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤: <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键,在str=" " 中输入图片名称即可 <br> 3.在第一个键值对后 按空格键 输入宽度和高度即可 <br> <!-- 键值对,KV对,属性名和属性值 --> <img src="25.png" width="200" title="鼠标悬停 出现文字"> </body> </html>

5.设置 图片未正常加载的情况下会显示内容

alt="描述此张图片的信息 " 用法1.当图片未正常加载的时候,文字才会被别人看到2.网页阅读器读取此内容给视障用户听,提升用户体验

怎么测试html 软件测试基础HTML(13)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="5.png" width="200" title="鼠标悬停 出现文字" alt="图片未正常加载"> </body> </html>

超链接基础语法

1.打开网址

<a href=" 网址 "> 文本</a>

怎么测试html 软件测试基础HTML(14)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 超链接用法 --> <a href="https://www.baidu.com/">点击我 可以百度一下</a> </body> </html>

2.打开本地页面:输入文件名.扩展名

怎么测试html 软件测试基础HTML(15)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 超链接用法 --> 步骤: 输入a回车,添加网址即可 <br> <a href="文章标题.html">点击我 可以百度一下</a> </body> </html>

超链接基础语法进阶

<!-- 新窗口打开链接 --> target="_blank"

怎么测试html 软件测试基础HTML(16)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 新窗口打开链接 target="_blank" --> <a href="http://www.baidu.com" target="_blank">点击我,跳转到新窗口打开百度</a> </body> </html>

空连接

暂时不知道点击之后跳转到哪里,使用空链接占位

怎么测试html 软件测试基础HTML(17)

怎么测试html 软件测试基础HTML(18)

补充:测试工作时,如果发现程序员使用#来表达返回顶部效果时,可以提醒程序员使用动画效果实现,用户体验会更好一些

相对路径(重点)

1.同级查找:当前HTML和目标在同级目录中,语法:直接写资源名字即可2.上级查找:当前HTML和目标在上级目录中,语法:../写资源的名字即可3.下级查找:当前HTML和目标在下级目录中,语法:文件夹名/写资源名字即可

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="文章标题.html">点击我打开</a> <br> <!-- 打开图片文件夹下的25.png图片 --> <img src="图片/25.png" alt=""> </body> <a href="../文章标题.html">点击我打开上级的文章标题</a> </html>

绝对路径(重点)

目标资源在电脑中具体的位置

列表

1.无序列表 :在<ul></ul>中嵌套<li></li>每一个li就是一个选项 -->

怎么测试html 软件测试基础HTML(19)

<u1> <li>基础班</li> <li>功能班</li> <li>自动化测试班</li> </u1>

2.有序列表:<!-- 有序列表ol 嵌套若干个li -->

怎么测试html 软件测试基础HTML(20)

<!-- 有序列表ol 嵌套若干个li --> <ol> <li>基础班</li> <li>功能班</li> <li>自动化测试班</li> </ol>

布局的标签

当没有任何语义的时候,可以使用div或span进行布局,目的是后期css代码可以找到对应标签中的内容来设置样式。(语义标签是有应用场景的 如 段落,标题等)

布局标签:无任何语义,方便后期设置内容样式

<div>各标签内容独占一行</div><span>标签内容合并成一行</span

怎么测试html 软件测试基础HTML(21)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>我是div</div> <div>我是div</div> <div>我是div</div> <div>特点:多个div独占一整行空间</div> <br> <span>我是span</span> <span>我是span</span> <span>我是span</span> <span>特点:多个span在同一行显示</span> </body> </html>

音频标签

<audio src="音频.mp3" controls="controls"></audio>

怎么测试html 软件测试基础HTML(22)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <audio src="音频.mp3" controls="controls"></audio> </body> </html>

视频标签

<video src="视频.mp4" controls="controls" height="200" width="200"></video>

怎么测试html 软件测试基础HTML(23)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <video src="视频.mp4" controls="controls" height="200" width="200"></video> </body> </html>

音频,视频,测试点

audio 音频 video 视频测试细节:因历史原因 导致音,视频版本兼容性低,对于测试工作来说需要测试三大主流浏览器是否能够正常运行,音频,视频。Ie测试低版本(ie7.8.9.10.11)测试方法:打开ie浏览器,按F12 找到仿真(必须是IE高版本才能测试低版本)什么时候测试低版本:用户要求的情况下 再测试

怎么测试html 软件测试基础HTML(24)

表单标签

<!-- form 标签里面就是所有用户填写的表单数据 -->

<!-- method="post" 传递数据的方式,post隐式传递,get明文传递 -->

1.表单基础 密码框type="text"普通输入框type="password"密码框

怎么测试html 软件测试基础HTML(25)

<form action="" method="post"></form> <!-- input tab键 type="text"普通输入框 --> 用户名:<input type="text"> <br> <!-- type="password"密码框 --> 密码框:<input type="password" >

2.单选按钮type="radio" 单选checkde="checked" 此属性表示 默认选中状态

怎么测试html 软件测试基础HTML(26)

性别: <input type="radio" name="xb" checked="checked" id="nan"> <label for="nan">男</label> <input type="radio" name="xb"id="nv"> <label for="nv">女</label>

测试步骤:1.点击查看是否为单选效果2.刷新时是否有默认选中的状态3.点击文字是否可以进行切换

3.多选框type="checkbox" 多选框,复选框checked="checked" 默认选中

怎么测试html 软件测试基础HTML(27)

测试的细节:1.刷新的时候是否有默认选中的状态2.点击文字是否可以进行切换一切测试要看是否满足用户需求 -->

<input type="checkbox" id="cs"> <label for="cs">测试</label> <input type="checkbox" id="cf"> <label for="cf">吃饭</label> <input type="checkbox" id="sj"> <label for="sj">睡觉</label> <input type="checkbox" id="dyx"> <label for="dyx">打游戏</label>

4.下拉菜单

select标签嵌套若干个option标签,每个option标签就代表一个下拉选项测试细节1.下拉选中的内容顺序2.默认选中的状态

怎么测试html 软件测试基础HTML(28)

默认选中的是:郑州

<select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">深圳</option> <!-- 默认选中郑州的状态 --> <option value="" selected="selected">郑州</option> </select>

5.文本域

textarea tab键测试的细节:1.测试三大主流浏览器外观大小是否一致2.提醒程序员禁用拖拽大小的功能

怎么测试html 软件测试基础HTML(29)

意见: <!-- 禁用文本域拖拽大小功能 --> <style type="text/css"> textarea{resize:none;} </style> <textarea name="" id="" cols="30" rows="10"></textarea>

6.按钮

怎么测试html 软件测试基础HTML(30)

普通按钮: <!-- type="button" 普通按钮 需要js配合才能实现效果 value属性设置的是按钮身上的文字 --> <input type="button" value="按钮"> <br> 重置按钮: <!-- type="reset" 点击后让表单恢复默认值 value属性设置的是按钮身上的文字 --> <input type="reset" value="重置"> <br> 提交按钮: <!-- type="submit"点击后可以把表单提交给 指定后台处理 value属性设置是按钮上的文字 测试时 只关注数据库中的内容是否正常添加即可 --> <input type="submit" value="提交">

关于表单的用户体验提升

1.添加placeholder=" "属性,可以文本框设置提示文字如下图

怎么测试html 软件测试基础HTML(31)

用户名:<input type="text" placeholder="请输入用户名">

2.可以给第一个输入框设置一个 默认获取鼠标焦点的属性 :autofocus 如下图所示

怎么测试html 软件测试基础HTML(32)

autofocus="autofocus"

,