html
一、html 介绍
1、什么是一个超文本标记语言，是一种标识性的语言（但是它不是变成语言）
（1）标记：理解为 “记号”或者一个绰号
（2）超文本就是页面内可以包含，链接，音乐，视频等素材
2、为什么学习html？
（1）测试页面元素（功能是点页面，页面是html的语言编写）
（2）ui自动化要用到页面元素
3、html 使用者？
（1）前端开发（ui设计）
（2）测试使用html进行自动化脚本编写
4、如何查看标记语言（谷歌浏览器）
第一种方法：f12+fn 或者f12
第二种方法：浏览器右上脚三个点更多工具开发者工具
第三种方法：页面==右键 ==检查
5、html的特点？
（1）简易性
（2）可拓展性
（3）平台无关性
（4）通用性
二、hbuilder ide工具
hbuilder是一个ide工具，编写html的源码工具，开发工具
1、下载hbuilder 安装包
2、解压压缩包点击打开hbuilder hbuilder.exe 启动文件
3、将hbuilder.exe创建快捷方式
4、点击打开hbuilder.exe暂不登录
5、项目新建输入项目名称==项目下有三个文件（css，img，js）
6、我们新建html 脚本，放在js中
7、基本格式：
三、html快捷键：
ctrl+n +w 创建新的项目
ctrl+n+h 创建一个新的html文件
ctrl+s 保存
ctrl+r 在浏览器中运行
ctrl+z 撤回
！+tab 联想基本格式
ctrl+/ 注释
ctrl+/取消注释
ctrl+鼠标滚轮 字体的放大和缩小
四、常用标签
1、标题标签
h1 最大标题标签
h2第二大标题标签
h3第三大标题标签
h4第四大标题标签
h5第五大标题标签
h6最小标题标签
2、p标签 段落标签
3、em标签 斜体
4、i 标签 斜体
5、br 换行
6、b标签 加粗
7、strong 标签，加粗
8、s 删除线
9、u下滑线
10、sub 下标
11、sup上标
12、font 颜色 接color=“颜色”
五、图片导入
（1）本地图片导入
将图片拖拽到img 文件夹中
（2）网上图片引入
网上链接：
https://2e.zol-img.com.cn/product/134_500x2000/290/ceQKRrSiLOcd6.jpg
六、链接标签
定义：从一个网页指向两一个网页的目的地，这个目标可以是一个网页，也可以是相同的位置，还是是一个图片，一个文件，一个应用程序等；
四种类型：
1、新连接覆盖老连接（文字连接）
百度
2、新开一个窗口
百度
详解：
target=属性
（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点
（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；
（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；
（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；
（5）target=“_search” 表示将连接画面内容，搜索区装载的文档
3、图片连接
4、死链接
死链接
七、列表标签
1、有序列表
ol 有序列表（order lists 简称ol）
排序:type= a A I i 1
-
2、无序列表
ul 表示无序 unorder lists 简称ul
排序的类型：type =square（实心方块）、disc 实心圆点（默认）、circle 空心圆点
-
3、快速生成有序列表，无序列表
（1）快速生成有序列表
ul*2>li*3 按tab 键，就是联想键
（2）快速生成无序列表
ol*2>li*2 按tab 键，就是联想键
八、表单 table
认识表中的一些常用单词
border 边距
align 格式 ‘ center’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示：行
th 表示：表头
td ：表示列
（1）输入table 键 ==》敲回车
（2）建表（3）合并行（4）合并列
（九）表单 from
表单标签格式：form
action：开始网址
method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式：password （密文）
性别：radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex
复选框：checkbox
文本框：textarea
上传文件：file
下拉选择框：select
button：按钮
reset：重置
submit：提交
案例:
用户名:
密码:
性别：男女
学习内容：linuxmsyqlpythonhtml
自我介绍：学历：
上传资料： <input type="submit" value="提交"/><input type="reset" value="重置"/><input type="button" value="按钮"/></form>
</body>
（1）id 选择器
在元素中有id 元素，渲染
id的简写：#
id属性名
d2
（2）class选择器
在元素中有class元素，渲染
class 的简写是：. 点
. 元素名
.x1
（3）单标签选择器
属性名1
p
（4）组合标签选择器
属性名1，属性名2
em,p
（5）伪类选择器
表面一层
底下一层
p{
color:red;
font-family: "微软雅黑"; /字体类型/
font-style: italic; /#斜体/
font-weight: bold; /* 加粗/
text-align: center; /#居中 */
}p:hover{color: blue;/* cursor: pointer; /*指针变成手指妆*/*/ }
| 80 | 2 | |