1.HTML负责网页的架构2.css 负责网页的样式,美化3.JS 负责网页的行为
什么是HTML?是用来描述网页的一种语言，HTML的主要作用：就是让各大浏览器都能够显示同一样的页面
- HTML 是用来描述网页的一种语言. 即超文本标记语言
- 超:超链接
- 文本
- 标记语言:是一套标记标签
- HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.
新建一个HTML网页1.下载 Hbuilderx 应用程序2.新建一个写代码的文件夹3.鼠标拖拽到工具左侧 ---项目管理器界面中
- 新建的时候默认生成的那些标签
- meta 标签 可以设置网页上的字符集
- title 标签 可以设置网页网站的 标题
- body标签设置网页的主体内容部分
<!DOCTYPE html># 单标签，代表html文件类型
<html># <html>开始标签 和</html> 结束标签, 这对称为 双标记标签 【根标签：】
<head> #头部标签
<meta charset="utf-8"> #单标签，utf-8：国际编码 可翻译中文
<title>标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
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>
空格使用 ；换行使用<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>
<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>
- 按 control / ：快速注释
- 再按：control / ：可以取消注释
注意：软件上线前，要删除全部注释，否则会影响加载速度
<!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>
<!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> 推荐优先使用
<!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
方式2
1.添加图片
img src=" " 用法
<!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">
<!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="鼠标悬停 出现文字">
<!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.网页阅读器读取此内容给视障用户听，提升用户体验
<!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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接用法 -->
<a href="https://www.baidu.com/">点击我 可以百度一下</a>
</body>
</html>
2.打开本地页面：输入文件名.扩展名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接用法 -->
步骤：
输入a回车,添加网址即可
<br>
<a href="文章标题.html">点击我 可以百度一下</a>
</body>
</html>
<!-- 新窗口打开链接 --> target="_blank"
<!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>
暂时不知道点击之后跳转到哪里，使用空链接占位
补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些
相对路径（重点）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就是一个选项 -->
<u1>
<li>基础班</li>
<li>功能班</li>
<li>自动化测试班</li>
</u1>
2.有序列表：<!-- 有序列表ol 嵌套若干个li -->
<!-- 有序列表ol 嵌套若干个li -->
<ol>
<li>基础班</li>
<li>功能班</li>
<li>自动化测试班</li>
</ol>
当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的 如 段落，标题等）
布局标签:无任何语义，方便后期设置内容样式
<div>各标签内容独占一行</div><span>标签内容合并成一行</span
<!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>
<!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>
<!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高版本才能测试低版本)什么时候测试低版本：用户要求的情况下 再测试
<!-- form 标签里面就是所有用户填写的表单数据 -->
<!-- method="post" 传递数据的方式，post隐式传递，get明文传递 -->
1.表单基础 密码框type="text"普通输入框type="password"密码框
<form action="" method="post"></form>
<!-- input tab键 type="text"普通输入框 -->
用户名：<input type="text">
<br>
<!-- type="password"密码框 -->
密码框：<input type="password" >
2.单选按钮type="radio" 单选checkde="checked" 此属性表示 默认选中状态
性别：
<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" 默认选中
测试的细节：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.默认选中的状态
默认选中的是：郑州
<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.提醒程序员禁用拖拽大小的功能
意见:
<!-- 禁用文本域拖拽大小功能 -->
<style type="text/css">
textarea{resize:none;}
</style>
<textarea name="" id="" cols="30" rows="10"></textarea>
6.按钮
普通按钮:
<!-- 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=" "属性，可以文本框设置提示文字如下图
用户名：<input type="text" placeholder="请输入用户名">
2.可以给第一个输入框设置一个 默认获取鼠标焦点的属性 ：autofocus 如下图所示
autofocus="autofocus"
