一、html介绍
1、定义html是一个超文本标记语言，是一种标识性语言。（它不是编程语言）
标记：理解为一个记号或者一个绰号
超文本：页面内包含图片、链接、音乐、视频等素材
如：编程语言：java 、python
2、为什么要学习html？
（1）测试要测试页面元素 （页面点点）
（2）ui自动化要用到元素 （pytho+selenium）
3、html适用？
（1）前端开发 （ui设计）
工作职责：编写页面设计，页面的排版，布局等
（2）测试使用html编写自动化脚本
4、如何查看html标记语言？
（1）fn+f12 或f12
（2）右上角三个小点更多工具开发者工具
（3）在页面空白处右键检查
5、html特点
(1) 简易性
（2）可拓展性强
（3）平台无关性
（4）通用性一、html介绍
1、定义html是一个超文本标记语语言言，是一种标识性语言。（它不是编程语言）
标记：理解为一个记号或者一个绰号
超文本：页面内包含图片、链接、音乐、视频等素材
2、为什么要学习html？
（1）测试要测试页面元素
（2）ui自动化要用到元素
3、html适用？
（1）前端开发 （ui设计）
工作职责：编写页面设计，页面的排版，布局等
（2）测试使用html编写自动化脚本
4、如何查看html标记语言？
（1）fn+f12 或f12
（2）右上角三个小点更多工具开发者工具
（3）在页面空白处右键检查
（4）右键查看源代码
5、html特点
(1) 简易性
（2）可拓展性强
（3）平台无关性
二、html 安装
hbuilder 是一个编译器ide工具，编写html源代码的工具，开发工具
1、下载安装hbuilder
2 、解压hbuilder
3、找到HBuilder.exe 文件
4、点击打开
5、点击【暂不登录】
6、打开页面
三、htm基础使用
1、创建项目》编写项目名称》完成
2、在js中新建》html文件》编辑文件名称==》完成
3、熟悉html 基本格式
四、标签认识：
（1）  空格
（2）em 标签表示斜体
（3）i 标签表示斜体
（4）br 表示换行
（5）b 标签表示加粗
（6） strong 标签表示加粗
（7）s 标签表示删除线
（8）u 标签 表示下划线
（9）font 颜色
（10）sub下标
（11）sup上标
（12）p 标签
（13）标题标签
h1 到h6 从最大到最小
案例：
p标签，也叫段落标签
em 标签 ，斜体标签i 标签，斜体标签b标签，加粗标签strong标签，加粗标签标题标签第一
标题标签第二
标题标签第三
标题标签第四
标题标签第五
标题标签第六
u标签，下划线下标上标 颜色
空 格
五、快捷键:
（1）ctrl+n》w 创建项目
（2）ctrl+n》h 创建html文件
（3）ctrl+s 保存）（未保存显示*号）
（4）ctrl+r 运行
（5）ctrl+z 撤回
（6）shift+！==》tab键 联想基本格式
（7）ctrl+/ 注释和取消注释
（8）ctrl+鼠标滚轮滚动； 字体放大和缩小
六、图片标签
（1）引用本地图片
步骤：
a、将下载的本地图片，存放到img的文件夹中
b、通过img 导入
-->
c、..导入上一级的图片
d、在保存，运行
（2）引用网络图片
步骤：
a、打开网页f12 页面元素找到对应的图片
b、复制图片的链接
c、将链接黏贴到html中img的src
d、保存，运行
七、链接标签
1、定义：从一个网页指向另一个网页的目的地，这个目标可以师一个网页，一也可以是一个图片，一个文件，一个应用程序等
2、四种类型：
（一）新连接覆盖原连接
（二）新开窗口
如：京东
详解：
target=属性
（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点
（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；
（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；
（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；
（5）target=“_search” 表示将连接画面内容，搜索区装载的文档
（三）图片连接
在a连接中存放一个img
如：
（四）死链接
号
如：死链接
八、列表
（1）有序列表
ol 表示有序列别（order lists 简称：0l）
内容：A ，a，1，i，l（默认排序数字）
快速生成：有序列表
ol 分类数>li 每一类的属性
如:ol3>li4
如：
- 男
- 汽车
- 表
- 女
- 衣服
- 化妆品
（2）无序列表
ul 表示无序列表 （unorder lists 简写：ul）
内容：cirle 空心圆点
disc 实心圆点（默认实心圆点）
square 实行方块
快速生成无序列表：
ul* 分类数>li * 每类的属性数
如：
- 上
- 有房
- 有车
- 下
- 无房
- 无车
九、表格
表格： table
（1）认识表中的一些常用单词
border 边距
align 格式 ‘ center’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示：行
th 表示：表头
td ：表示列
（2）输入table +回车
如：
| 编号 | 姓名 | 性别 | 成绩 |
|---|---|---|---|
| 1 | 张三 | 女 | 98 |
| 2 | 李四 | 男 | 90 |
（3）合并行
rowspan="行数"
rowspan="2"
（4）合并列：
格式：
colspan="列数"
colspan="2"
十、表单
表单标签格式：form
action：开始网址
method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式：password （密文）
性别：radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex
复选框：checkbox
文本框：textarea
上传文件：file
下拉选择框：select
button：按钮
reset：重置
submit：提交
如：
十一、css 层叠样式
定义：css是一种用来表示html和xml 等文件演示的计算机语言
css不仅可以静态装饰网页，还可以配合各种动态网页进行格式化。
（1）在head中加上style
如：
（2）在css中写入参数，通过link外链方式引入
a、css文件中新建一个css文件
b、编辑css文件
如：
p{
color: red;
font-family: "微软雅黑";
font-size: 100px;
}
c、通过link导入
如：
十二、选择器
（1）id选择器 (简写#)
id 名称
如:
账号:
(2) class 选择器（.( 点)） 如： aa{color: red;font-family: "微软雅黑";font-size: 20x;} （3）标签选择器 输入标签名 如： （4）组合标签选择器 如： （5）伪类选择器（6）在style中可添加文本样式，字体样式