html
一、html介绍
1.定义：html是一个超文本标记语言，是一种标识性语言（不是编程语言）
标记：理解为一个记号或者一个绰号
超文本：页面内包含图片、链接、音乐、视频等素材
编程语言：java、python、c、c++等
2.为什么要学习html
（1）测试要测试页面元素（功能点，点页面，了解页面）
（2）ui自动化要用到元素
3、html适用人员
（1）前端开发（ui设计）
工作职责：编写页面设计，页面的排版，布局等
（2）测试使用html编写自动化脚本
4、如何查看html标记语言
1）fn+f12 或f12
（2）右上角==三个小点==更多工具==开发者工具
（3）在页面空白处==右键==检查
5、html特点
(1) 简易性
（2）可拓展性强
（3）平台无关性
（4）通用性
二、html编写的工具安装（hbuilder）
1、hbuilder是一个编译器id工具，编写html源代码的工具，开发工具
2、安装谷歌浏览器（方便学习，谷歌的兼容性更好，安装一个谷歌浏览器）
3、hbuilder安装流程
（1）解压压缩包
（2）打开压缩包，点击hbuilder.exe 文件或者右键创建快捷桌面
（3）点击打开界面
点击暂不登录
（4）新建项目（文件==右键==新建文本项目==输入项目名称==路径选择==确定），在项目下的js新建html文件
（5）新建html 文件：点击js文件夹，右键，新建html，输入html文件名称==确定
（6）html基本结构
<!DOCTYPE html> #文档类型 html
<html> #html开始
<head> #头部开始
<meta charset="UTF-8"> #字符编码格式
</head> #头部的结束
<body> #体部开始
页面显示的内容都在体部
</body> #体部结束
</html> #html结束，
编辑好内容，要保存，运行
（6）保存ctrl+s ，查看文档是否右*号，已保存没有显示*号
（7）运行ctrl+r 或者点击菜单栏中选择浏览器运行
三、实战教程
1、快捷键
ctrl+n，再按W创建新项目
ctrl+n，再按H创建HTML文档
ctrl+z撤回
ctrl+/注释
ctrl+/取消注释
ctrl+c复制
ctrl+v粘贴
ctrl+s保存
ctrl+r运行
ctrl+鼠标滚轮 放大缩小
！+tab 联想HTML基本结构
2、常用的标签
<h1>最大标题标签</h1>
<h2>第二大标题标签</h2>
<h3>第三大标题标签</h3>
<h4>第四大标题标签</h4>
<h5>第五大标题标签</h5>
<h6>第六大标题标签</h6>
<p>段落标签1，自动换行</p>
<p>段落标签2</p>
<em>em标签，表示斜体</em>
<br/>换行
<i>i标签，表示斜体</i>
<b>b标签，表示加粗</b>
<strong>strong标签，加粗</strong>
<font color="aqua">font标签，表示颜色</font>
<s>s标签,删除线</s>
<u>下滑线</u>
<sub>下标</sub>
<p>空 格</p>
3、图片标签
（1）本地图片上传
a、下载本地图片，存放在img的文档处，或者通过拖拽导img文件夹中
b、输入img，在src中输入.查找上一级img中的图片选择，在保存，在与运行显示
c、调整长长宽：width，height
（2）网上图片引图片，
a、网上找一个,查看图片的地址，
通过页面元素查看链接，复制；
或则右键图片，点击图片地址，复制导img中的src
网上图片链接参考：
案例https://p0.ssl.img.360kuai.com/dmfd/__60/t11508c75c80a63514d06f44d1f.webp
案例2:
https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280
b、在填写在img中的src中，保存，运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片导入</title>
</head>
<body>
<p>第一种，引用本地图片</p>
<img src="../img/QQ图片20231212113201.png"/ width="100"
height="100" >
<img src="../img/男孩子.png"/>
<p>第二种，引用网络图片</p>
<!-- <img src="https://p0.ssl.img.360kuai.com/dmfd/__60/t11508c75c80a63514d06f44d1f.webp"/> <br />
-->
<img src="https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" width="200",hight="300"/>
</body>
</html>
四、链接标签
1、定义：
从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以是一个图片，也可以是一个程序等
<a href=""></a>
2、四个类型：
a、新链接覆盖老链接
b、新开一个窗口
c、图片链接
d、死链接
3、详解
（1）覆盖原来的窗口
（2）重开窗口
（3）图片链接
（4）死链接
详解：
target=属性
（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点
（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；
（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；
（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；
（5）target=“_search” 表示将连接画面内容，搜索区装载的文档
5、列表标签
（1）有序列表
ol 表示有序列表 （order lists简称ol）
排序内容：
a 、A、1（默认）、i
案例：
快速生成有序列表：
ol*2>li*3 输入完以后，按tab键
（2）无序列表
ul表示无序列列表 （unorder lists）
无序的类型：
（1）circle 空心原点
（2）disc 实心原点 默认
（3）square 实心方块
案例：
快速生成无序列表：
ul*2>li*3 输入完后按tab键联想
五、表格标签
（1）认识表中的一些常用单词
border 边距
align 格式 ‘ center’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示：行
th 表示：表头
td ：表示列
（2）生成表格
案例：
（3）合并表格
a.合并行
案例：<td rowspan="2">女</td>
b.合并列
案例：
浙公网安备 33010602011771号