测试基础之HTML（2）

web前端三大核心技术：html负责网页端架构,css负责网页的样式，美化，js负责网页的行为

1、HTML简介

html是一种描述网页的语言，超文本标记语言（Hyper Text Markup Language）,使用标签来描述网页：超链接+文本+标记+语言

2、HTML常用标签

meta 设置网页的字符集 <meta charset="UTF-8">
titil 设置网页网站的标题
body 设置网页的主体部分

标题

标题分h1~h6共六级，效果依次减小，每个标题都独占一行空间

		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>

空格和换行

由于键盘点击输入空格和回车，在实际页面运行中不准确，需要使用代码生成

 空格
<br />回车  <br> <br/> <br > <br />四种都可以运行

P标签

P标签表示文章段落，结合标题使用

<h3>三级标题</h3>
		<p>针对三级标题写一个对应的段落，这个段落是对XX的描述</p>

代码注释

程序员对代码的文字提示，不运行

	<!--
        	作者：offline
        	时间：2023-11-27
        	描述：代码注释
        	ctrl+? 可快速生成注释，二次点击取消注释，可在查看网页源代码中查看注释内容
        	测试方面：在项目上线之前，要求程序员删除注释，目的为加快程序的加载速度
        -->

文字相关标签

文字加粗：b 和strong
文字倾斜：i和 em
文字删除：s和 del

		普通文字<br />
		<b>加粗文字1</b><br />
		<strong>加粗文字2,有加粗和特别强调（语义）的效果</strong><br />
		
		<i>倾斜文字1</i><br />
		<em>倾斜文字2，有倾斜和一般强调的效果</em><br />
		
		<strong><i>加粗又倾斜</i></strong><br />

		<!--   w3c中明确说明，s标签将要被del标签代替，若出现s标签，建议换成del标签-->
		<s>删除效果1</s><br />
		<del>删除效果2</del><br />

运行结果如下：

插入图片

• img：插入图片标签

<img src="test.jpg"/>
		<!--
			图片与当前html文件应在同一目录下
		-->

• width、height ：设置插入图片的高和宽

		<img src="test.jpg"/ width="100" height="100">
		<!--
			只设置高度或宽度其中一个，图片高宽按照设置比例缩放
		-->

• title：为图片添加提示文字，鼠标悬停时显示文字

<img src="test.jpg" title="添加一个标题！！！！！！！"/>
		<!--
			鼠标悬停至图片上显示文字
		-->

• alt:图片未正常加载时，显示alt文字。另：网页阅读器可阅读 alt 的内容，视障用户使用

<img src="test.jpg" alt="图片没有正常加载的时候显示" />
		<!--
			当图片没有正常加载的时候，显示alt的文字
		-->

超链接

• 插入超链接：可打开线上网站和本地文件
  a标签表示在当前窗口打开新页面

		<a href="https:\\www.baidu.com">点击我可以打开百度</a><br />
		<!--
			线上网址：点击文字可跳转至百度页面，href对应的属性值应该为完整的url
		-->
		<a href="test.jpg">打开本地文件</a>
		<!--
        	本地文件：打开本地文件，本地文件需与当前文件放置同一目录下
        -->

      target=“_blank”：在新窗口打开新页面

        <a href="https:\\www.baidu.com" target="_blank">点击我可以跳转新页面打开百度</a><br />
        <!--
        	可另起新窗口打开新页面
        -->

      “#” 空连接

	        <a href="#">占位链接</a>
	        <!--
	        	空连接：暂时不知道跳转至哪里，使用空连接占位，后期添加链接位置
	        	点击空连接可返回页面顶部：但在实际测试过程中，若发现用"#"返回顶部，应提示程序员使用动画效果返回顶部
	        -->

路径 （只要遇到找资源的都可以用路径来实现）

相对路径：相对于当前的html的位置

 同级查找：即当前html文件和目标资源在同一级目录下，语法：直接写资源名字即可  src = "资源名称"
 上级查找：即当前html文件和目标资源的文件夹在同一级目录下时，语法：目标文件的文件夹/资源名 src = "目标文件的上级文件夹名/资源名称
 下级查找：即当前html文件的上级文件夹和目标资源在同一目录下；语法：../资源名称  src = "../资源名称 "，上一级 ../,上二级：../../，上三级依次递增

