软件测试DAY2/DAY3-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59485836/article/details/131248267

本文详细介绍了Web前端的三大核心技术：HTML负责网页结构，包括各种标签如标题、段落、图像等；CSS用于样式设计，通过选择器定义颜色、大小等外观特性；JavaScript则处理网页交互，如表单验证和动态效果。这些技术共同构建了网页的视觉和交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web前端3大核心技术

HTML 负责网页的架构

HTML:超文本标记语言 不是编程语言
标签

<html>
   <head>
   <meta charset="utf-8">#设置网页字符集
   <title> 网页网站标题</title>
   </head>
<body>普通文字
  <h1>最大的文章标题，1-6依次减少效果，每个标题独占一行</h1>
  <h2>第二大&nsp;的文章<br/>标题</h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6><!-----&nbsp; 代表空格-----> 
 <!---<br />代表换行符  <p>文章段落</p>------>
  <p>段落</p>
  <b>加粗</b>
  <em>加粗</em>
  <del>下划线</del/>
  <!--  ctrl+?注释
测试要注意：项目上线前要删除注释的内容，加快加载速度  -->
</body>
<!---文字相关标签
	没有加粗  <b>加粗</b>
	没有加粗  <strong>加粗,特别强调</strong>
	<i>我是i，斜体</i>
	 <em>我是em,斜体，又一般强调</em>
	 w3c明确说明，s要被del替代
	  原价<s>998</s>
	 原价<del>998</del>
	图片标签
	键值对，kv对=属性名属性值
	<img src="图片地址" title="鼠标停的时候提示文字"
	alt="图片没有被正常加载才显示，网页阅读器读此内容给市长用户听，提升用户体验"

<a href="http://www.baidu.com" target="_blank">百度</a>超链接
 默认在当前窗口打开连接
 如果要在新窗口打开需要：target
 空链接暂时占位#   target="#"
	 --->
	
	<!-- 无序列表
<ul>
<li> 路径 </li>
<li>   </li>
</ul> -->
	<!-- 有序列表
<ol>
<li> 路径 </li>
<li>   </li>
</ol> -->
<!-- 布局标签<div> 大盒子，独占一行</div>  <span>不换行，一行放多个，小盒子</span>没有任何语义，目的是可以找到css代码设置样式 -->
<audio src="资源"  controls="controls">音频标签</audio>
<video src=""    controls="controls">视频标签</video>
历史发展原因，视频音频标签兼容性很差，需要3个浏览器都测
	 <href>
	 <!-- 表单标签--->
	 <form action="xx.php" method="post">
	 action="xx.php"就是把表单数据提交给某个后台程序去执行
	 method="post"传递数据时候的方式方法，post隐式提交数据，get明文传送数据
	  用户名：
	 //输入框<input type="text"文本框 />
	  //输入框<input type="password"密码框 />
	  单选框<input  type="radio"   name="xb"  id="nan"/> <label for="nan" >男
	   id="nan"/> <label for="nan" >加了这个，点文字也有反应
	    单选框<input  type="radio"   name="xb"  checked="checked" 默认选中/>女单选框name一定是一样的
	    多选框<input text="checkbox" id="eat"    checked="cheched"><label for="eat">吃饭
	    下拉菜单
   <select name="">
	      <option value="">北京</option>
	      <option value="">上海</option>
	      <option value="">广州</option>
	      <option value="">深圳</option>
	      默认选中
     </select>
	      测试细节：内容顺序，默认选中的状态，内容条数
	      文本域
	      意见：<textarea name="" >
	      测试细节：外观大小是否一致3大主流浏览器
	      提醒程序员禁用拖拽大小功能
	      按钮<input type="button" value=" 按钮" value属性设置文本文字 />
	      重置按钮<input type="reset" value=" 按钮"//不写默认重置 />点击后让表单恢复默认值
	      提交按钮<input type="sumit" value="" />设置按钮的字必须写
	 </form>
</html>

用户体验提升
placeholder=“请输入用户名”
自动获取焦点autofocus

路径
相对路径./
同级路径 t1.git
上级查找 …/t1.git
下级查找 tu/t1.git
绝对路径
F: \ … \ … 不推荐

测试ie低版本-xp不更新没说不用测
表单数据
checked=“checked” 默认选中
单选框<input type=“radio”
测试细节点击查看是否为单选效果，刷新的时候是否有默认选中，点击文字是否可以切换

CSS 负责网页的样式美化

CSS 层叠样式表级联样式表样式表
颜色外观美化样式
写在title后面 style标签里面
选择器{ 属性名：属性值}
color颜色
font-size文字大小 px像素单位
标签选择器：用标签的名字来进行页面元素，标签，标记的选择 div p span {}
id选择器：用名字来进行页面() 每个标签只能有一个id #p1 {} #p2{} id命名唯一，不能重复使用（js不能）不能以数字开头不能使用中划线，下划线之外的符号
类选择器：class=“” 类选择器可以重复使用同时一个标签也可以有多个类名 .类名 {}
css书写位置引入方式：内嵌（电商网站首页，因为对网页的打开速度有严格的要求，一次性把html和css全加载了），外链在html页面上添加<style link标签 href=" 名字"/css单独一个文件（实现代码分离，除了应用在电商网站首页，修改代码方便）、行内式：直接在标签里面写style="color:xxxx;"不推荐
伪类选择器 :hover鼠标移入的样式
并列并集选择器 p,div,h1{color: xxxx;}
选择多个元素可以使用，进行连接
后代选择器空格 p span 找到p里面的后代span里面

JS 负责网页的行为

实时验证表单数据用户密码是否符合
JavaScript与java没有任何关系
控制结构和样式

基础语法

<script> 
alert();//弹出对话框
alert("话费不足");
 </script>   
 js事件语法
 事件源.事件类型=function（）{alert();}
 事件源
 document.getelementByid('id值')
 document表明在文档中查找事件源
 getelementByid('id值')表示通过id值查找这个名字的按钮
  document.getelementByid('id值').οnclick=function(){}
  onclick事件类型 鼠标点击
  onmouseover    鼠标移入
  onmouseout     鼠标移出
  事件三要素：事件源，事件类型，事件
  document.getElementsByClassName('butt')[0].οnclick=function(){alert("111");}