多测师拱墅校区肖sir_高级金牌讲师_html讲解

html

一、html 介绍
1、定义：超文本标记语言，也是一种标识性语言；（不是编程语言）
标记理解为：记号（绰号）
超文本：就是页面内容可以包含图片，链接，音乐，视频等素材；

2、为什么学习html？
（1）测试页面元素，了解页面页面元素 （页面是html语言编写的）
（2）进行ui自动化需要用到元素等位

3、html有哪些特点？
（1）简易性
（2）可拓展性
（3）平台无关性
（4）通用性
4、什么人员使用html？
（1）前端开发
javascript+html+css
H5==html5 （html第5版本）
前端开发的职责：负责页面涉及，页面排版
后端开发：负责后台业务逻辑，使用编程语言，前后端需要业务对接
（2）测试人员
定位元素，实现ui自动化

5、html 查看方式？
第一种方式：
fn+f12 或f12

第二种方式：
浏览器=更多工具开发者工具

6、如何查看元素？
f12====点击【小箭头】===点击你要查看的元素

7、如何切换web和app端的模式（h5界面）？

二、html工具的安装

1、hbilder工具
（1）hbuilder 是编译器 ide工具，比那些html源码的工具，也是一个开发工具
（2）html就是我们被用作www的信息表示语言
（3）目前公司用的web语言就是html （简称h5）
javascript =js

2、安装步骤：
（1）下载工具包，

（2）解压工具包

3、点击应用程序

4、创建快捷方式桌面

5、点击快捷方式

6、点击暂不登录

7、说明安装成功

三、html 运用

1.新建项目（快捷方式：ctrl+n+w）

2、

2、新建html文件（快捷方式：ctrl+n+h）
文件 ：

3、介绍html基本格式

4、注释和取消注释
ctrl+/ 注释
ctrl+/ 取消注释

5、运行html编辑内容：案例

=============================================
html快捷键：
（1）ctrl+n+w 创建项目
（2）ctrl+n+h 创建html 文件
（3）ctrl+s 保存 （未保存显示* 号）
（4）ctrl +r 运行
（5）ctrl+z 撤回
（6）！+tab 联想基本格式
（7）ctr+/ 注释和取消注释
（8）ctrl+鼠标滚轮 字体放大和缩小

=============================================

认识标签：
一、标题标签
h1-h6
h1是最大的标签
h6是最小的标签
输入方式：
（1）h1+tab键
（2）h1+enter键

二、段落标签（p标签）
操作方式 ：p+tab

三、其他标签
1、&nbsp 空格
2、em 标签表示斜体
3、i 标签表示斜体
4、br 表示换行
5、b 标签表示加粗
6、 strong 标签表示加粗
7、s 标签表示删除线
8、u 标签 表示下划线
9、font 颜色
10、sub下标
11、sup上标

======================
图片标签

1、引用本地图片
（1）下载好图片，在img的目录下拖拽图片或存放到指定的目录中·

2、引用网上图片

先网上找到图片的连接，有格式的注意png，jpg

比如1：http://img.smyhvae.com/20200122_200901.png
比如2：http://api.cbquan.com/Uploads/Images/Medias/GuangGaoSale/77/190723124159274513.jpg
获取图片链接：

链接标签：
1.义：从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以是相同网上的位置，还可以是图片，一个文件，一个应用程序等；
2. 四种类型
（1）新连接覆盖原连接
（2）新开一个窗口
（3）图片连接
（4）死链接

3、案例：

1）新连接覆盖原连接
多测师
（2）新开一个窗口

（3）图片连接

（4）死链接
渣男

====================================
列表标签：
1、有序列表
ol 表示有序列表， （order lists 简称ol）
修改排序内容：a 、A、1 有序

快速生成有序列表
案例： ol2>li3

2、无序列表
ul 表示无序 （unordered lists 简写：ul）

无序类型：
circle 空心圆点
disc 实心方块
square 实心圆点

快速生成无序列表：
ul2>li3

表格：
border 边距
align（对齐）=“center” （居中）
cellspacing（单元格与单元格的距离）
cellpadding（单元格与内容的距离）
width（宽度）
height（高度）

姓名	年龄	性别
1行第一列	1行第二列	1行第三列
2行第一列	2行第二列	2行第三列
3行第一列	3行第二列	3行第三列

合并行：
rowspan =“行数”

合并列：
colspan =‘行数’

表单：
表单标签：
表单标签格式：form
action：开始网址 method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式：password （密文）
性别：radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex，不然会出现同时可以选择2个radio的bug，加checked表示默认值
复选框：checkbox 文本框：textarea
上传文件：file 选择框：select
button：按钮 reset：重置
submit：提交

案例：

	<p>用户名:<input type="text" name="" id="" value="" /></p>
	<p>密    码<input type="password" ame="" id="" value=""/></p>
	<p>
		<input type="radio" name="sex" id="" value="" />男
		<input type="radio" name="sex" id="" value="" />女
	</p>
	<p>
		<input type="checkbox" name="" id="" value="" />python
		<input type="checkbox" name="" id="" value="" />html
		<input type="checkbox" name="" id="" value="" />mysql
		<input type="checkbox" name="" id="" value="" />php
	</p>
	<p>学历：
		<select name="">
			<option value="">清华</option>
			<option value="">北大</option>
			<option value="">种田</option>
			<option value="">社会</option>
		</select>
	</p>
	<p>文本：<br />
		<textarea name="" rows="5" cols="10"></textarea>
	</p>
	<p>
		<input type="button" id="" value="" /> 按钮
		<input type="submit" name="" id="" value="" />提交
		<input type="reset" name="" id="" value="" />重置
	</p>
	</form>
</body>