绝对路径：资源在电脑中的具体位置+资源名称

列表：有序和无序列表

	        <!--无序列表-->
	        <ul>
	        	<li>第一行无序列表</li>
	        	<li>第二行无序列表</li>
	        </ul>
	        <!--有序列表-->
	        <ol>
	        	<li>第一行有序列表</li>
	        	<li>第二行有序列表</li>
	        </ol>

布局标签：div、span

	        <!--布局标签：主要用来布局，无任何语义，可以用div或者span来进行内容包裹，后期方便添加样式-->
	        <div></div>
	        <!--div特点：独占一行的空间-->
	        <span>23</span>
	        <!-- span特点：所以span标签共用一行，一行可以放置多个span标签-->

音视频标签

			<audio src="音频资源" controls="controls"></audio>
			<vedio src="视频资源" controls="controls"></vedio>
			<!--音频视频 均需要添加controls="controls"方可正常播放
				由于音视频兼容性原因，可能有些浏览器无法播放
					所以在测试时，需要在三大浏览器均测试是否正常播放
			-->

3、表单标签

form 表单标签

		<form action="" method="post">	
			<!--form表单，将表单包裹起来
				action  将表单传给 XXX来处理
				method  传递数据的方法，post隐式传递，get明文传输数据
			-->
			用户名：<input type="text" />
			<!--input + tab 键生成-->
		</form>

input 标签的 type类型：

type="text"    文本类型
type="password"  密码框类型

input 标签的type = "radio"单选：

			<!--单选框,name相同时，才一组内容，一组内容单选一个
				checked="checked" 表示默认选中状态
			-->
			性别: <input type="radio" name = "sex" checked="checked"/>男
				 <input type="radio" name = "sex"/>女

以上单选仅可点击单选框进行选择，而不能点击男/女的汉字进行单选
下方文字可实现点击文字也可进行单选：

			<!--
				添加label标签，将for的值添加至input 的id属性中即可实现点击汉字也能单选
				测试细节：点击查看是否为单选效果，刷新的时候查看是否有默认选中状态，点击文字是否可以进行切换
			-->
			性别: <input type="radio" name = "sex" checked="checked" id="nan"/>
					<label for="nan">男</label>
				 <input type="radio" name = "sex"/>女

input 标签的type = “checkbox”

			爱好: <input type="checkbox" name="hobby"/>看书
				  <input type="checkbox" name="hobby"/>画画
				  <input type="checkbox" name="hobby"/>弹琴

下拉菜单：select

			下拉菜单：
			<!--
				每个option就是一个下拉选项
				测试细节：1、选项的顺序 2、默认选中项 3、下拉枚举值
				selected="selected"即为默认选中状态
			-->
			<select name="xiala">
				<option value="one">下拉一</option>
				<option value="two" selected="selected">下拉二</option>
				<option value="three">下拉三</option>
			</select>

文本区域：textarea

			<!--
				rows 表示可以写的行数
				cols 表示可以写的列数
				resize 表示改变大小
				placeholder 为添加文本框默认值
				autofocus="autofocus" 光标自动移至当前文本框
			-->
			文本域:<textarea name="" rows="3" cols="3" placeholder="需要添加的默认值" autofocus="autofocus"></textarea> <br />
			<style type="text/css">
				textarea{resize: none ;}
			</style>

按钮：button、reset、submit

			<!--
				value 属性可将值添加到button按钮的上方，button是普通按钮，需配合js使用
				重置按钮reset上添加有重置二个字，添加value之后覆盖"重置"二字，重置按钮的效果是恢复默认状态而不是清空数据
				提交按钮上自动添加"提交"二字，可重新覆盖value值，点击后可将表单提交
			-->
			普通按钮：<input type="button" value="确认"/>
			重置按钮：<input type="reset" value="覆盖"/>
			提交按钮：<input type="submit" />