html-图片/表格/表单
a标签的认识
’#‘号跳转页面内锚点
跳转外部网页
跳转内部网页
<a href=" "></a>
a标签的伪协议
<a href="javascript:;"></a>
这样做点击a标签不会刷新页面也不会跳转到开头，页面中存在input且里面有内容时会点击<a href=""></a>会刷新页面，href内为#瞄点点击会自动跳转页面开头，只有伪协议能达到点击后无效果状态（需求：点击按钮查看元素不刷新页面不跳转）
<a href="mailto:邮箱地址">发邮件</a>手机端适用
<a href="tel:173XXXXXXXX">联系我们</a> 点击调用电话功能
img的认识
img是一个单标签 我们一般在网页使用它来显示图片，请求图片的同时会发生get请求
先使用img标签占位 再利用img的属性src（srouces）
配置图片的相对路径来显示相关的图片内容
<img src="相对路径">
图片后缀名常用 png jpg gif bmp
基本属性：
src-----引入图片的路径达到显示图片的内容
alt-----图片错误描述（图片加载失败以后的文字描述）
title---当鼠标指针进入图片范围内的时候出现的图片描述文字
width---可以改变图片的尺寸大小
height---可以改变图片的尺寸大小
【注意】当我们只是修改其中一个属性的时候，图片是等比例缩放的高度不可以用百分比
同时修改两个属性必须按照原图片的比例设置，否则图片会失真
table表格标签的组合使用认识
table标签--------确定表格的范围
tr标签-----------代表一行
td标签-----------一个单元格
语法结构:
<table>
<tr>
<td>文本内容</td>
<tr>
</table>
常用属性:
border------设置表格的边框
bgcolor-----改变表格背景颜色
width-------改变宽度
【注意】设置在table改变的是总的宽度
设置在tr没作用
设置在td当前这一列都会改变，不设置平分总宽度
align----设置表格的水平对齐方式
cellpadding----设置单元格边框和文字之间的距离
cellspacing----设置单元格相互之间的距离
例子：
<table border="1" >
<tr>
<td width='50'>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
HTML-表格.png
合并单元格：
跨列合并（横向合并）colspan
跨行合并（纵向合并）rowspan
【注意】合并属性必须使用在td单元格上
合并的原理就是将第一个开始合并的单元格自身变为合并后的大小，把其他多余的单元格删除掉
<table border="1">
<tr>
<td width='50' colspan="5">1-1</td>
<!-- <td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td> 列合并后面的td都要删除-->
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<!-- <td>3-2</td> 行合并删除对应行的 -->
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
HTML表格图片1.png
表单的相关标签使用
收集用户数据所使用！！！！
表单生效必须使用form标签包裹，否则就不是一个
可以执行表单数据自动提交的情形
语法结构：
<form>
<input>
<button>提交</button>
</form>
如果要点击自动提交表单生效，那么语法结构中的基本标签缺一不可！！
form标签基本属性：
action------数据提交路径（url）
method------默认是get传值方式|post
get----提交不是太重要的数据--例如页数，第几条内容。。。---安全性不高，传递内容太小
post----安全性更高，传递的数据量很大
1、method提供两种提交方式：
get、post方式向后台发送请求，提交数据
2、区别
（1）安全，二者表象不同，get把提交的数据url可以看到，会展现在浏览器历史记录中，安全性不好；但是post看不到，安全性好。
（2）提交数据量，get最多提交1k数据，浏览器上的url地址框有字符长度限制，通常是1024字符；post理论上无限制，受服务器限制。
（3）原理，get 是拼接 url， post 是放入http 请求体中。
3、应用场景（怎么合理两种方式传递数据？）
注：在实际应用上，get 重在 "得到", post 重在"传递"
即假如向后台查询一篇论文，请求数据，请求为“得到”，用get方式请求数据；向后台“传递”数据，写了文章之后传递至后台，通常是“传递完成”的状态进行提示，用post方式请求数据。
input的属性：
name------给后台传递的值进行区分所设置的名字
value----提前预设输入内容---可以删除重新输入
placeholder------提示输入内容---输入了内容就消失，清空内容就出现
type的类型：
text 普通文本框
password 密码框
submit 提交按钮
button 普通按钮
reset 重置按钮
radio 单选
checkbox 多选
file 文件上传框
hidden 隐藏域
<form action="1.php" method="POST">
<input type="text" name="user" id="" value="" placeholder="请输入用户名">
<!-- value值输入框内的默认值，用placeholder更好些，输入内容后里面的默认值会消失 -->
<input type="password" name="pwd" id="">
<input type="submit" value="提交">
<button>提交</button>
<input type="button" value="">
<input type="reset" value="">
<!-- 重置按钮是写在跳转到提交页面，点击提交后出现重置按钮可以返回上一级内容 -->
<input type="radio" name="1" id="">女士
<label>
<input type="radio" name="1" id="" checked>男士</label>
<!-- 单选框 name用来分组 同一名字为1组选项 checked选项为默认选择 lable标签为方便选中，添加标签后点击文字可以勾选单选框 -->
<input type="checkbox" name="" id="">打球
<input type="checkbox" name="" id="">看电视
<input type="checkbox" name="" id="">看书
<!-- 兴趣爱好多选框 -->
<input type="file" name="" id="">
<input type="hidden" name="">
</form>
下拉框选择菜单
以两个标签的配合来实现的下拉。外部使用select标签来确定当前下拉框的位置
内部使用option标签来确定选择的具体内容，
默认写在最头部的option标签的内容显示在选择框中
语法结构：
<select>
<option>文本内容1</option>
<option>文本内容2</option>
<option>文本内容3</option>
<option>文本内容4</option>
...
</select>
属性：
select，input,button通用：
disabled------禁用属性
