html介绍+运用

一、html介绍
1、定义html是一个超文本标记语语言言，是一种标识性语言。（它不是编程语言）
标记：理解为一个记号或者一个绰号
超文本：页面内包含图片、链接、音乐、视频等素材
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基本结构：

#文档类型 html#html开始#头部开始#字符编码格式#标题开始 #标题结束#头部的结束#体部开始页面显示的内容都在体部#体部结束#html结束， 编辑好内容，要保存，运行 （6）保存ctrl+s ，查看文档是否右*号，已保存没有显示*号 （7）运行ctrl+r 或者点击菜单栏中选择浏览器运行

三、html 运用
1、快捷键
ctrl+n+w 创建新项目
ctrl+n+h 创建html文档
ctrl+z撤回
ctrl+/ 注释
ctrl+/ 取消注释
ctrl+c 复制
ctrl+v 黏贴
ctrl+s 保存
ctrl+r 运行
ctrl+鼠标滚轮 放大缩小
！+tab 联想基本功能
2、常用的标签

最大标题标签

第二大标题标签

第三大标题标签

第四大标题标签

第五大标题标签

第六大标题标签

段落标签1，自动换行

段落标签2

em标签，表示斜体
换行 i标签，表示斜体 b标签，表示加粗 strong标签，加粗 font标签，表示颜色 s标签,删除线 下滑线 _下标

空      格

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

b、在填写在img中的src中，保存，运行

4、链接标签
（1）定义：从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以是一个图片，也可以是一个程序等

（2）四个类型：
a、新链接覆盖老链接
b、新开一个窗口
c、图片链接
d、死链接
（3）详解
!--覆盖原来的窗口-->
baidu

hao123

死链接

详解：
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
案例：

男
1. 跑车
2. 表

女
1. 衣服
2. 化妆品

快速生成有序列表： ol*3>li*4 输入完以后，按tab键 （2）无序列表 ul表示无序列列表 （unorder lists） 无序的类型： （1）circle 空心原点 （2）disc 实心原点 默认 （3）square 实心方块 案例：

男
• 车
• 表

女
• 花
• 美

快速生成无序列表： ul*2>li*3 输入完后按tab键联想

6、表格标签
（1）认识表中的一些常用单词
border 边距
align 格式 ‘ center’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示：行
th 表示：表头
td ：表示列
（2）生成表格
案例：

姓名	年龄	工资
zs	18	10000
ls	19	8000

（3）合并表格 a.合并行 案例：10000 b.合并列 案例： 19

（6）表单标签
表单标签格式：form
action：网址
method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式：password （密文）
性别：radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex
复选框：checkbox
文本框：textarea
上传文件：file
下拉选择框：select
button：按钮
reset：重置
submit：提交

案例：

用户名:

密码:

性别：男女

学习技能：linuxmysqlhtmlpython

自我介绍：
<pre><code> </textarea></p><p>请上传文件：<input type="file" name="" id="" value="" /></p><p>请选择毕业院校：<select name=""><option value="">清华</option><option value="">北大</option><option value="">浙大</option><option value="">杭电</option></select></p><input type="reset" name="" id="" value="重置" /><input type="submit" value="提交"/><input type="button" value="按钮"/> </form> </body> </code></pre> </html> <p>6、css 层叠样<br> 定义：css是一种用来表示html和xml 等文件样式的计算机语言。<br> css不仅可以静态修饰网页，还可以配合各种动态网页元素进行格式化。<br> a、在head中加上style属性<br> 在</p> <style type="text/css"> p{color: blue;} </style> <p>b、通过外链方式</p> <link rel="stylesheet" type="text/css" href="../css/颜色.css"/> 步骤：现在css文件夹中新建一个css文档，编辑css文档内容 比如： p{color: red;font-family: "微软雅黑";font-size:100px; } 在引用编辑好的css文档 c、css的应用 （1）标签选择器 p{color: red;} </style> （2）组合选择器p,em{color: red;} </style> （3）id选择器 id属性用#简写 #dcs{color: red;} </style> （4）class选择器 class属性用. 简写.s{color: red;} </style> （5）伪类选择器 style type="text/css">p{color: red;} p:hover{color: #0000FF;cursor: pointer;} （6）css中用到的一些样式color: red;font-family: "微软雅黑";font-size:50px ;font-style: italic;font-weight: bold;text-align: center;text-decoration: underline;cursor: pointer; 7、定位元素的认识（做自动化奠定基础） （1）id： 案例：id="chat-textarea" <p>（2）name<br> 案例：name="f"<br> （3）clsss<br> 案例：class="chat-input-textarea chat-input-scroll-style"<br> （4）css<br> 案例：#s-top-loginbtn<br> （5）xpath<br> 案例：//*[@id="s-top-loginbtn"]<br> 作业：制作一个表格</p>