web前端三大核心技术
1.HTML负责网页的架构
2.CSS%20负责网页的样式,美化
3.JS%20负责网页的行为
什么是HTML?
是用来描述网页的一种语言，
HTML的主要作用：就是让各大浏览器都能够显示同一样的页面
-
%20
- HTML%20是用来描述网页的一种语言.%20即超文本标记语言
- 超:超链接
- 文本
- 标记语言:是一套标记标签
- HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.
%20
%20
%20
%20
Hbuilder简介
新建一个HTML网页
1.下载%20Hbuilderx%20应用程序
2.新建一个写代码的文件夹
3.鼠标拖拽到工具左侧%20---项目管理器界面中
骨架标签
-
%20
- 新建的时候默认生成的那些标签
- meta%20标签%20可以设置网页上的字符集
- title%20标签%20可以设置网页网站的%20标题
- body标签设置网页的主体内容部分
%20
%20
%20
<!DOCTYPE%20html>#%20单标签，代表html文件类型
<html>#%20%20<html>开始标签%20和</html>%20结束标签,%20这对称为%20%20%20双标记标签%20【根标签：】
%20%20%20%20%20%20%20%20%20<head>%20#头部标签
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<meta%20charset="utf-8">%20%20#单标签，utf-8：国际编码%20可翻译中文
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<title>标题</title>
%20%20%20%20%20%20%20%20</head>
%20%20%20%20%20%20%20%20<body>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20网页的主体内容
%20%20%20%20%20%20%20%20</body>
%20</html>文章标题%20标签
h1---h6%20分六级，字体依次减小的效果，每个标题都是独占一行
注意：不能自己制造新标签，否则无法运行
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>空格和回车
空格使用%20；
换行使用<br%20/>%20；其他写法也可以实现：<br>%20和<br%20>
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20空格使用%20换行使用<br%20/>%20-->
欢迎来到%20%20%20%20hello%20python的世界!!!
<br%20/>123%20换行
<br%20/>456%20换行
<br%20/>789%20换行
</body>
</html>
p标签
<p></p>%20负责放文章段落，可以使文本分成若干个段落
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
%20<p>一个p代表一个段落</p>
%20%20%20%20%20<p>语义化：即代表%20标签的含义，在合适的地方使用合理的标签%20可以在搜索排名中更靠前</p>
%20<p>当地时间12日20时，</p>
%20<p>法国议会选举首轮投票结束。出口民调显示，</p>
<p>%20现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p>
</body>
</html>代码注释
-
%20
- 按%20control+/%20：快速注释
- 再按：control+/%20：可以取消注释
%20
注意：软件上线前，要删除全部注释，否则会影响加载速度
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--control+/快速注释%20以下代码实现的一个段落的效果%20-->
<p>我是文章段落</p>
</body>
</html>
文字相关标签
1.字体加粗
<b></b>
<strong></strong>
2.字体倾斜
<i>%20</i>
<em>%20</em>
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20普通文字%20-->
<b>%20%20hello%20python</b>
<br%20/>
<strong>hello%20python</strong>
<br%20/>
<!--%20文字倾斜%20-->
<i>hello%20world</i>
<br%20/>
<em>hello%20world</em>
</body>
</html>3.字体添加删除线
<!--%20添加删除线%20-->
<s></s>
<del></del>%20推荐优先使用
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20添加删除线%20-->
<s>2022年6月11号%20%20原价9.98</s>
<br>
<del>2022年6月12号%20原价9.97</del>
<br>
6月13号今天：现价8.88
</body>
</html>工具打开浏览器运行代码
方式1
方式2
键值对，KV对，属性名和属性值
1.添加图片
img%20src="%20"%20用法
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
插入图片步骤：
<br>
1.把图片放到和代码同一个文件夹中
<br>
2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可
<br>
<!--%20键值对，KV对，属性名和属性值%20-->
<img%20src="25.png"%20alt="">
</body>
</html>2.设置图片长度和宽度
width="%20"%20height="%20"用法
<img%20src="25.png"%20width="200"%20height="200">
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
插入图片步骤：
<br>
1.把图片放到和代码同一个文件夹中
<br>
2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可
<br>
3.在第一个键值对后%20按空格键%20输入宽度和高度即可
<br>
<!--%20键值对，KV对，属性名和属性值%20-->
<img%20src="25.png"%20width="200"%20>
</body>
</html>4.在图片上添加%20鼠标悬停%20操作
title用法
<img%20src="25.png"%20width="200"%20title="鼠标悬停%20出现文字">
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
插入图片步骤：
<br>
1.把图片放到和代码同一个文件夹中
<br>
2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可
<br>
3.在第一个键值对后%20按空格键%20输入宽度和高度即可
<br>
<!--%20键值对，KV对，属性名和属性值%20-->
<img%20src="25.png"%20width="200"%20title="鼠标悬停%20出现文字">
</body>
</html>5.设置%20图片未正常加载的情况下会显示内容
alt="描述此张图片的信息%20"%20用法
1.当图片未正常加载的时候，文字才会被别人看到
2.网页阅读器读取此内容给视障用户听，提升用户体验
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<img%20src="5.png"%20width="200"%20title="鼠标悬停%20出现文字"%20alt="图片未正常加载">
</body>
</html>
超链接基础语法
1.打开网址
<a%20href="%20网址%20">%20文本</a>
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20超链接用法%20-->
<a%20href="https://www.baidu.com/">点击我%20可以百度一下</a>
</body>
</html>
2.打开本地页面：输入文件名.扩展名
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20超链接用法%20-->
步骤：
输入a回车,添加网址即可
<br>
<a%20href="文章标题.html">点击我%20可以百度一下</a>
</body>
</html>
超链接基础语法进阶
<!--%20新窗口打开链接%20-->
target="_blank"
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<!--%20新窗口打开链接%20target="_blank"%20-->
<a%20href="http://www.baidu.com"%20target="_blank">点击我，跳转到新窗口打开百度</a>
</body>
</html>
空连接
暂时不知道点击之后跳转到哪里，使用空链接占位
补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些
相对路径（重点）
1.同级查找：当前HTML和目标在同级目录中，语法：直接写资源名字即可
2.上级查找：当前HTML和目标在上级目录中，语法：../写资源的名字即可
3.下级查找：当前HTML和目标在下级目录中，语法：文件夹名/写资源名字即可
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<a%20href="文章标题.html">点击我打开</a>
<br>
<!--%20打开图片文件夹下的25.png图片%20-->
<img%20src="图片/25.png"%20alt="">
</body>
<a%20href="../文章标题.html">点击我打开上级的文章标题</a>
</html>绝对路径（重点）
目标资源在电脑中具体的位置
列表
1.无序列表%20：在<ul></ul>中嵌套<li></li>每一个li就是一个选项%20-->
<u1>
<li>基础班</li>
<li>功能班</li>
<li>自动化测试班</li>
</u1> 2.有序列表：<!--%20有序列表ol%20嵌套若干个li%20-->
<!--%20有序列表ol%20嵌套若干个li%20-->
<ol>
<li>基础班</li>
<li>功能班</li>
<li>自动化测试班</li>
</ol>
布局的标签
当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的%20如%20段落，标题等）
布局标签:无任何语义，方便后期设置内容样式
<div>各标签内容独占一行</div>
<span>标签内容合并成一行</span
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="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%20src="音频.mp3"%20controls="controls"></audio>
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<audio%20src="音频.mp3"%20controls="controls"></audio>
</body>
</html>视频标签
<video%20src="视频.mp4"%20controls="controls"%20height="200"%20width="200"></video>
<!DOCTYPE%20html>
<html>
<head>
<meta%20charset="utf-8">
<title></title>
</head>
<body>
<video%20src="视频.mp4"%20controls="controls"%20height="200"%20width="200"></video>
</body>
</html>音频，视频，测试点
audio%20音频%20video%20视频
测试细节：因历史原因%20导致音，视频版本兼容性低，对于测试工作来说需要测试三大主流浏览器是否能够正常运行，音频，视频。
Ie测试低版本（ie7.8.9.10.11）
测试方法：打开ie浏览器，按F12%20找到仿真(必须是IE高版本才能测试低版本)
什么时候测试低版本：用户要求的情况下%20再测试
表单标签
<!--%20form%20标签里面就是所有用户填写的表单数据%20-->
<!--%20method="post"%20传递数据的方式，post隐式传递，get明文传递%20-->
1.表单基础+密码框
type="text"普通输入框
type="password"密码框
<form%20action=""%20method="post"></form>
<!--%20input+tab键%20type="text"普通输入框%20-->
用户名：<input%20type="text">
<br>
<!--%20type="password"密码框%20-->
密码框：<input%20type="password"%20>2.单选按钮
type="radio"%20单选
checkde="checked"%20此属性表示%20默认选中状态
性别：
<input%20type="radio"%20name="xb"%20checked="checked"%20id="nan">
<label%20for="nan">男</label>
<input%20type="radio"%20name="xb"id="nv">
<label%20for="nv">女</label>测试步骤：
1.点击查看是否为单选效果
2.刷新时是否有默认选中的状态
3.点击文字是否可以进行切换
3.多选框
type="checkbox"%20多选框，复选框
checked="checked"%20默认选中
测试的细节：
1.刷新的时候是否有默认选中的状态
2.点击文字是否可以进行切换
一切测试要看是否满足用户需求%20-->
<input%20type="checkbox"%20id="cs">
<label%20for="cs">测试</label>
<input%20type="checkbox"%20id="cf">
<label%20for="cf">吃饭</label>
<input%20type="checkbox"%20id="sj">
<label%20for="sj">睡觉</label>
<input%20type="checkbox"%20id="dyx">
<label%20for="dyx">打游戏</label>4.下拉菜单
select标签嵌套若干个option标签，每个option标签就代表一个下拉选项
测试细节
1.下拉选中的内容顺序
2.默认选中的状态
默认选中的是：郑州
%20%20%20<select%20name=""%20id="">
<option%20value="">北京</option>
<option%20value="">上海</option>
<option%20value="">广州</option>
<option%20value="">深圳</option>
<!--%20默认选中郑州的状态%20-->
<option%20value=""%20selected="selected">郑州</option>
</select>5.文本域
textarea+tab键
测试的细节：
1.测试三大主流浏览器外观大小是否一致
2.提醒程序员禁用拖拽大小的功能
意见:
<!--%20禁用文本域拖拽大小功能%20-->
<style%20type="text/css">
%20%20%20%20%20%20%20textarea{resize:none;}
</style>
<textarea%20name=""%20id=""%20cols="30"%20rows="10"></textarea>6.按钮
普通按钮:
<!--%20type="button"%20普通按钮%20需要js配合才能实现效果
value属性设置的是按钮身上的文字%20-->
<input%20type="button"%20value="按钮">
<br>
重置按钮:
<!--%20type="reset"%20点击后让表单恢复默认值
value属性设置的是按钮身上的文字%20-->
<input%20type="reset"%20value="重置">
<br>
提交按钮:
<!--%20type="submit"点击后可以把表单提交给%20指定后台处理
value属性设置是按钮上的文字
测试时%20只关注数据库中的内容是否正常添加即可%20-->
<input%20type="submit"%20value="提交">关于表单的用户体验提升
1.添加placeholder="%20"属性，可以文本框设置提示文字如下图
用户名：<input%20type="text"%20placeholder="请输入用户名">2.可以给第一个输入框设置一个%20默认获取鼠标焦点的属性%20：autofocus%20如下图所示
autofocus="autofocus"
相关推荐
-
花的颜色和朵数代表不同意义（关于玫瑰花颜色含义说明）
从玫瑰到康乃馨，再从百合到桔梗，每种花都有多种不同的颜色，它们也有不同的象征意义，本篇文章探讨了鲜花的不同颜色所表达的各种含义。 当你看到一朵花，你首先注意到的是什么？是它的大小吗？还是它的形状或气味...
-
全麦面粉和普通面粉有啥区别呢（真相了解）
全麦食品这几年非常火，在父母老一辈人眼中看不上的东西，却成了“健康”“养生”“减肥”的代名词，真是让他们想不通。有时候买全麦面包回去吃他们还会奇怪，这么难吃能吃得下去吗？ 全麦面粉和普通面粉，有啥区别？ 其实...
-
露水是什么意思（露水特点介绍）
随着全球气候变暖和人口快速增长，水资源短缺已成为全球共同面临的挑战。就目前情况来看，仅仅依靠自然降水很难满足人类生存和发展的需要。干旱灾害正呈现出常态化、全球性蔓延的新特点，人类抗旱形势十分严峻。 为...
-
广东菜是什么野菜（东北山野菜广东菜又叫什么）
导读：东北特产的山野菜，却取名叫“广东菜”，吃起来有黄瓜香味 春天的时候，正是采挖蕨菜的好时节。 而在我国南北的跨度大，各地分布的植物也有区别。蕨菜就是春季常吃的一种野菜，但是世界上已知的蕨类植物就多达上...
-
历代苹果iPad平板发布参数（ipad历代机型一览）
苹果的产品一般使用寿命都可以比较长，又因为以艺术的方式来打造产品，所以受到全球众多粉丝的追捧，但是购物需理性，很多朋友反映拿iPad来当泡面盖板，因为买来就吃灰。iPad目前主要有四个系列，包括iPad数字系列、...
-
如何下载微信公众号中的视频（如何下载微信公众号中的视频到电脑上）
自从自己开始写文需要用到一些视频元素，以及看到些好的公众号视频适合进行公司内训或放到云课堂的，难免会想着把视频下载下来，但遇到一些加密的视频无法直接下载的，又难免抓心挠肺的难受。经过百度搜索和自己试验...
