第一章
-------------------HTML基础-----------------------------
白开水笔记，内涵代码可跟着敲一敲，ui自动化需要了解一点前端的知识
标记属性
语法： <标记 属性1=至1 属性2=值2>内容</标记>
示例：
<html>
<head>
<title>我的第一个网页 </title>
</head>
<body text=red bgcolor = blue >
这是我的第一个网页
</body>
</html>
1.1、头部文件<head>和</head>
<title>：设置页面标题
<meta>：定义 元信息
用于定义页面的一些信息，不显示在网页中
通过属性定义文件信息
单标记，可有多个
常见属性用法
name = "Keywords" content ="关键字内容"
name = "Description" content = "描述内容"
<meta name>"Keywords" content ="值1、值2、值3……"
<meta name>"Description" content ="描述内容"
1.2、主体文件内容 <body>和</body>
<a> 超级链接
<img> 图片
<ul> 无序列表
<ol> 有序列表
<table> 表格
<div> 图层
<script> 脚本
1.3 <a> 超级链接
基本用法：<a href= "url" target = "_blank">连接内容</a>
连接内容放在标记中间
href：指定点击连接跳转到的页面
target：指定访问页面在本窗口（或标签）中打开（默认），还是在一个新的窗口（或标签）中打开（target = _blank）
1.4 <img> 图片 -单标记
基本用法：<img src="url" alt = "替代文字">
src：置顶图片存储地址
alt：替代问题，图无法显示，此区域将显示替代文字
图像和超链接一起用
<a href = "网页url"><img src="图像url" alt = "替代文字"></a>
1.5 列表
<ul> 无序列表
<ol> 有序列表 type编号类型取值：1、a、A、i、l
<li> 列表项
<ol type = 1>
<li>有序列表</li>
<li>asdsadfasdfasdf</li>
<li>2365345</li>
<li>是打发第三方</li>
<li>阿斯蒂芬</li>
<li>任务区人防</li>
<li>士大夫</li>
<li>开发较高的后分道馆</li>
</ol>
1.6 表格<table> 表格
<table> 表格标记 border：边框宽度
width： 表格高度
height：表格高度
<tr> 行标记
<td> 列标记
<th> 表头列标记
1.7 结构表格
<thead> 定义一组表投行
<tbody> 定义表格主体部分
<tfoot> 微表格添加一个标注
1.8 <div> 图层
属性 取值 说明
id 图层名称
style position:absolute； 定位
width:100px； 图层宽度
height:200px； 图层高度
left:30px； 图层左边间距
top:200px； 图层顶端间距
background-color:blue； 图层颜色
<div id="Layer1" style="position:absolute;
width:1100px;height:1010px;
left:300px;top:400px;
background-color:blue;">
<ul>
<li>中国</li>
<li>俄罗斯</li>
<li>德国</li>
</ul>
</div>
1.9 <script> 脚本
使用javascript或者vbscript 等脚本语言编写的代码
主要功能：
网页的一些动画、特效；实现web页面客户端和服务端的交互功能
代码形势：
<script type = "text/jabascript">
javascript代码
</script>
1.10 表单概述
表单通过文本框、下拉列表、复选框等页面元素手机客户填写的信息，通过脚本语言处理，向服务器发送数据
示例：登录、注册
1.11 <form> 表单
<form method = "post" action "adduser,jsp">
action:设置表单处理程序
method:设置表单冲浏览器传送到服务器的方法，一般get，post
1.12 <input type = text> 文本框/输入框
input 文本框 type：类型
type = 文本框
type = password 密码框
id：标号
name：文本框名称
size：显示长度
maxlength：最大输入字符数
<form action="" method = post>
<ul>
<li>文本框案例</li>
<li>姓名：<input type = text id=username name=username
size=20 maxlength=10 value=张三></li>
<li>密码：<input type= password name=password size=20></li>
</ul>
</form>
1.13 按钮：<input type = submit>
input 按钮 属性 type:类型
type = submit 提交按钮
type = reset 重置按钮
tpye = button 普通按钮
id：标号
name：按钮名称
value：按钮上显示的文字
<form action="" method = post>
<ul>
<li>文本框案例</li>
<li>姓名：<input type=text id=username name=username
size=20 maxlength=10 value=张三></li>
<li>密码：<input type= password name=password size=20></li>
<input type=submit id=submit name=submit value=提交>
<input type=reset id=reste name=reset value=重置>
</ul>
</form>
1.14 单选按钮：<input type = radio>
input 单选框 type：类型
type=radio
id：标号
name：单选框的名称，相互互斥的单选按钮name必须一样
value：单选框的值
checked：默认选中
<ul>
<li>请选择性别：
<input type="radio" id=sex1 name="sex" value="male" checked>男
<input type=radio id=sex2 name=sex value=famale>女
</li>
</ul>
1.15 复选框：<input type = checkbox>
input 单选框 type：类型
type=checkbox
id：标号
name：复选框的名称
value：复选框框的值
checked：默认选中
<ul>
<li>请选择爱好：
<input type=checkbox id=m1 name=音乐 value=music checked>音乐
<input type=checkbox id=m2 name=爬山 value=mounting >爬山
<input type=checkbox id=m3 name=旅游 value=travel >旅游
<input type=checkbox id=m4 name=阅读 value=reading>阅读
</li>
</ul>
1.16 下拉列表：<select>和<option>
select 下拉列表 id：标号
name：下拉列表名称
size：长度
Multiple：可以多选
option 下拉列表选项，是 selected：默认选中
select的子标签 value：选项的值
<ul>
<li>请选择城市：
<select id=s1 name=city>
<option value = bei jing >北京</option>
<option value = shanghai>上海</option>
<option value = tianjin selected>天津</option>
</select>
</li><br><br>
请选择名族：
<li>
<select id=s2 name=民族 size=4 multiple>
<option value = han>汉族</option>
<option value = hui>回族</option>
<option value = man selected>满足</option>
<option value = hweiwoer>维吾尔族</option>
<option value = hasake>哈萨克</option>
<option value = daizu>傣族</option>
</select>
</li>
</ul>
1.17 文本域：<textarea>
textarea 多行文本框 id：标号
name：多行文本框名称
rows：文本框的行数
cols：文本框的列数
<ul>
<li>请留言：
</li>
<li>
<textarea id=comments name=comments rows=10 cols=20>请您留言</textarea>
</li>
</ul>