web自动化_HTML
----------------------------------------什么是Html?------------------------------------
html ：超文本标记语言，html不是编程语言，而是标记语言，用来描述网页的一种语言，包含静态html和动态html
html常用编辑器： notepad++ Sublime (vscode---前端开发专业工具）
下面以Sublime编辑器演示html
lemonWeb15.html
<!DOCTYPE html> <!--表示为html文档-->
<html lang="en"> <!--页面根元素，lang表示采用的语言-->
<head> <!--head元素包含了元数据，如js,css等，用来做一下配置-->
<meta charset="utf-8"><!--声明编码-->
<time> 百度一下</time><!--html文档标题-->
</head>
<body> <!--body里面的是页面显示内容-->
<h1>hello world</h1><!--声明标题，标签成对出现-->
</body>
</html>
HTML标签
HTML标记标签通常被称为HTML标签（HTML tag）
html标签是有尖括号包围的关键词，比如<html>
Html标签通常成对出现，比如<b></b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始标签和结束标签页被称为开放标签和闭合标签
HTML元素
html元素指的是从开始标签到结束标签的所有代码，通常和html标签是一个意思
例如： html元素 ---------- <p> this is a paragrah</p>
html元素语法
1 html元素包含了开始标签和结束标签
2 元素的内容是开始标签和结束标签之间的内容
3 某些html元素具有空内容
4 大多数Html元素可拥有属性
html文档==网页
html文档描述网页
html文档包含html标签和纯文本
html文档也称网页
Web浏览器的作用是读取html文档，并以网页的形式显示出他们，浏览器不会显示html标签，而是使用标签来解释页面的内容
基本的HTML标签
（1）文本输入框
<input type=text" name="login" value="登录" />
name属性用来定义input框的名字 value用来给input框赋值
（2）选择框
<input type="checkbox" name="" value=""/>
疑问：也可以通过name属性变为单选吗？-----不可以
（3）单选/复选按钮
<input type="redio" name="sex" value="">
<input type="redio" name="sex" value="">
通过name属性，（划分为同一类）可以将复选变为单选
（4）按钮
<input type="button" name="login" value="保存"/>
（5）文件上传
<input type="file" name="" value="上传">
疑问：文件上传input框为什么没有填写 value的值
（6）密码输入框
<input type="password" name="" value="">
密码输入框，输入的是圆点，没有加密，加密需要通过前端代码的处理，比如通过js处理
（7)下拉框
<select>
<option>上海建设银行</option>
<option>上海工商银行</option>
<option>上海招商银行</option>
</select>
默认选择的是第一条
(8）超链接
<a href="http://www.baidu.com">百度一下</a>
注意：要加http，否则会认为是文件协议，不能成功跳转到百度首页
<a href="http://www.jd.com" target="_blank">京东</a>
target="_blank" ----加此属性，会重新打开一个窗口，。不会在原来的窗口上打开一个新的窗口
（9）表格
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
(10)图片
<img src="https://www.baidu.com/img/labadong_9f901c0eb1a677ad32efe1d024e12bac.gif">
<img src="C:\Users\TF2016\Desktop\1122.jpg">
<img src="C:\Users\TF2016\Desktop\1122.jpg" width="400" height="100">
图片链接访问方式：
http协议访问
本地路径访问
（11）有序序列
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
o:order
1.1
2.1
3.1
每个1前面加序号
（12）无序列表
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
u:unorder
每个1前面加圆点
（13）文本域
<textarea rows="10" cols="20"></textarea>
rows=10---行
cols=20---列
CSDN评论回复区域就是文本域
（14）标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
(15) 字体加粗标签
<b>加粗字体</b>
(16)换行标签 ---
<input type="text" name=""><br>
<input type="text" name="">
两个input框换行显示
（17）段落标签
<p>段落1</p>
<p>段落2</p>
(18)注释
<!--这是注释-->
(19)iframe--在一个页面（当前页面）嵌套另一个页面
<iframe src="http://www.baidu.com" width="1000" height="1000"></iframe>
------------------------------------------------------HTML Div----------------------------------
<div>元素是块级元素，它可用于组合其他html元素的容器
常用作进行页面的布局，因为能够轻松通过CSS对其进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<style type="text/css">
.head{
background: blue;
color:white;
text-align: center;
padding: 5px;
}
.left{
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
.middle{
width: 350px;
float: left;10px
padding:
}
.foot{
background-color: blue;
color: white;
clear: both
text-align:center;
padding: 5px;
}
</style>
</head>
<body>
<div class="head">
<h1>我要在顶部</h1>
</div>
<div class="left">
<h1>我要在左部</h1>
<div class="middle">
<h1>我要在中间</h1>
</div>
<div class="foot">
<h1>我要在底部</h1>
</div>
</body>
</html>
CSS：层叠样式表----一般放在head标签里面（body里面也可以），前端开发会单独放在一个css文件
<style type="text/css">
.head{
background: blue;
color:white;
text-align: center;
padding: 5px;
}
.left{
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
.middle{
width: 350px;
float: left;10px
padding:
}
.foot{
background-color: blue;
color: white;
clear: both
text-align:center;
padding: 5px;
}
</style>
